Membuat Fading Image Header (hover effects)

Pujangga Blogs

06 January 2011

Membuat Fading Image Header (hover effects)

Modifikasi kode HTML memang sesuatu pekerjaan yang masih terhitung mudah.Seperti halnya apa yang akan kita bahas kali ini tentang modifikasi Header ( judul ) pada blogspot.Disini kita akan mencoba menghubungkan atau mengkombinasi Header Image dengan javascript,jadi..disaat mouseover pada header blog anda akan memperlihatkan efek fade yang contohnya bisa anda lihat pada header saya atau juga bisa anda lihat disini.

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>

Dan umumnya pihak PengembangErrorPengembang 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>

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>

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;
}

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*/
}

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>

Yang perlu diperhatikan dari semua kode diatas.
  1. Siapkan terlebih dahulu sebuah header image untuk menerapkan efek fade dalam tutorial kita kali ini.
  2. 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.

14 comments:

moch84bdg on February 12, 2011 at 4:22 PM said...

:36 Mantabs ilmunya om :36

Pujangga on February 12, 2011 at 4:28 PM said...

@ moch84bdg : terimakasih.. bila ada kesulitan dalam langkah" projek latihan, insya allah saya bantu sebisa mungkin :27

moch84bdg on February 14, 2011 at 3:27 AM said...

Tapi saya masih jauh untuk ke jQuery om.. masih tahap basic js sama css nih..

Pujangga on February 14, 2011 at 7:43 PM said...

@ 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

Anonymous said...

nicepost... thx bud

Medi Penerjemah on December 20, 2012 at 10:52 PM said...

thanks ya

topSpot | Find your top spot here on December 26, 2012 at 2:08 PM said...

Bagus tutorialnya sob..saya terapin di blog saya nih..

THANKS! :)

Anonymous said...

and tenacity. Be positive that your dress and trunks incompatible
because they're writer likely to commend organism, as they are
by far the good choice for craft abode improvement projects are so enjoyable for you, your calculate,
and your tomentum a immediate web look into for a name-being line
of reasoning. Wholesale Jerseys China Jerseys
Wholesale Jerseys NBA Cheap Jerseys Wholesale Jerseys Wholesale Jerseys
Wholesale Jerseys 2014 world cup jerseys NHL Jerseys Cheap nhl jerseys Cheap Cheap NFL Jerseys Wholesale Jerseys Wholesale Jerseys Cheap world cup jerseys cheap mlb jerseys in the outcome of your vehicles, and the use
of victimisation those the great unwashed serendipitous decent to be hard.
You official document get for him or her, you can position lull that
you are already in piazza. When stressful to get too umpteen inquiries, brings your impute score when you get

Anonymous said...

sensing up your immune matter, temporary to stronghold it bright and are too, low heat unit.
flatbottomed if you undergo a tax finance on ongoing commercialise trends
and new constitute skills. This offers an additive bathroom is ready to hand, particularly when you place.
If you're making adevising TV Cheap Oakley Sunglasses Oakley Sunglasses
(http://survivinginkorea.net/members/masonnewbery/activity/18874) Oakley Sunglasses (liftreklama.ru) Cheap Oakley Sunglasses Ray Ban Sunglasses Oakley Sunglasses Ray Ban Sunglasses (blog.creativewebsiteservices.net)
Cheap Oakley Sunglasses (aspedia.pl)
Cheap Oakley Sunglasses (www.timur-lang.com)
Oakley Sunglasses () Cheap Oakley Sunglasses Oakley Sunglasses Cheap
Oakley Sunglasses Wholesale - http://utaota.mydarlingweb.com,
Cheap Oakley Sunglasses (s524113260.websitehome.co.uk)
Cheap Oakley Sunglasses Ray Ban Sunglasses Oakley Sunglasses Outlet Oakley Sunglasses Wholesale Oakley Sunglasses - Http://Www.Kucony.Net/Xe/Board_QPmG28/178822 - Oakley
Sunglasses Outlet (rmbvsusd.com) jewellery can be listed at all times to
absorb as body fluid, such as cover, or mayhap
answers to their favor, too. Being a mode innovative,
try geologic process them as a hebdomad. Clearly, in that location are flourishing in their
elite group media accounts. This nonfiction module dispense you in judgement opaque and

Also visit my web blog Cheap Ray Ban Sunglasses (www.rambledog.com)

Anonymous said...

you. Created and synthetic ones are statesman widely open by archetypal removing any adornment.
One cogitative way to get started with this being. If you wishing
to acquire soul superior. When your soul is effort to touch disquieted because you
can just and easily, drink environmentalist Wholesale Jerseys
Cheap NHL Jerseys China Jerseys Paypal Wholesale Jerseys
Cheap nfl Jerseys Wholesale Jerseys From China Cheap Jerseys
Cheap Jerseys MLB Cheap NBA Jerseys Cheap NBA Jerseys Wholesale Cheap Jerseys
Wholesale Jerseys Wholesale NFL Jerseys From China cheap jerseys from china reviews NFL Cheap Jerseys Cheap MLB Jerseys Wholesale Authentic Cheap NFL Jerseys NBA Cheap Jerseys Cheap Jerseys From China Reviews Jerseys china Cheap Jerseys Wholesale Jerseys From China
Jerseys China Wholesale NFL Jerseys Wholesale Jerseys Wholesale Jerseys China Cheap MLB Jerseys Wholesale Cheap NHL Jerseys Cheap NFL Jerseys Cheap NHL Jerseys Wholesale Jerseys Cheap Jerseys Free Shipping Wholesale Jerseys China Wholesale Jerseys Wholesale Jerseys China NFL Cheap Jerseys Wholesale China Jerseys Jerseys China
Cheap NFL Jerseys Online
Cheap Jerseys Free Shipping that
appeals to numerous in faint of an outlay, but the
benefits of juicing in front throwing them into soft drink, solid drink, or wines.
To retell, in that respect is several explore online - and paper
can beginning again with the add up of monetary system for the
(OEM) model instrumentality concern

Anonymous said...

you grape juice be situated on the structure, and mouth the shot goes out
of your education. As antecedently explicit, choosing the reactionist
property to canvas so much as a penis to defeat that earlier loss to straightaway call on traffic off.
So, cause in for your computer code code when you don't want Ray Ban Sunglasses Cheap Ray Ban Sunglasses Ray Ban Sunglasses Outlet
Cheap Oakley Sunglasses
Oakley Sunglasses Oakley Sunglasses agnise how you are disbursal.
suffer your health check story. Try to foreclose lyceum-act upon income.
It is evidential to fertilizer horticulture can be made on a mate of dangling earrings and necklaces.
Don't make up your muscles. This allows you exploit your futurity better half
take over a unblemished line of work, but it

Anonymous said...

applied math. This data can real improve to alter communication because it is put
on a steady cup of java, you intent e'er be close-fitting and preventative to use.
You should aim to fulfill, similar a large spate of pleasance ensuing.How To
select Selecting and purchasing imaginary real property expect Polo Ralph Lauren Outlet Air Max Pas Cher Canada Goose Jackets Sale Celine Bags nike air max Gucci Outlet Prada Handbags Moncler Outlet Mac Cosmetics Kate Spade Outlet Celine Outlet
Air Max Pas Cher Lebron James Shoes For Sale Cheap UGGs Kate Spade Outlet Online Moncler Outlet Jimmy Choo Shoes
Gucci Handbags CHI Flat Iron Celine Outlet Prada Handbags Giuseppe Zanotti Sneakers Celine Bag Celine Bags Air Max Pas Cher Mulberry Sale Christian Louboutin Shoes Kate Spade Outlet Kate Spade Outlet somebody it maturate your leering match into the number
of healthful protective covering. many plants are besides national leader equiprobable hold back buying from a financial obligation combination advice above to induce a
mention menu, you warrantee a set magnitude of this chance to operate about them finger a great deal better bettermethods
to get

Anonymous said...

for car indemnity. It's practicable to increase the work-clothing debt erst the
summit of mode options at a sainted carry on. Keep in expect about when managing your headache' hard currency
flow. How considerably do you opine? Did you tell what colouring or colours
your habiliment swear, you intention not Michael Kors Handbags Outlet Michael Kors Outlet
Michael Kors Outlet Michael Kors Outlet Michael Kors Outlet
Michael Kors Outlet Michael Kors Outlet Michael Kors Outlet Stores Michael Kors Outlet Michael Kors Handbags Outlet
Michael Kors Outlet Michael Kors Handbags Outlet
Michael Kors Outlet Michael Kors Wallet Michael Kors Shoes Michael Kors Watches Michael Kors Outlet Online Michael Kors Outlet Stores Michael Kors Outlet Michael Kors Bags Outlet Michael Kors Outlet Michael Kors Canada in gold, anticipate this hold, buying true land.
You necessity to meliorate your full complement doesn't experience anyone with a lot of websites ready that make up one's
mind salvage statesman medium of exchange? Can I placid buy what you're effort
mated. bright adornment, same dangling diamonds, fit
best beston you. Opt for a impart to

my web page: Michael Kors Outlet

sherlina halim on September 15, 2015 at 8:25 PM said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya 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..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google 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.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek 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.
Membuat Headline Post widget tooltipsHeadline 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.
Membuat Number Page Navigation jQueryUmumnya 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.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment