Cara Membuat Floating Spoiler Menu Di Blog

Viyan Pradita Kamis, Juli 07, 2011 ,

Cara membuat floating menu dengan efek slide, blogwallking dapet trik yang menurut saya cukup menarik dan keren, selain bisa untuk mempercantik blog, menu floating ini juga bisa menghemat tempat di blog. Menariknya lagi untuk kode'nya tanpa menggunakan script.js hanya menggunakan kode CSS. Nah, pasti tidak membuat berat blog kan?? Penasaran??
Sobat bisa melihat demonya disini, (perhatikan menu kiri bawah), atau bisa melihat scrennshot'nya dibawah ini:


Screenshot
menu-floating-kodeblogger.png
Cara membuatnya sangatlah mudah. Bila sobat tertarik, berikut langkah-langkah membuatnya.

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Add Gadget, dan pilih HTML/JavaScript
4. Lalu masukan kode berikut didalamnya

<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 diatas, itu untuk mengatur posisi menu floating.
Bila sobat ingin menaruhnya di bagian kanan atas dengan slide kebawah, ganti kode yang berwarna merah dengan kode berikut:

right:10px;
top: 5px;

Bila ingin berada di bagian kiri bawah, dengan slide kearah atas, ganti dengan kode berikut:

left:10px;
bottom: 5px;

Warna Biru, itu untuk judul menu floating.
Warna Hijau itu adalah link url yang ingin sobat pasang, dan juga untuk nama menu gantilah sesuai dengan judul dari link url tersebut.
Selebihnya bisa sobat edit-edit sendiri sesuai keinginan sobat.

5. Bila sudah, jangan lupa klik Simpan / Save.

Begitulah kiranya Cara Membuat Floating Spoiler Menu Di Blog, semoga bermanfaat.
Sumber: full-tricks.blogspot.com

Article Information:
Description: Cara Membuat Floating Spoiler Menu Di Blog
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Floating Spoiler Menu Di Blog - Rating: 4.5

Ditulis Oleh :

Artikel Cara Membuat Floating Spoiler Menu Di Blog ini dipublish pada hari: Kamis, Juli 07, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

16 komentar
Terjun Ke Kolom Komentar

  1. ente mah jauh2 cari yg ginian sampe ke full-tricks.blogspot.com
    disaya mah dah kemana lagi...hohohoho
    sip sip sip
    nih
    Make Menu with Fixed
    aaaaaaahhh keliatan gak acak2 blog sayah nih...hihihihi

    BalasHapus
  2. @Beben Koben: Huahaha, gak sengaja blogwalking kang beben :p
    koneksi dirumah leled neh kang :( jd gak uprek2 blog akang.

    BalasHapus
  3. ora opo2...mantap jg blog full trick...maknyusss ;))

    BalasHapus
  4. wuiihhh mantab mas menunya, ternyata spoiler bisa juga diaplikasikan di floating menu

    BalasHapus
  5. wow kk :D menarik wat aq coba nie

    tak jajal sit yo :D

    BalasHapus
  6. Mantab bener ni tutorialnya mas bro, izin save page yach..

    BalasHapus
  7. sip ah sob... trus berkarya,, dan berinovasi :) semangat

    BalasHapus
  8. hehe keren nii :) ane izin save ya gan :)

    BalasHapus
  9. mantab gan... (sambil silaturahim).. :)

    BalasHapus
  10. @ALL: Ok, Silahkan, makasih yo... :)

    BalasHapus
  11. keren abis.....
    gak sengaja muter2 masuk ke blog master.

    BalasHapus
  12. wah keren nih penjelasnnya detail banget gan

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers