Cara Membuat Banner Pada Header di Blogspot
Sabtu, 12 Maret 2011
Cara Membuat Banner Pada Header di Blogspot, mungkin Anda pernah melihat pada suatu Blog yang menampilkan Banner pada Header yang Iklannya selalu berganti-ganti pada saat di reefresh ulang. untuk itu dalam topik kali ini akan dijelaskan mengenai cara membuat iklan Banner di header pada Blog.
Untuk membuat banner pada header di blogspot berikut langkah-langkahnya :
- Silahkan Anda login ke Akun blog kepunyaan Anda, Lalu pilih Rancangan - Edit HTML kemudian Kilik pada kotak dekat tulisan Expand Template Widget
- Kemudian silahkan Copy kode CSS berikut ini dan diletakkan sebelum kode ]]></b:skin> ( lalu sesuaikan ukuran dengan Template Anda)
#neobux {
margin-bottom:5px;
width:468px;
float:right; /* important to be same as image width */
height:60px; /* important to be same as image height */
margin:10px;
position:relative; /* important */
word-wrap:break-word; /* fix for long text breaking sidebar float in IE */
overflow:hidden; /* fix for long non-text content breaking IE sidebar float */
}
#neobuxContent{
width:468px; /* important to be same as image width or wider */
position:absolute; /* important */
top:0; /* important */
margin:0px;
padding-left:0px; /* important */
}
.neobuxImage{
float:left; /* important */
position:relative; /* important */
display:none; /* important */
} - Kemudian silahkan di Copy dan pastekan kode berikut setelah kode ]]></b:skin>
<script src='http://silahkan di ganti dengan url.googlecode.com Anda/js/jquery.min1.4.2.js' type='text/javascript'/>
<!--panggil slider banner Header-->
<script type='text/javascript'>
//<![CDATA[
<script src='http://silahkan di ganti dengan url.googlecode.com Anda/js/slideBannerHeader.js' type='text/javascript'/>
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.neobux=function(h){var e=this;var l=(h.timeOut!=undefined)?h.timeOut:4000;var g=null;var d=null;var k=true;var f=false;var i=a("#"+e[0].id+"Content ."+e[0].id+"Image");var b=a("#"+e[0].id+"Content ."+e[0].id+"Image span");i.each(function(m){a(i[m]).mouseover(function(){f=true});a(i[m]).mouseout(function(){f=false;c(true)})});var c=function(m){var n=(m)?(l/2):l;n=(k)?10:n;if(i.length>0){d=setTimeout(j,n)}else{console.log("Poof..")}};var j=function(){g=(g!=null)?g:i[(i.length-1)];var m=jQuery.inArray(g,i)+1;m=(m==i.length)?0:(m-1);var n=a(e).width()*m;if(k==true){if(!f){a(i[m]).fadeIn((l/6),function(){if(a(b[m]).css("bottom")==0){a(b[m]).slideUp((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}else{a(b[m]).slideDown((l/6),function(){k=false;g=i[m];if(!f){c(false)}})}})}}else{if(!f){if(a(b[m]).css("bottom")==0){a(b[m]).slideDown((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}else{a(b[m]).slideUp((l/6),function(){a(i[m]).fadeOut((l/6),function(){k=true;g=i[(m+1)];if(!f){c(false)}})})}}}};j()}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() { $('#neobux').neobux({ timeOut: 3000 }); });
</script>
<!--end slider banner Header--> - Lalu silahkan di cari kode berikut atau yang lebih mendekati/sama dengan :
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section> - Copy lalu pastekan kode berikut ini tepat dibawah kode </b:section>
<div id='neobux'>
<ul id='neobuxContent'>
<li class='neobuxImage'>
<a href='Silahkan di isi dengan alamat Url Affiliasi Anda'><img height='60' src='Silahkan di isi dengan Alamat Url Gambar Banner Anda' title='' width='460'/><span>Silahkan di isi dengan Nama Affiliasi Anda</span></a></li>
</ul>
</div>
Untuk keterangan yang Nomor 5 itu di isi dengan random satu buah banner saja dan namun bila Anda ingin memasang lebih banyak lagi Anda dapat menambahkan dengan mencopy kode yang sama seperti diatas yang berwarna HIJAU. Selamat mencoba........