Search here

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

Memuat...
English
Bru masuk angin!

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

Single level dropdown menu ala Dynamic View Blogger Templates

Single level dropdown menu - blogger

Single leve; dropdown menu ala dynamic view blogger templates adalah sebuah menu horizontal dengan animasi saat membuka dan menutup yang disertai animasi putar pada arrow up/down yang terletak di menu title. Animasi pada membuka dan menutupnya anak menu dan arrow up/down dibuat menggunakan css3 transition dan css3 transform. Animasi single level dropdown ala menu template tampilan dinamis akan bekerja secara sempurna di browser yang sudah support terhadap css3. Mozilla Firefox merupakan browser yang paling sempurna menampilkan fungsi animasi single level dropdown menu ini.
D E M O

Cara membuat

  1. Login ke Blogger
  2. Halaman Dasbor/Dasboard
  3. Template
  4. Edit HTML.
  5. Lakukan proses "Cadangkan/Pulihkan" atau "Backup/Restore" templates untuk berjaga-jaga dari kemungkinan yang tak di harapkan.
  6. Klik "Edit HTML".
  7. Template › Edit HTML
    • Klik "Lanjutkan/Proceed".
    • Buat elemen baru di bawah header blog untuk menempatkan single level dropdown menu. Caranya bisa anda buka melalui link di bawah ini:
      Cara membuat elemen baru untuk dropdown menu
    • Setelah selesai membuat elemen baru, lanjutkan klik "Tata Letak/Layout".
    • Klik Tambah Gadget/Add a Gdget pada elemen baru yang terdapat di atas elemen/box "posting blog".
    • Cari dan klik gadget HTML/Javascript, kemudian copy dan pastekan kode CSS dan xHTML dalam "box HTML/Javascript".
    • Klik "SIMPAN/SAVE".
  8. Buka blog dan lihat hasilnya.

Keterangan :

  1. Ganti setiap URL dengan alamat/URL yang sesuai dengan setiap menu terpasang.
  2. Anda dapat menambahkan menu baru, baik di menu utama ataupun anak menu.
Kode CSS
<style type="text/css">
#myGRtabmenu ul,#myGRtabmenu ul li,#myGRtabmenu ul li a{
      padding:0;
      margin:0;
      list-style-type:none;
}
#myGRtabmenu{
      height:30px;
      position:relative;
      background:rgba(0,0,0,.8);
      text-align:left;
      line-height:30px;
      box-shadow:0 2px 2px #999;
      margin:0;
      font-family:Arial, sans-serif;
}
#myGRtabmenu span{
      position:relative;
      display:block;
      width:150px;
      float:left;
}
#myGRtabmenu span a{
      font-size:16px;
      padding:0 10px;
      text-decoration:none;
      color:#ddd;
}
#myGRtabmenu span:after{
      position:absolute;
      display:block;
      content:"";
      width:1px;
      background:#aaa;
      height:20px;
      top:5px;
      right:0;
}
#myGRtabmenu span:before{
      position:absolute;
      display:block;
      content:url(https://lh4.googleusercontent.com/-a4iA4T0EE-I/UBhDkIhHZaI/AAAAAAAAC_g/pGHeepJZgY0/gr_arrow-down-dynamic-view.png);
      color:#fff;
      top:14px; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
      right:5px;
      transition:0.4s;
      -o-transition:0.4s;
      -ms-transition:0.4s;
      -moz-transition:0.4s;
      -webkit-transition:0.4s;
}
#myGRtabmenu span:hover:before{
      transform:rotate(180deg);
      -o-transform:rotate(180deg);
      -ms-transform:rotate(180deg);
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      top:12px; 
}
#myGRtabmenu span ul{
      position:absolute;
      left:0; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
      top:31px;
      text-align:left;
      float:left;
      width:150px;
      max-height:0px;
      overflow:hidden;
      transition:0.6s ease-in 0.2s;
      -o-transition:0.6s ease-in 0.2s;
      -ms-transition:0.6s ease-in 0.2s;
      -moz-transition:0.6s ease-in 0.2s;
      -webkit-transition:0.6s ease-in 0.2s;
      background:rgba(0,0,0,.6);
}
#myGRtabmenu span:hover ul{
      z-index:999;
      max-height:600px;
      background:rgba(0,0,0,.6);
}
#myGRtabmenu span:hover ul, #myGRtabmenu ul li, #myGRtabmenu span a, #myGRtabmenu span a:visited,#myGRtabmenu ul li a{
      transition:1.0s;
      -o-transition:1.0s;
      -ms-transition:1.0s;
      -moz-transition:1.0s;
      -webkit-transition:1.0s;
}
#myGRtabmenu ul li{
      display:block;
      width:140px;
      overflow:hidden;
      border-bottom:1px dotted rgba(0,0,0,.1);
      line-height:18px;
      padding:5px;
}
#myGRtabmenu ul li:hover{
      background:rgba(0,0,0,.6);
}
#myGRtabmenu ul li a{
      font-size:14px;
      color:#eee;
      display:block;
      font-family:Arial, sans-serif;
      font-weight:normal;
      text-decoration:none;
}
#myGRtabmenu span a:visited{
      color:#999; /* by: http://gubhugreyot.blogspot.com, 18 Agust 2012 */
}
#myGRtabmenu ul li a:visited{
      color:#ddd;
}
#myGRtabmenu span a:hover{
      text-decoration:none;
}
#myGRtabmenu span a:hover,#myGRtabmenu ul li a:hover{
      color:#fff;
      text-decoration:underline;
}
</style>
xHTML
<div id="myGRtabmenu"><span><a href="#">My Blog</a>
<ul>
    <li><a href="http://gubhugreyot.blogspot.com">gubhugreyot</a></li>
    <li><a href="http://bgsgr.blogspot.com">css3 Tutorial & Demo</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Demo Tutorial-1</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Demo Tutorial-2</a></li>
    <li><a href="http://lightbox-demo-tutorial.blogspot.com">Lightbox for Blogger</a></li>
    <li><a href="http://tantytm.blogspot.com">Modifikasi Blog</a></li>
    <li><a href="http://gubhugreyot.blogdetik.com">gubhugreyot-blogdetik</a></li>
    <li><a href="http://bloggerstuars.blogspot.com">Bloggerstars1</a></li>
    <li><a href="http://gitosimin.blogspot.com">Mas Gitosamin</a></li>
    <li><a href="http://bestbloggerhack.blogspot.com">Best Blogger Hacks</a></li>
    <li><a href="http://css3-tutorial-demo.blogspot.com/">Tutorial css3, Demo Tips & Trick</a></li>
</ul></span>
<span><a href="#">Seni &amp; Budaya</a>
<ul>
    <li><a href="http://gubhugreyot.blogspot.com">Kuda Lumping</a></li>
    <li><a href="http://bgsgr.blogspot.com">Reyog Ponorogo</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-1.blogspot.com">Tari Seudati</a></li>
    <li><a href="http://gubhugreyot-demo-tutorial-2.blogspot.com">Barongsai</a></li>
    <li><a href="http://lightbox-demo-tutorial.blogspot.com">Tari Tor Tor</a></li>
    <li><a href="http://tantytm.blogspot.com">Tari Pendet</a></li>
    <li><a href="http://gubhugreyot.blogdetik.com">Wayang Orang</a></li>
    <li><a href="http://bloggerstuars.blogspot.com">Kethoprak</a></li>
    <li><a href="http://gitosimin.blogspot.com">Ludruk</a></li>
    <li><a href="http://bestbloggerhack.blogspot.com">Wayang Kulit</a></li>
</ul></span>
<span><a href="http://bestbloggermenus.blogspot.com">Home</a></span>
<span><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></span>
</div>

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




Posting » Setu WAGE, August, 18, 2012

» Happy Blogging - gubhugreyot «

41 komentar:

  1. Makasih informasinya,sangat bermanfaat dan membantu kami.

    Anna @ rental mobil

    BalasHapus
  2. Thanks sob , infonya berguna , salam kenal :)

    BalasHapus
  3. Pak master
    mau tanya seputar xHTML
    Disini saya masih kebingungan dengan xHTML

    disetiap postingan gubhugreyot pasti ada perintah untuk menambahkan atau mengedit xHTML
    saya masih bingung pak master mohon pencerahan

    sebagai contoh :
    pada postingan ini
    http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/02/lengkapi-blog-dg-simple-jquery-tooltip.html

    disana ada perintah untuk menggunakan xHMTL
    maksudnya gimana master?
    - dimana letak xHTML itu?
    - bgaimana meletakan kode xHTML itu?
    - apakah di widget/javascript apa di kode html? apa ditempat lain?
    - xHTML itu yang mana pak master?

    MOHON PENCERAHANYA PAK MASTER...
    bisa balas komen ini atau via email pak
    one_baja@yahoo.com
    iwankurniawanbaja@gmail.com

    Terima kasih pak master
    Jaya terus gubhugreyot

    BalasHapus
  4. wah keren - keren Om ... sip

    http://curhatz.blogspot.com/

    BalasHapus
  5. mampir sejenak untuk baca artikel ini..

    BalasHapus
  6. Mantap sobt.....
    kunjungan balik http://blogger-aneuk-sigli.blogspot.com/

    salam blogger

    BalasHapus
  7. makasih sob
    http://irsal92.blogspot.com
    Make It Easy

    BalasHapus
  8. nice onfo gan, keep posting :)

    BalasHapus
  9. cara bikin button DEMO seperti di atas tuh gimana ?

    BalasHapus
  10. Thanks infonya gan!!
    kunjungi blog saya ya,
    http://aryoz-comunity.blogspot.com

    BalasHapus
  11. abe suka blog ente, keliatan wahhh :-D

    BalasHapus
  12. Bila berkenan mohon berikan tutorial membuat menu dropdown pada masing-masing link ditempat yang berbeda, maksud saya musalkan saya punya satu menu link aja di header dan ingin saya kasih anak menu dropdown, begitu jg satu menu link di fotter ingin saya kasih anak menu dengan dropdown... jika berkenan mohon dibalas...trims

    BalasHapus
  13. Keren, ijin nyoba

    http://www.fianetmu.com/

    BalasHapus
  14. siipp.sangat bermamfaat
    alfijadul.blogspot.com

    BalasHapus
  15. saudara boleh minta pencerahannya? cara pembuatan Kotak text yang muncul warna biru kaya waktu kursor diarahkan dikolom follower itu gimana ya ? sebelumnya terimakasih, ditunggu ilmunya,,,

    BalasHapus
  16. Balasan
    1. edan sampe nyampe disini mas andre wkwkwkwk

      Hapus
    2. uwehehehe..ketemu di sini , dulu waktu baru - baru ngeblog saya sering main kesini damar belajar coding , di sini ada saya simpan link gubhugreyot http://urang-kurai.blogspot.com/p/list.html :)

      Hapus
  17. Numpang Gan sy salut dengan blog ini dari namanya cuman gubhug reyot,tapi dari hasilnya wahhh ini istana buat saya..
    yang sy mu tanyakan bagaimana cara membuat blog sebagus ini tampilannya?
    ya salah satunya,ada yang melayang-layang gitu waktu di tunjuk oleh mouse dan cara buatnya bagaimana?kalo boleh, kasih tau caranya,
    sy baru belajar buat blog
    counter-excell45.blogspot.com
    trimakasih ya gan.

    BalasHapus
  18. terima kasih ilmunya, numpang copas gan ..

    kunjungi Website Kami Jual baju gamis.

    BalasHapus
  19. nice post sob..
    article yang menarik,saya tunggu article berikutnya yach.hehe..
    maju terus dan sukses selalu...
    salam kenal yach...
    kunjungi blog saya juga ya sob,banyak tuh article2 yang seru buat dibaca..
    agen situs poker online indonesia uang asli,poker online terpercaya dan teraman...
    http://chaniaj.blogspot.com/ dan situs kesayangan kami http://oliviaclub.com dan http://www.benuapoker.com/benuapk/index.php
    serta sites.google kebanggaan kami https://sites.google.com/site/pokeronlineterpopuler/
    di oliviaclub.com poker online uang asli terbaik di indonesia dengan teknologi teraman dan tercanggih.
    main dan ajak teman anda bergabung dan dapatkan 20% referral fee dari house commision untuk turnover teman ajakan anda...

    BalasHapus
  20. KEREN GAN ARTICLE NYA
    KUNJUNGI JUGA BLOG SAYA YA GAN
    =>http://chaniaj.blogspot.com
    http://www.dkipoker.com/dkipk/index.php

    BalasHapus
  21. Keren Infonya Gan
    Terimkasih banyak sangat membantu artikelnya

    Kunjungi juga http://obatjellygamatgoldg.net/

    BalasHapus

  22. Mari buruan bergabung bersama kami gan
    Minimal deposit 50rb bonus 50rb berlaku kelipatan hingga 1juta
    Dan kunjungi web kami gan http://www.mentaripoker.com/mentaripk/index.php
    Dan dapatkan bonus2 menarik lainnya gan dan jangan lupa mengajak teman2 untuk bermian

    BalasHapus
  23. Thank Gan Tipsnya

    http://grosirobatjellygmat.com/obat-herbal-eksim/
    http://grosirobatjellygmat.com/obat-herbal-keloid/
    http://grosirobatjellygmat.com/obat-herbal-migrain/
    http://grosirobatjellygmat.com/obat-herbal-hidrosefalus/
    http://grosirobatjellygmat.com/obat-herbal-herpes/
    http://grosirobatjellygmat.com/obat-herbal-polip-hidung/
    http://grosirobatjellygmat.com/obat-herbal-hepatitis-b/

    BalasHapus
  24. ilmu yang sangat bermanfaat sekali nih, terimakasih gan :)
    http://jellygamatgoldg31.com

    BalasHapus
  25. nice artikel :)
    http://kedaijellygamatgoldg.com

    BalasHapus

 
GR | Edited by | gubhug reyot