Cara Menciptakan Floating Footer Sajian Di Blog Ala Babe News

- Cara menciptakan Floating Footer Menu di Blog Ala Babe News. Dalam artikel pertama Pecinta Blog Indo, admin akan memperlihatkan source code cara untuk menciptakan hidangan melayang pada blog yang terletak dibawah. misalnya gambar dibawah ini.

Jika sahabat pembaca Babe News, sahabat akan melihat sebuah menu yang terletak sempurna dibawah. Menu tersebut melayang meski di scroll. Nah untuk itu admin buatkan source code HTML dan juga CSS-nya yang sanggup dipasang di blog sahabat. Menu tersebut dibentuk responsive sehingga mengikuti layar dan tidak mengganggu tampilan blog sahabat. Bukan hanya itu, hidangan ini memiliki tampilan yang elok jikalau dibuka pada android karena hidangan ini menyerupai mirip hidangan 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 instruksi </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 instruksi 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, jikalau di blog berlum dipasang font-awesome, silahkan pasang dulu dengan cara menyisipkan instruksi 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, kemudian lihat hasilnya.

Cukup gampang kan? kini blog sahabat makin elok sehabis memasang hidangan ini.

Live Preview

Lihat eksklusif tampilan dari Cara menciptakan Floating Footer Menu di Blog Ala Babe News.

Sumber http://caritutorialblog.blogspot.com