Navigation Icon dengan teks tersembunyi dan muncul

Home > JavaScript Blogger > 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/AVvXsEhfi3YUvnmTSWpilKhXJy09mnlFUfA0W4EmcM228ae3gTP_c8X9jpkavMt6NjILRr2Ye4uBvlQ-i-Vn8z0xsGQAH3KUfZlF2Fcta0ARedzQHwBwhhClzqNyhaPPNYHcHyUh1BSBSqn-w58/s1600/blogger.png'/><span>Blogger</span></a></li>

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

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

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

<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMfqv9VmdKKiuDbNwQiJm1dF-mWpMmFh3ycOBVhbqXbzOvqdsmeJXpXPKDCt1MBhLCTXUPRprJALy7WZG_R-q9zMIl1JqdVeUMoN0OS0ptSX4WIlP3x1sHa1TIPCDY-bGEZp5HcPXBog/s1600/yahoo.png'/><span>Yahoo</span></a></li>

<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5VYmWAsUtwrSI9VIDSU98g4XBAZcYHrPkYxoui7lPMUk8et187GjzAK86ASkiSkTOZU4B6b8uq-KjHugX7NaeFPAdaiFVgJS6vOYoFpVIg0z3HT-CUNrqEwlqA-VS_NhqiP7qQ6htQtU/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