Membuat Floating Menu Dengan Judul Blog No Java Script

Floating Menu / Melayang - Merupakan sebuah menu tetap atau dengan kata lain menu ini tidak akan ikut naik keatas manakala Scrool sebuah tampilan blog/web ditarik kebawah.  

Ketika melakukan search di google banyak blog/web yang menyajikan tutorial pembuatan menu ini dengan banyak variasi yang menarik, namun pada kesempatan ini Kolom Tutorial™ akan menyajikan kepada sobat blogger sebuah menu melayang/floating menu dengan judul blog disampingnya. untuk vreviewnya kuang lebih seperti gambar dibawah  :

membuat floating menu, floating menu, fixed menu, menu, floating
 Preview sebelum scroll diseret kebawah

membuat floating menu, floating menu, fixed menu, menu, floating
  Preview sesudah scroll diseret kebawah


Langkah penerapannya :-

Untuk panduan pemasangan widget silakan klik DISINI

UNTUK KODE HTML NYA

<div id="kthdbar">
  <a href="joens-tutorial.blogspot.com">
    <div class="name">Kolom Tutorial™</div></a>
  <div class="hdbarmenu">
    <div><a href="#">Home</a></div>
    <div><a href="#">Products</a></div>
    <div class="tips"><a href="#">Tips</a></div>
    <div><a href="#">Contact</a></div>
    <div><a href="#">Help</a></div>
  </div>
</div>

UNTUK KODE CSS NYA
#kthdbar
{
  -webkit-box-shadow: 0 3px 30px green;
  -moz-box-shadow: 0 3px 30px green;
  box-shadow: 0 3px 30px green;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  border-bottom: 4px solid #21E21D;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px; 
  color: white;
  height: 48px;  
}
.name
{
  float: left;
  font: bold 25px 'Calibri';
  margin: 9px;
}
#kthdbar a
{
  text-decoration: none;
  color: white;
}
#kthdbar div
{
  display: inline-block;
}
.hdbarmenu
{
  font: normal 17px 'Calibri';
  float: right;
  margin: 13px;
}
.hdbarmenu a
{
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  margin: 5px;
}
.hdbarmenu a:hover
{
  background: #21E21D;
  padding: 13px 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.hdbarmenu ul ul li.has-sub > a:after {
          content: '+';
          position: absolute;
          top: 50%;
          right: 15px;
          margin-top: -8px;
 }
.hdbarmenu ul li:hover > a, .hdbarmenu ul li.active > a {
      background: #1b9bff;
      color: #FFF;
 }


@media (max-width: 400px)
  {
    #cbthdbar
    {
      height: 30px;
    }
    .name
    {
      font-size: 11px;
    }
    .hdbarmenu
    {
      font-size: 9px;
    }
    .hdbarmenu a
    {
      margin: 0;
    }
    .tipsmore
    {
      top: 29px;
      right: 30px;
    }
    .tipsmore a
    {
      font-size: 9px;
    }
  }

Demikian artikel kali ini, dan menu ini sudah Responsive, terimakasih salam silaturahmi.

Berlangganan update artikel terbaru via email:

87 Responses to "Membuat Floating Menu Dengan Judul Blog No Java Script"

  1. wach pertama ya gan memang keren inie triknya gan...

    ReplyDelete
    Replies
    1. pertama sih engga gan, hehhehhehee

      Delete
    2. maksudnya mas Imron tuh yg dpt pertamax koment na

      Delete
    3. iya mas, maturnuwun kunjungannya.

      Delete
    4. saya ndak pertamax cuma gelar kardus aja deh buat nyimak

      Delete
    5. mamang ndak apa apa terakhir juga... sekalian cuci piring hehehe

      Delete
    6. saya dapet apanya donk,,,ngacirrrr tarik Mang

      Delete
  2. Mantaps kang .. dan memang sekarang dalam demam floating hehe
    ini menjadi referensi yg menarik

    ReplyDelete
    Replies
    1. langsung terapkan kang rul buat ngobatin demamnya :)

      Delete
    2. haturnuhun kang rully, mas andes,,,

      Delete
  3. Keren blogna kang... salam pangwanoh ah.. abdi ti sukabumi

    ReplyDelete
    Replies
    1. wah jadi isin euy, hehhehhe
      haturnuhun juragan master tos kersa rurumpaheu ka rorompok..........

      Delete
    2. Sama-sama orang sukabumi .. jarago tutorial na hebat-hebat pisan lah ...

      Delete
    3. ane mah masih di ajar kang rul, pami kang ismet enya tos masagi.....
      masih keneh tebih ahhhh ane mah.....

      Delete
    4. masagi da peti wadah botol kecap :)

      Delete
    5. wkwkkwkkwkkw, waduh kang ismet bisa wae ahhhh,,,,,,,,,

      Delete
    6. jiga diajar silat kang " elmu nu masagi hehe

      Delete
  4. wah lengkap nih jadinya mas, floating plus responsive

    ReplyDelete
  5. murni css ya mas.., berarti gk berat dunk?, makasih ya... *smile

    ReplyDelete
  6. Tambah keren nih blog sama tutornya yg selalu di posting disini :)

    mantappp mas Alek n trims udah share :)

    ReplyDelete
    Replies
    1. terimakasih banyak mas, atas support srta kunjungannya

      Delete
  7. Cobain di blog dummy dulu akh, siapa tahu bisa. Makasih mas Alex ilmunya

    ReplyDelete
    Replies
    1. silakan mas, terimaksih banyak sudah berkunjung

      Delete
  8. keren bentuknya gan saya liat di demonya ,mau ane coba ntar

    ReplyDelete
  9. hmmm,, gak cocok mas sama template saya... nyimak aja kalo gitu.

    ReplyDelete
  10. saya cuma bisa ngomong keren mas, lha wong saya ndak bisa, hehehe

    ReplyDelete
    Replies
    1. bisa aja ni si mas, pokonya terimaksih banyak kunjungannya

      Delete
  11. wah info yang bermanfaat bang, jadi bisa kasih solusi biar blog saya nggak gitu2 aja tanpilannya.

    ReplyDelete
    Replies
    1. terimakasih sebelumnya mas, kalau menurut ana, tampilan sebuah blog mungkin menjadi bahasan no keberapa mas, yang terpenting orang menemukan blog kita, itusih menurut ane mas.......

      Delete
  12. Blogwalking sonten kang, keren nih floating menunya. Terima kasih udah sharing..salam pangwanoh ti urang kulon. :-d

    ReplyDelete
    Replies
    1. sawangsulna kang, haturnuhun kasumpingana ka rorompok urang sukabumi.

      Delete
  13. Beneran banget nih, saya lagi butuh script menu ini untuk blog yang baru saya buat. Oke deh.. tak cobanya dulu mas.

    ReplyDelete
  14. aduhhh ada yng anyar deui wae euy,jadi kepengen nyobain Haturnuhun Kang infonya,BTW gambar profile tokoh kesukaan saya euy hehehe

    ReplyDelete
    Replies
    1. hahhahha bisa wae euy mas dede eta profil nyirikeun urang sunda, hehhehhehh, haturnuhun ah kunjunganna

      Delete
    2. belum ketambahan kang rully nih, ntar kalo nongol pasti bawa kopi biar sunda-nya makin lihay *hehe

      Delete
  15. Selalu ada tutor yang baru dari Master Blogger tutorial kayak Bang Alex. Harus banyak menimba ilmu dari Bang Alex. Terima kasih Bang sharenya.

    ReplyDelete
    Replies
    1. Alhamdulillah, kang tapi jauh keneh atuh ari disebut master mah, masih belajar lah kang.............
      haturnuhun kasumpingana

      Delete
  16. Selalu ada tutor yang baru dari Master Blogger tutorial kayak Bang Alex. Harus banyak menimba ilmu dari Bang Alex. Terima kasih Bang sharenya.

    ReplyDelete
  17. Cool bang Alex, kalo di MS Excel mungkin freeze yah hehe

    ReplyDelete
    Replies
    1. kurang lebih begitu mas, hehehh thank kunjungannya

      Delete
  18. tutornya sangat bermanfaat gan..bisa menambah variasi blog...

    ReplyDelete
  19. menarik sekali kang...tapi sayang gak sesuai sama template ane...ijin liat2 aja

    ReplyDelete
    Replies
    1. silakan mas.....
      terimakasih banyak kunjungannya

      Delete
  20. Keren nih mas Alex floating menu melayangnya, kapan-kapan saya coba nih mas alex, makasih tutorialnya mas keren banget :)

    ReplyDelete
    Replies
    1. silakan mas, terimakasih kembali udah sempetin mampir disini

      Delete
  21. keren mas menunya ditambah lagi menunya responsive. :)

    ReplyDelete
  22. Tutorial yahut kang, pihatur nuhun kakersana sumping ka rorompok. Salam sukses salawasna kang Jun.

    ReplyDelete
    Replies
    1. sawangsulna kang,
      ti abdi oge sami nuhun rehna agan tos kersa rurumpaheun ka rorompok simkuring, hehhehhee

      Delete
  23. kalau soal kutak katik daleman Blog mamang paling ndak paham... pernah error sampai keringet dingin hadooooh

    ReplyDelete
    Replies
    1. wah mang yono bisa wae ahhhh, tapi duka tah pami utak atik daleman anu lain mah hehhehhehee.....

      Delete
  24. Replies
    1. bang alex tuh katanya mba tia bang alex cakep *ihikihiks..

      Delete
    2. wkkwkkwkkwk mas andes bisa aja, kalau mba tia emang cakep dari dulunya mas, bukannya gitu miss

      Delete
  25. Hmm, keren juga ya sob. Ane masih mikir" sih kalo menggunakan f;oating menunya ntar apa" aja yang bakal diisin, biar blognya menrik gtu hhhe

    ReplyDelete
  26. Banyak tempate yg menerapkannya dan kita tinggal memakainya, tapi dengan tutor ini kita bisa membuatnya sendiri, thanks bang Alex atas tutornya. mampir balik ya mas

    ReplyDelete
  27. Makasih dah berbagi, kapan2 bisa sy coba praktek..

    ReplyDelete
  28. Menu seperti ini memang keren banget mas, mungkin suatu saat perlu juga utk dicoba
    ijin save dulu mas
    terima kasih sudah berbagi tutorial yg bermanfaat

    ReplyDelete
    Replies
    1. silakan mas, terimakasih banyak sudah menyempatkan diri berkunjung.

      Delete
  29. sepertinya menu floating ini layak untuk dicoba :-)

    ReplyDelete
    Replies
    1. sangat layak sekali sob .. mangga cobian , badag munu'u ukur sarebu hehe

      Delete
    2. silakan @mas hariyanto. thank kunjungannya.
      @kang Rully emangna surabi haneut buatan ceu kokom, wkkwkwkkwk

      Delete
  30. minta templat'y maz

    ReplyDelete
  31. wah thanks gan.. kapan2 boleh tuh dicoba :)

    ReplyDelete
  32. sep, dengan begini para blogger jadi lebih mudah jika ingin membuat floating menu :)

    ReplyDelete
  33. kang alex minta javascript nya dong

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel