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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjprxXqnn0dsoNhSDSJabD9pEV1w2o5OxE20KD0MVSx7TyhRlvlw57yQSmAkc6fJC_OMhq54ZCHiS-8f1mgxeimFIKZYGyZGbiLpqvREcjkNcwwBEcXCgGlvOplT_317YTpuG4TBZVLto/s1600/banner1.gif' title="banner0"/></div>
<div class='bdbox_image kanan'><img alt="banner1" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjprxXqnn0dsoNhSDSJabD9pEV1w2o5OxE20KD0MVSx7TyhRlvlw57yQSmAkc6fJC_OMhq54ZCHiS-8f1mgxeimFIKZYGyZGbiLpqvREcjkNcwwBEcXCgGlvOplT_317YTpuG4TBZVLto/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.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

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