Cara membuat Floating Footer Menu di Blog Ala Babe News

Cara membuat Floating Footer Menu di Blog Ala Babe News
Ridous - Cara membuat Floating Footer Menu di Blog Ala Babe News. Dalam artikel ini penulis akan memberikan source code cara untuk membuat menu melayang pada blog yang terletak dibawah. contohnya gambar diatasini.

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.

Baca juga : Cara mudah memasang iklan adsense di bawah postingan blog



Cara membuat Floating Footer Menu di Blog Ala Babe News
Tampilan pada tab


Cara membuat Floating Footer Menu di Blog Ala Babe News
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>
<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.


Lihat langsung tampilan dari Cara membuat Floating Footer Menu di Blog Ala Babe News.




Bebas berkomentar asal santun dan tidak kasar. Komentar yang mengandung konten por*o dan ju*i akan dihapus. Jangan lupa juga centang kotak "notify me" supaya ada notification jika komentarnya sudah dibalas. Terimakasih :)

 

Keep In Touch

Pengikut