Menu Diatas Header Seperti Animesave

Kali ini saya akan membagikan Cara membuat Menu Diatas Header Seperti Animesave, Cara membuatnya cukup simple buat kamu yang masih newbie, ok langsung saja kita mulai tutorial pada artikel kali ini.

Pertama Buka Blogger > Template > Edit HTML > Cari Header(bisa Lompat ke Widget)

Kedua, Salin dan Tempelkan HTML dibawah ini keatas <div id="wrapper"/> atau <div id="outer-wrapper"/>Blog kalian

<div class="menutops">
<div class="perapihs">
<div class="req">
<a title="Request" alt="Request" href="#"><i class="fa fa-pencil-square-o"/> Request</a></div>
<div class="fans">
<a title="Fanspage" alt="Fanspage" href="#"><i class="fa fa-facebook-official"/> Fanspage</a></div>
<div class="grup">
<a title="Group Facebook" alt="Group Facebook" href="#"><i class="fa fa-users"/> Group Facebook</a></div>
<div id="randompost">
<a title="Random" alt="Random" href="#"><i class="fa fa-th"/> Surprise Me!</a></div>
<div class="pagez">Fanspage: 
<div class="tombolfp">
<!-- Like -->
<div class='fb-like' data-action='like' data-href='LINK FANSPAGE' data-layout='button_count' data-share='false' data-show-faces='false' data-width='47'/>
<!-- END Like -->
</div></div>
</div>
</div>

Ketiga Salin CSS dibawah ini dan letakkan Sebelum </b:skin> atau </style>

.menutops{z-index:9999;width:100%;position:relative;height:32px;margin:0 auto;background-image:-webkit-linear-gradient(top,#333333,#222222);box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1)}
.perapihs{width:990px;margin:0 auto}
.req{margin-top:9px;float:right}
.req a{background-color:#da4f49;background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-repeat:repeat-x;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);color:#FFF;font-size:11px;padding:5px 6px;border-radius:3px;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}
.req a:hover{background:#bd362f}
.fans{margin-top:9px;margin-right:4px;float:right}
.fans a{background-color:#0074cc;background-repeat:repeat-x;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);font-size:11px;padding:5px 6px;border-radius:3px;color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}
.fans a:hover{background-color:#0055cc}
.grup{margin-top:9px;margin-right:4px;float:right}
.grup a{background-color:#5bb75b;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);font-size:11px;padding:5px 6px;border-radius:3px;color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}
.grup a:hover{background-color:#51a351}
#randompost{margin-top:9px;margin-right:4px;float:right}
#randompost a{font-size:11px;padding:5px 6px;padding-bottom:4px;border-radius:3px;color:#333;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:#f5f5f5;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}
#randompost a:hover{background-color:#e6e6e6}
.pagez{font-weight:bold;position:relative;border:1px solid #3C3838;border-top:0;border-bottom:0;padding:10px 7px;font-size:11px;color:#DDD;text-align:left;width:153px;float:left;margin-right:10px;height:12px;box-shadow:inset 0 1px 5px #000;background:#333}
.tombolfp{top:6px;right:6px;position:absolute;width:92px;float:right}

Setting

Tag	Keterangan
LINK FANSPAGE	Ganti denga Url Halaman Facebook
width:990px	Sesuaikan dengan lebar blog (ganti 990px)

Baca Juga : Cara Membuat Tombol Surprise me!

Sekian tutorial yang saya bagikan kali ini, semoga bermanfaat & Terima kasih.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: