Cara menambah 3 kolom di atas footer
Cara menambah 3 kolom di atas footer. Hallo sobat bloger, masih semangat ngeblog bukan? He hee... smoga aja begitu. Sudah beberapa hari saya nggak sempet posting karena kesibukan orderan. Sekarang ada ada waktu sedikit istirahat rasanya tangan sudah gatel pengen ngetik.
Nah pada kesempatan ini saya ingin berbagi Cara menambah 3 kolom di atas footer. Memang sudah tak terhitung sobat bloger yang posting seperti ini, tetapi ini saya khususkan bagi rekan yang template blognya seperti template yang saya pakai ini, karena untuk template yang berbeda, mungkin ada sedikit perbedaan kode. Bagi sobat bloger yang masih belajar mungkin akan kesulitan.
Langsung saja ya, langkahnya sebagai berikut:
1. Masuk ke Account blog anda.
2. Klik Rancangan.
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Cari kode seperti di bawah ini:
#footer {<br /> clear: both;<br /> color: #333333;<br /> font: 11px arial;<br /> letter-spacing: 0;<br /> margin: 0 auto;<br /> padding-bottom: 20px;<br /> padding-top: 10px;<br /> text-align: center;<br /> text-transform: none;<br /> width: 960px;
Cara menemukannya tekan Ctrl+F pastekan kode dalam teks area di atas ke dalam kotak Find hasil Ctrl+F anda tadi. Lihat gambar:
#bottom{<br /> background:#F0F5FA;<br /> width:100%;<br /> position:relative;<br /> clear:both;<br /> margin:0px auto 0px;<br /> color:#000000;<br /> float:left;<br /> padding:10px 0;<br /> }<br /> #bottom h2{<br /> color:#000000;<br /> font-size: 14px;<br /> font-family: Arial, Tahoma, Verdana;<br /> font-weight: bold;<br /> margin: 0px 0px 8px 0px;<br /> padding: 0px;<br /> letter-spacing:0em;<br /> text-transform:capitalize;<br /> }<br /> #bottom ul{<br /> padding:0px;<br /> margin:0px;<br /> }<br /> #bottom ul li{<br /> line-height:26px;<br /> list-style-type:none;<br /> border-bottom:1px dashed #031c5d;<br /> }<br /> #bottom_1{<br /> width:300px;<br /> float:left;<br /> margin:0px;<br /> padding:0px;<br /> }<br /> #bottom_2{<br /> width:300px;<br /> float:left;<br /> margin-left:15px;<br /> padding:0px;<br /> }<br /> #bottom_3{<br /> width:300px;<br /> float:left;<br /> margin-left:15px;<br /> padding:0px;<br /> }
7. Langkah selanjutnya cari kode di bawah ini:
</div></div><!-- end outer-wrapper --><br /> <div id='footer-bg'><div id='footer'><!-- Remmeber!!! This free Blogger template is licensed under the Creative Commons Attribution 3.0 License. You are required to keep the footer links intact which provides due credit to its Author and Supporters. --><br /> <div class='first-links'>Copyright (c) 2011 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>.<br /> Designed by <a href='http://www.cyberoptik.net'>Chicago Web Design</a> and <a href='http://www.deluxetemplates.net/'>Google Blogs Templates</a></div><br /> </div></div></div></div> <br /> </body><br /> </html><br />
8. Copy seluruh kode di bawah ini, lalu paste tepat sebelum kode di atas.
<div id='bottom'><b:section class='bottom' id='bottom_1' preferred='yes'/><br /> <b:section class='bottom' id='bottom_2' preferred='yes'/><br /> <b:section class='bottom' id='bottom_3' preferred='yes'/><br /> </div>
9. Klik SIMPAN TEMPLATE.
Selesai.
Untuk melihat hasilnya klik Rancangan, jika langkah anda benar maka di atas footer anda akan terlihat tambahan 3 kolom widget yang siap anda pakai. Selamat mencoba
Komentar
Posting Komentar