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:

  • Tips Meningkatkan Pagerank Blog Salam Blogger! Setiap blogger tentunya sangat menginginkan ranking blognya tinggi, sehingga banyak pemasang iklan yang bersedia memasang banner produknya. Untuk menaikkan page rank kita harus mencari backlink sebanyak-bany… Read More
  • Blog Copas Memasang DMCA Protection Salam Blogger ! DMCA yaitu kepanjangan dari “Digital Millenium Copyright Act” adalah bentuk perlindungan terhadap Hak Cipta agar tidak terjadinya pembajakan, DMCA merupakan perlindungan terhadap suatu Keaslian Konten atau … Read More
  • Membuat Daftar Menu Terbaru 2013 Daftar Menu  Salam Blogger! Pada hari ini saya akan memposting artikel tentang Membuat Daftar Isi atau Menu pada Blog Update 2013, dimana dalam pembuatannya sangatlah simpel dan tidak memberatkan loading blog. sebenar… Read More
  • Kutunggu Jandamu Nona Alexa Alexa Rank Pada kesempatan ini saya akan menyampaikan bagaimana cara menjadi pasangan setia Nona Alexa serta bagaimana cara bertahan untuk menjadi yang paling terdekat dipelukannya. Bagi seorang Blogger mendapatkan hati A… Read More
  • Panduan Menambah Penulis Blog Penulis blog lebih dari satu Salam Blogger ! Kali ini  akan membahas tentang tutorial sederhana yakni tentang Cara menambah penulis blog, atau mungkin tutorial ini bisa diartikan tentang mengganti email login blogspo… 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.