Berbagi tanpa Batas

Selasa, 20 Maret 2012

Cara Membuat Kotak Circle Banner di blogger

with 4 comments
MalvinShare-Pada kesempatan ini MalvinShare akan ngasih tutorial mengenai Cara Membuat Kotak Circle Banner di blogger. Sebelumnya akan saya jelaskan terlebih dahulu apa itu Kotak Circle Banner, Kotak Circle Banner adalah widget yang digunakan untuk menempatkan iklan, namun Kotak Circle Banner ini bukan kotak baner biasa, karena dilihat dari namanya saja kita sudah pasti bisa menebak, seperti apa bentuk Kotak Circle Banner ini. Kotak Circle Banner ini berbentuk lingkaran, yang diberi efek CSS, sehingga apabila Kotak Circle Banner ini disorot atau disentuh oleh mouse, yang tadinya berbentuk lingkaran 360 derajat menjadi kotak persegi yang unik dan memiliki tampilan profesional. Untuk demonya teman-teman bisa melihatnya langsung di blog ini, karena saya menggunakannya. Disamping tampilannya yang elegan dan profesional, widget Kotak Circle Banner ini, dalam hal loading page sangatlah ringan. Seperti yang saya tuturkan diatas tadi, alasan mengapa saya mengatakan widget Kotak Circle Banner ini ringan karena pembuatannya yang murni hanya menggunakan CSS saja. Berikut akan saya jelaskan tentang Tata Cara Pembuatan Widget Kotak Circle Banner di Blogger.

Cara Membuat Kotak Circle Banner di blogger
1. Login account blogger kamu
2. Masuk rancangan lalu pilih edit HTML
3. Jangan lupa centang expland template
4. Kemudian itu cari kode berikut
]]></b:skin>
5. Setelah ketemu kode ]]></b:skin>, lalu sisipkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>
/* Kotak Iklan 125x125 By http://www.MalvinShare.blogspot.com"dont change any credit"
===================== */
#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;
}
6. Lalu Simpan
7. Masuk pada Design, lalu pilih page element , klik add gadget , pilih HTML/javascript, masukkan kode berikut kedalamnya.
<div id="kotak-iklan-125x125">

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

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

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

<a target="_blank" href="http://malvinshare.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>
7. Klik Simpan
8. Selesai

Keterangan :
a. http://malvinshare.blogspot.com ganti dengan URL iklan
b. https://lh5.googleusercontent.com/-Snjs9WODRaA/T2lSWGW_o8I/AAAAAAAAAOg/JXXTZnsZP8s/s125/colorful_text_box.jpg ganti dengan URL gambar iklan

Demikian postingan kali ini, semoga bermanfaat.

4 komentar:

  1. . . cara bikin kolom nya aja gitu gimana?!? kalo disentuh bisa berubah gitu. kasih tau donk . .

    BalasHapus
  2. @♥VPie◥♀◤MahaDhifa♥Sebelumnya saya ucapkan terimkasih karena tlah berkunjung,,, untuk kolom itu cara sama Mba, kita gunakan CSSnya kemudian gunakan pula kode HTMLnya,,, tutorialnya sama seperti diatas, tinggal kreatifitas kita saja. hehe

    BalasHapus
  3. Thanks Gan...
    I like circle banner so much ^_^

    BalasHapus

  4. keren bos,,,, he... he ...
    makasih ya....
    http://fillixstogel.blogspot.com/

    BalasHapus

Protect by