Rabu, Agustus 05, 2009

Merubah Tampilan Footer Menjadi 3 Kolom

Hai Sob... sebelum aku pamit, terlebih dulu aku pengin memposting sesuatu yg mungkin aja bisa kalian manfaatin buat mempercantik tampilan blog masing-masing.
Dan kali ini, aku mau menuturkan tentang cara merubah footer yg tadinya cuma 1 kolom, menjadi 3 atau 4 kolom.

Perlu kalian tau, postingan ini terinspirasi ketika aku jalan-jalan ke rumah Sahabat kita Buwel yg kalo aku amati, tampilan footernya kurang sedap di pandang mata. Kesannya seperti kurang tertata gitu. Nah maka dari itu, berikut aku tuturkan cara mudah merubah tampilan footer menjadi multi kolom, sehingga semua widget yg ada di dalamnya akan nampak tertata rapi.
Baik. Kalo gitu langsung aja. Pertama-tama, login dulu ke account blogger kamu. Lalu dari dasboard, masuk ke halaman layout/tata letak, lepas dulu semua widget yg ada di footer, simpan di notepad, atau titipkan sementara di sidebar dengan cara, ceklik widget yg dimaksud-tahan-geser dan lepas di sidebar. Simpan perubahan.
Kalo udah, sekarang masuk ke halaman edit HTML, centang dulu Expand Widget Template dan jangan lupa back up semua template, bisa dengan mendownload Full Template, atau mengcopynya ke dalam notepad.
Setelah itu, kalian copy CSS Style dibawah ini dan letakkan di ATAS kode </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Sudah?? Sekarang kamu cari script dibawah ini, letaknya jauh dibagian paling bawah barisan kode HTML kamu.
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Kalau udah ketemu, hapus aja kode script yg berwarna merah diatas, sisakan yg <div id='footer-wrapper'> dan script penutupnya </div>, kemudian sisipkan script HTML dibawah ini, sehingga hasil akhir setelah semua digabungin akan nampak seperti ini,
<div id='footer-wrapper'><div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding:
10px; text-transform: normal 100%;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text3' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
</div>

Oke sekarang simpan template dan liat hasilnya dengan menceklik page element. Kalo pekerjaan kamu tadi gak ada kesalahan, maka sekarang pada bagian footer akan nampak 4 element baru yg siap kamu pasangin widget yg kamu inginkan. Ambil kembali, widget yg dititipkan di sidebar tadi, dan letakkan lagi di dalam footer. Atur sedemikian rupa sesuai keinginan kamu. Kalo sudah, simpan perubahan dan liat hasilnya.

Nah... udah rapi kan footer kamu sekarang??
Ya sudah kalo gitu, sekarang tiba saatnya aku mohon pamit, undur diri sejenak, menyelesaikan sebuah ritual, yg sebenernya bukan aku yg mau. Tapi demi rasa sayangku buat kalian semua, buat Romo, buat Ibu, buat Diajeng, buat calon Anjeli Kecilku, buat kalian semua sahabat mayaku, Ella, Fanny, Wina, Ninit, Buwel dan semua sahabat yg gak mungkin aku sebutin satu persatu, aku harus tetap optimis bahwa aku pasti akan sembuh dan sehat kembali seperti sedia kala.
Ayo Rio, semangat..!!
Ingat..!! "Untuk menjadi optimis memang bukan jalan yang mudah, mengingat kondisi tiap orang berbeda. Tapi yang penting optimisme harus tetap ada, walaupun jurang itu di depan kita, tinggal kita mau atau tidak untuk menyeberanginya."

53 comments:

buwel mengatakan...

waaaaaaaaahhh makasih neh mas mut tutor nya, buwel coba yak....dan semoga hajat2 nya selalu terkabulkan...amiiin

PRof mengatakan...

Mo kemana Mut...??? Btw PRof selalu coba tutorial dari semut, meski sering gagal karena keterbatasan PRof dalam menyesuaikan TuTor semut dengan design template IjoPunkJUTee....Tapi tak ada salahnya nyoba kan..??? sekaligus belajar....

Ups hampir lupa, Award dah dipasang, makasih ya....

buwel mengatakan...

Yang kode ke 2 nya nggak di temuikan mas mut...xixiixiix...maaf neh....apa buwel emang yang nggak bisa yak.....memang buwel nggak hobby utak atik templet mas mut....ntar tak coba lagi wes mas mut....makasih tutor nya sekali lagi...siiip

RCO mengatakan...

pernah coba sih tapi nggak OK malah KO. Yang jadi masalah, bikin pusing nih banyak keluhan kenapa ada yang ketika klik komen di blog kok ada pop up.

sudah diganti-ganti tema masih juga sama.

RCO mengatakan...

award dari yu dah ditampilin kemarin, TERIMA KASIH. Bro!

RCO mengatakan...

Oya ada yang ketinggalan, foto2 JFC sedang nongol di sana.....

RCO mengatakan...

Weih cukup dulu nyepamnya,.....!

Mumpung sempat

Tukang Komen mengatakan...

Semangat cak, 75% kesembuhan berasal ari dalam diri kita, selain itu thanks banget nih tutornya, tar aku coba pas ada waktu senggang...

mocca_chi mengatakan...

aku uda nyoba ini bang, dan berhasil. hiiii

kakve-santi mengatakan...

nyoba ah...

lumayan nih, buat hias2...hehehe

yanuar catur rastafara mengatakan...

perlu di coba juga nih
hehehehehee

buwel mengatakan...

mas mut, buwel udah berhasil.....tapi kok pertamanya di mozilla agak ngehang yak setelah di tambahin script itu......trus lagi dasar buwel itu nggak bisa nata widget mas mut....tetep berantakan....kakakakakakaka

YudiWS mengatakan...

Perlu dicoba ah ntar... tutorial yg dicari nih, award dah dipajang tuh..makasih ya!

patahati mengatakan...

Jadi pengen direview juga nih rumahku oleh semut, kale aja dapat saran yg bagus, thanks banget loh..

inuel mengatakan...

iia harus tetep optimis,hehehhe,semoga semua tercapai,jagan lama lama yah mas semut,aku kan baru kenalan,hikz.....
tutorialna keren,kanpan yah aku mo nyoba :D

Henny Y.Caprestya mengatakan...

gunanya untuk menampilkan kayak yang dibawah ini ya mut??

Neng Rara mengatakan...

assalamualaikum,
mut..jangan lama-lama ya,cpt kembali.
info menarik mut..boleh dicoba
wassalam

Cebong Ipiet mengatakan...

semoga para cowok lebih rapi menata rumahnya =))

buwel mengatakan...

Makasih mas mut infonya.....heheheheh...maaaabbbb ngganggu....

namaku wendy mengatakan...

kalo jalan-jalan ke tempatku terinspirasinya mesti bagemana menciptakan bunyi-bunyian kentut yg alus alun mendayu-dayu huehehehe:p

Ivan@mobii mengatakan...

Semangat mut! Btw ritual apa yah??

Seti@wan Dirgant@Ra mengatakan...

Selamat pagi Mas Rio,... makasih banyak atas sarannya. Insya Allah akan saya perbaiki semuanya semoga dengan bantuan Mas, blog saya akan jauh lebih baik.
Sekali lagi terima kasih. Akan saya baca tutorialnya dulu.
Insya Allah saya senang sekali kalau ada waktu bisa Chating dengan Mas...

Tisti Rabbani mengatakan...

baru juga mau kenalan, kok udah pamit sih, Mut???...
oya, makasih udah di follow, trus kalo aku mo follow balik kok gak ada folowernya ya disini...hehehe
yo wis, ga papa..aku akan 'mengikuti' mu terus deh..
:)

riosisemut mengatakan...

@tisti rabani : di sidebar itu kan ada Neng, dua versi malah, masak gak ada sih, mau follow pake ponsel juga ada tuh linknya
@seti@wan dirgant@ra : wuaduh Bang Iwan, aku bukan apa-apa jangan terlalu menyanjung aku seperti itu. makasih bngt kalo Bang Iwan sudi chating sama aku
@ivan : hehe... ntar aku posting lg Van buat penjelasannya
@wendy : hahaha.. Wendy ni paling bisa bikin aku ketawa
@buwel : selamat ya Wel, blog km skrg udah oke banget
@cebong : amin Yank, xixixi... kangen aku sama kamu
@neng rara : trimakasih Neng, Insya Alloh gak kan lama
@henny : yup betul bngt Hen, kayak punyaku yg dibawah ini lho
@inuel : makasih Cantiq, Insya Alloh aku segera kembali
@patah hati : oke, ntar biar aku terawang blog km
@yudiw : makasi Yud uda pajang awardku
@yanuar : harus nyobain Yan
@kakve santi : yup, semoga bermanfaat
@mocca_chi : alhamdulillah, selamat ya Chi
@tukang komen : makasih Kang atas supportnya
@rco : hahaha... thank's Co atas spamnya, aku suka tuh ama model2 JfCnya, cantiq cantiq semua. Makasih jg uda pajang awardku
@prof : memang template kamu ribet bngt Prof, bikin Semut pusing, hahaha...
@buwel : karna kamu jadi yg pertama, ni aku kasih hadiah Semut Cantiq hahaha...

Lala mengatakan...

Makasih tutorialnya, kapan kapan dicoba *kalo ga malas* ;))

Salam kenal balik, makasih ya udah mampir. Sebenarnya sudah sering dengar nama "Rio si Semut" cuma blom berani mampir di pesanggrahan ini. Takut digigit :)) *Just Kidding*

BIG SUGENG mengatakan...

Yang gini-gini aku menyerah......

Sang Cerpenis bercerita mengatakan...

lho...lho..mau kemana nih? hiatus mulu nih..sedih dong kita2 nih..hiks...emut...emut..we will miss u...katanya mo tampil di acara take me out. oh....jangan2 dia hiatus krn mo tampil di acara itu ya? he he he..yasuds...titidj ya..salam buat diajeng dan calon baby kalian ya....

nietha mengatakan...

yaaahhhhhhh...mas rio mo kemana??
dont leave me donk

mocca_chi mengatakan...

mampir siang menjelang sore bang semut... ^^

Blog GABUS mengatakan...

Eh, aku jadi lupa nih mau komen apa...

Fauzan NR [ fhom.blogspot.com ]

inuel^^ mengatakan...

aku dateng agih,mau ngeplud keheheheh,,makasih yah komentnya :D

Blog GABUS mengatakan...

Bingunngggg

Fauzan NR [ fhom.blogspot.com ]

Blog GABUS mengatakan...

Nahhh.... aku ingat!

FAuzan NR [ fhom.blogspot.com ]

Blog GABUS mengatakan...

Footernya kayak punya mas semut ya????

Fauzan NR [ fhom.blogspot.com ]

Blog GABUS mengatakan...

Bagus nih...

Fauzan NR [ fhom.blogspot.com ]

Blog GABUS mengatakan...

Meski footerku sudah 3 biji tapi artikel ini tetap bermanfaat buat ngedit footernya!

SIIIIp!

Fauzan NR [ fhom.blogspot.com ]

Blog GABUS mengatakan...

Saya tunggu kunjungan balik anda....

Fauzan NR [ fhom.blogspot.com ]

Blog GABUS mengatakan...

Saya tinggal dulu ya....

Fauzan NR [ fhom.blogspot.com ]

YolizZ mengatakan...

mas rio mah emg paling jago yang beginian,, sip deh mas buat infonya :)

semangat yah mas!! moga cepat sembuh deh kalo gituh..

بوويل mengatakan...

Maaaabbb nggannggu neh...sukses selalu mas mut...maaabbb lagi baru mampir....

Tukang komen mengatakan...

mampir lagi yo cak...

Zippy mengatakan...

Punya'Q udah 3 coloum, xixixixiixix.....
Jadi ya, liat2 aja nih :D

suzhu BITES mengatakan...

thank buat infonya mas semut insya Alloh aq cobain dh,

buwel mengatakan...

met siang mas mut...ngucapin sekali lagi.. :)

Fanny Fauzan mengatakan...

sipp..makasih infonya..

salam kenal

KangBoed mengatakan...

SALAM CINTA DAMAI DAN KASIH SAYANG ‘TUK SAHABATKU TERSAYANG

I LOVE YOU PHUUUUUUUULLLLLLLLLLLLLLLL

namaku wendy mengatakan...

wis kenalan sik kono nek ngunu, podo aku yo ra kenal koq =))
mbuh karep'e piye wong aku juga gak gitu paham yg penting dkerjakan. dah jangan banyak protes, buruan angkut gih bingkisan (aneh) spesialnya. nek gak, tar timpukin lebih banyak lagi lo:p

بوويل mengatakan...

maaaaaaaaaabbbbb mas mut, buwel balik ke semula lagi......nggak tahu neh....di mozilla error terus setelah pake tutor in......maaaaab mas mut....btw buwel tetep matur thenkyu ya....

buwel mengatakan...

maaab nggannguuu mas mut.......buwel make lagi neh tutor nya, hehehehehhehhe...soalnya penyebab error nya udah ketahuan neh, yaitu di Master n friends blog buwel mas mut.....mungkin banyak yang broken link yak, jadi ya dengan ini tutornya buwel pake lagi.....hihhihiihihihi...
makasih sekali lagi mas mut.....dan maaaabbbb ngganggu....

neilhoja mengatakan...

mm mut, untuk yang template ku kan ga ada footernya, apa bisa dibikin yak?

buwel mengatakan...

mampir menjenguk, moga lekas sembuh...amiiin

Zippy mengatakan...

Hmmm, keren juga nih...
Punya saya kebetulan cuma 1 kolom footer'x, hehehhe....

Iccank Al-Faruq mengatakan...

Mantap bro...
Makasih banyak atas infonya.....

Posting Komentar

[ Kotak Komentar Klasik ]

Blue link↑↑diatas↑↑, bisa kalian gunakan saat kalian kesulitan koment karena sedang ngeblog via ponsel.

Tinggalkan jejakmu disini Sob..
komentar kalian adalah semangat buat Semut untuk menerbitkan entri berikutnya.