Fungsi Footer Blog dan Cara Menambahkan Widget Bawah Tiga Kolom di Blogger
February 16, 2020
Footer Blog adalah elemen di bagian bawah halaman atau template blog. Footer Blog biasanya terdiri Footer Widget dan Footer Credit.
Elemen widget blog secara umum terdiri dari Header, Navigasi Menu, Main Content (Halaman Postingan), Sidebar, dan Footer.
Footer Widget umumnya terdiri dari tiga kolom. Isinya beragam, mulai dari Label, Popular Post, Latest Post, Random Posts, hingga Profil Blogger.
Footer Credit adalah elemen paling bawah yang biasanya berisi copyright (hak cipta), tahun, dan nama blog. Footer Credit juga berfungsi penanda akhir halaman atau batas halaman web bagian bawah.
Credit berupa link ke blog desainer website atau template blog juga semuanya ada di bagian Footer Blog. Template bawaan Blogger juga mencantumkan link credit "Powered by Blogger" atau "Diberdayakan oleh Blogger" di bagaian Footer Blog.
Beberapa template juga mencantumkan Footer Menu, yaitu navigasi menu di bagian bawah. Biasanya untuk link ke halaman statis About (Tentang), Kontak, dan Disclaimer, serta halaman statis penting lainnya.
Fungsi Footer Blog
Fungsi footer blog terutama menu footer membantu pengunjung Anda untuk menavigasi ke lebih banyak konten di situs atau blog Anda.
Footer Blog atau widget footer merupakan cara yang bagus untuk meningkatkan tampilan halaman (pageviews). Ia juga berguna untuk menambahkan tautan (link) ke kontak, peta situs (table of content/sitemap), tombol kembali ke atas (back to top), ketentuan penggunaan, kebijakan privasi, dan sebagainya.
Konten Footer Blog yang Disarankan
Berikut adalah beberapa saran agar elemen ditambahkan ke Footer Blog:
- Pemberitahuan hak cipta (copyright)
- Menu footer
- Ikon sosial atau link ke akun medsos.
- Link ke halaman statis terutama Profil (About) dan Kontak.
- Widget kategori
- Tag widget Cloud
- Widget Post Populer
- Widget Tulisan Terbaru
Cara Menambahkan Widget Bawah Tiga Kolom di Blogger
Setelah tahu fungsinya, maka kini kita bahas Cara Menambahkan Widget Bawah Tiga Kolom di Blogger, bagi blog yang belum ada footer widgetnya tentu.
Yang sudah ada juga bisa diganti dengan desain Footer Widget responsive berikut ini.
Ini dia Cara Memasang, Menampilkan, atau Menambah Footer Widget Tiga Kolom di Blog.
1. Klik Tema > Edit HTML
2. Simpan (Copas) kode beriku ini di atas kode ]]></b:skin>
#footer-widgets {padding: 20px 0 0 0;}
.footer-widget-box {width: 300px;float: left;margin-left: 15px;}
.footer-widget-box-last {}
#footer-widgets .widget-container {color: #374142;}
#footer-widgets h2 {font-family: inherit;text-shadow: none;font-size: 16px;color: #fff;text-transform: uppercase;font-weight: 700;border-bottom: 4px solid #444444;padding-bottom: 10px;}
#footer-widgets .widget ul {list-style-type: none;list-style: none;margin: 0px;padding: 0px;}
#footer-widgets .widget ul li {padding: 0 0 9px 0;margin: 0 0 8px 0;}
#footer-widgets-containerback {width: 980px;margin: auto;}
#footer-widgets-container {background: #484848;border-top: 10px solid #66b381;}
.footersec {color: #A1A6AF;font-size: 13px;line-height: 18px;}
.footersec .widget {margin-bottom: 20px;}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {}
.footersec ul li {}
.footer-widget-box {width: 300px;float: left;margin-left: 15px;}
.footer-widget-box-last {}
#footer-widgets .widget-container {color: #374142;}
#footer-widgets h2 {font-family: inherit;text-shadow: none;font-size: 16px;color: #fff;text-transform: uppercase;font-weight: 700;border-bottom: 4px solid #444444;padding-bottom: 10px;}
#footer-widgets .widget ul {list-style-type: none;list-style: none;margin: 0px;padding: 0px;}
#footer-widgets .widget ul li {padding: 0 0 9px 0;margin: 0 0 8px 0;}
#footer-widgets-containerback {width: 980px;margin: auto;}
#footer-widgets-container {background: #484848;border-top: 10px solid #66b381;}
.footersec {color: #A1A6AF;font-size: 13px;line-height: 18px;}
.footersec .widget {margin-bottom: 20px;}
#footer-widgets-container { background: #484848; border-top: 10px solid #66b381; float: left; width: 100%; }
.footersec ul {}
.footersec ul li {}
3. Copy+Paste kode di bawah ini di atas kode </body>
<div id='footer-widgets-container'>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes/'>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'/>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'/>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>
<div id='footer-widgets-containerback'>
<div class='clearfix' id='footer-widgets'>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec1' showaddelement='yes/'>
</li>
</ul>
</div>
<div class='footer-widget-box'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec2' showaddelement='yes'/>
</li>
</ul>
</div>
<div class='footer-widget-box footer-widget-box-last'>
<ul class='widget-container'>
<li>
<b:section class='footersec' id='footersec3' showaddelement='yes'/>
</li>
</ul>
</div>
</div>
</div></div>
<div style='clear:both;'/>
Itu dia Fungsi Footer Blog dan Cara Menambahkan Widget Bawah Tiga Kolom di Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Tidak responsive Pak... apakah ada yang responsive?
ReplyDelete