Monday, May 6, 2013
Cara Menambahkan Widget 3 Kolom Footer Pada Blogger Anda
Apakah Anda adalah seorang blogger yang ingin memiliki 3 kolom footer yang bagus yang terpasang di blog Anda? Jika ya Anda tidak sendirian, kami selalu ada untuk berbagi sedikit yang kami ketahui kepada Anda secara gratis. Jika 3 kolom footer ini memang benar-benar Anda butuhkan maka Anda dapat menambahkannya secara mudah dan sederhana pada blog Anda. Kami telah menyediakan kodenya untuk Anda semua, silahkan Anda terapkan dalam blog Anda semua dengan proses instalasi yang sangat sederhana.
Tapi sebelum kita melompat ke proses instalasi, saya ingin menjelaskan lebih lanjut tentang apa dan mengapa Anda perlu menginstal widget di footer blogger Anda. Pada awalnya dengan widget 3 kolom footer ini Anda dapat menambahkan banyak gadget yang Anda inginkan, widget footer ini juga membuat blog Anda terlihat bagus dan professional. Itu sebabnya banyak blogger menggunakan widget ini di blog mereka.
Baiklah langsung saja ikuti langkah-langkah di bawah ini untuk menambahkan widget 3 kolom footer di blog Anda.
Menambahkan 3 Kolom Footer di Blogger
- Login ke Dashboard blog Anda
- Pilih tab Template
- Backup dulu template Anda jika diperlukan
- Klik Edit HTML
- Kemudian cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
- Lalu letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi
/* ----- LOWER SECTION ----- */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333434;
}
#lower-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 32%;
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;
}
- Setelah itu cari kode </body> dan letakkan kode di bawah ini tepat sebelum kode </body>
<div id='lower'>
<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>
- Klik Save template kemudian masuk ke tab Layout - Gulir ke bawah dan Anda siap menambahkan gadget yang Anda inginkan di sana.
Pengaturan
Anda dapat dengan mudah menyesuaikan tampilan dan warna dari widget footer ini. Saya telah menandai dan mewarnai bagian-bagian penting dalam kode CSS di atas. Bacalah deskripsi di bawah ini dengan hati-hati untuk menyesuaikan widget 3 kolom ini sesuai keinginan Anda. Untuk mengetahui kode warna, gunakanlah Kode Warna Generator milik kami.
Jika Anda merasa artikel ini berguna, silahkan bagikan artikel ini dengan teman-teman Anda baik melalui Facebook, Twitter, Google Plus dan lain sebagainya. Terimakasih semoga ini membantu..
Anda dapat dengan mudah menyesuaikan tampilan dan warna dari widget footer ini. Saya telah menandai dan mewarnai bagian-bagian penting dalam kode CSS di atas. Bacalah deskripsi di bawah ini dengan hati-hati untuk menyesuaikan widget 3 kolom ini sesuai keinginan Anda. Untuk mengetahui kode warna, gunakanlah Kode Warna Generator milik kami.
- background:#333434; Gantilah 6 digit kode warna pada bagian ini untuk mengubah warna background widget.
- width: 960px; Ini adalah lebar widget. Jika Anda mau, Anda dapat menyesuaikan nilai ini agar lebarnya sesuai dengan lebar blog Anda.
- background:#fff dan width: 32%; Ini adalah warna background dan lebar tiga kolom widget yang ditambahkan.
- color:#0084ce; Ini adalah warna Title Heading
- font: bold 14px Arial, Tahoma, Verdana; Edit bagian ini untuk mengganti ukuran font dan jenis font.
- border-bottom: 3px solid # 0084ce; Edit bagian ini untuk mengubah ketebalan, style, dan warna border yang muncul di bagian bawah Title Heading.
- border-bottom: 1px dotted # ccc; Edit bagian ini untuk mengubah ukuran, style, dan warna border yang muncul di bawah link.
Jika Anda merasa artikel ini berguna, silahkan bagikan artikel ini dengan teman-teman Anda baik melalui Facebook, Twitter, Google Plus dan lain sebagainya. Terimakasih semoga ini membantu..

Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang. Follow @IshaMcSmile
Artikel Terkait:
Widgets and Plugins
Subscribe to:
Post Comments (Atom)
mantap mas brow..bsa nambah wawasan...ku sekarang jd tambah ngerti..^_^
ReplyDeletemaklum masih baru blom masih nol besar maslah blog..
SAma mz saya juga masih belum bisa apa2 dalam basalah blogging...
DeletePerlu belajar lebih dalam lagi..
yuk dipraktekkin sama-sama supaya ada pengalaman edit template, oh..ya salam kenal semua, kalau sempat kunjung balik blog saya gan http://xmisteri.blogspot.com
DeleteTrimakasih kawan sudah berkunjung....
DeleteSalam kenal...
This comment has been removed by the author.
Deletepelan-pelan pasti tau juga broo.
Deletehttp://tokoobatimport.com/obat-penghilang-tatto-permanen-tattonox-asli-terbukti-manjur.html
saya mencoba memasukan kode di atas tapi ko ngg bisa yang gan..apa karena them saya costum atau gimna yah
DeleteBisa di coba nih.. makasih sebelumnya ya mas atas berbagi informasinya.
ReplyDeleteARTIKEL KHUSUS DEWASA +18, DIBAWAH UMUR DI LARANG MASUK !!!!
Delete1. Panti Pijat Plus-Plus Ayam Kampus Di Jakarta
http://zone-hot.blogspot.com/p/panti-pijat-plus-plus-ayam-kampus-di.html
2. Koleksi Terbaru Pin BB Bispak Indonesia
http://zone-hot.blogspot.com/p/koleksi-terbaru-pin-bb-bispak-seluruh.html
3. Daftar Lengkap Panti Pijat Di Surabaya
http://zone-hot.blogspot.com/p/daftar-lengkap-panti-pijat-di-surabaya.html
4. Kumpulan Pin BB Cewek Cantik Bispak
http://zone-hot.blogspot.com/p/koleksi-pin-bb-cewek-cantik-bispak.html
5. Daftar Lengkap Nomor HP Cewek Bispak
http://zone-hot.blogspot.com/p/daftar-lengkap-nomor-hp-cewek-bispak.html
6. VIDEO MESUM Sex Japanese Cewek Cantik
http://zone-hot.blogspot.com/p/video-mesum-sex-japanese-cewek-cantik.html
# http://chanelmesum.blogspot.com
# http://tergodacinta.blogspot.com
# http://tantegigolo.blogspot.com
# http://jepang69.blogspot.com
ada script yang lebih simple ga gan
ReplyDeleteIni sudah yang paling sederhana dan mudah menurut saya kawan,,semang scriptnya sebanyak itu,,,
Deleteterimakasih atas informasiny, saya akan coba..
ReplyDeletemantap bro langsung saya coba nih
ReplyDeleteSemoga berhasil kawan...
Deletemakasih gan cukup jelas artikelnya thanks gan..
ReplyDeleteSemoga bermanfaat,,,,
DeleteKulonuhun mas..
ReplyDeletesaya sangat seneng banget bisa membaca dan menerapkan ilmu mas di blog saya. saya ada sedikit kendalam mengenai penerapanya di blog saya. hasil dari apa yang di tuliskan di artikel tidak sama dengan apa yang saya terapkan. perbedaannya. 3 kolom yang di maksud mas arahnya horisontal. tapi di blog ku kok vertikal ya mas.. mogon bantuanya mas.. by priyonisme.
http://priyonisme.blogspot.com/
Masalah seperti itu terkadang memang muncul di bebrapa template...
DeleteMungkin salah satu penyebabnya lebar template tidak sama dengan lebar widget ini, coba Anda sesuaikan lebarnya dengan template milik Anda.
Semoga berhasil kawan..jika ada kesulitan silahkan tanyakan lagi.
Makasih om, kodenya berhasil :)
ReplyDeleteSelamat kalau begitu...
DeleteJangan bosan mampir ke sini lagi.
Terimakasih mas, akhirnya sayapun bisa menambah kolom tersebut di template blog saya
ReplyDeleteSama2 mas,,,senang jika berhasil, berarti template Anda cocok dengan script di atas.
Deletemantap gan tutor nya..kode ini lah yang ane cari2 maklum lagi belajar buat template gan..makasih ya info nya langsung praktek ane
ReplyDeleteSilahkan kawan semoga berhasil...
Delete^^
ternyata beda-beda ya tips untuk membuat 3 kolom , kalo yang saya ada 3 kolom tapi gak yang begini, tapi kurang lebih sama yang penting kelihatan, heheheh...sip gan....
ReplyDeleteinfo mantap frends. http://muktirohman.blogspot.com/
ReplyDeleteThanks gan :) http://www.tbrcity.tk/
ReplyDeletegan biar footer nya kesamping gmn ya caranya, di template ane kok malah ke bawah ya
ReplyDeleteCoba sesuaikan lebar widget dengan lebar template milik Anda kawan,,edit kode yang berwarna merah seperti panduan di atas.
DeleteSemoga berhasil.
Berhasil gan,, Tapii, diatas footer nya ada garis bagaimana cara menghilangkannya?
ReplyDeletedan dibagian paling bawah(penutup code) ( div, body, dan html) nya berwarna merah? bagaimana cara mengatasinya? trims
mantap gan
ReplyDeletemakasih gan mantab tutorialnya, semoga bisa membantu yang lain
ReplyDeletemohon maaf gan. mau tanya. cara edit font widget gimana ya.... di situ kan ada seperti ini
ReplyDeletefont: bold 14px Arial, Tahoma, Verdana; apa bisa langsung tak rubah bold 14px times new roman;
????
soalnya sy rubah seperti itu belum done. thank ya...
wah ini dia yang saya cari, makasi mas infonya.
ReplyDeletemampir balik ke ya: www.klikberiklan.com
bagus nih infonya, beda dr yg lain cara nya.. nice..
ReplyDelete-blogwalking by Hunter X Hunter Island-
kok gak work ya di blog ane http://alwaystau.blogspot.com/
ReplyDeleteSalam Mas...?
ReplyDeleteIdzin simak artikel nya yah..wah mantap ini sangat membantu
Buat saya yang lagi nyari buat pasang widget di foter
terima kasih atas info dan artikel nya,..salam sukses
mampir juga di blog saya di :
http://karristaent.blogspot.com
Tutorialnya cocok ama blog saya sob.....terus berkarya.
ReplyDeleteHarap Kunbalnya di http:isseu.blogspot.com ( blog baru dalam taraf pengerjaan ^_^ )
Salam Senyum Sukses <3S>
Thanks Sob ^_^
ReplyDeletemakasih infonya gan
ReplyDeletehttp://awidjaja.blogspot.com/
&
http://iklangratisopera.blogspot.com/
mampir gan
bagus akan saya coba, kunjungi juga www.creamputih.blogspot.com
ReplyDeletebagus gan ..
ReplyDeletekunjungi http://hamahara.blogspot.com/
ini yg saya cari, makasih infonya bro
ReplyDeletekenapa cuma jadi 2 kolom ya, kolom ketiganya ada di bawah kolom 2
ReplyDeleteMantap Gan Infonya Jangan Lupa Kumbalannya Ya :D
ReplyDeleteTerima kasih banyak telah berbagi. Tipsnya sudah dipraktekkan dan OK
ReplyDeleteterimaksih infonya kawan.
ReplyDeletekunjungi balik ya http://kampusnongkrong.blogspot.com
itu kan udah ane coba gmn caranya biar nyatu sama halam blog ane?
ReplyDeletecomebac
thanks sob keren kok footernya salut
ReplyDeletecomeback
terima kasih mas, sangat membantu saya yang ingin menambah kolom footer :)
ReplyDeleteMakasih infonya kunjungan Anda adalah kehormatan bagi saya
ReplyDeletesiiippp,,
ReplyDeletesaya kok sukses gan? :v Bercanda.
ReplyDeleteThanks Gan Tutornya >> bakul-anime.blogspot.com
mantab bro... triknya sukses... and sangat membantu...
ReplyDeletemantap mas mw coba diaplikasikan neh slam bloger sukses slalu
ReplyDeleteberhasil sih gan..
ReplyDeletecuma kayaknya template yang saya pakai kurang begitu menyatu dengan footernya
jadi saya tiadakan.
tapi thanks da berbagi info gan
Terima kasih mas. sangat membantu
ReplyDeletemantap..
ReplyDeleteane suka warnanya heheh
btw thanks gan.
visit my new blog :D http://katoukumiko.blogspot.com/
ReplyDeletekok ane coba di atas, tetapi kolomnya lebar smua g 3 ke smping >.<
ReplyDeleteSS : http://3.bp.blogspot.com/-OiKnuM2-mBM/UrfW_9FxerI/AAAAAAAAA00/YL1YLMAp_OU/s1600/vvvvv.jpg
tolong bantuannya dong.
mksih
Mas tempat saya kok vertikal ya, nggak Horizontal, nggak kayak punya sampeyan
ReplyDeletesangat bermanfaat gan,, terimakasih infonya,,,saya minta ijin praktek,,
ReplyDeletenyimak gan,,, terimakasih infonya
ReplyDeletemantab,,, thanks gan ilmunya
ReplyDeletemantab gan
ReplyDeleteMantap, izin sedot kang..
ReplyDeleteMaaf kang setelah saya coba, widget sebelah kirinya ga sesuai dengan yang ada di sebelah kanan, mohon bantuannya kang, saya masih baru..
ReplyDeleteterima kasih kang sebelumnya..
Cek blog
http://masterplan84.blogspot.com/
Kunjungan pertama saya dan salam kenal
ReplyDeleteBagus mas artikelnya sangat mudah dimengerti simple dan jelas, terima kasih sudah berbagi.
Deletewah manteb nih..
ReplyDeleteini yang gue cari :D
agan bisa ngajarin saya tentang HTML editing kagak :D maklum newbie nih di Web Deplomating :D .. btw konten blognya bagus mas .. walaupun gak fokus ke satu hal tapi pengkategoriannya bagus
ReplyDeleteSip, nuh bisa refresi juga gan, mitrapustaka.blogspot.com
ReplyDeleteSangat Bagus sekali :D
ReplyDeletehttp://harafimulki.blogspot.com
saya coba dulu mas, matur suwun
ReplyDeleteAlhamdulillah, sudah jalan di blog saya. Matur suwun nggeh mas, matur suwun sanget. :)
ReplyDeleteartikelnya relevan dan detail banget dalam penjelasannya.
aku pasang tapi kok ukurannya jadi memanjang ya mas ?
ReplyDeletedan saat aku jalankan via mobile gak muncul ?
kenapa ya mas ? Solusinya dong ?
mas, tolong saya mas
DeleteTernyata cukup mudah juga tutorialnya
ReplyDeleteSangat Membantu saya dengan template 2 kolom :D
ReplyDeleteSayangnya mwb gak support
ReplyDeleteterima kasih gan tutornya sangat membantu
ReplyDeleteby reading this article I can add personal insight .... thank you for the info da thank you for the share
ReplyDeleteterima kasih sob atas tutorialnya, oh iya kalau untuk ganti warna background
ReplyDelete#lowerbar-wrapper {
border:1px solid #DEDEDE;
background:#fff;
gimana ya mas soalnya sudah saya coba gak bisa2
akhirnya ketemu juga :D
ReplyDeleteterima kasih gan..
http://komputer-sync.blogspot.com
klo mau jadi 4 widgetnya gmna caranya gan??? mksh
ReplyDeletemakasih infonya gan, footer yang ok punya...
ReplyDeletemantap dah, sudah saya coba tadi, kalau agan berkenan jangan lupa follow yah
ReplyDeleteMakasih mas, kunjungi juga blog adik
ReplyDeletehttp://www.prediksibola888.blogspot.com
http://www.kis33.net
tiap kali ganti template pasti mampir kesini hahhahahhahahah
ReplyDeletetanks
ReplyDeleteApakah akan memperlambat blog?/
ReplyDeleteTutorialnya maknyus mas bro.
ReplyDeletesudah saya terapkan dan berhasil.
Terimakasih dan mohon izin untuk share di blog sederhana milik saya.
coba saya praktek dulu di blog obat penumbuh rambut botak saya gan, makasih infonya
ReplyDeleteSudah saya Praktekan untuk toko online saya dan Berhasil Makasih
ReplyDeletethx work gan
ReplyDeletewah bisa di praktekan nih, makasih bro infonya
ReplyDeletemasih awam broo... tak ada salahnya mencoba tank infonya
ReplyDeleteMantap..
ReplyDeletematursuon..
mantap dah artikelnya
ReplyDeletethanks infonya gan
ReplyDeleteterimakasih banyak sob, tapi apa gak terlalu berdempetan tuh..
ReplyDeleteluar biasa bro, thanks. ditunggu kumbal nya,heee
ReplyDeleteluar biasa bro, thanks. ditunggu kumbal nya,heee
ReplyDeleteManteep sob informasi artikelnya :)
ReplyDeleteIjin share http://grosiracemaxstasik.com/obat-alami-diare/
Thanks ka infonya, izin share :)
ReplyDeletehttp://goo.gl/mgBCnM
makasih banyak buat tutornya sob,, sangat bermanfaat..
ReplyDeletehttp://goo.gl/4Gnhee
ilmu yang sangat bermanfaat nih, terimakasih gan
ReplyDeletehttp://goo.gl/Za0GE0
Artikel ini memberikan wawasan terbaru buat saya, wacana pembahasan ini sangat bermanfaat.
ReplyDeletehttp://jellygamatgoldg31.com
Makasih untuk informasi artikelnya, sangat membantu :)
ReplyDeletehttp://goo.gl/NcIh6Z
Makasih bosss....!!! kunjungi juga http:proton-cyber.blogspot.com
ReplyDeletejadinya malah berantakan
ReplyDeleteThis comment has been removed by the author.
ReplyDeletemakasih gan.,
ReplyDeleteBermanfaat banget bang makasih infonya..
ReplyDeleteagar responsif gmna cranya gan ??
ReplyDeletekeren dan silahkan berkunjung kesini gan wajakteknologi.blogspot.com
ReplyDeletesip gan, sangat bermanfaat. :D
ReplyDeletekunjungi blog saya gan, pj-26.blogspot.com
makasih bangeet gan, sangat bermanfaat, moga blognya makin sukses :D
ReplyDeletekereeennn..
ReplyDeletesiip makasih bro dah berbagi
ReplyDeletemohon maaf gan. mau tanya. cara edit font widget gimana ya.... di situ kan ada seperti ini
ReplyDeletefont: bold 14px Arial, Tahoma, Verdana; apa bisa langsung tak rubah bold 14px times new roman;
???? Download Film Semi 2016
nice gan http://otaktechno.blogspot.co.id/
ReplyDeleteoke..mau belajar google forms, bikin pertanyaan nempel diblog
ReplyDeletehttps://olahragafikri.blogspot.co.id/2016/06/tutorial-google-forms.html
makasih https://sobathusen.blogspot.co.id/
ReplyDeleteafter reading the article you affection makes me feel very flattered by this, it gives a lot of little knowledge, in which the news is presented is very nice and easy to read directly in the subject heading, the fate of a reader can only remark, it was not appreciated.dewa poker
ReplyDelete