Pada kesempatan kali saya akan membuat artikel "Tutorial Menambah Sidebar Di Atas Header"
fungsi sidebar sendiri adalah tempat menaruh widget" yg berisikan tentang informasi atau Link" selain itu juga sebagai penghias sebuah Blogspot . sebagai mana yg sobat bayangin .. bagaimana bila sebuah blogspot tidak ada widget .. ??
Header .. dari namanya sobat pasti sudah tahu "HEAD" adalah kepala .. berarti letaknya pasti di atas .. dan di blog ini Header di pakai sebagai tempat "Judul/Nama Blogspot sobat"
Dengan menambah Sidebar di atas header, sobat bisa memanfaatkan untuk menaruh Widget khususnya menu" horizantal ... bahkan bisa juga buat memasang iklan" .. pasti akan menarik perhatian .. terutama Search Engine Google [just Kiding]
Bila sobat tertarik , yuk ikuti tutor di bawah ini ..
1. Login ke blogger ==> Dasbor ==> template ==> Edit HTML ==> lanjutkan dan centang kotakan kecil di atas ..
2. Cari code ]]></b:skin> [gunakan F3 untuk mempermudah pencarian]
3. Bila sudah ketemu, letakkan Code di bawah ini, tepat di atasnya ..
#header-isor-divide {
clear:both;
}
.header-column {
padding: 10px;
margin :5px auto;
}
4. Cari lagi Code <div id='outer-wrapper'> atau <div class='header-outer'> [pilih salah satu tergantung template sobat]
5. Letakkan Code di bawah ini, tepat di bawahnya ..
<div id='header-isor-divide'>
<div id='header1' style='width: 100%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col100'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
6. Dan yg terakhir cari code </b:skin>
7. bila sudah ketemu, silakan letakkan code di bawah ini, tepat di bawahnya ..
script type='text/javascript'>
//<![CDATA[
/* Script from:http://giga-watt.blogspot.com/ */
$(document).ready(function(){
$('#tinycarousel').tinycarousel({
start : 1,
display : 1,
axis : 'x',
interval : true,
intervaltime: 3000,
animation : true,
duration : 1000,
callback : null
});
});
//]]>
</script>
<script src='http://kodegigawatt.googlecode.com/files/Tiny%20Carousel.js' type='text/javascript'/>
8. Click prantinjau , bila tidak ada yg error .. silakan Click "simpan template" dan lihat Hasilnya ..
Sampai di sini dulu Artikel ini , semoga bermanfaat untuk kita semua ..
Dan semoga Rahmat serta Hidayah-NYA selalu tercurah untuk kita semua .. Amin ..
Sumber : http://giga-watt.blogspot.com/
Tidak ada komentar:
Posting Komentar