Dari judulnya tentu sobat blogger tahu apa yang dimaksud dengan "Menu Navigasi". Ok, Dari Gambar di atas merupakan preview dari tutorial kita kali ini !!!
Bila sobat Blogger yang ingin mengetahui pasti bagaimana bentuk aslinya, silahkan ceck pada link ini : Preview
Bagaimana ? Menarik bukan, Apalagi bagi sobat yang ingin mempercantik halaman blognya !!!
Jika berminat maka silahkan simak dan ikuti cara saya berikut :
Nah berikut "Membuat Menu Navigasi Dengan Tooltips" pada template blogger:
1. Login pada Blogger
2. Masuk ke bagian Layout, kemudian ke bagian Edit HTML
Back up Template dengan cara Mengklik : Download Template Lengkap
Setelah itu, beri tanda cek pada .
3. Copy Script dibawah ini dan Paste Setelah / dibawah kode <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
4. Copy kode CSS dibawah ini dan Paste Sebelum / Diatas ]]></b:skin> :
.menu2 {
margin-top: -17px;
padding: 0;
list-style: none;
}
.menu2 li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu2 a {
padding: 14px 10px;
display: block;
color: #CCF2FF;
width: 136px;
text-decoration: none;
font-weight: bold;
background: url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S-szw7XJKkI/AAAAAAAAAxA/M6Wo1hjr5Yc/s1600/button.gif) no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url(http://4.bp.blogspot.com/_QeR8kbaWhLU/S-ssv2cHXKI/AAAAAAAAAwo/oBcoHmjBu1c/s1600/black_arrow.png) no-repeat;
width: 180px;
height:35px;
position: absolute;
top: 25px;
left: -25px;
text-align: center;
color:#fff;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
Note : Pada teks berwarna merah, anda bisa merubahnya sesuai dengan lebar blog anda !
5. Copy kode dibawah dan letakkan ditempat yang anda inginkan (contoh dibawah Header) :
( Jika Anda Belum Tahu posisi Header yang pasti, anda bisa mensearch nya secara teliti dan mengetahui posisi script header dan meletakkan script ini di bwah script header tersebut )
<ul class="menu2">Note : : Url yang akan dituju
<li>
<a title="Go to homepage" href="/">Home</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">Tutorial</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">JQuery Widget</a>
</li>
<li>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">CSS Editing</a>
</li>
</ul>
: Nama Tampilan pada Navigasi
: Ganti dengan kalimat penjelasan yang nantinya muncul di toolstip tersebut
Jika Anda merasa navigasi anda kurang anda bisa menambahkan script di bawah :
<li>Letak dibawah kode </li> pada script sebelumnya
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">Informasi</a>
</li>
6. Simpan Template Anda tersebut !!!
Selamat Berkreasi !!! Semoga Berhasilll !!! Jangan Lupa Komentarnya Yach !!!
Thanks to : jQuery Tutorials for Designers
Hapia Mesir
24 comments:
Salam kenal sobat, saya minta izin untuk mempelajari script tutorial ini, a good post.
Oh ya, sobat minta izin lagi neh jadi followers blognya.Kalau ada kesempatan, silahkan mampir kerumahku.
wahhh menunya muncul melayang gtu iia...?!?!?! tips nya keren... saiia suka sama kursornya :)
@Anton
Y sob silahkan !!!! Nanti saya follow balik, insya allah !!!
@genial
y silahkan di coba sob !!
jika mempunyai kendala ayo kita diskusikan bersama !!!
apakah ini berpengaruh terhadap berat blogger pada saat di buka nggak ?....
soalnya blog saya sudah cukup berat
@ Gudang Ilmu
tergantung sih sob !!!
Tpi jika anda berpandangan bahwa ini bisa mempercantik blog anda !! mungkin anda akan mencobanya sob !!!
Silahkan di coba ajha dlu !!!
wah bagus juga nih sob, ijin disimpan dulu yah...
tipsnya bagusss buangettt... jadi pengen nyoba nihhh ;)) bdw jangan lupa kunjungan baliknya !!
:D keren nih sob kapan2 aq buat template dengan tooltip ini
Thanks infonya ya sob...aku cobain dah....
Kaya gimana contohnya sob???Aku masih newbie nih...ga ngerti gitu....Ingin nyoba sih cuma ingin tahu kaya gimana hasilnya...
@ Roxx
yupt sob !! silahkan !!!
@ ami mizuno
Sip sob !!! Thanks Sudah mmpir ke blogku !!!
@ komunitas oejoeng
Silahkan sob !!!
@ Bisnis Simpel di Internet
Silahkan sob !! Semoga Berhasil !!
@ Fresh Info
Silahkan sob !!! anda bisa melihat previewnya di :http://ict-smansa-pku.blogspot.com/
hohohoho.. gokil oom..
masih kurang ngerti, harus di ulang2 bacanya nih..
overall, nice posting..
keep posting gan!! :D
infonya di simpan...^^
Mantep pisan uey langsung dioprek dech, tapi btw klo titlenya biar kgk double gitu bs kgk ya sob coz ane juga lom coba pasang nich hehehe...:D
bermanfaat infonya sobat, slm knl...
wow kayae keren an ini daripada punya q hehehe
@ Drwbook
Sip dech buat sobat Darwin !!!! Smoga berhasil, bila ada pertanyaaan silhkan di tanya !!!
@ Tour, Food, and Health
Silhkan sob !!!
@ infophone-kdr
hmmm... ntar ane coba sob !!!!
@ AdityaBlogsphere2
hahaha.... silahkan di coba sob, smoga bermanfaat !!!
@ penghuni60
thanks sob !!! silahkan do coba !!!
nice info gan... :D
@ Berbagi Informasi
sma2 sob !! smoga bermanfaat !!
mantap sekali nih tutorialnya, sangat bermanfaat sekali ilmuntya ,aku copas dlu ya scrif nya, boleh kan ya
mantap jg nih tutorialnya, sangat bermanfaat gan, lam kenal aja gan langsung ke tkp
:: Komentar Anda ::
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!
[[ Form Komentar Klasik ]]