tutorial Menu Melayang Di Blogspot
Menu Melayang di Blogspot
Bismillah... pada kesempatan ini saya akan tulis tentang cara membuat menu melayang di blogspot. menu melayang ini bukanlah menu yang bisa terbang seperti burung twitter yang sering sobat saksikan di blog tetangga, tapi menu melayang disini diartikan menu yang tetap pada posisinya jika blog di geser ke bawah dan ke  atas.

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>
KODE CSS MENU MELAYANG
<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://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
<a href="http://alamat-url/">Anchor Link</a>
</div> 
Sebelum template blog sobat di save  ganti url (http://alamat-url/) dengan url milik sobat. Setelah itu tekan tombol save dan lihat hasilnya, Good Luck Happy Blogging 
Axact

Z-PLATE

Terima Kasih Telah Berkunjung dan Berkanan Membaca artikel dari Blog Kami, Silahkan Masukan Komentar Untuk menambah Motivasi Kami.

Post A Comment:

0 comments: