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 Recent Commen Windows 8 pada Blog Windows 8 Salam Blogger! bagi sobat yang ingin memasang Recent Comment Terbaru bisa dikuti panduannya dibawah ini, selain tampilannya yang stylish, unik dan bergaya metro, mengadopsi tampilan Windows 8 dan yang terpe… Read More
  • Membuat Popular Post seperti Pelangi Popular Post Rainbow Salam Blogger! Walaupun badan kurang sehat, karena ada yang merequest saya akan membagikan bagaimana cara membuat Popular Post berwarna warni seperti yang tampat di Blog Riefsaz ini, selain mempergan… Read More
  • Membuat Tombol Share Keren tanpa Edit HTML Salam Blogger! Dalam dunia blogger memperganteng blog adalah kepuasan tersendiri bukan hanya postingan saja yang dapat membuat pengunjung untuk berlama-lama tetapi penampilan Blog juga dapat menentukan pengunjung untuk da… Read More
  • Membuat Pesan Harian Selama Sebulan Pesan Singkat Salam Blogger! Malam ini saya kan membagikan tips bagaimana cara membuat Pesan Harian selama Satu Bulan Penuh tanpa edit HTML, Sobat bisa menuliskan pesan pendek, kata mutiara, kata Motivasi atau lainnya, b… Read More
  • Menyiasati Link Hidup pada komentar Blog Mematikan Link Live Salam Blogger! Pada kesemmpatan ini Bang Kamplenk akan membagikan Trik Menyiasati link Hidup pada Komentar Blog, Dalam dunia Blog komentar para pengunjung sangatlah dinantikan para pemilik Blog tapi s… 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.