Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Wednesday, October 16, 2013

space iklan

Space iklan untuk blogger mania, cara membuat widget space iklan ini tergolong mudah sebab saya sudah mengedit semua kodenya agar lebih mudah dipahami oleh para bloger. Widget space iklan kali ini memiliki tampilan yang menarik dengan tampilan sliding door sehingga membuat kesan widget space iklan ini semakin unik. Widget space iklan sliding door ini akan menambah kesan elegan pada halaman blog anda. Oke saatnya kita menuju TKP untuk mewujudkannya, silahkan anda klik icon DEMO dibawah ini untuk melihat tampilan asli dari widget space iklan sliding door ini.

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 Animasi
By : Rivai Silaban | Blog Design
Update : Rabu, 16 Oktober 2013
******************************************/
.BDRSbox_iklan{
position:relative;
width:300px;
height:220px;
overflow:hidden;
background: black;
}
.bdbox-iklan{
position:absolute;
}
.bdbox_image {
position:relative;
overflow:hidden;
width:50%;
float:left;
}
.kanan img{
margin-left: -100%;
}/* END CSS */


Install Script


  1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
  2. Pada Edit HTML template anda silahkan cari kode </head>
  3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
  4. Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.

<!-- Rivai Silaban | BLOG DESIGN script space iklan start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/213335011940/easing.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.BDRSbox_iklan').hover(function(){
var width = $(this).outerWidth() / 2;
$(this).find('.kiri').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000});
$(this).find('.kanan').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000});
}, function(){
$(this).find('.kiri').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
$(this).find('.kanan').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
});
});
</script>
<!-- Rivai Silaban | BLOG DESIGN script space iklan End -->

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 class='BDRSbox_iklan'>
<div class='bdbox-iklan'>
<div class='bdbox_image kiri'><img alt="banner0" src='http://1.bp.blogspot.com/-pBHxtF6NLUQ/Ul2Mmd1cugI/AAAAAAAAB50/EhnfmUXEXTc/s1600/banner1.gif' title="banner0"/></div>
<div class='bdbox_image kanan'><img alt="banner1" src='http://1.bp.blogspot.com/-pBHxtF6NLUQ/Ul2Mmd1cugI/AAAAAAAAB50/EhnfmUXEXTc/s1600/banner1.gif' title="banner1"/></div>
<div class='clear'></div>
</div>
<p style="padding:10px; text-align:center; font-family:Verdana; font-size:12px; color:#FFFF00">
Untuk mendapatkan space iklan pada halaman blog ini silahkan kontak admin, kami akan secepatnya merespon permintaan anda.</p>
<p style="padding:10px; text-align:center; font-family:Verdana; font-size:12px; color:#FFFF00">
Atas nama : Rivai Silaban<br/>
Email : contact@gmail.com<br/>
Hp : 0123 - 4567 - 8911<br/>
</p>
<p style="padding:2px; text-align:center; font-family:Verdana; font-size:12px; color:#FFFF00">
Ukuran banner 300 X 220<br/>
Rp 500.000 / Bulan</p>
</div>
</div>
<!-- kode iklan end -->

Keterangan Code
  • Ukuran Banner 300px X 220px
  • Untuk tulisan warna HIJAU ganti dengan text iklan anda

Kesimpulan

Widget space iklan banner ini memiliki tampilan animasi yang unik, dengan code script dan html yang ringan cocok untuk halaman blog kesayangan anda.

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

Widget Space Iklan Banner animasi
Rabu, 16 Oktober 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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 9:27 AM

6 comments :

  1. wow..keren banget mas, cuma..kira2 ada nggak yang mau pasang iklan di blog saya ya ???

    ReplyDelete
    Replies
    1. hehehh saya rasa ada, yang penting kita harus meningkatkan trafik pengunjungnya biar para pengiklan senang buat iklan di blog kita... suatu saat pasti ada tuh sob sabar aja..

      thx atas pendapatnya..

      Delete
    2. Bagus sih gan, tapi setelah saya coba ternyata loading blog jadi lebih berat sehingga saya lepas lagi..
      Oya gan, kalau bikin widget Kategori berupa Folder Main Category yang kalo di klik keluar Sub Category nya (seperti yang biasa dipakai situs direktori php) gimana ya gan?

      Delete
    3. oh untuk web direktory yang memakai hosting blog tidak cocoklah soalnya memakai Jquery, tapi bila hosting khusus kita boleh menyimpan scriptnya sendiri..

      apa boleh diberi contoh linknya menunya gimana ?

      Delete
  2. Like Like ...
    bermanfaat banget sob ... :D

    kunjung balik ya ... www.ilmukomputer-pemula[dot]blogspot[dot]com

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog