Blog Mbahyar

Cara membuat menu melayang di blog, blogwallking mendapatkan trik yang menurut saya cukup menarik dan keren, tetapi bisa untuk mempercantik blog, menu ini mengambang juga dapat menghemat ruang pada blog. Menariknya lagi untuk kode'nya tanpa menggunakan script.js hanya menggunakan kode CSS. Yah, tentu saja tidak membuat blog berat badan yang tepat? Penasaran?

Anda dapat melihat scrennshot'nya disamping:

Cara membuatnya sangat mudah. Ketika teman saya tertarik, berikut adalah langkah-langkah untuk membuatnya.

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tambah Gadget dan pilih HTML / JavaScript

4. Lalu masukkan kode berikut di dalamnya

<style text-type="CSS">
#floatmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#floatmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#floatmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#floatmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#floatmenu li a:hover{
color:#fff;}
#floatmenu:hover{
z-index:5;
height:175px;
</style>

<div id="floatmenu">
<h3>TITLE / JUDUL</h3>
<ul>
<li><a href="LINK URL">MENU-1</a></li>
<li><a href="LINK URL">MENU-2</a></li>
<li><a href="LINK URL">MENU-3</a></li>
<li><a href="LINK URL">MENU-4</a></li>
<li><a href="LINK URL">MENU-5</a></li>
</ul>
</div>

Keterangan:

Warna merah pada kode di atas, itu adalah untuk mengatur posisi menu mengambang.

Jika sobat ingin meletakkannya di bagian kanan atas slide down, ganti kode yang berwarna merah dengan kode berikut:



Jika Anda ingin berada di bagian kiri bawah, dengan slide ke arah atas, ganti dengan kode berikut:



Warna biru, mengambang ke menu title.

Hijau adalah warna yang Anda ingin link url sobat pasang, dan juga untuk mengubah nama menu sebagai judul link url.

Sisanya bisa sobat edit-edit sendiri sesuai keinginan pasangan.

5. Jika demikian, jangan lupa klik Save / Simpan.

Itu mungkin Cara Membuat Menu Spoiler Melayang  Dalam Blog, semoga bermanfaat.

Sumber: full-tricks.blogspot.com