hai apa kabar semua... ketemu lagi sama yasjudan. kali ini saya akan postingan tentang membuat menu menu di blog . seperti di blog aku ini.. langsung saja ke intinya.
caranya:
1. buka
www.blogger.com .
2. masuk dasbor, pilih template.
3. klik edit html.
4. letakkan kode di bawah ini. tepat di atasnya ]]></b:skin> ingat di atasnya.
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaD_PS1Mbtk5Xxlwgvn2eDh_EKeBeaJVY6pMIUZE7mLjsBWaG20cql9i7suenOXko12fTqDayq-W180SkGE1P_VgRwDngqYL9GS7ZJW_zFfoGDciW-P7nBr244qXKBI7NRM7ybVy6NSTg/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjwLmRvSiQ4hGhyphenhyphenZfHYWHJpTZ6T5ceQK9lNJBW0t42GU5G_kZr5zP7m_qHKXA82pOdvT0JK_r0_9-aNFzCVu-j4Lw3r_N88C0sCxHmC54WYqlPq_GoNj6pxkIPTSuqOspUO5d83WLETM/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar 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} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
5. cari kode <header> letakkan kode ini tepat diatasnya.
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='
http://yasjudan2.blogspot.com/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='
https://plus.google.com/u/0/116514951300239201115/posts' target='new'>My Profil</a></li>
<li><a href='
http://www.facebook.com/pages/Mohammad-Yasjudan/423152014416108' target='new'>My Facebook</a></li>
<li><a href='
http://www.smkumarzahid.sch.id' target='new'>My School</a></li>
<li><a class='trigger'>Kategori's</a>
<ul>
<li><a href='
http://carainternetangratiss.blogspot.com/' target='new'>cara internetan gratis</a></li>
<li class='hr'/>
<li><a href='
http://ujiannasionalsmasearchujiannasional.blogspot.com/' target='new'>Ujian Nasional SMA</a></li>
<li class='hr'/>
<li><a href='
http://unsmps.blogspot.com/' target='new'>Ujian Nasional SMP </a></li>
<li class='hr'/>
<li><a href='
http://unsds.blogspot.com/' target='new'>Ujian Nasional Sekolah Dasar (SD)</a></li>
<li class='hr'/>
<li><a href='
http://fatin-shiqia.blogspot.com/' target='new'>Lagu Fatin Shidqia</a></li>
<li class='hr'/>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://yasjudan2.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://http://yasjudan2.blogspot.com/'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-249ivKtcRn66uP1R9MU7Fk-VAbVWDqnt8w_HZEbSGynwyqPbO2mbk1aWfoz6X4OgIYzTMUIJRuQIBXybQ9qOV2NQvs8LoYUMNTsCG-SEHdymyqj2xNA7cCWn9BfHZ-tu86rX6s411P0/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6iuhnbA-cIK2nSSSzJnB6aHD11nI5yOwCH11KyKtwRClsurA-tsOrte97nmPFHT9o028RY6CDkN_FN_06kQ186x9Ud9XcQinydBWbBIX77weyf_rEVpp0J8Od1VX_G0xIrIVSGziNIM/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
6. simpan template anda dan lihat hasilnya...
catatan ganti huruf yang berwarna merah dengan url anda.
Artikel lain:
1. cara membuat akun gmail.
klik disini.
2. cara membuat fans page di facebook.
klik disini.
3. cara membuat tulisan biru di facebook.
klik disini.
4. cara menu di blogger.
klik disini.
5. cara membuat tulisan bergerak mengikuti mouse.
klik disini.
6. cara internetan grats.
klik disini.
7. cara mengubah mouse di blog.
klik disini.
Home
