Cara Buat Slot Iklan Grid Responsive Blog

Kali ini admin akan memberikan tutorial tentang Cara Buat Slot Kotak Iklan Grid Di Sidebar Blog. Penghasilan seorang blogger salah satunya adalah iklan. Untuk menampilkan iklan blog bisa berasal dari mana saja, seperti Google Adsense , Kumpul Blogger , atau menjadi publisher iklan mandiri ,artinya kita memasang url produk orang lain yang ingin mengiklankan di blog kita. Nah, cara terakhir tersebut yang akan kita pelajari.Letak dari slot iklan ini adalah bagian sidebar dan bisa juga di bagian footer. Masalah tampilan mobile pastinya widget ini responsive. Buat yang penasaran langsung saja simak tutorialnya berikut ini.

• Masuk ke Tata Letak blogger.
• Pilih tempat untuk memasang slot iklan.
• Pilih HTML/ Javascript
• Masukan Kode di bawah ini.

<div class="kotak_iklan"><a href="#" target='_blank' title="JUDUL"><img style="border: none;" src="URL GAMBAR" alt="KETERANGAN" title='JUDUL' width="125" height="125" /></a><a href="#" target='_blank' title="JUDUL"><img style="border: none;" src="URL GAMBAR" alt="KETERANGAN" title='JUDUL' width="125" height="125" /></a><a href="#" target='_blank' title="JUDUL"><img style="border: none;" src="URL GAMBAR" alt="KETERANGAN" title='JUDUL' width="125" height="125" /></a><a href="#" target='_blank' title="JUDUL"><img style="border: none;" src="URL GAMBAR" alt="KETERANGAN" title='JUDUL' width="125" height="125" /></a></div><style>/* CSS Ad Slot Wrapper */.banner,.banner2,.banner3 {margin:0 auto;text-align:center;overflow:hidden;max-width:100%;}.banner {margin:20px auto 5px auto}.banner2 {margin:0 auto 20px auto}.banner3 {margin:20px auto}.banner .widget,.banner2 .widget {width:100%;max-width:100%;margin:0 auto;background:transparent;text-align:center;overflow:hidden;}.banner img, .banner iframe,.banner2 img,.banner2 iframe,.banner3 img,.banner3 iframe{display:block;margin:0 auto;text-align:center;}.kotak_iklan {margin:auto;transition:all 1s ease-out;}.kotak_iklan .sidebar .widget-content,.kotak_iklan .sidebar-two .widget-content{padding:0;border:0;}.kotak_iklan .sidebar .widget {margin-bottom:0;padding:0;}.kotak_iklan img{background:#fff;text-align:center;margin:5px 2.5px;padding:2.5px;border:1px solid #ddd!important;transition:all .6s ease-out}.kotak_iklan  img:hover {background:#fff;border-color:#bbb!important;}.kotak_iklan2 {text-align:center;margin:0 auto;transition:all 1s ease-out;}.kotak_iklan2 .sidebar .widget-content,.kotak_iklan2 .sidebar-two .widget-content{padding:0;background:#f2f6f7;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);border:0;}.kotak_iklan2 .sidebar .widget,.kotak_iklan2 .sidebar-two .widget {margin-bottom:0;padding:0;}.kotak_iklan2  img {text-align:center;transition:all 1s ease-out;}.kotak_iklan2  img:hover {transition:all .5s ease-out;}.kotak_iklan3 {position:relative;margin:0 auto;}#HTML1 .widget-content {margin:auto;padding:10px 10px 10px 18px;}#HTML1 h2:before {content:'\f087';}#HTML6 .widget-content {display:inline-block;margin:auto;padding:0;}#HTML8 .widget-content {padding:0;margin:auto;text-align:center;}#HTML9 .widget-content {border:1px solid rgba(0,0,0,0.12);padding:0;}</style>

• Ganti kode di atas sesuai keterangan iklan yang akan anda tampilkan
• Save 

Tweet

Postingan terkait:

Ditulis Tarsisius — Maret 10, 2017 — 2 Comments — Tutorial