Cara Membuat Footer di Blogspot Keren Terbaru

Cara Membuat Footer di blogspot keren lengkap – 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 ?

Cara Membuat Styling Footer Anda

Untuk styling sederhana, biasanya Anda dapat hanya dengan mengedit CSS dari tag “footer”. Berikut ini adalah contoh di salah satu blog 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.Maka dari itu saya akan memberika inspirasi cara membuat footer keren 4 kolom terbaru.

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 di Blogspot Menarik dan Responsif

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:

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

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