Sabtu, 13 Mei 2017

Cara memasang kotak iklan responsive di Blog

Cara memasang kotak iklan responsive di Blog - Mmebuat dan mengelola sebuah blog mungkin bagi sebagian orang hanya untuk menyalurkan hoby sebagai menulis atau lainnya, namun sebagian yang lain dapat memamfaatkan blog yang mereka kelola sebagai ladang untuk menghasilkan uang untuk mereka secara terus menerus, salah satu cara nya ialah dengan memasang iklan di blog mereka, namun terlebih dahulu kita semestinya memasang kotak iklan di blog sehingga orang yang melihatnya akan menjadi tertarik untuk memasang iklan mereka di blog yang kita kelola tersebut dan tentunya kita akan mendapatkan bayaran yang setimpal.

Namun semakin baik anda memasang space atau tempat pemasangan iklan tersebut maka semakin tertarik pula produsen iklan untuk memasang iklan mereka pada anda, oleh karena itu pemasangan gambar iklan pun harus dipikirkan dengan matang sehingga orang lain melihat iklan tersebut, selain itu tampilan yang responsive sehingga tidak membuat gambar iklan anda menebar dan tetap pada tempatnya menjadi nilai tersendiri bagi blog anda, oleh karena ini diartikel kali ini kita akan mempelajari bagaimana caranya membuat kotak iklan yang responsive dan menarik di blog. Pada kesempatan kali ini kita akan membuat space/kotak iklan dengan ukuran 125x125 px sebanyak 4 buah di sidebar blog, lansung saja ikuti tutorial berikut.

  1. Buka akun blogger anda > Tema > Edit HTML kemudian cari kode ]]></b:skin> atau </style> setelah ditemukan pastekan kode dibawah ini tepat diatas salah satu kode diatas
    /* Kotak Iklan */
    .kotak_iklan {text-align: center;}
    .kotak_iklan img {margin:0px 5px 5px 0px;padding:5px;text-align:center;border:1px solid #ddd;}
    .kotak_iklan img:hover {border:1px solid #aaa}
    .kotak_iklan img.noborder {border:0;}
  2. Kemudian Simpan perubahan
  3. Klik Tata Letak > Tambah gadget > Pilih HTML/Java Scipt > Dan masukkan kode dibawah ini pada konten dan simpan Gadget
    <div class="kotak_iklan">
    <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
    <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
    <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
    <a href="url iklan yang dituju" title="judul iklan"><img class="noborder" src="Url gambar" alt="alt gambar" width="125" height="125" /></a>
    </div>
  4. Seetelah selesai simpan perubahan dan lihat hasilnya
Ganti kode berikut dengan tulisan anda
Ganti kode"url iklan yang dituju" dengan  URL tujuan iklan anda
Ganti kode"judul iklan" dengan Judul iklan anda
Ganti kode"Url gambar" dengan URL gambar iklan anda 

Cukup mudah bukan? demikianlah artikel kali ini tentang bagaimana caranya membuat kotak iklan responsive di blog dengan mudah


EmoticonEmoticon