Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

CSS Floating Menu plus css3 Effects

CSS Floating Menu ini telah dikembangkan dengan melibatkan kode css3 transition dan css3 transformation sehingga terlihat jauh lebih dinamis dibandingkan apbila kita hanya menggunakan kode css saja. CSS3 transition & css3 transformation difungsikan untuk menciptakan gerak animatif saat pemunculan menu sekaligus memberi efek animatif saat cursor menyentuh link menu. Penggunaan scroller dimaksudkan agar menu punya kapasitas daya tampung lebih (sebanyak anda suka).

D E M O

Cara membuat :
  1. Login ke Blogger.
  2. Setelah Dasbor (Dasboard) telihat, cari dan klik "Design (Rancangan)".
  3. Halaman baru kembali akan terlihat. Klik "Edit HTML".
  4. Lakukan "Backup Template".
  5. Cari kode "]]></b:skin>"
  6. Copy dan pastekan kode css di atas kode "]]></b:skin>"
  7. Klik "Simpan Template (Save Template)".
  8. Lanjutkan dengan menyimpan xHTML melalui "Add a Gadget" yang terdapat di "Elemen Laman (Page Elemen)".
  9. Selesai (Finish).

Kode CSS :
#GRboxfloatingmenu{
       position:fixed;
       top:100px;
       left:-360px;
       width:400px;
       height:150px;
       transition:0.8s ease-in 3s;
       -o-transition:0.8s ease-in 3s;
       -moz-transition:0.8s ease-in 3s;
       -webkit-transition:0.8s ease-in 3s;
       -ms-transition:0.8s ease-in 3s;
}
#GRboxfloatingmenu:before{
       position:absolute;
       top:55px;
       right:-55px;
       transform:rotate(-90deg);
       -o-transform:rotate(-90deg);
       -moz-transform:rotate(-90deg);
       -webkit-transform:rotate(-90deg);
       -ms-transform:rotate(-90deg);
       width:130px;
       height:40px;
       content:"Daftar Menu";
       background:rgba(0,0,0,0.5);
       color:#6FF;
       padding-left:20px;
       line-height:36px;
       font-size:18px;
       font-weight:bold;
}
#GRboxfloatingmenu:hover{
       left:0;
       z-index:9;
}
#GRboxfloatingmenu:hover,.floating-menu a{
       transition:0.8s ease-in;
       -o-transition:0.8s ease-in;
       -moz-transition:0.8s ease-in;
       -webkit-transition:0.8s ease-in;
       -ms-transition:0.8s ease-in;
}
.floating-menu{
       postion:absolute;
       right:-400px;
       top:0;
       border-top:40px solid #888;
       border-left:4px solid #666;
       border-right:4px solid #888;
       border-bottom:20px solid #666;
       background:#eee;
       width:320px;
       height:350px;
       z-index:100;  
       overflow:auto;
       color:#FFCC33;
       padding:20px 15px;
}
.floating-menu h3{
       font-size:16px;
       font-weight:bold;
       margin:3px 0;
       padding:3px 6px;
       background:#444;
}
.floating-menu a{
       display:block;
       padding:2px 6px;
       border-bottom:1px dotted #888;
       color:#111;
       font-family:Arial;
       text-shadow:2px 2px 2px #888;
       font-size:12px;
       text-decoration:none;
       line-height:20px;
}
.floating-menu a:hover{
       background:#930;
       color:#fff;
}

xHTML :
<div id="GRboxfloatingmenu">
<div class="floating-menu">
<h3>Judul Menu Pertama</h3>
<a href="Link_Menu-1">Menu-1</a>
<a href="Link_Menu-2">Menu-2</a>
<a href="Link_Menu-3">Menu-3</a>
<a href="Link_Menu-4">Menu-4</a>
<a href="Link_Menu-5">Menu-5</a>
<a href="Link_Menu-6">Menu-6</a>
<a href="Link_Menu-7">Menu-7</a>
<a href="Link_Menu-8">Menu-8</a>

<h3>Judul Menu Kedua</h3>
<a href="Link_Menu-1">CSS</a>
<a href="Link_Menu-2">HTML</a>
<a href="Link_Menu-3">Javascript</a>
<a href="Link_Menu-4">Adobe Photoshop</a>
<a href="Link_Menu-5">Animasi Gif</a>
<a href="Link_Menu-6">Menu Horisontal</a>
<a href="Link_Menu-7">Menu Vertical</a>
<a href="Link_Menu-8">Text Effects</a>
</div>
</div>

Catatan/Keterangan :
  1. Jika anda membutuhkan panduan dan tutorial tentang cara "Backup Template", "Cara mencari kode html" dan berbaga "Cara menyimpan javascript, kode css dan xHTML", silahkan buka Special Tutorials di menu sebelah kiri halaman.
  2. Link_Menu-1 s/d Link_Menu-8 merupakan URL setiap menu yang digunakan.
    Contoh menggunakan link:
    <a href="http://gubhugreyot.blogspot.com/2012/03/menampilkan-profil-pengunjung-dg-hover.html" title="Cara membuat hover efek untuk menampilkan gambar berbeda dengan css3">Cara menampilkan profil pengunjung..</a>
  3. Untuk menambah daftar menu dilakukan dengan menambah xHTML :
    <h2>Judul Menu Kedua</h2>
    <a href="Link_Menu-1">CSS</a>
    ....
    ....
    <a href="Link_Menu-...">CSS</a>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Jum'at    LEGI, Maret, 09, 2012

» Happy Blogging - gubhugreyot «

4 komentar:

  1. Salam..
    mohon solusinya, vertikal menu jg ngga bisa berjalan dgn sempurna d blog sy. hampir semua postingan baru d blog ini tdk bisa berjalan dgn baik d blog sy..
    Apa ya penyebabnya?

    BalasHapus
  2. Pro : Baimzz

    Periksa xHTML :

    tertulis : id="#GRboxfloatingmenu"

    Seharusnya : id="GRboxfloatingmenu"

    Atau buka lagi tutorialnya karena sudah update 18 maret 2012
    CSS3 Floating menu :
    http://gubhugreyot.blogspot.com/2010/01/css-floating-menu.html

    Thank's komen-nya karena jadi tahu ada yang salah!

    gubhugreyot

    BalasHapus
  3. Artikel yang menarik. saya coba praktikkan. Sebernernya blog saya
    Science And Education masih bingung tentang kode CSS.
    Dulu kesulitan Membuat Blog Gratis, setelah jadi ingin menambahkan Menu Navigasi Nomor Halaman. Kadang ribet juga, ingin Menampilkan Posting Otomatis Blog ke Facebook masih bingung. Hehehe

    Sekarang ingin meningkatkan page rank dan Meningkatkan Trafik Alexa Rank

    BalasHapus

 
GR | Edited by | gubhug reyot