Cumulus swf - flash

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

Hidden Menu Tab Menu - Menu Tersembunyi

Meskipun Hidden Tab Menu ini hanya menggunakan KODE CSS dan CSS3, namun ternyata bisa memberikan penampilan yang sangat memuaskan. Sangat kompatible untuk semua browser dan dapat dengan cepat aplikasikan disetiap blog.

D E M O

Kode CSS Hidden menu :
.GRflymenu{
        position:fixed;
        font-family:Arial;
        font-size:12px;
        width:30px;
        overflow:hidden;
        left:-10px; /* original code by: gubhugreyot */
        padding:4px;
        border:6px solid transparent;
        bottom:0;
        height:158px;
        background: url(https://lh6.googleusercontent.com/-6fVY8bKNwTo/T1-qfqIQskI/AAAAAAAAAXo/kR_kOLjimp0/s170/gubhugreyot-more-info.gif) bottom right no-repeat;
        transition:width 0.5s ease-out 0.8s, background 0.4s linear;
        -o-transition:1s ease-outwidth 0.5s ease-out 0.8s, background 0.4s linear;
        -moz-transition:width 0.5s ease-out 0.8s, background 0.4s linear;
        -webkit-transition:width 0.5s ease-out 0.8s, background 0.4s linear;
        -ms-transition:width 0.5s ease-out 0.8s, background 0.4s linear;
}
.GRflymenu:hover{
        z-index:11;
        width:390px;
        left:0;/* original code by: http://gubhugreyot.blogspot.com */
        height:425px;
        background:#666;
        border-color:#aaa;
}
.GRflymenu:hover,.GRflymenu .flymenu ul li{
        transition:0.5s ease-out;
        -o-transition:0.5s ease-out;
        -moz-transition:0.5s ease-out;
        -webkit-transition:0.5s ease-out;
        -ms-transition:0.5s ease-out;  
}
.GRflymenu .flymenu{
        float:left;
        padding:5px;
        background:transparent;
        opacity:0;
        margin:3px;
        border-radius:8px; 
}
.GRflymenu:hover .flymenu{
        opacity:1.0;
        background:#aaa; 
}
.GRflymenu .flymenu ul{
        margin:0;
        padding:0 3px 0 3px;
        width:368px;
        height:380px;
        list-style:none;
        float:left;
        background:#eee;
        overflow:auto; 
}
.GRflymenu .flymenu ul li{
        padding:5px 6px 5px 30px;
        background:#888 url(https://lh4.googleusercontent.com/-u0XPRqFBfNU/T1uNTOOsV-I/AAAAAAAAAVQ/t1rX8b1tAwU/s128/gubhugreyot-bullet.png) 6px 7px no-repeat;
        line-height:18px;
        border-bottom:1px dotted #999;
        margin:0;
}
.GRflymenu .flymenu ul li:hover{
        background-color:#aaa;
        border-left:6px solid red;
}
.GRflymenu .flymenu ul li a{
        text-decoration:none;
        color:#000;
        text-shadow:#888 2px 2px 2px;
}
.GRflymenu .flymenu ul li a:hover{
        color:#C30;
}
.GRlink{display:inline-block;padding:5px 15px;width:91%;text-align:right;font-size:14px;text-shadow:3px 3px 3px #000;color:#09F;margin:2px;background:#555;text-decoration:none;}
.GRlink:hover{color:red;}

xHTML :
<div class="GRflymenu">
<div class="flymenu">
   <ul>
      <li><a href="http://gubhugreyot.blogdetik.com" title="gubhugreyot blogdetik">H O M E</a></li>
      <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/search/label/Javascript" title="All Posts under Javascript">Javascript</a></li>
      <li><a href="URL menu3" title="Title Link Menu3">CSS Code</a></li>
      <li><a href="URL menu4" title="Title Link Menu4">CSS3</a></li>
      <li><a href="URL menu5" title="Title Link Menu5">Tutorial Blogger</a></li>
      <li><a href="URL menu6" title="Title Link Menu6">Adobe Photoshop</a></li>
      <li><a href="URL menu7" title="Title Link Menu7">Widget</a></li>
      <li><a href="URL menu8" title="Title Link Menu8">Download Template</a></li>
      <li><a href="URL menu9" title="Title Link Menu9">Sownload mp3</a></li>
      <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/search/label/jQuery" title="All Posts under jQuery">jQuery</a></li>
      <li><a href="URL menu11" title="Title Link Menu11">Link Menu11</a></li>
      <li><a href="URL menu12" title="Title Link Menu12">Link Menu12</a></li>
      <li><a href="URL menu13" title="Title Link Menu13">Link Menu13</a></li>
      <li><a href="URL menu14" title="Title Link Menu14">Link Menu14</a></li>
      <li><a href="URL menu15" title="Title Link Menu15">Link Menu15</a></li>
      <li><a href="URL menu16" title="Title Link Menu16">Link Menu16</a></li>
      <li><a href="URL menu17" title="Title Link Menu17">Link Menu17</a></li>
      <li><a href="URL menu18" title="Title Link Menu18">Link Menu18</a></li> 
   </ul>
</div>
<a class="GRlink" target="_blank" href="http://gubhugreyot.blogspot.com">gubhugreyot</a>
</div>

Cara membuat hidden menu :

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard) :
    Klik "Rancangan (Design)"
  3. Setelah halaman baru terbuka, klik "Edit HTML".
  4. Lakukan "Backup Template".
  5. Cari kode ]]></b:skin> , kemudian letakkan kode css di atasnya.
  6. Klik "Simpan Template (Save Template)".
  7. Lanjutkan dengan menyimpan xHTML melalui "Add a Gadget":
    • Klik "Rancangan (Design)".
    • Halaman Rancangan | Elemen Laman :
      Anda akan melihat beberapa box dan sebagian diantaranya terdapat yang bergaris putus-putus. Gunakan (klik) salah satu "Add a Gadget (jangan yang di atas "Blog Posts").
    • Jika sudah terbuka halaman baru, pilih dan klik gadget "HTML/Javascript".
    • Copy dan paste-kan xHTML dalam box yang tersedia.
    • Klik "SAVE/SIMPAN".
  8. Buka blog dan lihat hasilnya.
  9. Setelah pembuatan hidden menu berhasil dengan baik, rubah setiap link menu dengan menu anda!

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


Update » Kemis    PON, Maret, 15, 2012

» Happy Blogging - gubhugreyot «

6 komentar:

  1. Bisa tuh, ... udah tak coba!

    Bisa terjadi ada kesalahan. Perubahan kemungkinan hanya perlu dilakukan di bagian width:250px;
    bisa diperbesar hingga hingga sekitar 270px.
    yang penting sambil lihat hasilnya ketika memperlebar width.

    salam ...

    gubhug reyot

    BalasHapus
  2. maksudnya --> width: 250px; He ... he ... malahan bendera yang nongol !

    salam ...

    gubhug reyot

    BalasHapus
  3. anda adalah blogger sejati indonesia tutorial yang ada di dalam blog sangat membantu untuk blogger2 pemula walau pun penampilan anda sama dengan nama blog..he.he..he.. becanda..gan...tapi anda sangat mahir dalam memberikan kreasi2 di blog,saya salut dengan anda,maaf ini adalah benar2 suatu pujian dri sy buat anda...

    BalasHapus
  4. Siapa yang bisa bagusin blog gw , sebagus blog ini . yang bisa bagusin blog gw lebih dari ini . gw bayar . sms gw 0856 9356 8151 .

    BalasHapus

 
GR | Edited by | gubhug reyot