Cara Membuat Menu Melayang Di Blogspot




tutorial Menu Melayang Di Blogspot
Sekarang kita langsung saja ke cara membuat menu melayang, langkah pertama seperti biasa yaitu :
  • Login Ke Blogger
  • Terus Sobat Masuk ke Area Rancangan/Design Blog
  • Setelah itu sobat masuk ke area Edit HTML 
  • Terus Centang Expand Widget 
  • Langkah Selanjutnya sobat cari tag </head> 
  • Setelah ketemu, sobat copy kode CSS di bawah ini dan paste di atas tag </head>
Copy paste kode berikut :
<style>

div.menu-melayang {

position: fixed;

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));

background: -moz-linear-gradient(top, #000, #444);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');

 border: 1px solid #000;

 width: 180px;

 z-index: 500;

-webkit-border-top-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-moz-border-radius-topright: 10px;

-moz-border-radius-bottomleft: 10px;

border:none;

padding:10px 10px 10px 10px;

 }

div.menu-melayang a, div.menu-melayang h3 {

display: block;

margin: 0 0.5em;

color:#FFF; }

div.menu-melayang a:hover {

color:#FF0000;

background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));

background: -moz-linear-gradient(top, #aa1317, #ed1c24);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');

color:#FFF;

cursor: pointer;

text-decoration: none;

padding: 5px 5px 5px 5px;

-webkit-border-radius: .5em;

-moz-border-radius: .5em;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

box-shadow: 0 1px 2px rgba(0,0,0,.2);   

}

  </style>
Setelah Itu sobat cari  tag <body> dan masukan kode di bawah ini di bawah tag <body>
<div class="menu-melayang">

<h3>Menu Melayang</h3>

<a href="http://Cobasanasini/">Anchor Link</a>

<a href="http://Cobasanasini/">Anchor Link</a>

<a href="http:// Cobasanasini /">Anchor Link</a>

<a href="http:// Cobasanasini /">Anchor Link</a>

</div> 
Sebelum template blog sobat di save  ganti url (http:// Cobasanasini /) dengan url milik sobat. Setelah itu tekan tombol save dan lihat hasilnya, Good Luck Happy Blogging 



0 Coment "Cara Membuat Menu Melayang Di Blogspot", Baca atau Masukkan Komentar

Posting Komentar