Membuat Menu Horizontal pada Blogspot

Sekedar bagi-bagi ilmu sedikit nich sobat semua !

Sharing ini sebenarnya menjawab pertanyaan yang sempat dilontarkan oleh Mbak Sifa, si pemilik LanGiT mALaM. Dia lagi tanya tentang bagaimana membuat Menu Horizontal seperti pada blog milikku. Ini nich jawabannya yang kurang lebih, konon, aku juga dapat ilmu dari sini.

Langsung aja nich :

Pertama-tama login ke akun blogger Sobat, kemudian klik menu Layout, terus klik submenu Edit HTML, kemudian jangan lupa beri tanda centang pada tulisan Expand Widget Templates. Tapi jangan lupa simpan / back-up dulu template Sobat, untuk antisipasi nantinya terjadi kesalahan.

Setelah itu cari script seperti ]]></b:skin>, jika sulit untuk menemukan secaa manual, coba cari dengan fasilitas find dengan tekan tombol Ctrl dan F secara bersamaan pada keyboard komputer sobat. Jika ketemu dengan yang persis seperti itu, yaa syukurlah, soalnya script seperti itu umumnya terpakai pada classic template atau pun template yang telah dimodifikasi. Kemudian kalo ketemu script tersebut, copy paste kode dibawah ini untuk ditaruh diatas script ]]></b:skin> tersebut.

Ini kodenya :

/*credits : http://hakiembunitas.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px;

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;

}

Kemudian, tulisan yang tercetak tebal diatas bisa diganti dengan tulisan-tulisan dibawah ini berikut pasangannya yang notabene, warna background menu akan berubah.

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

Langkah selanjutnya, Sobat copy / salin dulu script dibawah ini :

<div id='tabshori'>
<ul>
<li><a href='http://hakiembunitas.blogspot.com'><span>HOME</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Berita'><span>BERITA</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Bisnis'><span>BISNIS</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Blog%20Tutorial'><span>BLOG TUTORIAL</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Coretanku'><span>CORETANKU</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Ebook%20Gratis'><span>EBOOK GRATIS</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Games%20Gratis'><span>GAMES GRATIS</span></a></li>
</ul>

</div >

Ganti http://hakiembunitas.blogspot.com dengan URL blog sobat atau link URL yang ingin sobat tuju, kemudian ganti kata HOME dengan judul menu yang Sobat ingini. nanti kata tersebut yang akan muncul sebagai judul menu pada blog sobat.

Cara memasang script diatas bermacam-macam, tergantung pada script template-nya. Namun yang aku ketahui, coba cari script / kode <div id="content-wrapper"> ini, sama saja, gunakan fasilitas find agar lebih cepat ketemu kodenya.

Setelah kode <div id="content-wrapper"> sudah ketemu, paste / tempel script tadi (warna biru) persis diatas kode <div id="content-wrapper">.

Setelah itu jangan lupa untuk menyimpan hasil pengeditan dan lihat hasilnya dengan preview.

Apabila hasilnya masih kocar-kacir tidak karuan, coba script yang berwarna biru tadi dipindahkan tempatnya ke atas atau kebawah kode </div>. Sobat coba aja satu persatu, dibawah atau diatasnya kode </div> tersebut, sehingga nanti menghasilkan tampilan yang Sobat kehendaki.

Jika masih belum berhasil juga silahkan Sobat bisa mencoba cara seperti dibawah ini :
Cari kode dibawah 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>

kemudian ganti text yang berwarna merah dengan yang 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>

Kemudian klik simpan / save.

kemudian klik tab Page Elements, kemudian pada daerah header klik Add a page element atau Add a Gadget lalu pilih HTML/JavaScript, kemudian paste script link tadi diatas di dalam kotak content, akhirnya kemudian simpan dan lihat hasilnya.

Nah, sampai disini dulu sharing ilmu dari aku, semoga bermanfaat bagi Sobat semua. terima kasih.

.

.

.

ARTIKEL TERKAIT ADA DIBAWAH SPONSOR (DIBAWAH INI).

Artikel Terkait