Cara Membuat Sudut Gambar Iklan Melingkar

Kali ini Saya akan membahas Cara Membuat Sudut Gambar Iklan Melingkar.
Setelah Saya berkunjung ke blog tetangga akhirnya Saya mendapat tutorial yang mudah sekali untuk diterapkan ke blog Saya dan mungkin bisa diterapkan di blog kalian.
Di blog yang Saya kunjungi gambar yang melingkar terdapat pada iklan yang ada pada sidebarnya dan postingannya.

Demo


Baiklah tanpa berlama-lama berikut di bawah ini cara membuatnya ↓

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Centang Expand Template Widget
• Cari kode ]]></b:skin> agar mudah mencari tekan f3
• Setelah itu letakan script di bawah ini, di atas kode ]]></b:skin>

/* Iklan By http://www.suryachandragobel.blogspot.com"don't change any credit"
===================== */
#iklan img{
margin: 0px;
padding: 5px;
text-align: center; }


#iklan img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}


#iklan img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
}

• Simpan, namun belum selesai.
• Setelah itu Anda pilih Tata Letak → Tambah Gadget Untuk Sidebar → Pilih Javascript/HTML
• Letakkan script di bawah ini ke dalam kotak ↓

<div id="iklan">
<a target="_blank" href="http://suryachandragobel.blogspot.com"><img alt="banner ads" src="https://lh5.googleusercontent.com/-Snjs9WODRaA/T2lSWGW_o8I/AAAAAAAAAOg/JXXTZnsZP8s/s125/colorful_text_box.jpg" border="0"/></a></div>
<div id="iklan">
<a target="_blank" href="http://suryachandragobel.blogspot.com"><img alt="banner ads" src="https://lh5.googleusercontent.com/-Snjs9WODRaA/T2lSWGW_o8I/AAAAAAAAAOg/JXXTZnsZP8s/s125/colorful_text_box.jpg" border="0"/></a></div>
<div id="iklan">
<a target="_blank" href="http://suryachandragobel.blogspot.com"><img alt="banner ads" src="https://lh5.googleusercontent.com/-Snjs9WODRaA/T2lSWGW_o8I/AAAAAAAAAOg/JXXTZnsZP8s/s125/colorful_text_box.jpg" border="0"/></a></div>
<div id="iklan">
<a target="_blank" href="http://suryachandragobel.blogspot.com"><img alt="banner ads" src="https://lh5.googleusercontent.com/-Snjs9WODRaA/T2lSWGW_o8I/AAAAAAAAAOg/JXXTZnsZP8s/s125/colorful_text_box.jpg" border="0"/></a></div>

• Simpan dan lihat hasilnya.

Keterangan :

• Ganti tulisan http://suryachandragobel.blogspot.com dengan URL iklan Anda.
• Tulisan warna biru harus disamakan agar css aktif dan bisa di remote.
• Tulisan warna biru bisa Anda ganti dengan tulisan apa saja, asalkan sama dengan cssnya.
• Jika semua gambar hanya ingin pada postingan saja yang melingkar, Anda hanya ganti saja tulisan iklan dengan tulisan post, sehingga tulisan iklan menjadi tulisan post img{ dan post img:hover{ dan jangan letakkan script seperti di bawah ini di sidebar, karna cssnya tidak aktif dan gambar tidak akan melingkar.

<div id="iklan"> <a target="_blank" href="http://suryachandragobel.blogspot.com"><img alt="banner ads" src="https://lh5.googleusercontent.com/-Snjs9WODRaA/T2lSWGW_o8I/AAAAAAAAAOg/JXXTZnsZP8s/s125/colorful_text_box.jpg" border="0"/></a></div>

Selamat Mencoba dan Semoga Bermanfaat !