Cara Membuat Tombol Demo pada Blog

By  at Jumat, Agustus 30, 2013    3 comments
RIEFSAZBLOG. Pada kesempatan ini Bang Kamplenk akan mengshare tentang bagaimana cara membuat tombol Live Demo, widget ini sangat berguna bagi sobat yang blognya menampilkan tentang tutorial ataupun panduan seputar blog, bila ingin menerpakannya silahkan ikuti triknya dibawah ini :
1. Masuk ke akun blogger dan klik drop down.
blog-post-opsi
2. Sekarang pilih "Template" 
3. Klik EDIT HTML Button "
4. Klik tombol Lanjutkan.
5. Cari tag ]]> </ b: skin> ini dengan menggunakan Ctrl + F
6. Paste kode di bawah ini Sebelum ]]> </ b: skin> 

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KIWWNfcsWVYJNhDhWKcUuCDR6SUSq05i26zGPrnPJu8flujpxUXB5Jr-02H7T0PSAvbxfwXOkZYFbyJ2SDIpIYgwPv8MMFVpT1H9lpJnA7DfJYxgm96oISe_tTqMV88flE402MgVdOrB/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
K O D E
8. Klik Tambah Gadget dan pilih 'HTML / Javascript 
9. Paste kode di bawah ini. 
 (Sobat dapat menggunakan kode ini di mana saja di posting Anda.) 
<a class="button big blue" href=" Link anda" target="_blank">Live Demo</a>

<a class="button big orange" href="Link anda" target="_blank">Live Demo</a>

<a class="button big green" href="Link anda" target="_blank">Live Demo</a>

<a class="button big gray" href="Link anda" target="_blank">Live Demo</a>
K O D E

Silahkan anda pilih warna yang sobat inginkan
Ganti dengan link Anda
10. Simpan dan lihat hasilnya

 Semoga Bermanfaat ya ;)

Related Posts:

  • Membuat Threaded Comment Unik dan Berwarna Salam Blogger! Sambil menunggu hujan berhenti Bang Kamplenk akan mebagikan postingan tentang "Membuat Threaded Comment Bertingkat, Unik dan Berwarna, Bagi sahabat yang sudah bosen dengan tampilan standar bawaan Blogsp… Read More
  • Membuat Widget Share Bergaya Metro Windows 8 Sharing Metro Windows 8 Salam Blogger! Apa kabar pembaca setia blog sederhana ini, semoga anda sehat selalu ;) bagi sobat yang ingin Follow Blog ini silahkan KLIK DISINI. Pada artikel yang berkaitan sebelumnya saya perna… Read More
  • Hilangnya CTRL+F Dalam Templete Editor Blogger Terbaru Editor Templete  RIEFSAZ Blog. Salam Blogger! Apa kabar sahabat semoga anda selalu Online. Sudah lama tidak melihat dapur blog ini karena ada yang ingin dioprek-oprek masuklah saya ke Edit HTML tapi apa yang terj… Read More
  • Membuat Widget Social Subcription tanpa Edit HTML Salam Blogger! Dalam dunia ngeblog memperganteng blog adalah kepuasan sendiri, bukan hanya isi artikel yang menarik tapi juga harus ditunjang dengan penampilan yang unik dan rapi karena dengan begitu tampilan yang enak dili… Read More
  • Penilaian Tentang Blog RIEFSAZ Salam Blogger! Semoga sahabat selalu dalam lindungan Nya, Amin. Pada postingan kali ini saya akan memperlihatkan beberapa komentar dan penilaian dari blog RIEFSAZ ini yang diambil dari Link Referral yang saya ikuti… Read More

3 komentar:

  1. Abed Saragih11 September, 2013

    Untuk blog tutorial script buat tombol demonya sangat diperlukan ini mas,kebetulan ada satu blog tutorial saya izin simpan kode scriptnya.

    BalasHapus
    Balasan
    1. Arief Yustana11 September, 2013

      silahkan sob, menambah koleksi dan memperganteng isi artikel ;)

      Hapus
  2. Prisma Try Laksana20 September, 2013

    keren gan

    BalasHapus

Silahkan sobat tinggalkan jejak di bawah ini...NO.SPAM
Dengan Memberikan Komentar Secara Otomatis akan Mendapatkan Pagerank, Traffic dan Backlink.