Cara Membuat Footer Blog Ala O-Om

Alimadura.com Cara Membuat Footer Blog Ala O-Om - Pada tips trik blog ala gang tutorial kali ini adalah mau share yang sudah di reques salah satu sobat gang tutorial lewat komentar pada postingan Cara Membuat Menu Navigasi Horisontal Multi Level Pada Blog. Sebut saja "Asmara Susanto/Cek Info", nggak tau maksudnya padahal kalo melihat template yang dia pake sudah template O-om.

Tapi gak apalah sapa tau sobat gang tutorial yang lain membutuhkannya. Lagian postingan ini ada kaitannya dengan cara membuat menu navigasi multi level style ala O-Om.

OK. tidak usah panjang lebar lagi biar tidak nyasar nanti. langsung ke modifikasi footer ala o-om
1. Silahkan login ke blogger
2. Pilih Rancangan - Element - Edit HTML
3. Silahkan letakkan kode di bawah ini tepat diatas kode ]]></b:skin>


/* footer */
#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFQlNWV_VlUP_s76UMuZDkSO9e1PfeIS1i4wROlHZ-QH9sTdIZvb8XeQQ6DrqKDrdJJPFgxjGUOO_uv1E6q_YJTH6MOOwhz-APhJkvpkZZdyCc-LIJuH7Ib9aTaw5wBLrOFAPwP9RnHOup/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:center; padding:25px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#fff; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
h2 {font-family: Arial, Helvetica, sans-serif; font-size:13px; line-height:28px; color:#fff; padding-bottom:6px; }
h2 a:link, h2 a:visited{color:#666666; font-size:11px;}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:210px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:330px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both;line-height:1.3em; letter-spacing:.0em; font-size:90%; border-top:1px solid #c0c0c0; padding-top:10px;padding-bottom:20px;}
#footer-wrapper{height:0px; clear:both; margin:0 auto; text-align:left; padding:1px}
.credits{margin:0; width:900px; padding:0px 0px 0px; font-size:95%}


4. Kemudian silahkan cari kode <div id='footer'> lalu ganti dengan kode di bawah ini


<!--Start Footer-->
<div id='bottom'>
<b:section class='bottom' id='category' preferred='yes'/>

<b:section class='bottom' id='left-bottom' preferred='yes'/>

<b:section class='bottom' id='center-bottom' preferred='yes'/>

<b:section class='bottom' id='right-bottom' preferred='yes'/>

<div id='upper-footer'>
<div style='float:center; padding-top:0px'>
<font color='#ffffff'>&#169; 2011 </font><font color='#ffffff'><data:blog.title/></font><font color='#ffffff'> is proudly powered by <a href='http://blogger.com'>blogger.com</a> | Template by <a href='http://sandydoank12.blogspot.com'>Gang Tutorial</a></font>
</div>
</div>

</div>
<!--End Footer-->

5. Silahkan simpan template

OK. Sampai di sini dulu Semoga bermanfaat dan selamat mencoba Cara membuat footer Blog Ala O-Om.