Cara Pasang Tab Menu Di Bawah Header

Cara Pasang Tab Menu Di Bawah Header

Membuat/memasang Tab Menu di bawah header seperti yang ada di bawah header template seri.

Bagi template yang telah ada tab menu tapi yang biasa boleh juga mengubah dengan menggantikan kode css yang seri sediakan ini.

Panduan Memasang:

Masuk Ke Blogger
Klik Tab Design
Klik Tab Edit HTML
Cari kode ini, #header-wrapper{. Kode lengkap seperti di dalam petak di bawah.

#header-wrapper{
float:left;
margin:10px 5px 12px 5px;
padding:0px 0px 0px 0px;
width:908px;
height:200px;
background: url(http://i1234.photobucket.com/albums/ff405/seribahasa/headerbutterfly.jpg) top center repeat;
border-top:13px solid #009900;
border-bottom:13px solid #009900;
border-left:13px solid #006600;
border-right:13px solid #006600;
}
#header{width:885px;margin:0px 0px 0px 0px;padding:5px 5px 5px 5px;text-align:right}
#header h1{
color:#339900;
font:$blogTitleFont;
font-variant:small-caps;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 10px;
}
#header h1 a{text-decoration:none;color:$blogTitleColor}
#header h1 a:hover{text-decoration:none;color:$blogDescriptionColor}
#header .description{
color:#99cc00;
font:$blogDescriptionFont;
margin:0px 0px 0px 0px;
padding:1px 20px 25px 20px;
}
#header h1 p,
#header .description p{margin:0;padding:0}
#header1 a img{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border:0}

Salin kode di bawah ini dan pastekan di bawah kode CSS header.

#NavbarMenu{
width:919px; (Sesuaikan kelebaran NavbarMenu dengan saiz template)
float:left;
margin:0;
padding:0;
}
#nav{margin:0;padding:0;
}
#nav ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#nav li{
list-style:none;
margin:0;
padding:0;
}
#nav li a, #nav li a:link, #nav li a:visited{
background:#009900 url(http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center; (Tukar URL background mengikut kesesuaian template anda. Jika ingin mengunakan color kode buang kode bermula dari sini: (http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center.)
color:#7fff00; (Tukar warna mengikut kesesuai template)
display:block;
font-size:14px; (Ukuran saiz font)
font-family:trebuchet ms, Times New Roman;
font-weight:bold;
text-transform:none;
margin-right:1px; (Jarak antara petak Tab)
padding-top:6px; (Jarak antara Header dengan Menu Tab)
padding-bottom:5px; (Jarak antara Menu Tab dengan main-wrapper atau main-post)
padding-left:13px; (Jarak sebelah kiri Menu Tab dengan content-wrapper)
padding-right:13px; (Jarak sebelah kanan Menu Tab dengan content-wrapper)
border:2px solid #003300; (lebar serta warna sempadan Menu Tab)
-moz-border-radius-topleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-topright:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomright:15px; (Untuk mengubah bentuk tepi Menu Tab)
}
#nav li a:hover, #nav li a:active{
background: #CCFF99; (Warna latar)
color:#005b06; (Warna font)
margin:0;
padding-top:6px; (Jarak antara Header dengan Menu Tab)
padding-bottom:5px; (Jarak antara Menu Tab dengan main-wrapper atau main-post)
padding-left:13px; (Jarak sebelah kiri Menu Tab dengan content-wrapper)
padding-right:13px; (Jarak sebelah kanan Menu Tab dengan content-wrapper)
text-decoration: none;
-moz-border-radius-topleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-topright:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomright:15px; (Untuk mengubah bentuk tepi Menu Tab)
}
#nav li li a, #nav li li a:link, #nav li li a:visited{
background:#CCFF99; (Warna latar)
width:150px; (Lebar Tab li)
color:#005b06; (Warna font)
font-size:14px; (Saiz font)
font-family:trebuchet ms, Times New Roman;
font-weight:normal;
text-transform:none;
float:none;
margin:0;
padding:7px 10px;
border:2px solid #006400; (lebar serta warna sempadan Menu Tab li)
}
#nav li li a:hover, #nav li li a:active{
background:#66CC33; (Warna latar)
color:#000066; (Warna font)
padding:7px 10px;
}
#nav li{
float:left;
padding:0;
}
#nav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px; (Lebar Tab li)
margin:0;
padding:0;
}
#nav li ul a{width:140px;}
#nav li ul ul{
margin:-32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left: auto;}
#nav li:hover, #nav li.sfhover{position: static;}

Catatan:
Sila rujuk kepada ayat yang bertanda MERAH untuk melakukan pengubahsuaian.

Contoh #header-wrapper{ dan #NavbarMenu{ yang telah dicantum secara betul.

#header-wrapper{
float:left;
margin:10px 5px 12px 5px;
padding:0px 0px 0px 0px;
width:908px;
height:200px;
background: url(http://i1234.photobucket.com/albums/ff405/seribahasa/headerbutterfly.jpg) top center repeat;
border-top:13px solid #009900;
border-bottom:13px solid #009900;
border-left:13px solid #006600;
border-right:13px solid #006600;
}
#header{width:885px;margin:0px 0px 0px 0px;padding:5px 5px 5px 5px;text-align:right}
#header h1{
color:#339900;
font:$blogTitleFont;
font-variant:small-caps;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 10px;
}
#header h1 a{text-decoration:none;color:$blogTitleColor}
#header h1 a:hover{text-decoration:none;color:$blogDescriptionColor}
#header .description{
color:#99cc00;
font:$blogDescriptionFont;
margin:0px 0px 0px 0px;
padding:1px 20px 25px 20px;
}
#header h1 p,
#header .description p{margin:0;padding:0}
#header1 a img{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border:0}

#NavbarMenuleft{
width:919px;
float:left;
margin:0;
padding:0;
}
#nav{margin:0;padding:0;
}
#nav ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#nav li{
list-style:none;
margin:0;
padding:0;
}
#nav li a, #nav li a:link, #nav li a:visited{
background:#009900 url(http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center;
color:#7fff00;
display:block;
font-size:14px;
font-family:trebuchet ms, Times New Roman;
font-weight:bold;
text-transform:none;
margin-right:1px;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border:2px solid #003300;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li a:hover, #nav li a:active{
background: #CCFF99;
color:#005b06;
margin:0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited{
background:#CCFF99;
width:150px;
color:#005b06;
font-size:14px;
font-family:trebuchet ms, Times New Roman;
font-weight:normal;
text-transform:none;
float:none;
margin:0;
padding:7px 10px;
border:2px solid #006400;
}
#nav li li a:hover, #nav li li a:active{
background:#66CC33;
color:#000066;
padding:7px 10px;
}
#nav li{
float:left;
padding:0;
}
#nav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0;
}
#nav li ul a{width:140px;}
#nav li ul ul{
margin:-32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left: auto;}
#nav li:hover, #nav li.sfhover{position: static;}

Sekarang kita pergi di bahagian kode HTML dan cari kode ini, <div id='header-wrapper'>. Kode lengkap seperti di dalam petak di bawah.

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Seri Bahasa (Pengatas)' type='Header'/>
</b:section>
</div>

Salin kode di bawah ini dan pastekan di bawah kode HTML header-wrapper.

<div id='NavbarMenu'>
<ul id='nav'>
<li>
<a href='URL Blog Di Sini'>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
</ul>
</div>
<div style='clear:both;'/>

Contoh <div id='header-wrapper'> dan <div id='NavbarMenu'> yang telah di cantum secara betul.

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Seri Bahasa (Pengatas)' type='Header'/>
</b:section>
</div>

<div id='NavbarMenu'>
<ul id='nav'>
<li>
<a href='http://www.seribahasa.com/'>Peribahasa</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/05/peribahasa.html'>A</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Simpulan Bahasa</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/05/simpulan-bahasa.html'>Simpulan Bahasa</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>KKMS</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/09/kurik-kundi-merah-saga-adat.html'>Adat</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Pantun Pilihan</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/05/pantun-anak-dagang.html'>Anak Dagang</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Sajak</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/07/aku-seorang-bloger.html'>Aku Seorang Bloger</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Blogger Tips</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/05/rahsia-mendapat-pagerank.html'>Page Rank</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Blogger Tools</a>
<ul>
<li><a href='http://www.seribahasa.com/2011/01/panduan-membuat-kode-html-parser-box.html'>HTML Parser Box</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Modifikasi Template</a>
<ul>
<li><a href='http://www.seribahasa.com/2011/03/modifikasi-blogger-template.html'>Modifikasi Template</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
</ul>
</div>
<div style='clear:both;'/>

Okey, last sekali Save Template kemudian klik View blog untuk melihat hasilnya. Kalau tak berapa faham sila tinggalkan pesan di komen box, seri akan jelaskan seberapa yang boleh.

menu horizontal blogg

Style Nav : O-OM template

Untuk Blogger.com

1. Login di Blogger
2. Rancangan » Edit HTML » Expand Template Widget
3. Cari ]]></b:skin>
4. Letakan kode CSS berikut, diatasnya

#nav { background:url(“http://3.bp.blogspot.com/_C6KkooKXCEw/TICgsEwQ6VI/AAAAAAAAGzc/uKEKlKRK6mY/s1600/topmenu-c.png”) no-repeat scroll 0 0 #FFFFFF; clear:both; height:32px; margin:0 auto; padding:4px 0 0; } #nav-left { display:inline; float:left; padding-left:6px; padding-top:1px; width:660px; } #nav-right { display:inline; float:right; padding-right:15px; padding-top:3px; width:200px; } #nav ul { font:bold 1em Verdana,Arial,Helvetica,sans-serif; margin:0; overflow:hidden; padding-left:0; position:relative; } #nav ul li { float:left; list-style:none outside none; } #nav ul li a, #nav ul li a:visited { color:#FFFFFF; display:block; margin:1px 4px; padding:4px; text-decoration:none; } #nav ul li a:hover { -moz-border-radius:3px 3px 3px 3px; background-color:#999999; color:#FFFFFF; margin:1px 4px; padding:4px; } #nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover { -moz-border-radius:3px 3px 3px 3px; background-color:#999999; color:#FFFFFF; margin:1px 3px; padding:4px; }

NB : Kamu bebas mengganti seperti warna background, ukuran lebar, dll sesuai selera kamu!
5. Untuk meletakanya di dalam template, cari kode : <div id=”header-wrapper”>
   kalau tidak ada, coba pakailah add-ons mozilla FIREBUG! untuk mempermudahnya
6. Setelah itu, pastekan kode HTML berikut di bawah kode tadi. Ini kode HTML-nya :

<div id=”nav”> <div id=”nav-left”> <ul> <li><a href=”#“><img border=”0″ style=”padding: 0px;” src=”http://2.bp.blogspot.com/_C6KkooKXCEw/TIKt4PnR_DI/AAAAAAAAG1M/fYAOYZ43bys/s200/icon-home.png”></a></li> <li><a  href=”#“>About Me</a></li> <li><a  href=”#“>Archives</a></li> <li><a  href=”#“>Contact</a></li> <li><a  href=”#“>Help Me</a></li> <li><a href=”#“>Guest Book</a></li> <li><a href=”#“>Testimonials</a></li> <li><a  href=”#“>Top Post</a></li> </ul> <script language=”javascript”>setPage()</script> </div> <div id=”nav-right”> <div id=”tsrc-m”> <div id=”src-m”> <form name=”searchform” method=”get” id=”searchform” action=”/search”> <input type=”text” value=”Cari artikel..” onfocus=”if (this.value == &quot;Cari artikel..&quot;) {this.value = &quot;&quot;}” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel..&quot;;}” name=”q” id=”s-m” class=”keyword”> <input type=”image” style=”border: 0pt none; vertical-align: top; padding-top: 3px;” src=”http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png”> </form> </div> </div> </div> </div>

NB : Ubahlah warna merah atau nama menu + URLnya sesuai kebutuhan kamu, seperti Contact, About Me, kamu dapat bebas menggantinya!
7. Selesai, dan Simpan Template, semoga berhasil!!
8. Semoga Bermanfaat

Cara Membuat Menu Horizontal Dengan CSS

Sebagian besar sudah banyak sobat blogger mengetahui bagaimana cara membuat menu horizontal, dan sudah banyak dibahas pada blog-blog sobat mengenai menu horizontal baik itu cara membuat atau meletakkan pada template.

Disini saya akan sedikit mengulas cara membuat menu horizontal sederhana dengan CSS dan sedikit berbagi apa yang saya ketahui kepada sobat blogger yang baru memulai untuk membuat blog… :)

Ok langsung saja tanpa banyak cerita, berikut langkah-langkahnya :

Membuat kode CSS nya seperti gambar diatas yang perlu sedikit kita ketahui bahwa kode CSS ditulis dengan banyak cara salah satu cara metode penulisan seperti yang saya buat berikut ini, dan kode tersebut pada umumnya diletakkan antara kode <head> dan </head> dan biasanya diletakkan diatas kode ]]></b:skin>

<style type="text/css" media="screen">
.menu_hor {
float:left;
padding:0;
margin:100px 70px
color:#FFFFFF;
background:#000000;
width:100%;
border:solid 1px #000000;
clear:both;
}
/*warna menu horizontal normal*/
.menu_hor a,
.menu_hor a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size:12px;
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}
.menu_hor ul {
list-style-type:none;
padding:0; margin:0;
}
.menu_hor ul li {
float:left;
position:relative;
z-index:auto !important;
z-index:1000;
border-right:solid 1px #000000;
border-left:solid 1px #000000;
}
.menu_hor ul li a {
color: #FFFFFF;
background: #000000;
float:none !important;
float:left;
display:block;
height:30px;
line-height:30px;
padding:0 10px 0 10px;
text-decoration:none;
}
.menu_hor ul li ul {
display:none;
border:none;
color: #FFFFFF;
background: #000000;
width:1px
}
.menu_hor ul li:hover a {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:29px;
margin-top:1px;
left:0;
}
.menu_hor ul li:hover ul li a {
display:block;
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF; /*pemberian warna subcells*/
}
.menu_hor ul li:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna hover pada subcells*/
}
.menu_hor ul li a:hover {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li a:hover ul {
display:block;
width:12em;
position:absolute;
z-index:999;
top:29px;
left:0;
}
.menu_hor ul li ul li a:visited {
background-color:#0000FF;
color:#FFFFFF; /*warna subcells keadaan normal*/
}
.menu_hor ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF;
}
.menu_hor ul li a:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna subcells hovering mode*/
}
</style>

Sobat perhatikan bahwa penulisan CSS ditulis diawali tag pembuka <style type="text/css" media="screen"> dan diakhiri tag penutup </style>.
Penulisan .menu_hor sebenarnya tidak mutlak dalam artian sobat bisa menggantinya dengan kata-kata lain seperti contoh misalnya .menu_horizontal atau .menuku dengan catatan bahwa pada saat menulis kode pemanggil sobat mesti konsisten dengan perubahan tersebut.

Membuat kode untuk memanggil dan menampilkan pada layout template kode CSS sebagai berikut :

<div class="menu_hor">
<ul><li><a href="#">Home</a>
</li></ul>
<ul><li><a href="#">new_item1</a>
</li></ul>
<ul><li><a href="#">new_item2</a>
</li></ul>
<ul><li><a href="#">new_item3</a>
</li></ul>
<ul><li><a href="#">new_item3</a>
</div>

Penggunaan kode untuk memanggil kode CSS biasanya penulisannya didahului tag pembuka <div class="menu_hor"> dan diakhiri tag penutup </div>. div clss=”menu_hor” yang saya maksud tadi pada pembahasan bagian pertama bahwa antara kode CSS dan kode pemanggil mesti dalam keadaan satu clas dalam hal ini kode CSS dan pemanggil berada dalam clss menu_hor.

Mudah bukan cara membuat menu horizontal, adapun dengan nilai-nilainya silahkan sobat berkreasi. Contoh diatas adalah dasar cara membuat menu horizontal. Untuk bagaimana cara memodifikasi silahkan googling dan banyak sobat-sobat blogger membahas cara memodifikasi menu horizontal dengan CSS. Selamat mencoba.

Membuat Menu Horizontal

Membuat Menu Horizontal

Kendhin

Menu-Menu

Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:



Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif
whiteleft.gif	whiteright.gif

Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....

Membuat Menu Vertikal (Vertical)

Membuat Menu Vertikal (Vertical)

Kendhin

Menu-Menu

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D

Cara Cepat Daftarkan Blog Anda ke Berbagai Mesin Pencari

Cara Cepat Daftarkan Blog Anda ke Berbagai Mesin Pencari

Tulisan ini di tujukan bagi para blogger pemula yang baru mulai bergelut di dunia blogger.
Setelah anda selesai membuat, medesain, menulis segudang artikel tentu rekan-rekan blogger ingin tulisan yang sudah di tulis dengan sepenuh hati tersebut bisa terindex di mesin pencari seperti google, yahoo, msn dan banyak lagi mesin pencari lainnya sehingga banyak orang yang akan bisa membaca dan memahami ide-ide dalam tulisan yang rekan-rekan torehkan.
Bagi anda pengguna blogger, jangan kira biarpun blogger milik om google tanpa mendaftarkan blog anda, otomatis akan terindex di google..ngimpiii....!!!
Berikut adalah langka-langkahnya :

Buka situs http://www.submitexpress.com. Setelah masuk kesitus tersebut pilih FREE WEBMASTER TOOLS + FREE SUBMISSION, terlihat seperti gambar di bawah.

Setelah ke halaman Free Submission, rekan-rekan blogger akan diminta untuk mengisi kolom seperti yang terlihat pada gambar di bawah. Pada kolom url isikan dengan alamat blog rekan-rekan.

Jika rekan-rekan ingin menerima email informasi dari situs ini maka silahkan centang pada box newsletters seperti terlihat pada gambar di atas.
Terakhir klik tombol Submit Now untuk mendaftakrkan blog rekan-rekan ke berbagai jenis mesin pencari.

Membuat Menu di Bawah Header / Judul Blog

Membuat Menu di Bawah Header / Judul Blog

0digg

Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horisontal dibawah header pada blognya, berikut saya postkan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri  semua isi yang terkandung didalam blog tersebut (baca: easy to navigate)  .Yuk kita mulai...



Hal pertama yang harus dilakukan adalah login ke blogger > Layout/Tata Letak > Edit Html .
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Anda ubah kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah klik simpan ya

Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.
Untuk menambah gadget dibawah header bisa baca  disini

<a href="http://www.masbugie.com " class="navigation">HOME</a>
<a href="http://www.masbugie.com " class="navigation">CONTACT</a>
<a href="http://www.masbugie.com " class="navigation">BUKU TAMU</a>
<a href="http://www.masbugie.com " class="navigation">FACEBOOK</a>
<a href="http://www.masbugie.com " class="navigation">TWITER</a>
<a href="http://www.masbugie.com " class="navigation">DOWNLOAD</a>
<a href="http://www.masbugie.com " class="navigation">LAIN-LAIN</a>
<a href="http://www.masbugie.com " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.


Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombol CTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin> kemudian simpan.

a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.

Untuk mengetahui kode-kode warna dalam HTML silahkan lihat juga disini

Selesai, semoga bermanfaat....salam

Read more: Membuat Menu di Bawah Header / Judul Blog | Mas Bugie [dot] com http://www.masbugie.com/2010/05/membuat-menu-di-bawah-header-judul-blog.html#ixzz1f4skwm6Q