Sebelum menciptakan sajian ini, Saya beri gambarannya terlebih dahulu:
Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian pilih Edit HTML. Lalu cari script yang tampak ibarat ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>Jika templatemu sudah dilengkapi dengan script tersebut, kita dapat pribadi melanjutkan ke langkah berikutnya. Tapi jikalau belum ada, salin dulu script tersebut kemudian letakkan di atas arahan
</head> Setelah itu salin script ini, kemudian letakkan sempurna di bawah script tadi:
<script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $("#topnav li").prepend("<span></span>"); $("#topnav li").each(function() { var linkText = $(this).find("a").html(); $(this).find("span").show().html(linkText); }); $("#topnav li").hover(function() { $(this).find("span").stop().animate({ marginTop: "-40"}, 250);}, function() { $(this).find("span").stop().animate({ marginTop: "0"}, 250); }); }); //]]> </script>Jika sudah, kini kita masuk ke tahap pemodelan. Salin arahan CSS ini, kemudian letakkan di atas arahan
]]></b:skin> atau </style>:ul#topnav { margin:30px; padding:0; list-style-type:none; float:left; font-size:1em; } ul#topnav li { margin:0; padding:0; overflow:hidden; float:left; height:40px; } ul#topnav a, ul#topnav span { padding:10px 20px; float:left; text-decoration:none; color:#fff; background:transparent url(http://2.bp.blogspot.com/-PUd9Qj1OKtE/ThKinZljN6I/AAAAAAAAAW0/i00P00dOdnI/s1600/a_bg.gif) repeat-x; text-transform:uppercase; clear:both; width:100%; height:20px; line-height:20px; } ul#topnav a { color:#555; background-position:left bottom; } ul#topnav span { background-position:left top; }Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin arahan di bawah ini kemudian letakkan di kawasan dimana kau menginginkan sajian navigasi ini ditampilkan:
<ul id='topnav'> <li><a href='#'>Beranda</a></li> <li><a href='#'>Profil</a></li> <li><a href='#'>Portfolio</a></li> <li><a href='#'>Komentar</a></li> <li><a href='#'>Kontak</a></li> <li><a href='#'>Bantuan</a></li> </ul>Pelajari wacana beberapa alternatif peletakkan sajian navigasi di sini »
Simpan templatemu.
Sumber: hatetepe://wewewe.sohtanaka.com
Sumber https://www.dte.web.id/