Menambah Menu Fly seperti NavBar Blogger pada Wordpress

Melalui tutorial ini, anda akan membuat menu tersendiri pada posisi paling atas theme wordpress anda. Seperti yang terlihat diatas blog ini. Item yang ditambahkan adalah tanggal, twitter follower, fb fans dan search form.

Melalui langkah mudah ini, anda tidak perlu mencari plugin, cukup modifikasi sebentar. Yang harus Anda lakukan hanyalah modifikasi pada dua file, yaitu style.css dan header.php

Style.css
Tambahkan kode css ini di baris paling bawah pada file style.css, lalu update atau save jika sudah selesai.

/* menu teratas */

#top {
margin: 0px;
padding: 0px;
background: repeat scroll 0% 0% rgb(221, 221, 221);
background-color: #D01010;
border-bottom: 1px solid rgb(187, 187, 187);
position: fixed;
width: 100%;
top: 0px;
z-index: 9999;
height: 30px;
box-shadow:2px 2px 8px rgba(0, 0, 0, 1);
}

#top-content {
width: 1014px;
margin: 0px auto;
padding: 0px;
}

#top-bar {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}

#top-bar ul {
list-style: none outside none;
margin: 2px 0px;
padding: 0px;
}

#top-bar li {
list-style: none outside none;
margin: 0px 5px 0px 0px;
padding: 0px;
display: block;
font: 20px/22px 'BebasNeueRegular',Arial,Helvetica,sans-serif;
color: #ffffff;
float: left;
}

#search {
width: 180px;
margin: 0px;
padding: 2px 0px;
float: right;
}

#search form {
margin: 0px;
padding: 0px;
}

#search form input.key {
margin: 0px 2px 0px 0px;
padding: 1px;
border: 1px solid rgb(170, 170, 170);
background: none repeat scroll 0% 0% rgb(255, 255, 255);
font: 11px Arial,Helvetica,sans-serif;
}

#search form input.go {
margin: 0px;
padding: 0px 1px;
border: 1px solid rgb(51, 51, 51);
background: none repeat scroll 0% 0% rgb(102, 102, 102);
font: 11px Arial,Helvetica,sans-serif;
color: rgb(255, 255, 255);
}

Cari kode ini

<div id="top">
<div id="top-content">
<!--begin top bar-->
<div id="top-bar" class="clear">
<ul>
<li><?php _e("Hari Ini", "nt"); ?>  <?php echo date_i18n('l d F Y'); ?></li>
<li><iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 233px; height: 20px;" class="twitter-follow-button twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375588725376&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=IzulV3&amp;show_count=true&amp;show_screen_name=true&amp;size=m" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>				


<li><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FPosmetrobatam%2F133548021752&amp;width=200&amp;height=35&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=255528544735" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:35px;" allowTransparency="true"></iframe></li>

<li><script id="_wautvs">var _wau = _wau || []; _wau.push(["small", "5m54cjzxmrro", "tvs"]);<br/>(function() {var s=document.createElement("script"); s.async=true;<br/>s.src="http://widgets.amung.us/small.js";document.getElementsByTagName("head")[0].appendChild(s);<br/>})();</script>
</li>
</ul>

<div id="search">
<form method="get" id="searchform" action="http://www.izulthea.blogspot.com/">
<input class="field key" name="s" id="s" placeholder="Cari..." type="text">
<input class="submit go" name="submit" id="searchsubmit go" value="Cari" type="submit">
</form>          </div>
</div>
 <!--end top bar-->  
</div>
</div>

Catatan penting
untuk kode follower twitter, silakan anda ganti "screen_name=IzulV3" menjadi "screen_name=NAMAANDA"
untuk fans page fb, silakan anda atur di sini, jangan lupa pas generate code pilih iframe.

untuk form pencarian, silakan ganti action="http://www.izulthea.com/" menjadi action="http://www.bloganda.com/"

Share on Facebook Share on Twitter Share on Google Plus

About JackSparrow

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.