Cara Membuat Widget Footer 3 Kolom di Blog

Cara Membuat Widget Footer 3 Kolom di Blog


Cara memasang menu widget footer 3 kolom di blog,-  Bagi anda sebagai pemilik sebuah blog pasti tahu apa yang dimaksud dengan widget, widget sendiri istilah pada struktur tata letak pada blog yang berplatform blogger. dengan widget ini kita dengan mudah menambah berbagai macam fitur template serta menambah kode HTML/Java Script pihak ketiga. letak penambahan widget pada suatu blog tergantung dari letak widget yang berada pada tata letak template yang digunakan.

Tak jarang pemilik blog yang ingin menambah widget pada bagian tertentu pada blognya mencari cara agar bisa membuat sebuah tempat widget seperti yang di inginkan. mungkin yang banyak dicari adalah memasang sebuah menu widget pada bagian footer. kebanyakan widget di bagian footer ini banyak dipakai oleh situs/blog bergaya magazine atau berita. nah oleh karena itu banyak blogger lain yang ingin sekali memasang widget di bagian footer blog mereka.


Widget dibagian footer sendiri yang pasti tidak cuman satu melainkan ada beberapa sekaligus, seperti yang paling banyak 3 kolom hingga 4 kolom. Nah buat anda yang ingin sekali membuat widget di bagian footer dengan menu widget 3 kolom bisa mengikuti cara yang saya berikan dibawah ini, Berikut tutorialnya.

Cara Memasang Widget Footer 3 Kolom di Blog


1. Pertama silahkan masuk ke Blogger.

2. Kemudian masuk ke menu Template - Edit HTML

3. Setelah itu cari kode ]]></b:skin> untuk mempermudah gunakan (Ctrl+F), Jika sudah ketemu copy kode CSS dibawah ini lalu paste tepat diatas kode tersebut.

 /* Footer 3 Coloum by Espada Blog
----------------------------------- */
#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#242424;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #07ACEC}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase:none;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
#footer-wrapper h2:before {content:"";position:absolute;left:0;width:180px;height:2px;
background:#07ACEC;bottom:-2px}

4. Langkah selanjutnya adalah memunculkan widget pada footer caranya silahkan copy kode dibawah ini dan paste tepat diatas kode <footer>

 <!-- Footer Widget 3 Coloum Start-->
<footer id="footer-wrapper">
  <b:section class='left section' id='left' preferred='yes'>
    </b:section>
  <b:section class='center section' id='center' preferred='yes'>
    </b:section>
  <b:section class='right section' id='right' preferred='yes'>
    </b:section>
</footer>
<!-- Footer Widget 3 Coloum End -->

5. Sebenarnya pada proses ini footer 3 kolom sudah muncul dan siap digunakan, namun untuk lebih responsive serta pada tambilam mobile tidak berantakan silahkan tambahkan kode CSS Media Screen dibawah ini tepat diatas </style>.

 @media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:100%}
#footer-wrapper .center{float:none;width:100%}
#footer-wrapper .right{float:none;width:100%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}
}

6. Terakhir simpan template dan lihat hasilnya.

Dengan begitu anda sudah bisa memasang widget pada footer di tata letak dan lihat hasilnya, sekian tips blog yang dapat saya bagikan dan selamat mencoba.
Share:

Profil Owner

PROFIL OWNER


Hallo sahabat online...

Perkenalkan nama saya Zul, lengkapnya Zulkarnaen Mandja, saya seorang Website Designer. Sudah berpengalaman bekerja sebagai Computer Programmer di salah satu perusahaan IT terbesar di Indonesia.

Sejak 2009 saya membuka usaha sekaligus memimpin INDO9.COM. Perusahaan yang bergerak dibidang Jasa Pembuatan Website, melayani seluruh Indonesia.

Salam Sukes Slalu...

Contact Us

CONTACT US


Untuk Info & Order Website
Silahkan hubungi kami
Melalui WhatsApp, Telpon atau e-mail




Chat via WA dengan kami
INDO9.COM
Perusahaan Jasa Pembuatan Website
& Iklan Online Profesional
Melayani Seluruh Indonesia


WhatsApp. +62 877-5996-9545
Telp. +62 877-5996-9545
e-mail : indo9.com@gmail.com


Work Shop :
Perum Griya Muslim Mulyorejo Blok B-23
Malang 65147
Jawa Timur - Indonesia

LIHAT DI GOOGLE MAPS

Rekening Bank

REKENING BANK

Pembayaran transfer ke rekening :


Bank BCA
No. Rek. 440 1175 177
A/n. Zulkarnaen




Bank BRI
No. Rek.
3123-01-025927-53-1
A/n. Zulkarnaen

Testimoni & Kisah Sukses

CCTV Murah - Solo
www.cctvmurahdisolo.indo9.com

Mas Zul, terimakasih banyak sudah membuat website saya. Saya puas sekali. .....
Interior Wallpaper - Medan
www.indesignwallpaper.indo9.com

Mantaaap, omzet saya langsung meningkat setelah membuat website....
Bali Tori Travel - Bali
www.balitoritourtravel.indo9.com

Saya sangat PUAS dengan website saya yang dibuat oleh mas Zul dari INDO9....
DaVinci Wallpaper - Surabaya
www.davinciwallpapersurabaya.indo9.com

Luar biasa, bisa upload foto sebanyak-banyaknya (unlimited)....
Graha Bonsai - Madiun
www.grahabonsaimadiun.indo9.com

Gak nyangka, setelah punya website, bisnis saya semakin berkembang. .....

READ MORE >

Postingan Populer

Arsip Blog

Total Tayangan Halaman