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/AVvXsEiKhpzyOjWH1wAJleIyt3X96WWqEpcvKna92B3yKxBxQYRkOi2gbfvKwSW-ilMiQd415QgXsWYZAraVBQMQuwaSuYMHWCU0-asRMzEtsTPNEchkiAz8ZgMNYukMwaLYHk5TAtTy3x5mTukl/s1600/blogger.png'/><span>Blogger</span></a></li>
<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSFjIE3ES2BcphkzuW706JLB-qn69Naa2GqFkxAxVWTpws9Zu1MQLbvBHpWNfWyue0kb-00xsbzy_d4HiRvpXEFcnPl_RXc2Uou6Cmg9DUyHfylIqoj4iQow4iep9wuxYFSEp6zuhIGXf/s1600/facebook.png'/><span>Facebook</span></a></li>
<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_cgywR_ZO5LvBlUbNMJOYIF6K2B4_0JzY8b0I-19uVJVfKgkFAhTkhtXIVCsUWyUE339zJw-SHe08IzplpE8RqpwE9NN7mLLtYKy0RypwaclsM7qDvQsHMLzaBUu1g8OF6PU8FOv0HPC/s1600/twitter.png'/><span>Twitter</span></a></li>
<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdA1aRQxh02O4mzJqIVeoPSMevXSHR-5czGNZZYIPWuqT3I0CdMQlhWpVJYOrSM74Bp6dQcqPrrocBjVdZ7wqRdQcTCjtIv57Eq5p64IkCctDzFysUCoYHTpfzWn2peJwvA7AlpafPSGok/s1600/youtube.png'/><span>Youtube</span></a></li>
<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqsX4qLMahchDML8aXk8nrO62cAQL5L47VpcRVV4xzkV-KlyKcq3JPu4G_CU8lvsVtVNfaC1B_HGvErbTVORz0l385CxQalqDbFBmRoy51bopoXgcsirQyJKwb3Vym6kjHWui41rutVhK/s1600/yahoo.png'/><span>Yahoo</span></a></li>
<li><a href='LINK HERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzTXDIkLvInqhYdC6AwISuZglXeo0CxkIUi_1NZtEE2GWvaDkdixD588b0CXOJMxibBu7eWrRkGmD_GVhqomq6_tS2WD9RxcalxLjxYKDN9Hb0e9-6mPvCKPXc7yaUowy1PMLuOf1zS8T/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
Comments
Post a Comment