Januari 05, 2012

Membuat Kotak Iklan 125X125 4 Kolom Dengan Sentuhan CSS3

Situseo Blog : Membuat kotak iklan atau banner 125x125px 4 kolom, dari judulnya mungkin tidak cocok membuat kotak iklan 125x125 4 kolom, padahal yang dibuat bukan kotak melainkan bundar/bulat.

Kotak Iklan 125X125 4 Kolom Dengan Sentuhan CSS3

Ya dengan sedikit percobaan menggunakan sedikit sentuhan css3 untuk membuat kotak iklan dengan bentuk bulat dengan hover dengan bentuk kotak.

untuk membuat kotak iklan tersebut kalian bisa meng-copy kode css dibawah ini dan tempatkan diatas kode ]]></b:skin> tapi sebelum melakukan pemasangan kotak iklan 125x125 ini, kalian membuat backup template terlebih dahulu, dengan men-download full template pada Design - Edit HTML untuk menghindari kesalahan.

#kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
#kotak-iklan-125x125 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;}
#kotak-iklan-125x125 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;}

setelah di copy diatas kode ]]></b:skin> kemudian save template kalian dan masuk pada Design - Page Element - Add gadget - HTML/javascript dan copy paste juga kode dibawah ini dan save. silahkan test blog anda.

<div id="kotak-iklan-125x125">

<a target="_blank" href="http://situseo.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDWMK3-iXGuIZhWNmQrLlypkpFX4UAwcc6ACe7X2P-Xzf1UvFXuEEocJSJ-aIuD3bLNg-E8yTCTFQsjnjMiq3xOpOdD347H1nZQQopb-RfdqeClVg4qIsDZRxjuUTgWWX9hCkVoWaNjg/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://situseo.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDWMK3-iXGuIZhWNmQrLlypkpFX4UAwcc6ACe7X2P-Xzf1UvFXuEEocJSJ-aIuD3bLNg-E8yTCTFQsjnjMiq3xOpOdD347H1nZQQopb-RfdqeClVg4qIsDZRxjuUTgWWX9hCkVoWaNjg/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://situseo.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDWMK3-iXGuIZhWNmQrLlypkpFX4UAwcc6ACe7X2P-Xzf1UvFXuEEocJSJ-aIuD3bLNg-E8yTCTFQsjnjMiq3xOpOdD347H1nZQQopb-RfdqeClVg4qIsDZRxjuUTgWWX9hCkVoWaNjg/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://situseo.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDWMK3-iXGuIZhWNmQrLlypkpFX4UAwcc6ACe7X2P-Xzf1UvFXuEEocJSJ-aIuD3bLNg-E8yTCTFQsjnjMiq3xOpOdD347H1nZQQopb-RfdqeClVg4qIsDZRxjuUTgWWX9hCkVoWaNjg/s1600/125x125.png" border="0"/></a>

</div>

Untuk cara memasang iklannya, kalian ganti saja kode yang berwarna merah dengan alamat dari iklan tersebut, url pertama merupakan url tujuan dan url yang kedua merupakan url gambar. Selamat mencoba.

Semoga bermanfaat,

14 Diskusi untuk Membuat Kotak Iklan 125X125 4 Kolom Dengan Sentuhan CSS3

6 Januari 2012 pukul 09.39  

terima kasih gan atas infonya
membantu saya untuk beriklan

24 Januari 2012 pukul 11.04  

terimakasih infonya

24 Januari 2012 pukul 16.10  

@horiba & @ZZ..ZZ BLOG : sama2 semoga bermanfaat

hasilnya sangat keren sekali gan ..

27 Februari 2012 pukul 12.26  

makasih kang...

6 April 2012 pukul 12.19  

keren tips nya..makasih..:)

8 April 2012 pukul 13.48  

wow,,ini lain daripada yang lain.Mantap cuy.

29 April 2012 pukul 12.00  

biar gambarnya ga dihalangi bordernya gmana gan??

6 Mei 2012 pukul 07.57  

cara untuk jadikan 2 baris gambarnya gimana kayk punya sobat

6 Mei 2012 pukul 22.43  

@Metal-xp iklan akan menyesuaikan dengan ruang tempat peletakannya, kalau ingin 2 baris atau 3 baris berjajar pastikan ruangnya mencukupi untuk 2 atau 3 kotak iklan, jika penempatanya pada sidebar seperti punya saya, saya sarankan diperlebar ukuran sidebarnya

7 Mei 2012 pukul 17.34  

@Mas Dalangwahhhh.....jdi harus diperlebar sobat....q coba dlu sobat...ow iya template sobat keren....apa bisa di post sobat...keren abissssss......i like it

29 Juli 2012 pukul 13.30  

kalo mau disesuaikan lebar lingkaran bisa gan????

misal ukuran baner yang di pasang agak lebar

Anonim
14 Desember 2012 pukul 18.03  

Wah dah Ane Sedot

Tapi kok Jaraknya ke Bawah ya... -_-

16 Mei 2013 pukul 22.28  

cara jadiin iklan segitiga kyk kakak,, gmn caranya?

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,
Ping your blog, website, or RSS feed for Free Web DirectoryMy Ping in TotalPing.comBloggers - Meet Millions of Bloggers
Protected by Copyscape Duplicate Content Check

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top