Cara Menambah Kolom Header

Cara Menambah Kolom Header
- Hei apa kabar sobat blogger..?? Setelah lama tidak sharing tutorial blogging sekarang ane dikasih kesempatan lagi buat share..
Sesuai judul sekarang ane akan ngebahas Cara Menambah 2 Kolom Header

Bagi sobat yang tertarik, silahkan ikuti cara membuat 2 kolom header berikut ini.

 

 

 1. Pertama sobat login ke akun blog sobat
2. Klik rancangan--> edit HTML
3. Jangan centang kotak expand template widget
4. Cari kode css yang mirip di bawah ini:

#header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor;
    height:190px;
    }
    #header-inner {
    width:900px;
    background-position: center;
    margin-$startSide: auto;
    margin-$endSide: auto;
    }
    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }

5. Ganti kode di atas dengan kode berikut.

#header-wrapper{
    width:980px;
    padding:20px 0 0 0;
    background:#000000;
    margin:0 auto;
    border:;}

    #header-inner{
    background-position:center;
    margin-left:auto;
    margin-right:auto}

    #header{
    float:$startSide;
    width:400px;
    margin:0 auto;
    border:0px solid $bordercolor;
    text-align:left;
    color:$pagetitlecolor
    }

    #header2{
    float:$endSide;
    width:400px;
    margin:0 auto;
    text-align:left;
    }

Tambahan :

• Edit kode di atas sesuai keinginan sobat terutama kode width yang harus di sesuaikan dengan ukuran header blog sobat.

6. Scroll ke bagian bawah, dan temukan kode yang mirip seperti ini

<div id=header-wrapper>

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

Fokuskan pencarian pada kode

<div id=header-wrapper>

7. Ganti kode di atas dengan kode berikut:

<div id=header-wrapper>
      <b:section class=header id=header maxwidgets=1 showaddelement=no>
<b:widget id=Header1 locked=true title=judul blog(Header) type=Header/>
</b:section>
      <b:section class=header id=header2 maxwidgets=1 showaddelement=yes/>
<div style=clear:both;/>
      </div><!-- end header-wrapper -->

8. Klik simpan perubahan

9. Langkah terakhir, klik ELEMEN LAMAN dan lihat bila sudah menjadi 2 kolom.

 

Selesai.. Selamat memcoba dan semoga membantu yahh..

Read More

Cara membuat menu multi kolom pada blog

Cara membuat menu multi kolom pada blog 

Jika Anda memilki blog dengan ruangan yang cukup Sempit atau semakin sempit dengan banyak aksesories blog atau jumlah postingan yang semakin banyak Menu Multi Kolom dengan Tab Slide Mode ini bisa menjadi solusi anda dalam membuat banyaknya menu didalam satu atau beberapa kolom Lihat contoh gambar di bawah ini (Contoh demo klik disini )

klik gambar untuk memperbesar

Adapun Langkah-langkah untuk membuatnya adalah :

1. Login ke blogger anda
2. Layout-->Edit HTML
4. Masukan kode dibawah ini sebelum kode </head>

<script src=http://tab-menu.googlecode.com/files/tabcontent.js type=text/javascript>


</script>

5. Kemudian masukan kode Css dibawah ini Diatas kode ]]></b:skin>

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}


.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 50%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(http://tab-menu.googlecode.com/files/indentbg.gif) center center repeat-x;
}


.indentmenu ul li{
display: inline;
}


.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}


.indentmenu ul li a:visited{
color: white;
}


.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(http://tab-menu.googlecode.com/files/indentbg2.gif) center center repeat-x;
}




.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}


.tabcontent{
display:none;
}


@media print {
.tabcontent {
display:block !important;
}

6. Dan Masukan Kode di bawah ini di tempat dimana anda ingin menempatkan menu multi kolom

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="dog1">Wisata</a></li>
<li><a href="#" rel="dog2">Hotel</a></li>
<li><a href="#" rel="dog3">Gallery</a></li>
<li><a href="http://bambangpage.blogspot.com/">Bambangpage</a></li>
</ul>
<br style="clear: left"/>
</div>


<ilayer clip="0,0,430,150" width="430" name="scroll1" height="150">
<layer width="430" name="scroll2" height="150" bgcolor="white">
<div id="scroll3" style="width:430px;height:150px;background-color:white;overflow:scroll">






<div style="border:1px solid gray; width:400px; height: 500px; padding: 5px; margin-bottom:1em">


<div id="dog1" class="tabcontent">
1.<a href="http://cilimoes.blogspot.com/2009/01/gedung-perundingan-linggarjati.html">
Gedung Perundingan Linggarjati</a><br/>2.<a href="http://cilimoes.blogspot.com/2009/01/linggarjati-indah.html"> Linggarjati Indah<a/><br/>3.
<a href="http://cilimoes.blogspot.com/2009/01/sangkan-hurip_29.html">Sangkan Hurip</a><br/>4.<a href="http://cilimoes.blogspot.com/2009/01/desa-sitonjul.html?zx=82b3e5368c8530bb"> Desa Sitonjul</a><br/> 5.<a href http://cilimoes.blogspot.com/2009/01/desa-setia-negara.html> Desa Setia Negara</a> <br/>6.<a href="http://cilimoes.blogspot.com/2009/01/telaga-remis_29.html?zx=86268a3f4fbf6003"> Telag Remis</a><br/> 7.<a href="http://cilimoes.blogspot.com/2009/01/cibulan_29.html?zx=faba5971ad24039f"> Cibulan</a><br/>8.<a href="http://cilimoes.blogspot.com/2009/01/curug-sidomba.html?zx=7998bfb70fd115b3"> Curug Sidomba</a><br/>9.<a href="http://cilimoes.blogspot.com/2009/01/waduk-darma_29.html"> Waduk Darma</a><br/>10.<a href="http://cilimoes.blogspot.com/2009/01/taman-purbakala-cipari.html?zx=5ef72d6ecc65db2b"> Taman Purbakala Cipari</a><br/>11.<a href="http://cilimoes.blogspot.com/2009/01/balong-darmaloka_29.html?zx=f5ce2c693d078d0e"> Balong Darmaloka</a><br/>12.<a href=""></a><br/>13.<a href=""></a><br/>14.<a href=""></a><br/>15.<a href=""></a>
</a></a></div>


<div id="dog2" class="tabcontent">
1.<a href="">Cilimus</a><br/>2.<a href="">Cigandamekar</a><br/>3.<a href="">Jalaksana</a><br/>4.<a href="">Kuningan</a><br/>5.<a href="">Cirebon</a><br/>6.<a href=""></a><br/>
</div>


<div id="dog3" class="tabcontent">
<a href="">Cilimus</a><br/><a href="">Cigandamekar</a><br/><a href="">Kuningan</a><br/><a href="">Cirebon</a><br/>
</div>




</div>


</div>
</layer>
</ilayer>


<script>




var nsstyle=display:""
if (document.layers)
var scrolldoc=document.scroll1.document.scroll2
function up(){
if (!document.layers) return
if (scrolldoc.top<0)
scrolldoc.top+=10
temp2=setTimeout("up()",50)
}
function down(){
if (!document.layers) return
if (scrolldoc.top-150>=scrolldoc.document.height*-1)
scrolldoc.top-=10
temp=setTimeout("down()",50)
}


function clearup(){
if (window.temp2)
clearInterval(temp2)
}


function cleardown(){
if (window.temp)
clearInterval(temp)
}


</script>
<br/><span style="&{nsstyle};"><a onmouseout="clearup()" href="#" onmousedown="up()" onclick="return false"
onmouseup="clearup()"></a> <a
onmouseout="cleardown()"
onmousedown="down()" href="#" onmouseup="cleardown()" onclick="return false"></a><a href="#" onclick="if (document.layers) scrolldoc.top=0;return false"></a><a href="#" onclick="if (document.layers) scrolldoc.top=scrolldoc.document.height*(-1)+150;return false"></a></span>














<script type="text/javascript">


var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)


</script>

edit kode di atas dan ganti dengan menu anda selesai...
jika ada pertanyaan silahkan tulis di komentar dan semoga bermanfaat

Read More