Cara Membuat Menu Horisontal di Blog

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/AVvXsEjfvcvwTkL1xsX3TeOdUL36bcsF290X_-jM63fk31nBiAjXN8qn4q1UnhPS83v8zQVciJ5jPB2VjmQcZK9k2fwDmg8ga_DdAHHFRcrhrnLMpJ41bqVXPtFDeo6WRPqtc3NilwGqUtxZEXw8/) 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/AVvXsEjfvcvwTkL1xsX3TeOdUL36bcsF290X_-jM63fk31nBiAjXN8qn4q1UnhPS83v8zQVciJ5jPB2VjmQcZK9k2fwDmg8ga_DdAHHFRcrhrnLMpJ41bqVXPtFDeo6WRPqtc3NilwGqUtxZEXw8/) 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/AVvXsEiyjfozUETQCoeIVXH1rqTO1OO023h6OCz2rwZT430T5dUGgkIi57BdKnxtgfJzGkBJ5_91NASB2IHeyu5Q_ohiQRdzu0nXtsShVCxwPhyT9Igc9oBONaNaBb_mc1vWB1tW1IAn9PsdEeYg/) 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/AVvXsEiyjfozUETQCoeIVXH1rqTO1OO023h6OCz2rwZT430T5dUGgkIi57BdKnxtgfJzGkBJ5_91NASB2IHeyu5Q_ohiQRdzu0nXtsShVCxwPhyT9Igc9oBONaNaBb_mc1vWB1tW1IAn9PsdEeYg/) 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 )

<div id='tejahtc'>
<div id='tejas'>

<ul>
<li><a href='http://christiantatelu.blogspot.com/'>Home</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href=Link sobat di sini!' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-8</a></li>
</ul>

</div>
</div>


<div class='clear'/>

• 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..

Read More

Cara Membuat Menu Horizontal di Blog

Cara Membuat Menu Horizontal di Blog

Menu horizontal, sangat penting peranannya baik dalam website atau pun blog. Menu horizontal sendiri adalah menu berupa link - link yang terpasang secara memanjang yang biasanya diletakan di bawah header atau di atas header atau kadang kadang ada juga yang keduannya menggunakkan menu horizontal.

Bagi sobat - sobat blogger yang menggunakan template yang tidak mendukung menu horizontal, tenang saja karena posting kali ini, saya mencoba untuk mencari source code dari menu horizontal tersebut. Dan allhamdulillah, saya menemukkannya dari CSS Menu Generator.

Memang, menu horizontal yang ada pada situs tersebut diperuntukkan untuk website. Dan cara - cara / petunjuk-nya pun adalah petunjuk untuk menempatkannya di website. Namun, sobat tidak perlu khawatir karena saya sudah pernah coba download, dan saya coba untuk menempatkannya di Blog ( Blogger / Blogspot ).

Banyak sekali pilihan menu horizontal yang dapat kita pilih dari situs tersebut. Namun, saya coba untuk memilih salah satunya. Dan alhamdullilah, saya jatuh hati pada menu horizontal ini :

Bagi sobat yang ingin menambahkan menu horizontal tersebut, silahkan ikuti langkah - langkah berikut ini :

• Pertama - tama, masuk ke Akun Blog Sobat,
• Klik Template dan Klik Edit HTML,
• Selanjutnya, cari kode ]]></b:skin> (gunakan Ctrl + F), dan Copy Paste Code dibawah tepat di atas kode tersebut.

ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbASnOSlKN9hv8cvwBIvhhCaPH6YEgR4d4yu1GdPzStmpQSZ52A8ZqsBRzfJjXLFOZ_zEcyHQ5fenP7E1NwSledfRUmFl82FIHXgJOshpONQYg84TngFJu-8CrBt74b34ck7xPMZleTKA/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}ul.menu li {display:block;float:left;margin:0;padding:0;}ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbASnOSlKN9hv8cvwBIvhhCaPH6YEgR4d4yu1GdPzStmpQSZ52A8ZqsBRzfJjXLFOZ_zEcyHQ5fenP7E1NwSledfRUmFl82FIHXgJOshpONQYg84TngFJu-8CrBt74b34ck7xPMZleTKA/s1600/bg.png") repeat-x top left;text-decoration:none;}ul.menu .current a {color:#fff;font-weight:700;}/*Garis Merah*/ul.menu.red{background-color:#B11718;}ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}

• Setelah kode tersebut selesai ditambahkan, silahkan Save Template. 

Selanjutnya, Masuk ke Tata Letak dan ikuti langkah - langkah berikut :

• Klik Tambah Gadget,
• Lalu tambahkan Fungsi Pihak ke tiga HTML/Javascript,
• Selanjutnya, Copy Paste Kode di Bawah,

<ul class="menu red">
  <li class="current"><a href="http://fileprofessional.blogspot.com/" target="_self">Home</a></li>
  <li><a href="http://fileprofessional.blogspot.com/p/about-me.html" target="_self">About</a></li>
  <li><a href="http://fileprofessional.blogspot.com/p/contact.html" target="_self">Contact</a></li>
  <li><a href="http://fileprofessional.blogspot.com/2012/04/tukar-link.html" target="_self">Tukar Link</a></li>
  <li><a href="" target="_self"></a></li>
</ul>

Keterangan :

Silahkan ganti tulisan berwarna biru dengan kata - kata yang sobat inginkan, dan ganti juga tulisan berwarna merah dengan link url sobat.

Read More