Cara Menghasilkan Suguhan Horizontal Css Simple Black Blogger/Blogspot

Posted by seni belajar at 5:36 PM

Menu horizontal sering ditemui di banyak blog/website selaku navigasi/menu utama. Di blog Blogger/Blogspot kita pun sanggup dengan mudah membuatnya, bahkan cuma dengan CSS dan HTML.

Pada posting perdana CSS Horizontal Menu untuk Blogger/Blogspot kali ini, aku persembahkan terhadap teman dekat Blogger semua "Simple Black Tabbed Horizontal Menu for Blogger Blog"

Cara memasang widget hidangan horizontal hidangan di Blogger/Blogspot:

1. Masuk ke dashboard > Design/Rancangan > edit HTML

2. Masukkan kode CSS sempurna di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
Kode CSS:

ul#menu {width: 100%;height: 43px;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2s_EJ06OcVg-X2dcV06P_n7UEuetGDFNOrTm7MqOKsMVyi_4vKTtFGmW_eirK1bb9Xra08mv2NulAiPncp3kMmhqQ3MTRk9WZiR1jqfGb0tCeQniUXie1rioa7TxPvs-p8vLgMOS1ies/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNqhihyphenhyphenczrDKeewCdW26BaPLxNmaetKVJvEpUHm2EIkXEc-gjgYN-N7bNq_XC7mxLg3_v_-UurdQpjILrhN-VR604tuZZAzQWipRtzOeoSWqp7oDDI_rnGZGlMqS726OMKX9VMIbrL8oQ/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}

3. Save template.

4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:

<ul id="menu">
<li><a class="current" href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>