Cara Buat Footer 3 Kolom Keren di Blog

By Unknown

Mempunyai blog dengan tampilan yang bagus memang bisa membuat para pengunjung blog menjadi betah dan apalagi tampilan tersebut responsive bisa tampil di smartphone dengan sempurna pasti blog terlihat professional. Tetapi juga ada template yang sedikit tidak menyediakan tempat untuk widget dan tidak ada footernya pasti tampilan tersebut kurang bagus menurut saya. Jika dengan memasang footer pada template blog itu dapat mengurangi bounce rate pada blog anda, apa itu bounce rate?Bounce rate adalah rasio jumlah pengunjung yang hanya membuka satu halaman saja pada blog yang Anda miliki. karena jika semakin besar bounce rate yang dimiliki sebuah blog anda maka kinerja blog tersebut akan semakin buruk, sedangkan semakin kecil bounce rate pada sebuah blog maka kinerja blog tersebut akan semakin baik.

Cara Buat Footer 3 Kolom Keren di Blog

Selain itu juga dengan memasang footer di blog itu juga akan menambah pageview blog anda karena artikel blog anda itu terlihat semua di beranda dan juga didalam artikel itu disebabkan pengunjung blog biasanya akan meng scrool blog anda sampai bawah dengan begitu pengunjung akan mengeklik artikel yang lainnya.

Bagaimana Cara Membuatnya Saya Tertarik
Nah jika anda tertarik ingin membuat footer untuk blog anda, cara membuatnya sangat mudah saya sudah menyediakan script footer untuk anda dan tinggal anda masukan script tersebut pada template di bagian yang tepat. ini tetapi footer untuk 3 kolom karena dengan begitu bisa menambahkan widget yang banyak. Simak berikut dibawah ini dengan seksama jangan sampai ketinggalan ya bro hehe.

1. Pertama Login Akun Blogger anda
2. Kemudian Pilih Menu Template > Edit HTML
3. Selanjutnya copy kode script dibawah ini dan letakan tepat diatas kode ]]></b:skin>

#footer-wrapper{width:100%}#footer-wrapper .left{float:left;width:34%}#footer-wrapper .center{float:left;width:34%}#footer-wrapper .right{float:right;width:32%}/*=============== Start FOOTER 3 KOLOM Caraneweb===============*/#footer-wrapper{background:#242424;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDA8ngxkEZswErhHcje5HoQwmvEHgCfli2-gtQ2GpcrO3l7mdci7Elw-tTwDCrZhU_e9I1AyQGnZjfVUjCn_AshE7U0vUdIuEwxfVVyQzNh-mArtQXiGS_gTXWBgM0Khl8QGsf7oKeXWOw/s1600/line.png);background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;}#footer-wrapper .left{float:left;width:34%}#footer-wrapper .center{float:left;width:34%}#footer-wrapper .right{float:right;width:32%}#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase;position:relative;color:#eeeeee}#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}#footer-wrapper li{margin:5px 0;padding:0 0 0 0}#footer-wrapper a{color:#dddddd}#footer-wrapper a:hover{color:#ffffff}/*=============== End FOOTER 3 KOLOM Caraneweb===============*/

4. Kemudian cari kode <div id='footer'> Lalu letakan kode dibawah ini tepat diatas kode  <div id='footer'>

<footer id="footer-wrapper">
  <b:section class='left section' id='left' preferred='yes'>
    </b:section>
  <b:section class='center section' id='center' preferred='yes'>
    </b:section>
  <b:section class='right section' id='right' preferred='yes'>
    </b:section>
</footer>

5. Terakhir tinggal klik save dan lihat hasilnya.

Demikian sampai disini saja semoga tutorial artikel diatas bisa bermanfaat untuk kalian semua dan semoga berhasil juga tutorial tersebut, jika ada kebingungan dalam artikel diatas bisa tinggalkan komen dibawah.

Share :