Cara Membuat 3 Kolom Footer pada Blog Versi 2 ~ SOBATSOFTWARE : Tempatnya Berbagi Software, Game dan Tips.

Hai sob ! jika sebelumnya saya telah membahas tentang Propmosikan Blog Anda disini dan Cara Membuat 3 Kolom Footer pada Blog, nah pada kali ini saya akan mengulas tentang Bagaimana Cara Membuat 3 Kolom Footer pada Blog Versi 2, Jika anda tertarik untuk menambah 3 Kotak Kolom Footer pada Blog ? silahkan saja Follow LANGKAH berikut.

LANGKAH :

Pertama anda login ke Blogger.
Pilih menu Template >> Edit HTML.
Jangan lupa anda mengbackup data template anda supaya untuk menghindari hal-hal yang tidak diinginkan.
Setelah itu centang tombol Expand Template Widget.
Jika Sudah mengikuti langkah-langkah diatas, Silahkan cari kode yang hampir mirip dengan kode berikut.

/* FOOTER */
#footer{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGnoCg4LwfN9Z3tp-OwT5kUynqkv2WcyH010toVBBIF7HqY7cPjFjs61RcIY21fBLRi9O06aMyyicqpXIIQJhJYHAICE_ImdUrboekmcnDDiaclPw2wTBQ5V51qy-Z4E3MepxvoNpc/s1600/Maintenace.PNG") no-repeat scroll 0 0 transparent;color:#FFF;font-size:13px;height:33px;margin-top:0;padding:12px 19px 0;text-align:center;text-shadow:0 1px 0 #000;clear:both}
#footer a{color:#FFF}
#footer a:hover{color:#E8EFF1;text-decoration:none}
#credits{color:#555;font-size:11px;padding:4px 4px 14px;text-align:center}
#credits a{color:#555;text-decoration:none}

Jika telah menemukannya. Silahkan Copy kode berikut tepat dibawah kode #credits a{color:#555;text-decoration:none}.

.footer-column{padding:10px}
.footer-column{margin:0 0 10px 0px;color:#ffffff;font-size: 13px;text-shadow: 0 0px 0 #2cb55e;}
.footer-column a{text-decoration:none;color:#1ae85e;}
.footer-column a:hover{text-decoration:underline;color:#6ffc99;}
.footer-column h2{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3oJio3AVlqEYyJJ3reE7SulZWB26S6ALaPgRrpEnjKa6RZljNe_fn5ByEFc9sGW_kJj4ZdAbA3P6etdjQw1amyb_Ltt2haoB20XKAbSpTsTtgTeZdHWewBtwqrUKpnc1PBAM2eZjimjP8/s1600/h2bg-SOBATSOFTWARE.png") repeat-x scroll 0 0 transparent;color:#000;font-family:Arial,Helvetica,Sans-serif;font-size:14px;font-weight:bold;letter-spacing:0;line-height:18px;margin:-5px -10px 0px;padding:0 10px 5px;text-shadow:0 1px 0 #2cb55e;text-transform:none;}
.footer-column ul{list-style-type:none;margin:0 0 10px;padding: 0;}
.footer-column ul li{border-bottom:1px solid #5e5e5e;margin:0;padding:5px 0;}
.footer-column ul li:hover{}
.footer-column .widget{border:1px solid #8c8c8c;margin-bottom:7px;padding:4px;}
.footer-column .widget-content{overflow:hidden;}

Dan setelah itu silahkan kode yang hampir mirip dengan kode berikut:

<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

<p/></div>



Dan Copy kode berikut tepat diatas kode .

<div id='footer-column-container'>
<div id='footer2' style='width: 32%; float: left; margin:0 0 0 10px; text-align: left;'>
<b:section class='footer-column section' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 32%; float: left; margin:0 0 0 7px; text-align: left;'>
<b:section class='footer-column section' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 32%; float: left; margin:0 0 0 10px; text-align: left;'>
<b:section class='footer-column section' id='col3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: normal;'>
<div class='footer section' id='col-bottom'/>
</div>
<div style='clear:both;'/>
</div>

Setelah itu anda memasuki langkah terakhir, yaitu Klik Simpan / Save.

PERHATIAN :

Anda dapat mengganti header widget sesuai selera anda dengan mengganti url https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3oJio3AVlqEYyJJ3reE7SulZWB26S6ALaPgRrpEnjKa6RZljNe_fn5ByEFc9sGW_kJj4ZdAbA3P6etdjQw1amyb_Ltt2haoB20XKAbSpTsTtgTeZdHWewBtwqrUKpnc1PBAM2eZjimjP8/s1600/h2bg-SOBATSOFTWARE.png dengan url gambar yang sudah anda upload sebelumnya.
Anda dapat mengatur lebar widget sesuai dengan kebutuhan anda dengan cara mengganti 32% dengan yang anda inginkan.

Jika anda mengikuti LANGKAH diatas dengan benar, maka widget yang dihasilhkan akan terlihat sebagai berikut.

SELAMAT MENCOBA DAN SEMOGA BERHASIL ^_^
Tested By Author With Template Sobatsoftware

Mari Kita Saling Menghargai Sesama Blogger Apabila Artikel ini bermanfaat, silahkan saja di share dimanapun. Dengan catatan anda harus menyertakan link sumbernya. Terima Kasih WWW.SOBATSOFTWARE.NET ^_^