-->

Tuesday, June 18, 2013

Kolom 2

Cara membuat Menu Horisontal Dalam 2 Kolom di Blogspot

POSTED BY KANG JUM ON MONDAY, JUNE 10, 2013 1 KOMENTAR

               Anda ingin menu naviugasi blogspot anda tampak profesional layaknya blog blog yang dikelola oleh master web, mungkin ini bisa dicoba di blogspot anda.
Ini adalah menu horizontal yang sangat bagus di mana sub-tab yang ditampilkan dalam dua kolom dan juga dibuat dengan CSS, tanpa script apapun.
Sebagai contonya adalah sebagai berikut;
Kira kira seperti ini contohnya, caranya adalah sebagai berikut;

 LANGKAH 1: Di Blogger,masuk  ke "Layout" dan pada "Elemen Halaman" bagian.

    
Klikdi "Tambah Gadget" link di bawah gambar header Anda
    
Dari Daftar Gadget, pilih "HTML / JavaScript".LANGKAH 2: Cukup copy dan paste kode ini ke SELURUH widget Anda. Catatan: Biarkan "Judul" dari widget ini kosong.

  <div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

 Sesuaikan tab utama  dengan mengubah Judul Tab untuk apa pun yangdi inginkan. Sertakan URL untuk masing-masing jika  ingin menjadi 'diklik'. Jika tidak, Anda hanya dapat menempatkan sebuah tanda # di mana dikatakan http://YOUR URL HERE.com
anda bisa menghapus subtab atau pun menampilkannya
 li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>


 LANGKAH 3: Sekarang mari kita melangkah lebih jauh dan menambahkan gaya CSS Template kita
Masuk  ke Template> Edit HTML
Cari kode ini
 ]]></b:skin> dan tambahkan sesudahnya kode sebagai berikut;
  /* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px; 
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px; 
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6; 
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ6uZ43ZG2jalfYxf4EL0jkra7IQlyM1UwdyPvdKaZBHkLT7uN7KwifYWt31Bx7Ug_sx7m0xhh2ccUCM0OoJsFXljk-VEvDhPmKjBPwRzqMhDdWAu7v_k7CNrEo3WqA16CDfMyIHhqHgw/s1600/arrow_white.gif); 
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important; 
width: auto;
}
#top li ul, #top ul li {
width:300px;

#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1; 
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; 
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333; 
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important; 
}

 
    
Dan tepat di bawah garis-garis kecil, hapus kode di bawah sampai Anda mencapai di:

    
/ * Kolom
    
----------------------------------------------- * /


kode yang  telah dihapus, tambahkan yg satu ini:

    
# Crosscol ul {z-index: 200; padding: 0 penting;!}
    
# Crosscol li: hover {position: relative;}
    
# Crosscol ul li {padding: 0 penting;!}
    
. Tab-luar {z-index: 1;}

Kemudian simpan
Jangan lupa untuk back up tenplate anda.

No comments:

Post a Comment