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 Menu Oval Bergerak tanpa Edit HTML Salam Blogger! Pada malam ini saya akan membagikan Cara Membuat Menu Oval Bergerak, sobat tidak perlu banyak merubah kode hanya sedikit pengeditan menyesuaikan keinginan sobat, karena tanpa melakukan edit HTML, pada p… Read More
  • Membuat Tombol Share Telor Ayam Share Telor Ayam Salam Blogger! Bagi sahabat pembaca paling setia Blog ini yang ingin mempercantik tombol share, saya akan membagikan model terbaru yaitu Membuat Tombol Share Post Telor Ayam, bagi yang ingin mencoba sila… Read More
  • Membuat Menu Mini Vertical tanpa Edit HTML Menu Mini Salam Blogger! Bagi pengunjung setia kali ini saya akan membagikan bagimana Cara Membuat Menu Mini Vertical tapa edit HTML seperti gambar, silahkan ikuti langkahnya di bawah ini : 1.Klik Tata Letak. 2.Klik &nbs… Read More
  • Membuat Komentar Bergambar tanpa Edit HTML Komentar Anda Salam Blogger! Bagi Sobat yang ingin membuat Kotak Komentar Bergambar tanpa Edit HTML seperti Blog saya, ikuti panduannya dibawah ini : 1.Klik Tata Letak. 2.Klik Elemen Halaman. 3.Klik Tambah Gadget. 4.Kem… Read More
  • Membuat Bookmark Share tanpa Edit HTML Bookmark Share Salam Blogger! Widget pintas ini adalah untuk mempermudah pengunjung membookmark atau menyimpan Blog atau Wibsite anda dengan mudah dan cepat karena tinggal klik saja, ikuti panduannya dibawah ini 1.Klik … 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.