Cara Menaruh Menu Statik di Blogger

Nah jika kau bosan dengan tampilan blog kamu yang tidak terdapat menu horizontal, mungkin cara ini bisa mempercantik tampilan blog kamu (tergantung template). Berikut langkah2nya :

1. Masuk ke Blogger.com

2. Pilih Rancangan --> Edit HTML --> Backup template terlebih dahulu Lihat disini, setelah itu centang expand template widget.

3. Cari kode ini ]]></b:skin> gunakan ctrl+f untuk mempermudah pencarian. Lalu copas kode css dibawah ini dan letakan sebelum kode ]]></b:skin> tadi.

#sidemenu{
   position:fixed;
   text-align:left;

/*If the menu location is not ok, modify the next values */
         margin-top:100px;
   margin-left:-28px;
}

* html #sidemenu{  /*for IE*/
 position:absolute;
 }

#sidemenu a img{
 opacity:1;
 -moz-opacity:1;
 filter:alpha(Opacity=100);
}

#sidemenu a:hover img{
 opacity:0.8;
 -moz-opacity:0.8;
 filter:alpha(Opacity=80);
 position:relative;top:0px;left:2px;
}

* html #sidemenu a img{
 filter:alpha(Opacity=100);
 }

#sidemenu img{
 margin-bottom: -5px;
 }

* html .sidemenu{
 margin-bottom: -3px;
}

4. Kemudian cari lagi kode ini <div id='content-wrapper'> dan letakan kode css dibawah ini disamping kode

<div id='content-wrapper'>.

<div id='menulateral'>
 <span>
 <a href='http://NAMA-BLOG-KAMU.blogspot.com/' style='border:0;' title='Beggining'><img alt='Beggining' class='sidemenu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF1ejgGert3g8XwGsBmcRKdhhRduAsbQIu3ROt7Ta0TfdV6zhNl69gD8vHlWXanx0cLchsTMmp6s7FdPv3wrSLkmhVj7gRhkRIL7BXpNarT0cjEAD5FgUVKo1jdFadFvwvfTmEUfjFpE4/s1600/menu-lateral-inicio.png'/></a>
 <br/><a href='#BlogArchive1' style='border:0;' title='File'><img alt='File' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtdyp6srGftGHg2CtIvt3sqD_co3g3QAsQe6Hunr-wbjCe-cVvF3FOjIqOtCyh-IwowrIBpxF1o48Krj_3rzYS0rzXTDKfvKQdP4kVJwu_XWe5PIMp9AGfj9nX_F3hnrgcdOL_g6_Vv4k/s1600/menu-lateral-archivo.png'/></a>
 <br/><a href='mailto:ALAMAT-EMAIL-KAMU@GOOGLE/YAHOO.com' style='border:0;' title='Contact'><img alt='Contact' class='sidemenu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2AnLBuflfXva5ppy4uNRn-cJZaswaasQypv_ooXPSTUoIfRWgcrndjmvTquWybVgqMi-GFz76rRbLIOxq5MttLDXj_GMQTryLPRChExzPInrw1ru1BFStQZ0eWjQSkUyziAsOAiyWmcc/s1600/menu-lateral-contacto.png'/></a>
 <br/><a href='http://NAMA-BLOG-KAMU.blogspot.com/feeds/posts/default' style='border:0;' title='Subscribe our Feed'><img alt='Subscribe our Feed' class='sidemenu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk8MhxqwiWTSvchv1-cy4vaA5mC4QrGM7wJ0Pe3vIo6VqJ5K41efnSj4AEaqDE8ojrsJaBxlCd2U3xnNtKhFMVVrZtqps_jO_MxdZY72Ope1n4gr19SRCselLgNDRmfdK5Kpjl9KtRRE4/s1600/menu-lateral-feed.png'/></a>
 <br/><a href='#' style='border:0;' title='Up'><img alt='Up"' class='sidemenu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQcb3ytkAt2jF_ApCwovQPnZvxEodBFRUSLdQJmzTGQQPXPqXmlkYvhGyFVXk_wH8tc132j6C-gTTD2HZizNltvkqZZ9p1GPmraO-41lWyICkdq3A5gcmJgErUgqVEMfv2MENh2ymC80/s1600/menu-lateral-arriba.png'/></a>
 </span>
</div>

*NOTE : GANTI TULISAN YANG BERWARNA MERAH DENGAN NAMA BLOG ATAU EMAIL KAMU.

5. Simpan template.

Postingan Terkait:

Posted in: Blogger