RSS

>Cara Membuat Kotak Banner Iklan di Blogspot

12 Jun

>Sekedar kilas balik saja, template yang saya pakai sekarang ini hasil obrak abrik dari template bawaan blogger yang dua kolom. Sampe suatu saat pengen jadi 3 kolom. Dan kemudian kok pengen tau caranya masang kotak iklan di sidebar. Setelah saya googling saya nemu dari postingannya o-om.com tentang cara bikin kotak iklan atau box banner. Kalo mau tau sumber aslinya ceklik [di sini] . Setelah saya coba, loh ga muncul, akhirnya saya iseng iseng view source template ternyata musti ada sedikit editing peletakan.
Umumnya kotak banner iklan ini sudah bawaan asli dari template. Tapi gimana yang udah terlanjur make template yang hanya ada dua sidebar? Jika sidebar anda hanya dua maka perlu ditambah satu sidebar lagi untuk meletakkan kotak iklan ini.

Langkah-Langkah Membuat Kotak Banner Iklan

Masuk halaman Edit HTML , tidak perlu mencentang Expand Widget .
Cari kode #sidebar anda, misal kode sidebar anda
#sidebar-right {
width:135px;
padding:0px 10px 10px 10px;
float:right;
background:#fff;
}

Copy kode berikut dan letakkan di bawah kode sidebar tersebut.
#sidebar-ads {
width:300px;
margin-bottom:10px;
float:right;
background:#fff;
padding:10px;
}
.ads-sidebar{float:left; margin:0pt; padding:0pt}

#sidebar-ads ul li ul{list-style-type:square; margin-left:1.5em; padding:0; border:0}
#sidebar-ads ul li ul li{border:0}
#sidebar-ads .ads-sidebar ul{background:transparent none repeat scroll 0% 50%; border:1px solid transparent; float:left; margin:0pt; padding:10px 0pt 10px 2px; width:300px }
#sidebar-ads .ads-sidebar ul li{display:inline; list-style-type:none; margin:0pt; padding:0pt}
#sidebar-ads .ads-sidebar ul li a:hover{border-bottom:none; list-style-type:none}

.ads-sidebar ul{margin:0px; padding:0px}
.ads-sidebar ul li a{float:left}
.ads-sidebar img{margin:0px 0px 5px 8px; border:1px solid #CCC; padding:2px}
.ads-sidebar img:hover{border:1px solid #999}

Perhatikan yang berwarna merah . Sidebar tempat meletakkan banner iklan ini lebarnya sekitar 2 kali lebar sidebar yang kecil yang saya kasih warna hijau , jadi ganti kode warna merah tersebut sesuaikan dengan lebar sidebar anda.

Kalau sudah buat elemen baru. Cari kode berikut ini

Copy paste kode di bawah ini, dan letakkan di bawah kode main-wrapper tersebut.

Kemudian SAVE

Anda dapat mengganti yang warna hijau dengan link anda, dan yang berwarna merah dengan source banner anda. Anda bisa mengganti dengan gambar anda tentunya berukuran 125×125 pixel, kemudian upload di photobucket (atau image hosting lain)

Banyaknya banner bisa anda tambahkan dengan menambah (copy paste) kode berikut

  • Buat Mas Toni Jauhari, demi dirimu ini tak posting wekekeke. Halo semua, sudah mumet? Kalo mumet jangan di baca langsung komen aja wes. Daku juga mumet hikz…

    Advertisements
     
    1 Comment

    Posted by on 12/06/2009 in Uncategorized

     

    Tags:

    One response to “>Cara Membuat Kotak Banner Iklan di Blogspot

    1. Hakim Bayasud

      27/12/2010 at 10:58 am

      >gmana caranya kok g bisa dan kata2 klik disni juga g bisa di buka.www.hakimbayasud.co.cc

       

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

     
    %d bloggers like this: