Cara Membuat Kotak Banner Ads 125 x 125

Cara Membuat Kotak Banner Ads 125 x 125

Hai kawan, berjumpa lagi dengan Syahroonix dalam artikel Cara Membuat Kotak Banner Ads 125 x 125. Di artikel ini Syahroonix akan memberi tahu kalian caranya membuat kotak ads (Kotak Iklan) bergaya CSS yang cukup menarik dan ukurannya 125x125. Bagaimana? Kalau memang kalian ingin tahu caranya, liat tutorialnya di bawah ini.

Cara Membuat Kotak Banner Ads 125 x 125. Untuk membuat itu caranya mudah, kalian hanya perlu mengikuti tutorial yang ada di bawah ini.

Langkah Pertama
Kalian hanya perlu untuk log in ke Blogger Kalian masing-masing dengan akun kalian sendiri tentunya. Jangan Pakai akun orang yah?

Langkah Kedua
Kalau blog kalian berbahasa Inggris, masuk ke Template lalu klik Edit HTML.
Kalau blog kalian berbahasa Indonesia, masuk ke Template lalu klik Edit HTML.
Tidak perlu centang Expand Widget Templates yah kawan.

Langkah Ketiga
Cari kode ]]></b:skin>
Kalau kalian emang gemar membaca sih pasti dibaca dengan teliti. Kalau kalian nggak mau repot sih cari pake Finder dari Browser kalian ajah. Caranya gampang kok, tinggal pencet di hidung kalian, ehh salah lagi maksudnya di keyboard kalian. Pencet CTRL+F atau F3 ajah, langsung tulis kodenya.

Langkah Keempat
Kalau sudah ketemu kode tadi, simpan kode dibawah ini tepat diatas kode ]]</b:skin> tadi.

<!--Syahroonix Blog | Berbagi Segala Hal-->
#syahroonixblog-ads {margin:0px;padding:0px;text-align:center} #syahroonixblog-ads img {margin:1px 1px;text-align:center;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;border:5px solid #666;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;} #syahroonixblog-ads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-o-border-radius:15%;-webkit-border-radius:15%;-moz-border-radius:15%;border-radius:15%;}
<!--Syahroonix Blog | Berbagi Segala Hal-->

Langkah Kelima
Setelah kalian selesai menaruh kode diatas, klik Simpan Template atau Save.

Langkah Keenam
Setelah Selesai menyimpan template. Silahkan menuju Tata Letak atau Layout lalu klik Tambah Gadget atau Add Gadget dan pilih HTML/Javascript

Langkah Ketujuh
Untuk kolom judul tidak perlu kalian beri apapun kecuali kalian memang ingin memberikan widget ini nama. Dan isikan di kolom kode dengan kode di bawah ini.  

<div id="syahroonixblog-ads">
<a href="http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg"><img border="0" src="http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg" /></a>
<br />
<a href="http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg"><img border="0" src="http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg" /></a>
<br />
<a href="http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg"><img border="0" src="http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg" /></a>
<br />
<a href="http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg"><img border="0" src="http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg" /></a>
</div>
</div>
</div>

 Keterangan :
Untuk link http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg yang pertama adalah tujuan dari banner tersebut. Sedangkan http://3.bp.blogspot.com/-3f3R3DutURw/T_D9zeJBfdI/AAAAAAAAAQI/3MDXt76XIhg/s1600/banner-ads.jpeg yang kedua adalah link untuk banner tersebut.

Langkah Kedelapan
Klik Simpan atau Save dan lihatlah hasilnya di blog kalian.

Kalau kalian ingin tahu seperti apa hasilnya bisa dilihat di : http://demp-widget-syahroonix-blog.blogspot.com/2013/03/demo-kotak-iklan.html

Selamat Mencoba.

Mungkin hanya itu saja yang dapat Syahroonix sampaikan dalam artikel Cara Membuat Kotak Banner Ads 125 x 125. Ingat, ini adalah artikel asli milik saya, kalian boleh mengcopynya tapi jangan coba-coba mengklaim kalau ini adalah artikel buatanmu. Dan kalau kalian mengcopy artikel ini tolong sertakan link sumber asli blog ini. Biasakanlah untuk menghargai hasil karya orang lain dengan minimal meninggalkan komentar baiknya di blog ini. Jangan lupa untuk membaca artikel lain di blog ini dan dukunglah blog ini dengan cara mengklik iklan yang ada di blog ini. Terima Kasih.

Tags : Cara membuat kotak iklan, cara membuat kotak iklan 125 x 125, cara membuat banner ads box, cara membuat widget pasang iklan, cara membuat kotak iklan di blog, cara membuat kotak iklan keren di blog

Sumber  : Syahroonix Blog | Berbagi Segala Hal 
 

Artikel Terkait: