Cara Membuat / Meletakan Footer di Sisi Kanan atau Kiri Blog

Cara Membuat / Meletakan Footer di Sisi Kanan / Kiri Blog - Beberapa hari ini serasa dilema bro!!!  Semangat memposting artikel yang sebelum membara di awal tahun 2012 kini mulai luntur, entah apa yang membuat saya sampai se jenuh ini. Namun hal tersebut coba saya siasati dengan sesuatu ( rahasia ).
setelah sebelumnya memposting artikel tentang Cara Mengetahui Blog Dofollow atau Nofollow, kali ini saya akan coba memposting artikel yang sedikit aneh, yaitu membuat atau meletakkan footer di sisi blog entah itu di sebelah kanan blog, sebelah kiri blog, ataupun tengah. namun khusus pada tutorial ini kita hanya akan membahas tentang cara membuat footer berada di sisi kiri blog atau bisa di bilang sidebar ke duanya. hehehe.



Postingan aneh dengan judul yang aneh pula ini saya posting dengan harapan bisa mengobati rasa bosen ngeblog. sobat yang tertarik untuk ber eksperimen dengan trik ku ini, silahkan ikuti tutorial berikut.

DEMO

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML
3. Cari kode yang mirip dengan kode berikut.

#outer-wrapper {
  width: 950px;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

4. ganti kode tersebut dengan kode berikut.

#outer-wrapper {
  width: 950px;
margin-left:350px;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

( kode di atas hanya ada tambahan pada margin, karena kita membutuhkan space untuk meletakkan footernya.)

5. Ganti  kode footer-wrapper template sobat dengan kode berikut.
/* footer */
#footer {
clear:both;
width:950px;
position:relative;
text-align:left;
color:#000000;
font-family:julee;
background:#252525;
border:1px solid #000000;
margin:0 auto;
padding:0;
}

#footer {
width:300px;
clear:both;
float:center;
line-height:1.6em;
margin:0 auto;
padding:0;
}

.footer-bot {
padding:0px;
}

.footer-bot ul {
color:#222;
margin:0;
padding:0;
}

.footer-bot ul li {
list-style-type:none;
background:;
padding-left:15px;
margin-bottom:8px;
}

.footer-bot a {
color:#222;
text-decoration:none;
}

.footer-bot a:hover {
border-bottom:1px solid #222;
color:#000;
}

#footer-right {
width:250px;
float:left;
padding:5px;
margin-left:15px;
margin-bottom:10px;
background:#ffffff;
border:1px solid #222;
}
#footer-center {
width:250px;
margin-bottom:10px;
float:left;
margin-left:15px;
padding:5px;
background:#ffffff;
border:1px solid #222;
}
#footer-left {
width:250px;
background:#ffffff;
margin-bottom:10px;
padding:5px;
margin-left:15px;
margin-top:10px;
float:left;
border:1px solid #222;
}

6. Kemudian letakkan kode berikut di atas kode ]]></b:skin>.

#trik_tatelu {
position:fixed;_position:absolute;top:0px; background:#000000; left:px;  width:320px;
border:1px solid #000000; height:585px;;overflow:auto;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


7. Letakkan kode berikut di atas kode </body>
<div id='trik_tatelu'>
<div style='font-size:30px;font-family:Felipa;color:#ffffff;'>
<h3><blink>Hai!!!!</blink></h3>
</div>
<div id='footer'>
<div id='foot'>
<b:section class='footer-bot' id='footer-left'>
</b:section>
<b:section class='footer-bot' id='footer-center'>
</b:section>
<b:section class='footer-bot' id='footer-right'>
</b:section>

</div><div style='clear:both'/>
</div>
</div>

8. Klik save.

Perhatian!
  1. Sebelum sobat menggunakan trik ini, ada baiknya download terlebih dahulu template blog sobat.
  2. Cara ini di anjurkan pada template dengan lebar yang sesuai dengan outer wrapper 950px, untuk lebar kurang dari atau lebih dari 950px, sobat perlu ketelitian dan pengetahuan tentang html. ( bukan newbie ).
  3. Trik ini akan menggeser posisi outer wrapper blog sobat.
  4. Trik ini saya coba pada template minima yang telah di hilangkan sidebarnya.
  5. Mohon sobat atur sebaik mungkin jika setelah jadi hasilnya kurang bagus atau kurang cocok.
  6. Semoga cara membuat footer berada di sisi kanan atau kiri blog bisa membantu sobat blogger.
Previous
Next Post »

13 comments

Write comments
03:47:00 delete This comment has been removed by the author.
avatar
Tanpa busana
AUTHOR
15:47:00 delete

aneh tapi patut di coba mas....

makasih ya!!!

Reply
avatar
soesilo adji
AUTHOR
17:59:00 delete

nice info sobat..banner anda sudah terpasang..silahkan dicek. Maaf agak lama, saya masih sibuk dengan usaha saya..senang berteman dengan anda..

Reply
avatar
19:17:00 delete

tutornya mantap gan,,ane coba yakk,,thankss

Reply
avatar
19:59:00 delete

infonya saya coba dulu bang.....
keep spirit to blogging.....

Reply
avatar
00:11:00 delete

makasih mas ats infonya

Reply
avatar
18:12:00 delete

izin copy script nya,,, makasih bangets

Reply
avatar
Unknown
AUTHOR
09:25:00 delete

kanciang anak aram kalerk abang ang,.......... penipu ajiang

Reply
avatar
Unknown
AUTHOR
09:26:00 delete

kanciang anak aram kalerk abang ang,.......... penipu ajiang

Reply
avatar
Unknown
AUTHOR
09:26:00 delete

kanciang anak aram kalerk abang ang,.......... penipu ajiang

Reply
avatar
Unknown
AUTHOR
09:26:00 delete

kanciang anak aram kalerk abang ang,.......... penipu ajiang

Reply
avatar
20:48:00 delete

Wah footer justru diletakkan di sisi kanan atau kiri blog. Unik ya! :)

Reply
avatar