Cara membuat Floating Footer Menu Keren di Blogspot

Cara membuat Floating Footer Menu untuk blogger. Dalam artikel ini penulis akan memberikan source code cara untuk membuat menu melayang pada blog yang terletak dibawah. contohnya gambar diatas ini.

Jika sahabat pembaca Babe News, sahabat akan melihat sebuah menu yang terletak tepat dibawah. Menu tersebut melayang meski di scroll. Nah untuk itu admin buatkan source code HTML dan juga CSS-nya yang bisa dipasang di blog sahabat. Menu tersebut dibuat responsive sehingga mengikuti layar dan tidak mengganggu tampilan blog sahabat. 

Bukan hanya itu, menu ini mempunyai tampilan yang bagus jika dibuka pada android karena menu ini mirip seperti menu pada aplikasi berbasis android.

Tampilan pada tab

Tampilan pada mobile phone

Cara membuat Floating Footer Menu di Blog Ala Babe News

Untuk membuatnya cukup mudah, ikuti langkah-langkah berikut ini:

1. Buka blog admin > Tema > Edit HTML.

2.Tambahkan Kode Dibawah sebelum kode </body>

HTML<div id='footermenu'>
    <div class='footermenunya'>
      <a href='/'><span class='fa fa-th'></span>Home</a>
    </div>
    <div class='footermenunya'>
        <a href='/'><span class='fa fa-align-justify'></span>Kategori</a>
    </div>
    <div class='footermenunya'>
        <a href='/'><span class='fa fa-newspaper-o'></span>Baru</a>
    </div>
    <div class='footermenunya'>
        <a href='/'><span class='fa fa-heart-o'></span>Trending</a>
    </div>
    <div class='footermenunya'>
        <a href='/'><span class='fa fa-random'></span>Random</a>
    </div>
</div>

3. Lalu masukan kode CSS dibawah pada ]]></b:skin> atau </style>

/* FLOATING FOOTER MENU BY RIDOUS */
#footermenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 58px;
  background: #212121;
  z-index: 90;
  color: #FFF;
}
#footermenu a{
  color: #FFF;
  text-decoration: none;
}
.footermenunya {
  width: 20%;
  float: left;
  text-align: center;
  padding: 5px 0;
  font-size: 12px;
  position: relative;
}
.footermenunya span {
  width: 100%;
  font-size: 2em;
  color: #FFF;
  margin: .1em;
  float:left;
}
/* FLOATING FOOTER MENU BY RIDOUS */

4. Sebelum disave, jika di blog berlum dipasang font-awesome, silahkan pasang dulu dengan cara menyisipkan kode dibawah. Jika sebelumnya sudah terdapat font-awesome, silahkan lewati langkah berikut ini.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

5. Save, lalu lihat hasilnya.

Cukup mudah kan? sekarang blog sahabat makin bagus setelah memasang menu ini.

Live Preview