Membuat Footer Menjadi 3 Kolom
.
Friday, December 6, 2013
Tentunya pengunjung pun akan terasa lebih nyaman jika sedang mengunjungi blog kita.
Disini saya akan memberikan Trik Belajar Blog membuat footer 3 kolom,dan sangat mudah pula mempraktekannya.
OK langsung aja ..
Ket : Trik ini khusus untuk blogger beta (layout)
1. Login ke Blog
2. Klik Rancangan - Edit HTML
3. Centang “Expand Widget Template”
4. Copy Script di bawah ini
<div id=footer-column-container>
<div id=footer2 style=width: 30%; float: left; margin:0; text-align: left;>
<b:section class=footer-column id=col1 preferred=yes style=float:left;/>
</div>
</div>
<div id=footer3 style=width: 40%; float: left; margin:0; text-align: left;>
<b:section class=footer-column id=col2 preferred=yes style=float:left;/>
</div>
<b:section class=footer-column id=col2 preferred=yes style=float:left;/>
</div>
<div id=footer4 style=width: 30%; float: right; margin:0; text-align: left;>
<b:section class=footer-column id=col3 preferred=yes style=float:right;/>
</div>
</div>
<div style=clear:both;/>
<p>
<hr align=center color=#5d5d54 width=90%/></p>
<div id=footer-bottom style=text-align: center; padding: 10px; text-transform: lowercase;>
<p>
<hr align=center color=#5d5d54 width=90%/></p>
<div id=footer-bottom style=text-align: center; padding: 10px; text-transform: lowercase;>
<b:section class=footer id=col-bottom preferred=yes>
<b:widget id=Text2 locked=false title= type=Text/>
</b:section>
<b:widget id=Text2 locked=false title= type=Text/>
</b:section>
</div>
<div style=clear:both;/>
<div style=clear:both;/>
</div>
5. Cara letakannya Cari script di bawah
<div id=footer-wrapper><b:section class=footer id=footer/>
</div>
Ganti yang berwarna merah dengan script di Point 4 tadi.
6. Save Template
Selesai ..... Sekarang anda sudah mempunyai Footer 3 Kolom di blog anda,semoga trik ini dapat bermanfaat.
Taruhlah widget2 yang dapat bermanfaat bagi blog dan pengunjung anda.
0 comments:
Post a Comment