Pinky Diary: Tutorial Cara Membuat Menu Tab kayak punyaku (^-^)

Minggu, 14 Januari 2018

Tutorial Cara Membuat Menu Tab kayak punyaku (^-^)




Aku mau ngejawab request kak Angel nih, gimana cara ngebuat menu tab kayak punyaku???

Mau tau? Baca saja!


  1. Login ke blogger.com kalau belum login.
  2. Klik Tata Letak yang ada dipinggir sebelah kiri.
  3. Klik Tambahkan Gadget.
  4. Pilih HTML/JavaScript.
  5. Copas Kode ini:
<style>
/* Menu Horizontal Dropdown ----------------------------------------------- */
 #menuwrapper{
width:960px;
height:30px;
background:#FFBFFF;
margin: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:Pri, serif;
}
 #menubar a{  display:block;
text-decoration:none;
color:#FF80FF;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
margin-left:20px;
padding-top:9px;
padding-left:18px;
padding-right:18px;
text-align:center;}
#menubar a.trigger{
text-align:center;
background-image:url(http://i.imgur.com/peRXtgL.gif);
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;
padding-right:18px;
}
#menubar li{
float:left;
position:static;
width:auto}
#menubar li ul,#menubar ul li{
width:170px}
#menubar ul li a{
text-align:left;
color:#666;
font-size:11px;
font-weight:400;
border:none;
padding:5px 10px}
#menubar li ul{
z-index:100;
position:absolute;
display:none;
background:#eee;
padding-bottom:5px;
border:1px dashed #fff;}
 #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{
background:#FF7FFF;
color:#778899;}
 #menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{
color:#FF3FFF;
background-color:transparent;
text-decoration:none}
#menubar li ul li.hr{
border-bottom:1px solid #fff;
border-top:1px solid #fff;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:4px 0}
#menubar ul a:hover{
background-color:#ff3fff!important;
color:#ff3fff!important;
text-decoration:none}
 </style>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='YOUR BLOG ADRESS'><img border='0' src='http://i.imgur.com/f8pbAeb.png' style='padding:0px;'/> Home</a></li>
<li><a href='PROFILE'>Profile</a></li>
<ul>
</ul>
<li><a class='trigger'>Tutobies</a>
<ul>
<li><a href='TUTORIALS'>Tutorials</a></li>
<li><a href='FREEBIES'>Freebies</a></li>
  </li></ul></div>
   6. Klik Simpan.

MERAH: Teks di menu tab

ORANYE: Warna background

HIJAU: Link blog kamu

BIRU: Link halaman atau label

2 komentar: