Cara Membuat 3 Kolom Dibawah Footer

Menambahkan 3 kolom dibagian paling bawahblog atau footer ini sebenarnya trik lama untuk menambahkan elemen halamandibawah footer. Dan setiap blogger sepertinya memiliki cara membuat dan desainfooter masing-masing untuk blognya. Selain bisa untuk menempatkan beberapa widget,dengan adanya 3 kolom dibawah footer ini juga bisa memperindah tampilan blog.Makanya footer ini saya beri nama “StylishFooter”. Sobat bisa mengisinya dengan widgetRecent Post, Statistik Blog, Recent Comment, Popular Post dan lainnya.

Cara Membuat 3 Kolom Dibawah footer :

1.   Login ke dashboard blogger anda.

2.   Pilih Rancangan > Edit HTML , centang Expandwidget template.

3.   Jangan lupa backup dulu template sobat denganmengklik Download full template untuk antisipasi jika terjadi kesalahan atausobat ingin mengembalikan templatenya ke kondisi semula.

4.   Cari kode ]]></b:skin> pada template dengan bantuan Ctrl+F.

5.   Copy CSS dibawah ini dan paste tepat diatas kode]]></b:skin>.

/* ----- LOWER SECTION ----- */#lower { margin:auto; padding: 0px 0px 5px 8px; width: 100%; background:#333434;} #lower-wrapper { margin:auto; padding: 20px 0px 00px 0px; width: 942px;}#lowerbar-wrapper { border:1px solid #DEDEDE; background:#fff; float: left; margin: 0px 8px auto; padding-bottom: 3px; width: 31%; 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;}/* Footer----------------------------------------------- */#footer {clear: both;text-align: center;color: $textColor;}.footer h2 {padding:0 0 0;margin:0 0 0;font:normal bold 86% Arial, sans-serif;line-height: 1.5em;text-transform:uppercase;letter-spacing:.1em;color:#ffffff;font-size:14px;text-align:left;}#footer .widget {margin:.5em;padding-top: 20px;font-size: 85%;line-height: 1.5em;text-align: $startSide;}#footer .widget h2 {text-align:left;}#footer-wrapper {background: #373737;border-top:1px solid #EDEDED;font-size:11px;margin:0px auto 0px;padding:0px 0 0;text-align:center;width:100%;}#footer-wrapper .widget h2 {text-align:left;font-size:16px;font-family:Arial,Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;}#footer-wrapper .widget {background: #373737;color:#ffffff;margin:.5em;padding-top: 20px;font-size: 100%;line-height: 1.5em;text-align: $startSide;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}#footer-wrapper p {color:#999999;font-size:1em;line-height:1.4em;margin:5px 0 0;}#footer-wrapper a {font-weight:normal;color:#888888;font-size:1em;}#footer-wrapper a:hover {color:#cccccc;font-weight:normal;}#footer-wrapper h2 {background:#373737 url() repeat-x;border:0px outset #ffffff;padding:0 0 0;margin:0 0 2px;font-family:"Courier New", Courier, "Lucida Console", Monaco, "DejaVu Sans Mono", "Nimbus Mono L", "Bitstream Vera Sans Mono";text-transform:none;letter-spacing:.15em;color:#ffffff;font-size:18px;}#footer-wrapper ul,#footer-wrapper ul li{list-style-type:none;background-color:#373737;}#footer-wrapper ul li:hover{list-style-type:none;background-color:#1f1f1f;}

6.   Lanjutkan dengan mencari kode </body>  pada template.

7.   Copy script dibawah ini dan paste tepat diataskode </body>.

<div id='footer-wrapper'><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>

8.   Simpan / Save template anda.

9.   Coba lihat hasilnya dengan masuk ke menu PageElement atau elemen laman, jika berhasil maka pada elemen laman sobat akanterlihat seperti gambar dibawah ini.

Nah itu tadi tips singkat cara membuat 3 kolom dibawah footer di blogspot sobat. Semoga bermanfaat.

Posted in: BLOG,Menghias Blog