CHRISTIAN TATELU BLOG Cara Membuat Menu Horisontal di Blog

Cara Membuat Menu Horisontal di Blog

Tian

Cara Membuat Menu Horisontal di Blog - Banyak sekali blog tutorial yang mungkin sering membahas cara memasang menu horisontal di blog. Mulai dari yang biasa - biasa ( di sediakan pihak blogger ) hingga yang nggak biasa alias lebih canggih.( bisa sobat liat di menu horisontal blog ini .. hehehe)

Seperti yang kita ketahui bersama bahwa menu yang di sediakan pihak blogger memiliki tampilan yang tetap. ( sepengetahuan saya ) sehingga bagi sobat blogger yang hobby utak atik blog, mungkin sedikit kurang mengasikkan. Kali ini, setelah memposting artikel cara mengetahui blog dofollow atau nofollow, saya akan mencoba sharing pada sobat blogger tentang cara membuat menu horisontal di blog yang di lengkapi dengan fasilitas dropdown atau lebih tepatnya cara membuat menu horisontal dropdown di blog. Untuk demonya sobat nggak perlu jauh jauh, cuma perlu liat aja menu di bawah header blog ini.

Bagi sobat yang tertarik untuk membuat menu horisontal di blog,silahkan ikuti tutorial berikut.

1. Log in dulu ke akun blog sobat.
2. Klik Rancangan --> edit html
3. Cari kode ]]></b:skin> ( Gunakan Ctrl + F untuk memudahkan percarian)
4. Letakkan kode berikut di atasnya.

#tejahtc{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquW0ziaTGBDExpuxFrdzhj04MK4UOk2iN404hGtDRFhODTl_MBB7k_uvUPjrUBxUthU5XEm0A7g0OpkiJjtQiQPhp2OQdxIbYKMxwrxDGaINzD7I5tH0Tz21V6RMjcuQeKRW8konNCTTe/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}

#tejas{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquW0ziaTGBDExpuxFrdzhj04MK4UOk2iN404hGtDRFhODTl_MBB7k_uvUPjrUBxUthU5XEm0A7g0OpkiJjtQiQPhp2OQdxIbYKMxwrxDGaINzD7I5tH0Tz21V6RMjcuQeKRW8konNCTTe/) repeat-x;
height:33px;
}

#tejas ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#tejas li a, #tejas li a:link, #tejas li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#tejas li a:hover, #tejas li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUFePpTeHzQf2zmSuYnIS9p_3WFy-N6vRd1hMnG6GGV3FxFf0HMf5hdT3y1oVznKuh83odK8jxsMMHcSrk0ELjyGYMYEBrb_feHhblE1avni9uyD66ORUevh-W9H3YZ2x1BEKeYkNCH6-/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#tejas li li a, #tejas li li a:link, #tejas li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;
}

#tejas li li a:hover, #tejas li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUFePpTeHzQf2zmSuYnIS9p_3WFy-N6vRd1hMnG6GGV3FxFf0HMf5hdT3y1oVznKuh83odK8jxsMMHcSrk0ELjyGYMYEBrb_feHhblE1avni9uyD66ORUevh-W9H3YZ2x1BEKeYkNCH6-/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#tejas li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#tejas li li {
}

#tejas li ul a {
width: 140px;
}

#tejas li ul a:hover, #tejas li ul a:active {
}

#tejas li ul ul {
margin: -34px 0 0 170px;
}

#tejas li:hover ul ul, #tejas li:hover ul ul ul,
#tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
left: -999em;
}

#tejas li:hover ul, #tejas li li:hover ul,
#tejas li li li:hover ul, #tejas li.sfhover ul,
#tejas li li.sfhover ul, #tejas li li li.sfhover ul {
left: auto;
}

#tejas li:hover, #tejas li.sfhover {
position: static;
}

tambahan :

Modifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog sobat.
Hampir semua bagian dari kode di atas bisa di edit, tapi kalo menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya saja... terserah sobat..

5. Letakkan kode berikut di bawah kode <div id='content-wrapper'> ( cari dengan Ctrl+F )

Ganti tulisan yang berwarna biru dengan link dari kategori atau bisa juga dengan link posting.

contoh link kategori atau label, modelnya seperti ini.

http://christiantatelu.blogspot.com/search/label/BLOG

sedangkan link posting seperti ini .

http://christiantatelu.blogspot.com/2012/01/membuat-link-terbuka-di-tab-baru.html

Ganti tulisan berwarna ungu dengan url blog sobat.

Ganti link name dengan judul kategori atau judul posting atau apapun yang penting menarik untuk di klik. untuk link title samakan saja dengan link name.

6. Save template..

Semoga cara membuat menu horisontal di atas bisa membantu sobat blogger.

76 comments

Write comments

Juli suhendri

AUTHOR

06:36:00 delete

wah, tipsnya oke banget gan ..
:)
makasih udah sharing yaa .
salam kenal yaa .
:)

Anonymous

AUTHOR

01:24:00 delete

maaf gan kayaknya blog ane udah ane set dofollow, jika blom tolong cek aja gan lagi

Anonymous

AUTHOR

02:10:00 delete

maaf gan setelah ane cek ternyata bener blog ane jadi nofollow, terus ane kembaliin lagi jadi dofollow, tapi setelah itu dicek kembali jadi nofollow lg. n udah tanya ke mbah google kok banyak juga yang kasusnya sama, tolong gan klo ada info tipnya ato ilmunya biar keinginan saya bikin blog ane tetap dofollow?

Tian

AUTHOR

02:42:00 delete

@albialbanjaricba tes cara ku ini gan...

edit html > Centang expand template widget > cari semua kode nofollow dan ganti dengan dofollow ( gunakan CTRL+F untuk memudahkan pencarian..)

biasanya kode nofollow tu ada 3 biji mas....

semoga membantu

Taman Langit

AUTHOR

17:30:00 delete

k knapa sring muncul yang ktak gni waktu save templatenya
(Kami tidak dapat menyimpan template Anda.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute "{1}" associated with an element type "href".)
trus kode gak ada k.... jd gmana??????

CHRISTIAN TATELU

Cara Membuat Menu Horisontal di Blog

Artikel Menarik Lainnya

76 comments