Navigation Icon dengan teks tersembunyi dan muncul

Navigation Icon dengan teks tersembunyi dan muncul

Ini pertanyaan dari Sahabat saya, "John Maxpudi".

Demonya tidak ada, karena Blog saya terpakai semuanya. Langsung saja ke cara membuatnya.



Cara membuatnya

Dari Dashboard > Design > Edit HTML


Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>

#nav
{overflow:hidden;}
#nav ul
{list-style:none;margin:0 0 0 10px;}
#nav li
{list-style:none;float:left}
#nav li img
{margin:0 5px;}
#nav li span
{display:none}
#nav li a:link, #nav li a:visited
{color:#222; display:inline-block;margin:0 10px 0 0; padding:0;}

Langkah kedua > Penempatan URL dan JavaScript
dibawah ]]></b:skin>
........
diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
function mainmenu(){
$(" #nav li").hover(function(){
$(this).find('span').css({visibility: "visible",display: "inline"});},
function(){
$(this).find('span').css({visibility: "hidden",display: "none"});
});
}
$(document).ready(function(){    
mainmenu();
});
</script>

Kode berwarna merah, jika sudah tidak diperlukan lagi !.


Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>

<div id='nav'>
<ul>
<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_sWtMQWNIdtQ4lgRJdJ2vtUcgDubW22i_CW_RmoNwzwnwxWYi8krj6jMrwfZ7AJyaJDGGbJc_ttzNLz8Jr9aUp1OFJcR9c4W6qtYxSbSHNYcTSJ0hD7a-AsXJG7VqdoaCeQu6CgHtlQA/s1600/blogger.png'/><span>Blogger</span></a></li>

<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQMuUd-L1uVV3RUUmLSWwosUxeLMPuUsxzDixkEB4t3l8c5MdmD7A_efHB4B6HTJSIyKCpqc3phFmfaRz70WOJLsdcaDENw4uEN1tort9aw_XGev0Uvc4Y75K1sxv_FEjSANF52qtIIwzS/s1600/facebook.png'/><span>Facebook</span></a></li>

<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdqU9FwdLEyml4nFt25QJbEI6pVbEIIhmXpkD_VSJJXjfEj2DyvsZImNf3T5FRdnh5mTZsEbhXu8TUkHKVTFxtWQ9t8LTkoj4dcjKudOB9nxJA7ZhIwHqbqscB4fMlKm3-mMiA38onNE4/s1600/twitter.png'/><span>Twitter</span></a></li>

<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPfMn80qnus2fH70P7Ru0E4P24ZGW9vaSPVcbUAYNXlSuWXfJdFkUVQGxRZHMaahW0-gRAUNUkeTG-cfZCrDz8wae7d9mdDvRrGX6XzOKR3SgLcfzliQKTIRLM1q9P8d1FtZ7PQgPzi_Ln/s1600/youtube.png'/><span>Youtube</span></a></li>

<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihR6-5oFcGL9zSQjj6w0oa57iTOkEStDXIXNR7yfsZzrSU-oKp1ApTe3zO0HRaQVCKXBwvRIvME1OtwuIek49I71nCkslR501H5Hvffa0q-CpBLpJzUmAjLb37S1ATJxoCaDd8TPhZJYaJ/s1600/yahoo.png'/><span>Yahoo</span></a></li>

<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS3jOsT8QCwvSTUmw8qe0PPAsZnFnQnduMJXEpGWIGqcw1r_A9vpUBrTf-Y92-AFWZKWjlYOFEGIloFVBkiEhHOlZyLoGs7W7dOp_1jnc0YjJiL0Gd8_ZclRGWApER1Gjbc98kmib5HdWb/s1600/gmail.png'/><span>Gmail</span></a></li>
</ul>
</div>



Di atas bisa anda kembangkan sesuai dengan imajinasi anda

Jika ada yang ditanyakan, silahkan bertanya dan jangan malu...


Alhamdulillah

9 comments:


  1. alhamdulillah. prtanyaanku dijawab dengan maknyoss (baca: memuaskan). Trima kasih Nano!
    Satu lagi: teks nya bisa nggak "diangkat" agak ke atas dikit. sudah saya akalin pake superscript, tp teks jd makin kecil. kalo pake CSS gimana?

  2. tentu bisa bro...

    cari kode ini bro :
    #nav li span
    {display:none}

    ganti dengan :
    #nav li span
    {display:none;position:relative;bottom:2px;}

    ukuran ini disesuaikan bro:
    bottom:2px;
    kalau kurang tinggi tambahkan ukurannya :
    bottom:3px;

    Semoga Bermanfaat...

  3. Nano emang hebat!
    ukuran sudah saya sesuaikan >> bottom:4px
    biar keliatan di tengah.
    Buat rekan-rekan lain bisa liat hasilnya DI SINI
    Semoga Nano nggak keberatan kalo saya tanya-tanya lagi. abis banyak maunya sih :) pengen pinter kaya Nano.
    Sukses Nano!

  4. Saya masih amatir bro...
    Jika mampu akan saya jawab bro... :)
    Sukses juga buat bro John Maxpudi...

  5. buat saya, Nano jauh dari amatir.lebih pantas disebut pro (hehe) tp gpp lah kalo ngaku amatir. ilmu "padi" nggak ada buruknya dipake. salut deh.
    hai bro, mampir lagi nih. semoga gak kbratan.
    pasang google translate kaya di atas gimana?
    punya saya sudah dipasang tapi gak jalan nih ?!?
    ajarin dong!
    thanx sebelumnya.

  6. pasang pakai widget atau langsung copy-paste dari situs Google translate bro ?

    Kalau saya langsung ke situsnya, copy-paste Script disana...

  7. kadang-kadang Translate disini juga error terus bro, padahal saya sudah kirim surat berkali-kali sama Google...

    Gak tau juga bro, kita yang salah atau Googlenya yang salah... hhhh.

  8. woh.. trnyata gw yg salah! ada 1 baris yg gak ke-paste. copy-nya buru2 dan kurang teliti... hihihi...

  9. bro, gw minta email donk. tapi jangan ditulis di sini.
    Tulis DI SINI aja bro! Buat nyambung tali persahabatan. Thanks sebelumnya.

Posting Komentar


Creative Commons License
Navigation Icon dengan teks tersembunyi dan muncul by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/06/navigation-icon-dengan-teks-tersembunyi.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.