Belajar Ilmu Komputer dan Internet

Cara Menambah Kolom Iklan Header ADS di Template Blogspot

Posted: 18 May 2010 09:55 AM PDT

Bagi Anda yang ingin memonetize website atau blognya, tidak salah bila mencoba program iklan yang bisa ditampilkan di blognya. Sebenarnya trik ini pernah di bahas dalam artikel Saya yang terdahulu yaitu Cara Menambah Kolom Iklan SIDEBAR ADS di Template Blogspot, cuma trik tersebut hanya menampilkan iklan di kolom sidebar saja. Nah kali ini, Saya ingin memberikan trik dengan Menambah Kolom Iklan di Header Ads website atau blog Anda.

Jumlah Kolom Iklan yang akan dibahas kali ini adalah 7 Kolom iklan dengan ukuran 125x125 dibawah header website atau blog Anda.

Untuk membuatnya, ikuti langkah - langkah dibawah ini :

1. Login ke blogspot, lalu masuklah ke halaman Layout atau Tata letak blog Anda dan klik Edit HTML ( jangan lupa untuk backup template terlebih dahulu ).

2. Lalu Anda copy kode dibawah ini :

3. Kemudian paste di atas <div id='main-wrapper'> atau <div id='main-wrap1'><div id='main-wrap2'> kalau template Anda adalah 3 kolom, Anda paste di atas kode ini <div id='side-wrapper1'> dan nanti kolom iklan tersebut akan berada di bawah header blog Anda, jadi tergantung template Anda karena masing-masing template, itu berbeda kode HTML nya

4. Langkah selanjutnya, Anda copy kode dibawah ini :

#sidebar-ads {
width:970px;
margin-bottom:5px;
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:970px}
#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 5px; border:1px solid #CCC; padding:2px}
.ads-sidebar img:hover{border:1px solid #999}

Nach di sini lebar Width tergantung juga pada template masing-masing, disini kebetulan template Saya memakai width 970px ( Anda tinggal merubahnya sesuai dengan lebar template ), demikian juga dengan margin dan padding, sesuaikan dengan yang Anda inginkan.

5. Lalu paste kode tadi diatas ]]></b:skin>

6. Klik SAVE, lalu lihatlah hasilnya

Oke sampai disini dulu pembahasan mengenai Kolom Iklan di website atau blog kita, semoga bermanfaat, dan Selamat mencoba.

Terimakasih.

Cara Menambah Kolom Iklan SIDEBAR ADS di Template Blogspot

Posted: 18 May 2010 04:41 AM PDT

Bagi Anda para blogger yang sudah tau cara menambahkan kolom Iklan ditemplate blogspot tentu tidak asing lagi dengan trik yang satu ini. Dengan bermodalkan tehnik coding kode HTML, Saya mencoba diterapkan di blog ini, dan ternyata berhasil. Selanjutnya Saya langsung share didalam artikel ini, karena trik ini cukup berguna bagi Anda yang ingin memonetize website atau blognya, yaitu menjadi Publisher dari Iklan-iklan yang akan dipasang.

Dengan adanya iklan ini, maka setiap pengunjung yang datang, tentunya merasa penasaran dengan banner iklan yang sudah di buat semenarik mungkin, dan melakukan klik disana, dan bila mereka berminat, maka akan terjadi sebuah transaksi online.
Sebagai tambahan, bila rekan-rekan blogger memiliki website atau blog yang sudah memiliki traffic yang cukup tinggi, ini bisa dijadikan tambahan penghasilan tentunya, karena dengan banyaknya kunjungan, maka kemungkinan mereka melakukan klik terhadap iklan yang ada, itu semakin besar.

Untuk banner yang nantinya akan tampil di website atau blog kita, adalah seperti gambar dibawah ini :

Dan langkah-langkah yang harus Anda lakukan untuk membuat kolom iklan tersebut adalah sebagai berikut :

1. Login ke blogspot, lalu masuk ke halaman Layout/Tata letak blog Anda dan klik Edit Html ( jangan lupa untuk selalu melakukan backup sebelum merubah Kode HTML untuk berjaga-jaga)

2. Lalu copy kode dibawah ini

<div id='sidebar-ads'>
<div class='ads-sidebar'>
<center><ul>
<li><a href='mailto:emailanda@gmail.com' target='_blank'><img border='0' height='125' src='http://kwangkxz.com/images/banneriklan.png' width='125'/></a></li>
<li><a href='mailto:emailanda@gmail.com' target='_blank'><img border='0' height='125' src='http://kwangkxz.com/images/banneriklan.png' width='125'/></a></li>
</ul></center>
</div>
</div>

3. Kemudian paste di atas

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}

5. Dan paste lagi di atas ]]></b:skin>

6. Klik SAVE

Semoga informasi yang Saya berikan ini bermanfaat bagi Anda semua.

Selamat mencoba dan Terimakasih.

computerization

Blogroll

Belajar Ilmu Komputer dan Internet

Belajar Ilmu Komputer dan Internet

0 comments:

Post a Comment

Labels

Archive