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.

Membuat Floating Menu Dengan Judul Blog No Java Script Rating: 4.5 Diposkan Oleh: Alex Joen

85 komentar

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

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

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

wah lengkap nih jadinya mas, floating plus responsive

langsung terapkan kang rul buat ngobatin demamnya :)

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

makasih mas, nyoba2 massss...........

haturnuhun kang rully, mas andes,,,

pertama sih engga gan, hehhehhehee

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

hhehhehe kurang lebih begitu mas.... ^o^

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

mantappp mas Alek n trims udah share :)

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

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

maksudnya mas Imron tuh yg dpt pertamax koment na

iya mas, maturnuwun kunjungannya.

terimakasih banyak mas, atas support srta kunjungannya

silakan mas terimakasih kunjungnnya

silakan mas, terimaksih banyak sudah berkunjung

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

saya ndak pertamax cuma gelar kardus aja deh buat nyimak

saya cuma bisa ngomong keren mas, lha wong saya ndak bisa, hehehe

iya mas, terimaksih banyak kunjungannya

bisa aja ni si mas, pokonya terimaksih banyak kunjungannya

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

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

sawangsulna kang, haturnuhun kasumpingana ka rorompok urang sukabumi.

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.......

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

silkan mas, terimaksih kunjungannya.

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

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

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

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

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

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

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

keren mas menunya ditambah lagi menunya responsive. :)

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

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

kurang lebih begitu mas, hehehh thank kunjungannya

ok gan terimakasih kunjungannya

silakan mas.....
terimakasih banyak kunjungannya

silakan mas, terimakasih kembali udah sempetin mampir disini

makasih gan support serta kunjungannya

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

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

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

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

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

saya dapet apanya donk,,,ngacirrrr tarik Mang

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

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

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

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

bang alex tuh katanya mba tia bang alex cakep *ihikihiks..

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

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

Ok, Gan terimakasih banyak kunjungannya

ok. gan terimakasih banyak kunjungannya

thank mis atas support serta kunjungannya.

Makasih dah berbagi, kapan2 bisa sy coba praktek..

masagi da peti wadah botol kecap :)

wkwkkwkkwkkw, waduh kang ismet bisa wae ahhhh,,,,,,,,,

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

jiga diajar silat kang " elmu nu masagi hehe

sepertinya menu floating ini layak untuk dicoba :-)

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

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

silakan mas, terimakasih banyak sudah menyempatkan diri berkunjung.

monggo mas, terimakasih banyak kunjungannya.

wah thanks gan.. kapan2 boleh tuh dicoba :)

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

silakan mas nanadar thank kunjungannya

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen