Cara Memasang Tombol Link Gambar Blog

Cara Memasang Tombol Link Gambar Blog - Pada artikel sebelumnya, saya telah menjelaskan tentang cara membuat tombol klik pada background gambar yang masih ada kaitannya dengan artikel ini yaitu cara memasang tombol link gambar blog. Pada artikel sebelunya, saya juga memberitahukan kalau artikel cara memasang tombol link gambar blog ini memiliki perbedaan dengan artikel sebelumnya. Kalau pada artikel sebelumnya, seluruh tampilan (background dan garis border) menggunakan gambar tapi pada artikel ini, seluruh tampilan menggunakan kode-kode CSS dan html dan tidak menggunakan gambar sama sekali

Contoh dalam gambar

Demonya

Harga..

Rp. 1 Trilliun

ORDER NOW!

Syarat & Ketentuan Berlaku

Penawaran Ini Ditutup
Jika Penjualan Sudah Mencapai 100 Sales

Nantikan mini-site template khusus blogger....

Dengan tidak menggunakan gambar pada tampilan tersebut, hal ini tentunya memiliki keuntungan tersendiri yaitu loading blog lebih cepat daripada yang menggunakan gambar. Sedangkan dari tingkat kesulitan, juga lebih mudah

dilakukan pada artikel ini daripada artikel sebelumnya.. Padahal ya sama-sama sulit hehee..

Berikut Cara Memasang Tombol Link Gambar Blog
Silahkan buka menggunakan password panduantemplateblog dan masukkan kode html kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda

<div class="gray-box" style="-moz-border-radius: 7px; -webkit-border-radius: 7px; background-color: #ffff99; border-bottom-color: #cc0000; border-bottom-style: dashed; border-bottom-width: 3px; border-left-color: #cc0000; border-left-style: dashed; border-left-width: 3px; border-radius: 7px; border-right-color: #cc0000; border-right-style: dashed; border-right-width: 3px; border-top-color: #cc0000; border-top-style: dashed; border-top-width: 3px; font-family: Arial, Helvetica, sans-serif; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; padding-top: 7px; text-align: left; width: 450px; word-spacing: 1px;">
<div style="color: #4f4f4f; font-size: 12px; margin-bottom: 5px; margin-top: 15px;">
<span style="color: firebrick; font-family: hand of sean; font-size: 20px; text-align: left; text-shadow: 2px 2px 2px #DCDCDC;"><b>Harga..</b></span></div>
<div style="color: #4f4f4f; font-size: 12px; margin-bottom: 5px; margin-top: 10px; text-align: center;">
<span style="color: red; font-family: Calibri; font-size: 60px; text-shadow: 2px 2px 2px blue;"><b>Rp. 1 Trilliun</b></span></div>
<div style="-moz-border-radius: 15px; -moz-border: 3px solid #009900; -moz-box-shadow: 0 0 15px #999; -o-border-radius: 15px; -o-border: 3px solid #009900; -o-box-shadow: 0 0 15px #999; -webkit-border-radius: 15px; -webkit-border: 3px solid #009900; -webkit-box-shadow: 0 0 15px #999; border-radius: 15px; border: 3px solid #009900; box-shadow: 0 0 15px #999; height: 60px; margin-bottom: 0px; margin-top: 30px; text-align: center;">
<div style="color: #4f4f4f; font-size: 58px; margin-bottom: 5px; margin-top: 20px;">
ORDER NOW!</div>
</div>
<div style="color: #4f4f4f; font-size: 12px; margin-bottom: 5px; margin-top: 15px; text-align: center;">
<a href="http://panduantemplateblog.blogspot.com/2013/02/cara-memasang-tombol-link-gambar-blog.html">Syarat & Ketentuan Berlaku</a></div>
<div style="color: #4f4f4f; font-size: 12px; margin-bottom: 5px; margin-top: 15px; text-align: center;">
</div>
<div style="color: #4f4f4f; font-size: 12px; margin-bottom: 5px; margin-top: 15px; text-align: center;">
<span style="color: blue; font-family: hand of sean; font-size: 20px; text-align: left; text-shadow: 2px 2px 2px #DCDCDC;"><b>Penawaran Ini Ditutup
Jika Penjualan Sudah Mencapai 100 Sales</b></span></div>
</div>

Keterangan: Tidak ada, silahkan mainkan imajinasi anda :)

Horeee.. capek dah! Terimakasih telah membaca artikel ini, cara memasang tombol link gambar blog