Contoh kode HTML pada Header Blog saya adalah seperti ini.
<h1 id="header">
<span class="fake-hover"></span>
<a href="http://www.pujangga-adhitya.co.cc/">Pujangga BLogs</a></h1>
<span class="fake-hover"></span>
<a href="http://www.pujangga-adhitya.co.cc/">Pujangga BLogs</a></h1>
Dan umumnya pihak Pengembang
Pengembang Yang biasa kita sebut sebagai pembuat template Blogger. template Blogspot sudah menyisipkan kode HTML header seperti dibawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Pujangga BLogs (Header)' type='Header'/>
</b:section>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Pujangga BLogs (Header)' type='Header'/>
</b:section>
</div>
Namun saya edit menjadi seperti ini.
<div id='header-wrapper'>
<div align='center'>
<h1 id='header'><a href='http://www.pujangga-adhitya.co.cc/'>Pujangga Blogs</a></h1>
</div>
</div>
<div align='center'>
<h1 id='header'><a href='http://www.pujangga-adhitya.co.cc/'>Pujangga Blogs</a></h1>
</div>
</div>
Nah..sekarang saya coba untuk mengganti Kode CSS #Header (# biasa disebut dengan ID) menjadi seperti ini.
#header {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat; /*Image header 1*/
}
#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}
margin: 0;
padding: 0;
text-indent: -9999px;
width: 400px;
height: 225px;
position: relative;
margin-left: -1em;
background: url(header.jpg) no-repeat; /*Image header 1*/
}
#header a {
position: absolute; // This allows us to have
top: 0; // the anchor on top of the header
left: 0;
width: 400px;
height: 225px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}
Selanjutnya kita tambahkan kode CSS #header .fake-hover dibawahnya yang berfungsi sebagai efek Header.
#header .fake-hover {
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px; /*Image header 2*/
}
margin: 0;
padding: 0;
width: 400px;
height: 225px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(header.jpg) no-repeat 0 -240px; /*Image header 2*/
}
Nah..sejauh ini kita sudah menyelesaikan pengeditan kode CSS dan HTML.Sekarang waktunya kita menyisipkan kode javascript untuk menciptakan efek fade in / fade out.Pertama kali kita panggil dulu kode jQuery (javascript library) dan letakan di bawah kode <head>.
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
Setelah itu kita masukan perintah javascript ini dan letakan diatas kode </head>.
<script type="text/javascript">
//<![CDATA[
var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+"a").bind("mouseenter",function(){
$(selector+".fake-hover").fadeIn("slow");
});
$(selector+"a").bind("mouseleave",function(){
$(selector+".fake-hover").fadeOut("slow");
});
}
};
$(function(){
Header.addFade("#header");
});
//]]>
</script>
//<![CDATA[
var Header = {
// Let's write in JSON to make it more modular
addFade : function(selector){
$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));
// Safari dislikes hide() for some reason
$(selector+"a").bind("mouseenter",function(){
$(selector+".fake-hover").fadeIn("slow");
});
$(selector+"a").bind("mouseleave",function(){
$(selector+".fake-hover").fadeOut("slow");
});
}
};
$(function(){
Header.addFade("#header");
});
//]]>
</script>
Yang perlu diperhatikan dari semua kode diatas.
- Siapkan terlebih dahulu sebuah header image untuk menerapkan efek fade dalam tutorial kita kali ini.
- Sesuaikan lebar dan tinggi Header image dengan kode CSS agar mendapat hasil yang sempurna.
Untuk melengkapi tutorial ini...anda bisa download kode javascript yang nantinya bisa anda letakan di filehosting anda sendiri dan contoh dari kode html sebagai project latihan anda.
Download jQuery fading header effect
Semoga bermanfaat.
Seandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..
Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Bagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Efek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman. 
Headline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Umumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Untuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke 
5 comments:
:36 Mantabs ilmunya om :36
@ moch84bdg : terimakasih.. bila ada kesulitan dalam langkah" projek latihan, insya allah saya bantu sebisa mungkin :27
Tapi saya masih jauh untuk ke jQuery om.. masih tahap basic js sama css nih..
@ moch84bdg :
Memang sulit untuk mempeplajari JS, terlebih untuk menghafal setiap command yang berlaku pada JS. Maka dari itu dengan 1 jQuery plugin saja misalnya, bisa menghasilkan beberapa macam effect yang sesuai dengan command dari jQuery itu sendiri :25
nicepost... thx bud
Post a Comment
Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!