Tutorial - Tambah 3 Columns Widget Layout Pada Bahagian Footer

Monday, November 24, 2014

 Tambah 3 Columns Widget Layout

Tutorial - Tambah 3 Columns Widget Layout Pada Bahagian Footer | Cer tengok gambar kat atas :) Haa cun tak? nak buat jadi macam gitu jugak? Kelebihan buat layout macam ni ? LOADING BLOG akan lebih cepat ;) .Besides,template blog pun akan nampak lebih UNIK & KEMAS .Template yang Adam pakai sekarang ni pun guna layout macam ni jugak.Nak try buat ? Sila rujuk tutorial di bawah ;) 

Tutorial - Tambah 3 Columns Widget Layout Pada Bahagian Footer
  • Blogger > Template > Edit HTML
  • [ CTRL + F ] Search   ]]>< / b:skin>  atau   < /style>
  • Copy code di bawah dan pastekannya di ATAS code tadi 
/* 3Columns
---------------------------- */
#footer-columns {
border-top: 1px dashed #ddd;
background:#fff;
width: 1000px;
clear:both;
margin:0 auto;
}
#footer-columns h2 {
font: 14px calibri;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px 15px 3px 12px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px 3px 3px 15px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px 3px 3px 15px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 30%;
float: left;
}
body#layout .column2 {
width: 30%;
float: left;
}
body#layout .column3 {
width: 30%;
float: left;
}
P/S | Yang Adam BOLD MERAH tu,ubah width dia ikut kelebaran blog awak
  • Next |  [ CTRL + F ] Search   < div id='footer-wrapper' >
  • Copy code di bawah dan pastekannya di BAWAH code tadi
< div id='footer-columns'>
< center>
< div class='column1'>
< b:section class='addwidget' id='col1' preferred='yes' style='float:left;'/>
< /div>
< div class='column2'>
< b:section class='addwidget' id='col2' preferred='yes' style='float:left;'/>
< /div>
< div class='column3'>
< b:section class='addwidget' id='col3' preferred='yes' style='float:right;'/>
< /div>
       < /center>
< div style='clear:both;'/>
< /div>
  • Preview & Save
  • Dia akan jadi macam ni ;

Heee.Jadi tak? Kalau takjadi ke tak paham ,sila comment di bawah ;)
Nak REQUEST TUTORIALS ? klik SINI


You Might Also Like

5 Like This Entry:

  1. Sorry nak tanya sikit. Ada code lain selain ]]>< / b:skin> tak? Sebab cari tak jumpa...

    ReplyDelete
    Replies
    1. Ops.Lupa letak.Ada :) kalau tak jumpa code tu cari code ni < /style> .Jumpa tak?

      Delete
  2. nice sharing adam.. makin lawa blog ni isyy jeles betul lah :< btw selamat ulang tahun juga untuk blog ni. keep blogging :DD

    ReplyDelete
  3. Aishhh cantik gak kalau footing cemtu hm hmmmm

    ReplyDelete