Cara Membuat Floating Menu Dengan Judul Blog Tanpa JavaScript

Selamat pagi sobat. Pada pagi yang cerah ini saya mau share Cara Membuat Floating Menu Dengan Judul Blog Tanpa JavaScript. Dengan menggunakan Floating menu tanpa JS, dijamin blog kamu tidak akan bertambah berat, fast loading, dan pastinya membuat tampilan blog sobat jadi tambah keren.

Kalau itu hanya penampakan sebagian, berikut ini saya berikan penampakan nya secara utuh alias fullscreen.

Cara Membuat Floating Menu Dengan Judul Blog Tanpa JavaScript

1. Login ke akun Blogger sobat
2. Klik Template -> Edit HTML
3. Letakan Kode CSS dibawah ini tepat diatas kode ]]></b:skin>

 #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;
    }
  }

4. Letakan Kode JavaScript dibawah ini tepat diatas kode </head>

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

5. Simpan

Nah itulah Cara Membuat Floating Menu Dengan Judul Blog Tanpa JavaScript semoga bermanfaat sobat :)