16 Mei 2010

Pin It

Membuat Menu Navigasi Dengan Tooltips


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">
<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>
Note :                 : Url yang akan dituju
                          : 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>
<a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">Informasi</a>
</li>
Letak dibawah kode </li> pada script sebelumnya


6. Simpan Template Anda tersebut !!!

Selamat Berkreasi !!! Semoga Berhasilll !!! Jangan Lupa Komentarnya Yach !!!

Thanks to : jQuery Tutorials for Designers
                  Hapia Mesir
Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

24 comments:

Klik Untuk Lihat Komentar

Anton on 16 Mei 2010 20.10 mengatakan...

Salam kenal sobat, saya minta izin untuk mempelajari script tutorial ini, a good post.

Anton on 16 Mei 2010 20.12 mengatakan...

Oh ya, sobat minta izin lagi neh jadi followers blognya.Kalau ada kesempatan, silahkan mampir kerumahku.

genial on 16 Mei 2010 20.15 mengatakan...

wahhh menunya muncul melayang gtu iia...?!?!?! tips nya keren... saiia suka sama kursornya :)

Mufi_ed on 16 Mei 2010 20.43 mengatakan...

@Anton
Y sob silahkan !!!! Nanti saya follow balik, insya allah !!!

@genial
y silahkan di coba sob !!
jika mempunyai kendala ayo kita diskusikan bersama !!!

Gudang Ilmu on 16 Mei 2010 21.13 mengatakan...

apakah ini berpengaruh terhadap berat blogger pada saat di buka nggak ?....
soalnya blog saya sudah cukup berat

Mufi_ed on 16 Mei 2010 21.27 mengatakan...

@ 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 !!!

komunitas oejoeng on 16 Mei 2010 23.12 mengatakan...

wah bagus juga nih sob, ijin disimpan dulu yah...

ami mizuno on 17 Mei 2010 10.10 mengatakan...

tipsnya bagusss buangettt... jadi pengen nyoba nihhh ;)) bdw jangan lupa kunjungan baliknya !!

Roxx on 17 Mei 2010 10.46 mengatakan...

:D keren nih sob kapan2 aq buat template dengan tooltip ini

Bisnis Simpel di Internet on 17 Mei 2010 12.24 mengatakan...

Thanks infonya ya sob...aku cobain dah....

Fresh Info on 17 Mei 2010 12.27 mengatakan...

Kaya gimana contohnya sob???Aku masih newbie nih...ga ngerti gitu....Ingin nyoba sih cuma ingin tahu kaya gimana hasilnya...

Mufi_ed on 17 Mei 2010 19.30 mengatakan...

@ Roxx
yupt sob !! silahkan !!!

@ ami mizuno
Sip sob !!! Thanks Sudah mmpir ke blogku !!!

@ komunitas oejoeng
Silahkan sob !!!

Mufi_ed on 17 Mei 2010 19.41 mengatakan...

@ Bisnis Simpel di Internet
Silahkan sob !! Semoga Berhasil !!

@ Fresh Info
Silahkan sob !!! anda bisa melihat previewnya di :http://ict-smansa-pku.blogspot.com/

Drwbook on 17 Mei 2010 20.09 mengatakan...

hohohoho.. gokil oom..
masih kurang ngerti, harus di ulang2 bacanya nih..

overall, nice posting..
keep posting gan!! :D

Tour, Food, and Health on 17 Mei 2010 20.09 mengatakan...

infonya di simpan...^^

infophone-kdr on 18 Mei 2010 11.16 mengatakan...

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

penghuni60 on 18 Mei 2010 14.22 mengatakan...

bermanfaat infonya sobat, slm knl...

AdityaBlogsphere2 on 20 Mei 2010 19.13 mengatakan...

wow kayae keren an ini daripada punya q hehehe

Mufi_ed on 23 Mei 2010 18.49 mengatakan...

@ 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 !!!!

Mufi_ed on 23 Mei 2010 18.51 mengatakan...

@ AdityaBlogsphere2
hahaha.... silahkan di coba sob, smoga bermanfaat !!!

@ penghuni60
thanks sob !!! silahkan do coba !!!

Berbagi Informasi on 24 Mei 2010 00.03 mengatakan...

nice info gan... :D

Mufi_ed on 13 Juni 2010 11.57 mengatakan...

@ Berbagi Informasi
sma2 sob !! smoga bermanfaat !!

obat asam urat on 18 Maret 2011 13.04 mengatakan...

mantap sekali nih tutorialnya, sangat bermanfaat sekali ilmuntya ,aku copas dlu ya scrif nya, boleh kan ya

jantung koroner on 24 Maret 2011 14.19 mengatakan...

mantap jg nih tutorialnya, sangat bermanfaat gan, lam kenal aja gan langsung ke tkp

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied