Cara Memasang Tombol Demo Pada Posting Blog

Tombol Demo adalah Tombol yang berfungsi untuk memperlihatkan Contoh-Contoh hasil yang dibuat. Jika Tombol Demo Lebih Menarik, Pengunjung blog anda juga lebih nyaman dengan Tampilannya dan lebih Memehartikannya. Jika Tombol Demo Biasa-Biasa Saja dengan Tulisan, Pengunjung sedikit tidak tertarik, Dan pengunjung lebih melihat Tampilan yang Lebih Menarik, Tombol juga salah satu Tampilan Blog yang dilihat oleh pengunjung. dan kalau Tombol saja tidak bagus atau tidak sempurna Pengunjung juga tidak akan suka dengan tampilannya. Bagaimana Cara Untuk Mempercatik Tampilan Tombol Demo Lebih Menarik?, Yaitu dengan cara Memasang Tombol Demo Yang Lebih Meranik. Di Posting Kali ini saya akan Menjelaskan Cara untuk Membuat Tombol Demo Pada Posting. Dan Kelebihan dari Tombol Demo yang saya akan jelaskan ini adalah Tombol yang Beranimasi Gelembung-Gelembung disaat Mouse di arahkan. Untuk Membuat Silahkan Ikuti Cara berikut ini:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template, Klik Tombol Edit HTML untuk mengedit HTML Template Anda.
• Centang Expand Template Widgets, Cari Kode </head> dengan menekan CTRL+F atau F3
• Masukan Kode Berikut ini diatas kode </head>:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'></link>

• Lalu, Cari Kode ]]></b:skin>, Lalu Masukan Kode Berikut ini Diatas Kode ]]></b:skin> :

#wg-dbutton { border:2px solid black; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow:3px 3px 3px #434343; width:130px; margin-bottom:5px; padding:5px; } #wg-dbutton a { color:#434343; background:#F8F8F8; display:inline-block; font-size:32px; font-family: 'Yanone Kaffeesatz'; line-height:20px; text-decoration:none; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:8px 14px; } #wg-dbutton a:hover { color:#fff; text-shadow:0 1px 0 #000; background:#434343; text-decoration:none; }

• Setelah itu, Klik Tombol Pratinjau untuk meninjau kesalahan atau Tidak, Jika tidak ada kesalahan, Klik Tombol Simpan Template.
• Masukan Kode Berikut ini Di Posting anda:

<div id="wg-dbutton"> <a href="#" target="_blank"><b>Live Demo</b></a></div>

Keterangan:

1. Ganti Tulisan # dengan Alamat Link yang anda mau.
2. Ganti Tulisan Live Demo dengan Judul Tombol yang anda mau.

Selamat Mencoba,

Salam Sukses.

Your-BelajarBLOG