Memasang Tombol Dalam Area Gambar Postingan Blog

SatuAja : Artikel kali ini kita akan mencoba menyisipkan tombol di dalam area gambar. Secara logika akan ada tombol dengan posisi yang bisa kita atur di dalam gambar, baik itu posisi, warna maupun fungsi.

Nantinya tombol tersebut bisa kita isi tag entah itu link URL atau menjalankan fungsi tertentu. Kita akan menggunakan metode CSS dengan kombinasi perintah z-index.

Pasang Tombol Dalam Area Gambar Postingan Blog (Button in Pictures)

Pada contoh kali ini saya akan memasang 2 buah tombol, dan tombol tersebut berada di bagian bawah kanan dan kiri dalam area sebuah gambar.

#CSS Kode Button In Picture

Langkah pertama silahkan copy kode CSS Button in Pictures dibawah ini.

/*button in picture*/
#tagpict
{    
    border-radius: 0 20px;
    position:relative;
    left: 0px;
    top: 0px;
    z-index: 1;

}
#buttonleft
{
    left: 5px;
    bottom: 5px;
    position:absolute;
    z-index: 2;
}

#buttonright
{
    right: 5px;
    bottom: 5px;
    position:absolute;
    z-index: 2;
}

Penjelasan kode diatas adalah sebagai berikut :

• #tagpict : gambar utama postingan yang dijadikan area penempatan tombol
• #buttonleft : tombol di bagian kiri dalam gambar
• #buttonright : tombol di bagian kanan dalam gambar

Ketiga kode tersebut nantinya akan kita gunakan sebagai tag pemanggil kode CSS.

Langkah selanjutnya masuk ke menu Tema > Edit HTML. Paste kode tadi diatas kode ]]></b:skin> setelah tanda "}" terakhir. Save template untuk menyimpan perubahan.

#Memasang Kode Button In Picture

Untuk menerapkan dalam postingan kita akan menulis artikel dalam mode HTML. Kemudian Upload sebuah gambar sehingga kita akan mendapati gambar tersebut menjadi deteran kode dan dibungkus dalam tag <div>. Kita akan memasukkan pemanggil kode CSS yang sudah kita buat tadi diantara tag <div> dan </div> dari gambar menjadi seperti berikut ini.

Dalam gambar diatas saya memberi tanda kotak tag div bawaan gambar berwarna biru dan tag div pemanggil kode button in picture berwarna merah. Atau anda bisa copy kode dibawah ini untuk lebih mudahnya.

<div class="separator" style="clear: both;" id='tagpict'><a href="#urlgambar" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="400" data-original-width="600" src="#urlgambar"/></a>
<div id='buttonleft'><a href="#urltujuan" rel='nofollow' target='blank' style='background-color:#008000;color:#fff;padding:5px 10px;border-radius:5px'><b>BUTTON LEFT</b></a></div>
<div id='buttonright'><a href="#urltujuan" rel='nofollow' target='blank' style='background-color:#008000;color:#fff;padding:5px 10px;border-radius:5px'><b>BUTTON RIGHT</b></a></div></div>

Ganti #urlgambar dengan url gambar anda. Cek preview untuk melihat hasilnya.

Selesai dan anda bisa memodifikasi sesuka hati kode CSS diatas atau mengatur fungsi tombol sesuai dengan keinginan anda.