Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Space Banner Iklan di Blog

Space Banner Iklan Blog Cara Membuat Space Banner Iklan di Blog – setelah pada sebelumnya pernah membahas mengenai cara membuat iklan seperti google adsense di blog dengan menggunakan CSS dan HTML, maka sekarang apabila ingin memasang iklan di blog yang disertai hover image dengan sedikit jQuery agar terlihat lebih menarik caranya cukup mudah bahkan simple. Cukup dengan memasukan kode yang terdapat di bawah lalu menaruh kode tersebut kedalam widget blog maka space banner pun siap terpajang di blog. Apabila ingin merubah default image ubah saja pada bagian URL gambar dengan gambar atau banner iklan yang akan dimasukan. Jika sudah terdapat space banner yang terdapat di sidebar blog atau bagian blog lainnya dan trafik blog sudah meningkat maka visitor jika ingin menempel iklannya ke dalam blog tersebut juga tidak sungkan. Untuk membuat ruang banner pada widget blog, berikut tutorial Cara Membuat Space Banner Iklan di Blog.

1. Login ke akun blogger.
2. Copy kode berikut ini.
<style type="text/css">
div#banner a { text-decoration:none; color:#fff; text-align:center;}
div#banner { width:260px; margin:0 auto; }
#banner .iklan { display:block; width:125px; height:125px; border:2px solid #52e052; float:left; position:relative; }
#banner .iklan img{ display:block; width:125px; height:125px;}
#banner .iklan .caption { position:absolute; top:90px; left:2px; padding:3px; font:bold 10px arial; width:115px; display:none; background:#000; }
.clear { clear:both; }
.effect { box-shadow: 0 0 10px #52e052; }
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-spotlight.js"></script>
<script type="text/javascript"> $(document).ready(function () { $('#banner .iklan').each(function () { title = $(this).attr('title'); $(this).append('<span class="caption">' + title + '</span>'); $(this).attr('title',''); }); $('#banner .iklan').hover( function () { $(this).siblings().css({'opacity': '0.1'}); $(this).css({'opacity': '1.0'}).addClass('effect'); $(this).children('.caption').show(); }, function () { $(this).children('.caption').hide(); } ); $('#banner').mouseleave(function () { $(this).children().fadeTo('100', '1.0').removeClass('effect'); }); }); </script>

<div id="banner">
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a>
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a>
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a>
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a>
</div>
<div class="clear"></div>
Silahkan ubah banner yang ingin di pasang dengan mengganti URL gambar berwarna merah dengan ukuran 125 X 125.

3. Masuk menu Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.
4. Selesai dan space banner sudah terpasang kedalam blog.

Demikian tutorial Cara Membuat Space Banner Iklan di Blog dengan mudah dan sederhana.

Berlangganan artikel via email

100 Response to "Cara Membuat Space Banner Iklan di Blog"

wah keren juga banner iklannya mas. Dalam satu widget ada 4 banner. Benar-benar bagus kalau di coba untuk di pasang di blog. Siapa tahu ada yang berminat pasang iklan hehehe :D

Balas

Btw itu nanti link iklan nya dofollow atau nofollow mas?

Balas

itu masih dofollow mbak, tambahi rel="nofollow" di belakang link :)

Balas

Jadi nanti url nya begini ya mas

href="http://mas-andes.blogspot.com rel="nofollow"

Balas

wow keren mas andes, ilmunya mengalir terus

Balas

saya simpen dulu kode-nya mas,

Balas

yey lagi-lagi dibikinin banner.. mau buka lapak, kira-kira laku gak ahah :D

Balas

iya mbak,

http://mas-andes.blogspot.com/2012/11/contact-me.html

ganti dengan url dimana nanti visitor bisa menghubungi mbak eka. jika sudah ada yang pasang, ganti dengan url blog pemilik iklan.

Balas

manatp banernya nya mas, ijin simpan script nya, spatau suatu saat membutuhkan

Balas
avatar
Anonymous

nampaknya mau siap2 buka lapak juga ah...walaupun sebenrenya ga ngerti juga dengan yg bginian hehe, makanya blog WS masih polos smpe sekarang ga ada iklannya..
itu nanti kalau ada yg mau pasang iklan bakal menghubungi ke kita apa gimana mas

Balas

ya kalo udah ada ruang iklannya kan misal ada visitor mau pasang tinggal contact kang WS aja, itu link http://mas-andes.blogspot.com/2012/11/contact-me.html ganti dengan url contact kang WS ntar buat negosiasi via email

Balas

keren-keren mass brow ini .. makin gregetan deh hehe

Balas

ada efek gitu ya sob.., keren jg! *smile

Balas
avatar
Anonymous

mantap mas, widget gambarnya semakin terlihat menarik :)
thanks for share

Balas

wah malah ketinggalan berita saya...manteb mas nih cocok buat yang blog punya trafic tinggi...pasti banyak yang nglirik untuk pasang iklan hehehe

Balas

wah keren nih Mas.. thanks sharenya

Balas
avatar
Anonymous

saya bookmark dulu nih mas,, soalnya saya pasti makai ini nantinya.. :D

Balas

wah mbak Wahyu dan mas Andy kayaknya tertarik nih, silahkan dicoba mumpung gratis :)

Balas
avatar
Anonymous

sangat cocok buat blog yang sudah mempunyai trafik tinggi, kalau saya trafiknya masih minim nih, perlu digenjot dulu hehe...

Balas

sip mbak kalau blognya mbak Wahyu sih pasti banyak yang mau pasang, buruan mbak dipasang :)

Balas

Biasanya kalo di awal pasang...free alias gratis ..
Saya boking duluan ya..hehe :)

Balas

Di genjot...kurang enak loh mas
Mending di elus...hehe :)

Balas

Kali aja habis pasang widget ini...
Rezeki bisa ngalir ya mas... hehe

Balas

saya terima bongkar doang , tidak terima pasang, hehehe

Balas

membaca artikel dan komen jadi mengerti nih kelemahan dan keluhan jika memasang kotak iklan atau space iklan.
ini di tarik retribusi iklan gak mas?hehehe

Balas

aku juga lagi mencari iklan nih, tapi baru dapat iklan baris. ijin untuk menyimpan.

Balas

Saya juga mau tuh kalau ada yang menawarkan iklan gratis :)

Balas

iya mas soalnya banner iklan buatan Mas Andes keren banget, bisa kedip-kedip :)

Balas

keren Mas Artikelnya.. Makasih tutorialnya.
Ilmunya Tambah Keren nih.

Balas

bagus mas memang iklan juga tidak luput dari blog/website mas :D

Balas
avatar
Anonymous

Mantappp Nieehhh Gann Infonyaa Saya Izin Bookmark Yahh Gan Buatt Kapn" Saya Praktekin :D

Balas

Wah mas Andes kalau sama cewek kedip-kedip yah hehe...

Balas

Amiin mas, berusaha dan berdoa pasti lancar rejekinya :)

Balas

kalau kurang enak tambah garem aja mas hehe...

Balas

kalau yang gratis lebih banyak peminatnya yah :)

Balas

Kalo sama kita...mesti meletat meletet...ya mas hehe :)

Balas

Garem berpentium ya mas..hehe :)

Balas

Sip..mas
Potong tumpeng...besok ya hehe :)

Balas

kunjungan perdana sob :)

Balas
avatar
Anonymous

Saya malah penasaran gimana nampilin iklan randomnya.. ada solusi Mas??

Balas

iklan ramdom gimana maksudnya mas, kan di atas tinggal masukin widget aja

Balas
avatar
Anonymous

Terima kasih banyak untuk sharingnya... dan salam kenal yaa buat adminnya, oh iya tampilan blognya bagus :)

Balas

makasih ya buat tutorialnya.. kira2 bikin berat blog gak ya gan?

Balas

Mampir tengah malam mas..selagi online smbil menghabiskan kopi pahit sis kemaren hehehe

Balas
avatar
Anonymous

boleh dicoba nih :) kalau bisa gambar space iklan nya diperbanyak hehehe

Balas

tinggal tambahin aja yang banyak
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a>

Balas

Terlentang ndak boleh ya kang..hehe

Balas

Jangan cuma ngilirik aja ya mas...tapi harus pasang...hehe :)

Balas

Mas saya sudah coba cara diatas dan saya mau tanya...

Kalau posisi iklan mau digeser tengah-tengah gimana caranya mas, soalnya punya saya terlalu kekiri biar keliatan rapih gitu.

Terus kalau mouse digeser diluar iklan biar kembali ke tampilan semula bisa nggak mas, soalnya jadinya yang tiga buram meskipun mouse tidak pada posisi iklan.
Makasih banyak mas :)

Balas

width:280px ubah menjadi width:260px mas.

terus hapus kode ini yang di sisipkan mas anthoni :)
<div style="border: 1px solid #B0B1B2; padding: 5px; width: auto;">
<p style="line-height: 100%; margin-top: 0; margin-bottom: 0" align="center">

</p></div>


misal mau membuat supaya widget sidebar ada bordernya, cari aja kode ini mas
.sidebar .widget{
margin:0px 0px 5px 0px;
padding:0 0 5px;
}

tambahkan kode ini border: 1px solid #B0B1B2;

Balas

mas kalau iklannya dibikin nggak buram bisa nggak yah hehe...

Balas

bisa mas tinggal hapus javascriptnya saja :) dari <script ...sampe... </script>

Balas

Makasih mas, tapi masih saya pikir-pikir mau diilangin apa nggak scripnya :)

Balas

Biasa mas kan orang Indonesia suka nya yang gratis-gratis mas :D

Balas

Bagus Yah Mas Banner iklan nya,.? bisa ketap-ketip
Kaya Mata cantik yang lentik.. saya mau belajar pasang
Iklan ahk.. tapi ngaruh gak pada html dan load, Mas..?

Balas
avatar
Anonymous

Wah Mas Andes lagi Follow-followan..
Sama Mbak Ririn jadi kepengen ikutan
Mas,.? ...Mas Budi Mas Anthonie, Mas Agus
Ikutan juga yah..hhhhh
Salam hormat buat sobat blogging semua.

Balas

mantap ni kalau blog kita pasang yang satu ini, bisa berpenghasilan.
tak coba dulu.
Terima kasih artikelnya mas.
sangat membantu

Balas

mmm gitu ya...nah itu negosiasi berarti deal2an aja gitu ?? atau ada standard nya ?? duh maaf ya mas tanya2 trus ni, jadi penasaran soalnya, pengen coba2 tp blum mnguasai hhe...belum tau pakemnya juga. *padahal kalau pasang juga belum tentu ada yg mau naro iklannya hehe

Balas

klik http://www.joelfahmi.blogspot.com
atau http://www.jauzafahmi.mywapblog.com

Balas

yang mau iklan gratis di ajieblog2013.blogspot.com silahkan email ke ajiepangestu10@gmail.com...

Balas

mantaaaap gan, izin sedottt....

Balas

Perbincangan Para Master blogging yang menarik
Untuk di simak,. ijin jadi pendengar yang baik aja
Yang penting, jadi bermanfaat

Balas

Terima kasih banyak untuk sharingnya... dan salam kenal yaa buat admin :)

Balas

mau tanya nih,,cara upload template hasil download ke bloger gimana ya ,,ko saya gagal terus ya, pesan nya begini >>> Kami tidak dapat menyimpan template Anda.

Template Anda tidak dapat diuraikan karena template tidak terbentuk dengan baik. Pastikan semua elemen XML ditutup dengan benar. pesan kesalahan XML:
Content is not allowed in prolog.

Balas

makasih gn :)
jangan lupa kunjungi blog saya :
http://sibukmainps2.blogspot.com/
dan ini e-mail aku rivaldihandaka@yaoo.com

Balas

salam sukses para master bolg smua,,,
disini ada slot kosong untuk pasang iklan tidak ya?
kami berminat pasang iklan di blog sahabat dg ukuran 300x250.
Atau mungkin ada sahabat blogger yang terima pasang iklan dengan harga miring bisa kirim email ke:
support@e-compusoft.co.id
Terima Kasih...

Balas

Wah artikel mas andres ini bagus semua

Balas

pengen nyoba ugaa ah....

Balas

Mas,..ijin comot ttg iklan bannernya?
Uji Coba blog anyar, thanks.

Balas

Mas nanti blognya jadi tambah berat gak ya? Thanks

Balas

sangat membantu sekali,,,,
tpi saya mau tanya, bgaimana memasang banner samping kiri atau kanan pada web zen cart ?
mohon pencerahannya

salam www.didim-computer.com

Balas

untuk web berbasis php saya tidak dapat membantu sepenuhnya..
kalo untuk dasarnya saja, CSS dari kode di atas taruh di stylesheet dan js serta HTMLnya bisa taruh di index.
namun untuk membuat iklan berada di sebelah kanan dan kiri perlu membuat elemen baru lagi.

Balas

bagus nih.. ijin sdot gan....

Balas

newbe nyimak aja dh

Balas

kalau sudah di pasang selanjutnya apa mas?
tidak ada yang perlu di edit ya????

Balas
avatar
Anonymous

ada contohnya gak ?

Balas

Kunjungi kuliah-rumus.blogspot.com gan Blog baru ada pasang iklan gratis

Balas

Terima kasih infonya gan., sangat bermanfaat buat saya., rencananya saya mau buat space banner iklan di http://simpleitcom.blogspot.com/

Balas

Thanks infonya sgt bermanfaat.. keep sharing :)

Balas

Terima kasih infonya,,izin pakai/visit: http:// readyticket.blogspot.com

Balas

ijin nyoba mas bro, saya sangat tertarik dengan artikel ini,

kalo ada waktu kunjung balik mas bro
http://muba-sky.blogspot.com/
terimakasih

Balas

wah lumayan ya mas, saya coba deh mas

silahkan kunjungi balik ya mas kalau berkenan
http://ayokepo.blogspot.com/
atau
http://eka-designs.blogspot.com/

Balas

mas, saya masih kurang paham..
kunjungi blog saya donk..
hhehe
apa masih ada yang kurang ya..

Balas

makasih artikelnya bermanfaat, saya akan coba di blog saya perawatanwajah.co.id

Balas

asik gan
http://tokoobatherbal23.com/

Balas

di tunggu artikel menarinya
http://apotekacemaxs.com/

Balas

sedotwc-jakartautara.com

Balas

Theme blog ini apa namanya gan?

Balas

Luar Biasa kang... singkat padat jelas...
ohya kalau kita ga pakai javascript apakah tetap bisa berjalan ? karena saya sendiri tidak menggunakan javascript untuk membuat Space Iklan seperti ini.

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Space Banner Iklan di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode