cara membuat widget space iklan text

Space iklan sangat berguna buat para bloger khususnya iklan text, cara membuat widget space iklan text dihalaman blog ini tidak terlalu rumit, sebab hanya memakai code tag html yang standart. Buat para bloger mania yang memiliki program bisnis online dan lain sebagainya, widget ini sangat cocok untuk anda. Widget space iklan text ini valih html 5 dan CSS 3, serta menganut sistem penulisan link yang SEO Friendly. Oke saatnya kita menuju TKP untuk mewujudkannya, Silahkan lihat gambar demonya, atau bila anda ingin melihat widget ini terpasang di halaman blog, silahkan anda klik icon DEMO dibawah ini dan lihat sisi sebelah kanan halaman demo.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code </head>
4. Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Widget space iklan text
By : Rivai Silaban | Blog Design
Update : Sabtu, 21 September 2013
******************************************/
#BDRSSPACE-iklantext {
width: 280px; /* lebar Widget */
height: 365px; /* Tinggi Widget */
border:solid #B6B6B6 1px;
background-color: #FFFFFF;
padding:0px 10px 10px 10px;
}
#BDRSSPACE-iklantext .advertise {
height: auto;
padding:10px 0;
}
#BDRSSPACE-iklantext .text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
cursor: default;
}
#BDRSSPACE-iklantext .text-title a {
font-family: Georgia;
font-size: 12px;
color: #000099;
line-height: 1.7em;
text-decoration: underline;
}
#BDRSSPACE-iklantext .text-title a:hover {
color: #FF0000;
text-decoration: none;
}
#BDRSSPACE-iklantext .text-link a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #006600;
text-decoration: none;
}
#BDRSSPACE-iklantext .text-link a:hover {
color: #009900;
text-decoration: none;
}
#BDRSSPACE-iklantext .logo {
padding : 3px 15px;
border: solid #666666 1px;
background-color:#000000;
border-radius: 10px 0 0 0;
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
float: right;
margin-right:-11px;
margin-top:-14px;
cursor: default;
}/*** Blog Design CSS and ***/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar kanan halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .

<!-- kode iklan tart -->
<div id="BDRSSPACE-iklantext">
<!-- kode iklan 1 -->
<div class="advertise">
<div class="text-title">
<a href="#" target="_blank" title="Link Advertise Here">Link Advertise Here</a></div>
<div class="text">Iklan text anda disini<br/>Bila anda berminat untuk memasang link iklan text diblog ini silahkan kontak admin</div>
<div class="text-link"><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="link demo 1">www.demo-1.com</a></div></div>
<!-- kode iklan 2 -->
<div class="advertise">
<div class="text-title">
<a href="#" target="_blank" title="Pasang iklan murah">Pasang iklan murah</a></div>
<div class="text">Iklan text anda disini<br/>Bila anda berminat untuk memasang link iklan text diblog ini silahkan kontak admin</div>
<div class="text-link"><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="link demo 2">www.demo-2.com</a></div></div>
<!-- kode iklan 3 -->
<div class="advertise">
<div class="text-title">
<a href="#" target="_blank" title="Hubungi admin untuk pasang iklan">Hubungi admin untuk pasang iklan</a></div>
<div class="text">Iklan text anda disini<br/>Bila anda berminat untuk memasang link iklan text diblog ini silahkan kontak admin</div>
<div class="text-link"><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="link demo 3">www.demo-3.com</a></div></div>
<!-- kode iklan 4 -->
<div class="advertise">
<div class="text-title">
<a href="#" target="_blank" title="Rp 100.000 / bulan">Rp 100.000 / bulan</a></div>
<div class="text">Iklan text anda disini<br/>Bila anda berminat untuk memasang link iklan text diblog ini silahkan kontak admin</div>
<div class="text-link"><a href="http://rivai-silaban.blogspot.com/" target="_blank" title="link demo 4">www.demo-4.com</a></div></div>
<span class="logo">Ads Blog Design</span>
</div>
<!-- kode iklan end -->

Keterangan Code

• Untuk kode CSSnya warna ungu [ Lebar = 180px dan Tinggi = 365px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
• Untuk tulisan warna HIJAU ganti dengan text iklan anda
• Tulisan kode warna MERAH ganti dengan URL iklan anda.
• Kode tulisan warna BIRU adalah judul iklan text
• Kode tulisan warna KUNING ganti dengan link URL iklan anda.
  

Kesimpulan

Widget space iklan text ini berguna buat para bloger mania yang ingin membuat iklan text di halaman blognya, Code tag html valid HTML 5 dan CSS 3 serta memiliki sistem link yang SEO Friendly, dan code yang ringan.

kesayangan anda, bila anda mengalami masalah dalam pemasangan script, CSS dan tag HTMLnya pada halaman blog anda silahkan share bersama saya melalui form komentar dibawah ini, dengan senang hati saya akan membantu anda.

Widget Space Iklan Text
Sabtu, 21 September 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 9:19 AM