Cara Mendesain Footer Pada Blog Secara Efektif + Bonus Footer 4 Kolom

Cara Membuat Footer Menarik di Blog dan Cara Membuat Footer Keren 4 Kolom — Pada artikel sebelumnya saya pernah menulis tentang Bagaimana Membuat Sidebar Blog Agar Memiliki Sebuah Nilai Tambah, Tidak seperti sidebar, footer letaknya tersembunyi bagi sebagian pembaca yang menghabiskan waktunya di blog Anda.

Sehinga biasanya saat mereka akan melihat bagian footer adalah jika mereka ingin tahu tentang blog Anda dan ingin menelusuri setiap halaman dari blog Anda, atau jika mereka hendak mau mengomentari posting yang telah di baca dan di pelajari.

Akan terlihat berlebihan jika kita menghabiskan waktu kita hanya untuk merancang bagian dari blog yang tidak begitu mendapatkan banyak viewer, tetapi justru yang melihatnya adalah mungkin calon pengunjung setia blog Anda karena tertarik dan ingin menelusuri lebih lanjut konten-konten yang ada pada blog Anda.

Cara Membuat Footer Menarik di Blog dan Cara Membuat Footer Keren 4 Kolom

IMG - Cara Membuat Footer Menarik di Blog dan Cara Membuat Footer Keren 4 Kolom

Cara Membuat Footer Menarik di Blog dan Cara Membuat Footer Keren 4 Kolom

Mirip dengan sidebar, footer juga akan menyita sebagian dari ruang pada blog Anda.

Banyak blogger hanya menempatkan sebuah atribusi pada footer mereka, hal tersebut dilakukan jika Anda sedang mencari sesuatu yang sederhana dan tidak ingin menarik perhatian, tetapi jika Anda ingin membuat footer Anda lebih efektif, ada banyak hal yang bisa Anda tambahkan dengan gaya sesuai keinginan Anda. Berikut adalah beberapa contoh:

  • Email berlangganan
  • Tombol Kategori
  • Elemen logo
  • Kontak Info
  • Ikon media sosial
  • Link navigasi
  • Instagram / Pinterest widget
  • Mini bio
  • Popular Post

Apa Yang Terbaik Untuk Blog Anda?

Tergantung pada konten blog dan rencana pemasaran Anda, beberapa elemen footer mungkin akan lebih menguntungkan dari yang lain. Misalnya, jika Anda menawarkan email berlangganan untuk pembaca Anda, saya akan merekomendasikan menempatkan opt-in pada footer Anda.

Demikian juga, jika Anda membuat karya seni yang indah, produk, atau visual dan posting apa pun tentang hal tersebut di jejaring sosial, menempatkan widget untuk jaringan sosial pada footer Anda akan sangat bermanfaat. Ini semua didasarkan pada kebutuhan Anda. Dan ada sebagian blogger yang bilang, cobalah untuk menghindari menempatkan terlalu banyak elemen pada footer blog Anda.

Karena ini dapat membuat tampilan berantakan, tentu Anda tidak ingin kan ? pembaca blog Anda melihat footer Anda berntakan setelah mereka selesai membaca konten Anda yang sangat menakjubkan ?…

Styling Footer Anda

Untuk styling sederhana, biasanya Anda dapat hanya dengan mengedit CSS dari tag “footer”. Berikut ini adalah contoh di salah satu blog dummy saya:

footer {
display: block;
background-color: black;
color: white;
border-top: 3px solid #c4a0a4;
}

Saya sangat suka dengan sebuah desain blog, jadi saya sering menemukan inspirasi dari blog lain dan melihat ide-ide kreatif di luar sana yang dapat diterapkan pada blog saya.

Jika Anda berencana mendesain ulang footer Anda, cobalah cari dan buka blog favorit Anda dan lihat apa yang mereka sertakan dalam footer blog nya, atau bagaimana mereka mendapatkan inspirasi untuk merancang footer mereka untuk menyesuaikan nya dalam blog mereka.

Saya tidak bilang Anda harus mencuri ide-ide mereka, tapi melihat-lihat blog lain benar-benar dapat membantu ketika Anda terjebak dan tidak tahu lagi apa yang harus dilakukan.

Cara Membuat Footer Menarik di Blog

Apakah Anda akan mempertimbangkan untuk memberikan footer Anda sebuah makeover ?

Jika Anda berkeinginan untuk mendesain atau memberikan makeover pada footer Anda, Disini saya akan memberikan bonus kepada Anda yaitu tutorial Bagaimana Cara Membuat Footer Keren 4 Kolom pada Blogger.

Cara Membuat Footer Keren 4 Kolom pada Blogger dan Cara Membuat Footer Menarik di Blog

  • Masuk ke Dasboard blog Anda dan masuk ke bagian Template > Edit HTML
  • Cari kode ]]></b:skin> dan Paste kode dibawah ini di atasnya:
/* -- css footer 4 kolom --*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px; // Sesuaikan dengan lebar blog Anda
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%; // Sesuaikan
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
/* -- End css footer 4 kolom --*/
  • Cari kode </body> and paste kode dibawah ini di atasnya:
<!-- footer 4 kolom -->
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- End footer 4 kolom -->
  • Kemudian Save Template
  • Selanjutnya ke bagian “Tata Letak” dan Anda akan melihat hasilnya seperti pada gambar berikut ini:
Widget 4 Kolom - Cara Membuat Footer Keren 4 Kolom pada Blogger dan Cara Membuat Footer Menarik di Blog

Widget 4 Kolom – Cara Membuat Footer Keren 4 Kolom pada Blogger dan Cara Membuat Footer Menarik di Blog

Note: Untuk mengubah ukuran lebar ada di bagian “width: 960px;”, sesuaikan dengan lebar blog Anda.

Anda telah selesai bagaimana Cara Membuat Footer Menarik di Blog dan Cara Membuat Footer Keren 4 Kolom pada blog Anda.

Pencarian Masuk:

  • cara menghilangkan speed charge
  • penyebab ghost touch pada android

Leave a Reply

1 Shares
+1
Share1
Tweet
Pin
Stumble