Terbaru: Optimasi URL Blog | 10 Tips Mempercepat Blog Load | 30 Strategi SEO | 15 Rahasia Menulis Konten

Ad 468 X 60

Monday, May 6, 2013

Cara Menambahkan Widget 3 Kolom Footer Pada Blogger Anda

footer 3 kolom di blogger
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
3 kolom footer

  • 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.
3 kolom footer blogger

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.
  • 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.

125 comments:

  1. mantap mas brow..bsa nambah wawasan...ku sekarang jd tambah ngerti..^_^
    maklum masih baru blom masih nol besar maslah blog..

    ReplyDelete
    Replies
    1. SAma mz saya juga masih belum bisa apa2 dalam basalah blogging...
      Perlu belajar lebih dalam lagi..

      Delete
    2. 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

      Delete
    3. Trimakasih kawan sudah berkunjung....
      Salam kenal...

      Delete
    4. This comment has been removed by the author.

      Delete
    5. pelan-pelan pasti tau juga broo.

      http://tokoobatimport.com/obat-penghilang-tatto-permanen-tattonox-asli-terbukti-manjur.html

      Delete
    6. saya mencoba memasukan kode di atas tapi ko ngg bisa yang gan..apa karena them saya costum atau gimna yah

      Delete
  2. Bisa di coba nih.. makasih sebelumnya ya mas atas berbagi informasinya.

    ReplyDelete
    Replies
    1. ARTIKEL KHUSUS DEWASA +18, DIBAWAH UMUR DI LARANG MASUK !!!!

      1. 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

      Delete
  3. ada script yang lebih simple ga gan

    ReplyDelete
    Replies
    1. Ini sudah yang paling sederhana dan mudah menurut saya kawan,,semang scriptnya sebanyak itu,,,

      Delete
  4. terimakasih atas informasiny, saya akan coba..

    ReplyDelete
  5. mantap bro langsung saya coba nih

    ReplyDelete
  6. makasih gan cukup jelas artikelnya thanks gan..

    ReplyDelete
  7. Kulonuhun mas..
    saya 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/

    ReplyDelete
    Replies
    1. Masalah seperti itu terkadang memang muncul di bebrapa template...
      Mungkin 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.

      Delete
  8. Makasih om, kodenya berhasil :)

    ReplyDelete
    Replies
    1. Selamat kalau begitu...
      Jangan bosan mampir ke sini lagi.

      Delete
  9. Terimakasih mas, akhirnya sayapun bisa menambah kolom tersebut di template blog saya

    ReplyDelete
    Replies
    1. Sama2 mas,,,senang jika berhasil, berarti template Anda cocok dengan script di atas.

      Delete
  10. mantap gan tutor nya..kode ini lah yang ane cari2 maklum lagi belajar buat template gan..makasih ya info nya langsung praktek ane

    ReplyDelete
  11. 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....

    ReplyDelete
  12. info mantap frends. http://muktirohman.blogspot.com/

    ReplyDelete
  13. Thanks gan :) http://www.tbrcity.tk/

    ReplyDelete
  14. gan biar footer nya kesamping gmn ya caranya, di template ane kok malah ke bawah ya

    ReplyDelete
    Replies
    1. Coba sesuaikan lebar widget dengan lebar template milik Anda kawan,,edit kode yang berwarna merah seperti panduan di atas.
      Semoga berhasil.

      Delete
  15. Berhasil gan,, Tapii, diatas footer nya ada garis bagaimana cara menghilangkannya?
    dan dibagian paling bawah(penutup code) ( div, body, dan html) nya berwarna merah? bagaimana cara mengatasinya? trims

    ReplyDelete
  16. makasih gan mantab tutorialnya, semoga bisa membantu yang lain

    ReplyDelete
  17. mohon maaf gan. mau tanya. cara edit font widget gimana ya.... di situ kan ada seperti ini
    font: bold 14px Arial, Tahoma, Verdana; apa bisa langsung tak rubah bold 14px times new roman;
    ????
    soalnya sy rubah seperti itu belum done. thank ya...

    ReplyDelete
  18. wah ini dia yang saya cari, makasi mas infonya.
    mampir balik ke ya: www.klikberiklan.com

    ReplyDelete
  19. bagus nih infonya, beda dr yg lain cara nya.. nice..

    -blogwalking by Hunter X Hunter Island-

    ReplyDelete
  20. kok gak work ya di blog ane http://alwaystau.blogspot.com/

    ReplyDelete
  21. Salam Mas...?
    Idzin 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

    ReplyDelete
  22. Tutorialnya cocok ama blog saya sob.....terus berkarya.
    Harap Kunbalnya di http:isseu.blogspot.com ( blog baru dalam taraf pengerjaan ^_^ )
    Salam Senyum Sukses <3S>

    ReplyDelete
  23. makasih infonya gan
    http://awidjaja.blogspot.com/
    &
    http://iklangratisopera.blogspot.com/
    mampir gan

    ReplyDelete
  24. bagus akan saya coba, kunjungi juga www.creamputih.blogspot.com

    ReplyDelete
  25. bagus gan ..
    kunjungi http://hamahara.blogspot.com/

    ReplyDelete
  26. ini yg saya cari, makasih infonya bro

    ReplyDelete
  27. kenapa cuma jadi 2 kolom ya, kolom ketiganya ada di bawah kolom 2

    ReplyDelete
  28. Mantap Gan Infonya Jangan Lupa Kumbalannya Ya :D

    ReplyDelete
  29. Terima kasih banyak telah berbagi. Tipsnya sudah dipraktekkan dan OK

    ReplyDelete
  30. terimaksih infonya kawan.
    kunjungi balik ya http://kampusnongkrong.blogspot.com

    ReplyDelete
  31. itu kan udah ane coba gmn caranya biar nyatu sama halam blog ane?

    comebac

    ReplyDelete
  32. thanks sob keren kok footernya salut

    comeback

    ReplyDelete
  33. terima kasih mas, sangat membantu saya yang ingin menambah kolom footer :)

    ReplyDelete
  34. Makasih infonya kunjungan Anda adalah kehormatan bagi saya

    ReplyDelete
  35. saya kok sukses gan? :v Bercanda.
    Thanks Gan Tutornya >> bakul-anime.blogspot.com

    ReplyDelete
  36. mantab bro... triknya sukses... and sangat membantu...

    ReplyDelete
  37. mantap mas mw coba diaplikasikan neh slam bloger sukses slalu

    ReplyDelete
  38. berhasil sih gan..
    cuma kayaknya template yang saya pakai kurang begitu menyatu dengan footernya
    jadi saya tiadakan.
    tapi thanks da berbagi info gan

    ReplyDelete
  39. mantap..
    ane suka warnanya heheh
    btw thanks gan.

    ReplyDelete
  40. visit my new blog :D http://katoukumiko.blogspot.com/

    ReplyDelete
  41. kok ane coba di atas, tetapi kolomnya lebar smua g 3 ke smping >.<
    SS : http://3.bp.blogspot.com/-OiKnuM2-mBM/UrfW_9FxerI/AAAAAAAAA00/YL1YLMAp_OU/s1600/vvvvv.jpg
    tolong bantuannya dong.
    mksih

    ReplyDelete
  42. Mas tempat saya kok vertikal ya, nggak Horizontal, nggak kayak punya sampeyan

    ReplyDelete
  43. sangat bermanfaat gan,, terimakasih infonya,,,saya minta ijin praktek,,

    ReplyDelete
  44. nyimak gan,,, terimakasih infonya

    ReplyDelete
  45. Maaf kang setelah saya coba, widget sebelah kirinya ga sesuai dengan yang ada di sebelah kanan, mohon bantuannya kang, saya masih baru..
    terima kasih kang sebelumnya..
    Cek blog
    http://masterplan84.blogspot.com/

    ReplyDelete
  46. Kunjungan pertama saya dan salam kenal

    ReplyDelete
    Replies
    1. Bagus mas artikelnya sangat mudah dimengerti simple dan jelas, terima kasih sudah berbagi.

      Delete
  47. wah manteb nih..
    ini yang gue cari :D

    ReplyDelete
  48. 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

    ReplyDelete
  49. Sip, nuh bisa refresi juga gan, mitrapustaka.blogspot.com

    ReplyDelete
  50. Sangat Bagus sekali :D
    http://harafimulki.blogspot.com

    ReplyDelete
  51. Alhamdulillah, sudah jalan di blog saya. Matur suwun nggeh mas, matur suwun sanget. :)

    artikelnya relevan dan detail banget dalam penjelasannya.

    ReplyDelete
  52. aku pasang tapi kok ukurannya jadi memanjang ya mas ?
    dan saat aku jalankan via mobile gak muncul ?
    kenapa ya mas ? Solusinya dong ?

    ReplyDelete
  53. Sangat Membantu saya dengan template 2 kolom :D

    ReplyDelete
  54. terima kasih gan tutornya sangat membantu

    ReplyDelete
  55. by reading this article I can add personal insight .... thank you for the info da thank you for the share

    ReplyDelete
  56. terima kasih sob atas tutorialnya, oh iya kalau untuk ganti warna background
    #lowerbar-wrapper {
    border:1px solid #DEDEDE;
    background:#fff;
    gimana ya mas soalnya sudah saya coba gak bisa2

    ReplyDelete
  57. akhirnya ketemu juga :D
    terima kasih gan..
    http://komputer-sync.blogspot.com

    ReplyDelete
  58. klo mau jadi 4 widgetnya gmna caranya gan??? mksh

    ReplyDelete
  59. makasih infonya gan, footer yang ok punya...

    ReplyDelete
  60. mantap dah, sudah saya coba tadi, kalau agan berkenan jangan lupa follow yah

    ReplyDelete
  61. Makasih mas, kunjungi juga blog adik
    http://www.prediksibola888.blogspot.com
    http://www.kis33.net

    ReplyDelete
  62. tiap kali ganti template pasti mampir kesini hahhahahhahahah

    ReplyDelete
  63. Tutorialnya maknyus mas bro.
    sudah saya terapkan dan berhasil.

    Terimakasih dan mohon izin untuk share di blog sederhana milik saya.

    ReplyDelete
  64. coba saya praktek dulu di blog obat penumbuh rambut botak saya gan, makasih infonya

    ReplyDelete
  65. Sudah saya Praktekan untuk toko online saya dan Berhasil Makasih

    ReplyDelete
  66. wah bisa di praktekan nih, makasih bro infonya

    ReplyDelete
  67. masih awam broo... tak ada salahnya mencoba tank infonya

    ReplyDelete
  68. terimakasih banyak sob, tapi apa gak terlalu berdempetan tuh..

    ReplyDelete
  69. luar biasa bro, thanks. ditunggu kumbal nya,heee

    ReplyDelete
  70. luar biasa bro, thanks. ditunggu kumbal nya,heee

    ReplyDelete
  71. Manteep sob informasi artikelnya :)
    Ijin share http://grosiracemaxstasik.com/obat-alami-diare/

    ReplyDelete
  72. Thanks ka infonya, izin share :)
    http://goo.gl/mgBCnM

    ReplyDelete
  73. makasih banyak buat tutornya sob,, sangat bermanfaat..

    http://goo.gl/4Gnhee

    ReplyDelete
  74. ilmu yang sangat bermanfaat nih, terimakasih gan
    http://goo.gl/Za0GE0

    ReplyDelete
  75. Artikel ini memberikan wawasan terbaru buat saya, wacana pembahasan ini sangat bermanfaat.
    http://jellygamatgoldg31.com

    ReplyDelete
  76. Makasih untuk informasi artikelnya, sangat membantu :)
    http://goo.gl/NcIh6Z

    ReplyDelete
  77. Makasih bosss....!!! kunjungi juga http:proton-cyber.blogspot.com

    ReplyDelete
  78. This comment has been removed by the author.

    ReplyDelete
  79. Bermanfaat banget bang makasih infonya..

    ReplyDelete
  80. agar responsif gmna cranya gan ??

    ReplyDelete
  81. keren dan silahkan berkunjung kesini gan wajakteknologi.blogspot.com

    ReplyDelete
  82. sip gan, sangat bermanfaat. :D
    kunjungi blog saya gan, pj-26.blogspot.com

    ReplyDelete
  83. makasih bangeet gan, sangat bermanfaat, moga blognya makin sukses :D

    ReplyDelete
  84. mohon maaf gan. mau tanya. cara edit font widget gimana ya.... di situ kan ada seperti ini
    font: bold 14px Arial, Tahoma, Verdana; apa bisa langsung tak rubah bold 14px times new roman;
    ???? Download Film Semi 2016

    ReplyDelete
  85. nice gan http://otaktechno.blogspot.co.id/

    ReplyDelete
  86. oke..mau belajar google forms, bikin pertanyaan nempel diblog

    https://olahragafikri.blogspot.co.id/2016/06/tutorial-google-forms.html

    ReplyDelete
  87. makasih https://sobathusen.blogspot.co.id/

    ReplyDelete
  88. after 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

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di blog ini. Tanggapan Anda selalu kami hargai.