Pada asaanya bahagian foot note @ footer di template blog memang ada, ia satu baris footer yang menempatkan info site seperti About Us, Contact Us, Disclaimer & copyright. Kalau korang nak customize footer tersebut memang agak sukar tetapi BOLEH. Namun saya tak berapa gemar cara tersebut.
Info menarik Juga >>>
Cara Buat 3 Column Footer Yang Responsive Dalam Blogger Template
Di bawah ini adalah cara-caranya nak buat 3 column di bahagian footer blog anda. Saya buat melalui trial & error dan baru dapat buat dalam masa beberapa jam. Itu pun kena cari banyak artikel berkaitan blogger template. Ramai juga blogger yang share benda ni, tetapi tak lengkap.
 |
| Di bahagian footer akan ada 3 column seperti gambar di atas |
Langkah 1
Masuk ke DASHBOARD >> THEME >> EDIT HTML
Cari kod ini : ]]></b:skin> - dan letak kod di bawah ini di atas nya
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#fff2e7;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 1170px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff2e7; color:#000000;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
text-align: justify;
font-size:100%;
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;
color:#0084ce;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
border-bottom:3px solid #0084ce;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}
Langkah 2
Cari kod : <!-- Footer Wrapper --> dan di bawahnya masukkan kod berikut:
<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 style='clear: both;'/>
</div> </div>
Tekan SAVE untuk langkah seterusnya.
Langkah 3
Untuk menjadikan 3 column footer responsive, iaitu bila guna handpone ia akan jadi vertical pula, buat langkah seperti di bawah.
Salin kod berikut dan tambahkan kod di bawah di dalam kawasan yang ada @media screen.
@media only screen and (max-width:768px) {
#lower, #lower-wrapper, #menubottom-container, #credits-wrap {overflow:hidden!important;width:100%!important;}
#lowerbar-wrapper{overflow:hidden!important;width:90%!important;padding:20px}
#credits p{text-align:center!important}
}
Langkah 4
SAVE template anda. Siap!!
Selamat mencuba jika korang nak tambah 3 column footer di bahagian bawah blog template anda. Dan juga footer yang responsive.
Aynorablogs - Info & Lifestyle - Segala sesuatu dalam hidup ini akan pergi dan tidak pernah lagi kembali kecuali DOA. Ia pergi dengan HARAPAN dan Ia kembali dengan REDHA dan KURNIA.
0 Comments
Boleh komen jika mahu, boleh LIKE jika suka. TERIMAKASIH.