Cara Membuat Tombol Klik Pada Background Gambar - hmm.. maksudnya apa ya? Saya sendiri juga bingung dengan judul artikel ini, cara membuat tombol klik pada background gambar blog.. Tapi baiklah, karena kita sama-sama bingung mari kita bahas artikel ini agar kebingungan ini tidak menjadi penyakit heheheee. Begini, biasanya saat membuat background gambar pada blog atau didalam artikel dan menyertakan link kedalam background gambar tersebut maka gambar itu sendiri lah yang bisa di klik dan kali ini kita akan membuat tombol klik yang memiliki background!
Tampilan tombol klik pada background gambar ini biasanya terdapat pada sebuah halaman penawaran (landing page, squeeze pade, mini site) bisnis online seperti yang terlihat pada gambar berikut ini
Demonya
Nantikan mini-site template khusus blogger....
Bagaimana? Menarik bukan? Memang cara membuat tombol klik pada background gambar ini bisa menggunakan cara manual seperti yang saya telah saya jelaskan dalam artikel Cara Memasang Tombol Link Gambar Blog yang memiliki perbedaan dengan artikel yang anda baca saat ini.
Untuk membuat tombol klik pada background gambar berikut caranya
Silahkan tambahkan kode berikut ini kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh36EBGH6YPA2GV-2w1XBa0qIMGY9JCoxwH7L1VoUnavT9lPIGf-5rpxKwYz0lkEnDY1cC90G-9ag7IYn7ucq7F5nOsNNTjlmZOTVysh7sglgxENsoUCJju0t1t2ClEJiC0Oun5Yo35zqE/s1600/tombol-beli-sekarang-001.png)no-repeat; height: 350; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 2px; padding-right: 2px; padding-top: 120px; width: 450;">
<span style="margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 0px; padding-right: 20px; padding-top: 100px;"><a href="http://panduantemplateblog.blogspot.com/2013/02/cara-membuat-tombol-klik-pada.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BmJwMYe6iCGvTEUZfA70ZJvKP_sCHoiLWqktRgvxRy27CK1qd8WvXfXnaC15O6sC5A-OEQx7AY5pRPUkS6JAvOWTWMVLZF81EAEtBU7XR9970e9NW-P_UF48RbdwjSrSCtMOT-A5pUc/s1600/tombol-beli-sekarang.png" width="400" /></a></span></div>
Keterangan:
Merah : gambar background
Biru : link aktif
Ungu : gambar tombol
Adakah ide lain yang lebih baik dari cara membuat tombol klik pada background gambar ini? Mari kita bertukar ide dan mendiskusikannya dengan berkomentar di artikel ini, Cara Membuat Tombol Klik Pada Background Gambar
Tampilan tombol klik pada background gambar ini biasanya terdapat pada sebuah halaman penawaran (landing page, squeeze pade, mini site) bisnis online seperti yang terlihat pada gambar berikut ini
Demonya
Nantikan mini-site template khusus blogger....
Bagaimana? Menarik bukan? Memang cara membuat tombol klik pada background gambar ini bisa menggunakan cara manual seperti yang saya telah saya jelaskan dalam artikel Cara Memasang Tombol Link Gambar Blog yang memiliki perbedaan dengan artikel yang anda baca saat ini.
Untuk membuat tombol klik pada background gambar berikut caranya
Silahkan tambahkan kode berikut ini kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh36EBGH6YPA2GV-2w1XBa0qIMGY9JCoxwH7L1VoUnavT9lPIGf-5rpxKwYz0lkEnDY1cC90G-9ag7IYn7ucq7F5nOsNNTjlmZOTVysh7sglgxENsoUCJju0t1t2ClEJiC0Oun5Yo35zqE/s1600/tombol-beli-sekarang-001.png)no-repeat; height: 350; margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 2px; padding-right: 2px; padding-top: 120px; width: 450;">
<span style="margin-bottom: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; padding-bottom: 60px; padding-left: 0px; padding-right: 20px; padding-top: 100px;"><a href="http://panduantemplateblog.blogspot.com/2013/02/cara-membuat-tombol-klik-pada.html"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3BmJwMYe6iCGvTEUZfA70ZJvKP_sCHoiLWqktRgvxRy27CK1qd8WvXfXnaC15O6sC5A-OEQx7AY5pRPUkS6JAvOWTWMVLZF81EAEtBU7XR9970e9NW-P_UF48RbdwjSrSCtMOT-A5pUc/s1600/tombol-beli-sekarang.png" width="400" /></a></span></div>
Keterangan:
Merah : gambar background
Biru : link aktif
Ungu : gambar tombol
Adakah ide lain yang lebih baik dari cara membuat tombol klik pada background gambar ini? Mari kita bertukar ide dan mendiskusikannya dengan berkomentar di artikel ini, Cara Membuat Tombol Klik Pada Background Gambar
thanks
BalasHapus@ricko okey.. you're welcome..
BalasHapusLebih keren lagi kalau tombol belinya diberi efek/hover push/tekan...terima kasih
BalasHapusRumit.. tapi asik coy..
BalasHapus@kado sayang yang ini bisa dikembangkan sendiri.. :)
BalasHapus@Debie Randy silahkan di coba dulu mas.. hehee
BalasHapussip..
BalasHapusbisa buat sendiri,hehe
makasih infonya
artikelnya krg jls booss... scripnya gk di jlsin klo masang di blog lain...
BalasHapussudah dijelasan dengan baik kok mas..
Hapus"Untuk membuat tombol klik pada background gambar berikut caranya
Silahkan tambahkan kode berikut ini kedalam artikel atau dimanapun anda ingin memasangnya didalam blog anda"
oke thnx.. tp msih sulit memahami artikelnya
BalasHapussudah cukup jelas kok mas,,,
HapusMantap.. makasih bro posting nya keren
BalasHapusmantap keren posting nya
BalasHapus