Menu ini juga memiliki fitur sosial media dan Ada juga kotak pencarian google, Menu ini juga mengunakan Css3, dengan tampilan lebih elegan dan menarik, Langsung saja kita belajar membuat menu ini, tutorialnya seperti di bawah ini.
- Pertama, Masuk ke Blogger
- Kedua, Pergi ke Menu ''Template'' >> Klik ''Edit HTML''
- Setelah berada disana, cari kode ]]></b:skin> Setelah ketemu masuk kode dibawah ini, di atas kode tadi.
#btrix1nav{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
width:900px;
margin: 0 0 0 0px;
padding: 12px 0 8px 0;
clear: both;
background: #696969 left bottom no-repeat; }
#btrix1nav .catList{padding: 4px 0 0 35px;float: left;margin-top:-3px; }
#btrix1nav .pageList{padding: 8px 0px 0 0;float: right; }
#btrix1nav ul li{float: left;margin: 0 18px 0 0 ;}
#btrix1nav a{color: #fff;list-style:none;text-decoration: none;}
#btrix1nav a:hover{color: #919191;}
#btrix1nav li {list-style:none;text-decoration:none;}
#search{margin: -2px 20px 0 0;float: right; }
#updatesBox { margin-left: 100px; }
- SELANJUTNYA :
- Sekarang Pergi ke ''Tata Letak'' >> Klik ''Tambah Gadget''
- Pilih Gadget ''HTML/JavaScript''
- Setelah itu, masukan kode dibawah ini, di dalam gadget tersebut
<div class="clearfix" id="btrix1nav">
<ul class="catList">
<li class="cat-item cat-item-5"><a href="#">Home</a></li>
<li class="cat-item cat-item-3"><a href="#">Downloads</a></li>
<li class="cat-item cat-item-6"><a href="#">Tools</a></li>
<li class="cat-item cat-item-4"><a href="#">Css3</a></li>
<li class="cat-item cat-item-4"><a href="#">HTML</a></li>
<li class="cat-item cat-item-4"><a href="#">Tips</a></li>
<li class="cat-item cat-item-31"><a href="#">About</a></li>
<li class="cat-item cat-item-11"><a href="#">Contact Us</a></li>
</ul>
<div id="search">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="004972222991511809341:kobh4_l5t3m" />
<input name="ie" type="hidden" value="ISO-8859-1" />
<input class="googleSearchField" name="q" size="20" style="background-color: white; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(126, 157, 185); padding: 2px;" type="text" />
<input class="button" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="bloggertrix.com/" /><input name="ref" type="hidden" value="" /><input name="ss" type="hidden" value="" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&lang=en" type="text/javascript"></script>
</div>
<div id="updatesBox">
<a alt="Subscribe to RSS" class="updatesIcon" href="http://feeds.feedburner.com/USERNAME" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLT_l5-gmg0fwQgqyMZkHNxsmlcgZ1y0KodWXA8GOc5Aa-8fgTiuRb4dUKxj-SJdt8ZmnqGAsT13a-Stll0O2gIsqnEYO7Jsx6gtFrUyuRKuU18fbTThFzawPx-DFLMkTcrp5rp6tk5pc/s1600/btrix_RSS-icon.png" style=""></a>
<a alt="Follow Us" class="updatesIcon" href="http://twitter.com/USERNAME" target="_blank" title="Follow Us"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lLqNDCgkKY_4GZoP8HSsLncdxUgQCNrBAKVeq26EPssNYBHmvEbT4VQXov3D8xWvt-OScDhh3ZmaxVYaO8Pux102Ib8RVoA_6Lk3M83a-avtoqdH1Z3xhTztf3mar5hK58RwMHP4tXU/s1600/btrix-twitter-icon.png" /></a>
<a alt="Become a Fan" class="updatesIcon" href="http://www.facebook.com/USERNAME" target="_blank" title="Become a Fan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8HZ3NyM7xd9-JhygoohNbGMxMvdW_ZrPxlvuiJD_W_JeFlqKJFn-oH-nD-XT6spyQoD9iJvPZ2F5aVZY4Tp6wh6PV263_xFAljhSfoy3qUCQLzOMANKnu7omOUBjJyMZxJFeKmIlPv0/s1600/btrix-facebook-icon.png" /></a></div>
</div>
- Ganti USERNAME Dengan username seperti yang di atas.
- Ganti juga # ganti dengan url yang anda ingin tuju.
- Ganti Home, Download, Tools dan lain lain dengan tulisan anda inginkan
- Setelah selesai, Sekarang Klik ''Simpan''
