Jumat, 30 November 2012

Cara Membuat Stripe Bar Stripe Ad di Blogger

Apakah Anda pernah melihat sebuah blog memiliki navbar sendiri seperti gambar di bawah? Nah, kali ini kita akan belajar untuk membuat navbar seperti itu. tutorial kali ini ane kasih judul Cara Membuat Stripe Bar Stripe Ad di Blogger. Tidak susah ko cuma agak ribet , akakakak.. becanda guys. ok sebagian besar juga menyelesaikannya dalam waktu 5 menit (tergantung pada kecepatan dan keterampilan masing-masing) .
Memasang Stripe bar / Stripe Ad kayak screenshoot itu tidaklah sulit, yuk kita simak yah...


1. Langkah Pertama
Masukkan code CSS dibawah ini di atas kode ]]></b:skin>

/*-- (Kunjungi http://mbahyar.blogspot.com/2012/10/cara-membuat-stripe-bar-stripe-ad-di.html ) --*/
<!-- SCRIPT STRIPE BAR - MULAI -->
#mta_bar {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvOi_spCG1n5FQg7tDkqVObDJSpyI0i9ZlHsb6_hbs-zlLJ14lXB7yhK9E9cOs62tQk0UCVgpaNB8Anbl4b_j984K7e1sFsYHZhvImR4AKxPvkZ65yrQA16wDWE0lCZdWQqDKzmusu-S5/s400/wow.gif);
border-bottom: 0px solid #808080;
margin: 0 0 15px 0;
padding: 4px 0;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 20px;
overflow: auto;
position: fixed;
}
* html
#mta_bar{ /*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { margin:3px;float: left;
text-align: center;
font-family: Georgia;
font-size: 12px;
font-weight: bold;
font-style: normal;
color: #FFFF66;
width:92%;
}
#mta_bar .right {margin:3px;
font-family: Georgia;
float: right;
text-align: center;
font-weight: normal;
font-size: 10px;
letter-spacing: 0;
width: 30px;
white-space: nowrap;
}
#mta_bar .right a {font-size: 10px;
color: #ffff66;
text-decoration: none;
}
#mta_bar .right a:hover {font-size: 10px;
color: #ffff66;
text-decoration: none;
}
#left_bar a { text-decoration: none;
color: #ffff66;
}
#left_bar a:hover { text-decoration: none;
color: #ffff66;
}

*Ganti tulisan berwarna merah dengan background kalian
*Ganti tulisan kuning untuk mengatur tingginya

2. Langkah Kedua
Kalo udah cari kode </head> dan taruh script ini di atasnya.

<!-- CODE STRIPE BAR -->
<script src='http://kangsunu.googlecode.com/files/stripe_bar_blogger.js' type='text/javascript'></script>


3. Langkah Ketiga
Cari kode <body> dan taruh kode ini di bawahnya!

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://mbahyar.blogspot.com/'>Welcome to Mbahyar's blog !!!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;Kang Sunu - http://kangsunu.blogspot.com/ &apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://i36.tinypic.com/2dq2gx.gif' style='cursor:hand;cursor:pointer;'/></span></div>

*Ganti tulisan-tulisan itu sesuai blog kamu, untuk tulisan yang berwarna kuning ganti dengan URL tanda close yang kamu punya...
nah itu dia Cara Membuat Stripe Bar Stripe Ad di Blogger

Alhamdulillah Akhirnya selesai juga, jangan lupa disimpen gan!
di

Tidak ada komentar:

Posting Komentar