widodo_ngk: menu

Cara membuat menu di blogspot
Tampilan dasar dari blog adalah sbb:

Berikut langkah-langkah dalam membuat menu di blog
1.    login ke Blog kamu
2.    Masuk ke pengaturan TempleteEdit HTMLceklist pada Expand Template Widget
3.    Cari Kode ]]></b:skin> Gunakan tombol CTRL + F untuk mempermudah pencarian kode
4.    Jika kode sudah ketemu,, Copy kode css berikut dan letakan diatas kode ]]></b:skin>
/* Horyzontal Droupdown menu
----------------------------------------------- */
#top-wrapper{background:url(http://1.bp.blogspot.com/-Dz55XjfHfIU/T2AtDWgb0aI/AAAAAAAAA9I/vZgjL1iEbgk/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
#topbar{width:980px;height:40px;margin:0 auto}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#top a.arrow{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:170px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
#top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}

5.    Cari lagi kode sbb : <div class='header-outer'>
6.    Tambahkan kode html yang berwarna biru berikut di bawahnya

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="30" name="txt" rows="10" wrap="VIRTUAL">

<li><a href='/'><span>Welcome</span>Homepage</a></li>

<li><a href='#'><span>This is</span>About Us</a></li>

<li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>

<ul>

</ul>

</li>

<li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>

<ul>

</ul>

</li>

<li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>

<ul>

</ul>

</li>

</ul>

</div>

</div>

</div></div>

</textarea></div>
</form>
</div>

7.    Tinjau dulu sebelum simpan
8.    Kalau sudah benar klik simpan template
9.    Hasilnua sbb:

10.    Jika ingin berfungsi link menunya maka buat posting baru atau lihat posting lama kemudian edit posting klik tautan permanen maka di situ ada alamat link posting kemudian copas alamatnya ke link html menu
Contoh:
•    Link yang di posting adalah
            http://widodosaputra85.blogspot.com/2013/02/partisi-hardisk.html
•    Kode yang di sub menu adalah
<li><a href='#'>Sub menu 1</a></li>

Maka kita rubah menjadi
<li><a href=' http://widodosaputra85.blogspot.com/2013/02/partisi-hardisk.html ‘>
Partisi hardisk </a></li>
11.selesai

widodo_ngk

Senin, 18 Februari 2013

menu

Tidak ada komentar:

Posting Komentar