Cara Membuat Header Menu Fansub

Hai Minna-san, Admin Terkece Balik lagi nih xD

Kali ini Admin paling kece ini akan membagikan Tutorial yg gak Kalah Menarik ~

Yaitu , CARA MEMBUAT HEADER MENU FANSUB

Ya, Mimin dapat nih kode dari Fanshare Anime yang sangat terkenal

Yaitu AnimeSave

Langsung saja deh Dicoba xD

Pertama Silahkan Liat Demo ya 

---

DEMO

---

Langsung Saja Kita mulai Tutorial ya,
Silahkan Letakkan CSS Dibawah ini di atas </style> / </b:skin>

 .deretinfo {
  z-index: 9999;
  width: 100%;
  position: fixed;
  height: 32px;
  margin: 0 auto;
  background-image: -moz-linear-gradient(top,#333333,#222222);
  background-image: -ms-linear-gradient(top,#333333,#222222);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#333333),to(#222222));
  background-image: -webkit-linear-gradient(top,#333333,#222222);
  background-image: -o-linear-gradient(top,#333333,#222222);
  background-image: linear-gradient(top,#333333,#222222);
  background-repeat: repeat-x;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333',endColorstr='#222222',GradientType=0);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
}
.deretrapi {
  width: 990px;
  margin: 0 auto;
}
.req {
  margin-top: 9px;
  float: right;
}
.req a {
  background-color: #da4f49;
  background-image: -ms-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));
  background-image: -webkit-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: -o-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: -moz-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: linear-gradient(top,#ee5f5b,#bd362f);
  background-repeat: repeat-x;
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ee5f5b',endColorstr='#bd362f',GradientType=0);
  color: #FFF;
  font-size: 11px;
  padding: 5px 6px;
  border-radius: 3px;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}
.fans {
  margin-top: 9px;
  margin-right: 4px;
  float: right;
}
.fans a {
  background-color: #0074cc;
  background-image: -ms-linear-gradient(top,#0088cc,#0055cc);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0055cc));
  background-image: -webkit-linear-gradient(top,#0088cc,#0055cc);
  background-image: -o-linear-gradient(top,#0088cc,#0055cc);
  background-image: -moz-linear-gradient(top,#0088cc,#0055cc);
  background-image: linear-gradient(top,#0088cc,#0055cc);
  background-repeat: repeat-x;
  border-color: #0055cc #0055cc #003580;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);
  font-size: 11px;
  padding: 5px 6px;
  border-radius: 3px;
  color: #FFF;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}
.grup {
  margin-top: 9px;
  margin-right: 4px;
  float: right;
}
.grup a {
  background-color: #5bb75b;
  background-image: -ms-linear-gradient(top,#62c462,#51a351);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));
  background-image: -webkit-linear-gradient(top,#62c462,#51a351);
  background-image: -o-linear-gradient(top,#62c462,#51a351);
  background-image: -moz-linear-gradient(top,#62c462,#51a351);
  background-image: linear-gradient(top,#62c462,#51a351);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#62c462',endColorstr='#51a351',GradientType=0);
  font-size: 11px;
  padding: 5px 6px;
  border-radius: 3px;
  color: #FFF;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
}
#abt-random {
  margin-top: 9px;
  margin-right: 4px;
  float: right;
}
#abt-random 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;
  background-image: -ms-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));
  background-image: -webkit-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: -o-linear-gradient(top,#ffffff,#e6e6e6);
  background-image: linear-gradient(top,#ffffff,#e6e6e6);
  background-image: -moz-linear-gradient(top,#ffffff,#e6e6e6);
  background-repeat: repeat-x;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
.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;
} 

Setelah itu, Silahkan Letakkan Kode HTML dibawah ini diatas <div class="header-wrap"> / <div id="header-wrap"> / <div class="header-wrapper"> / <div id="header-wrap">

 <div class="deretinfo">
<div class="deretrapi">
<div class="req">
<a alt="Request" href="https://www.blogger.com/request" title="Request"><i class="icon-edit"></i> Request</a></div>
<div class="fans">
<a alt="Fanspage" href="https://www.facebook.com/AnimesaveAON" title="Fanspage"><i class="icon-facebook-sign"></i> Fanspage</a></div>
<div class="grup">
<a alt="Group Facebook" href="https://www.facebook.com/groups/animesave/" title="Group Facebook"><i class="icon-group"></i> Group Facebook</a></div>
<div id="abt-random">
<a alt="Random" href="https://www.blogger.com/random" rel="411" title="Random"><i class="icon-th"></i> Surprise Me!</a></div>
<div class="pagez">
Fanspage: <br />
<div class="tombolfp">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimesaveAON&amp;width=92&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=21&amp;appId=657866620943893" style="border: none; height: 21px; overflow: hidden; width: 92px;"></iframe></div>
</div>
</div>
</div>
</div>

Nah , Mudahkan :3
Ya Emang gak begitu sulit kok xD
Jika Ada Masalah Silahkan Komentar dibawah ya xD

Pengunjung yang baik , Pasti akan meninggalkan Komentarnya

Biarpun itu Hanya Pertamax! / Terimakasih