Multi Column Footer Widget For Blogger –The Hot

Multi Column Footer Widget For Blogger –The Hot We had previously shared a tutorial on Three Column...

Multi Column Footer Widget For Blogger –The Hot

Multi-Column-Footer Widget For Blogger
We had previously shared a tutorial on Three Column Footer Widget which was well appreciated and today we have yet another more advanced version of the same widget. This new widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. First see a demo to know what’s so different about it.
See the widget at the bottom of the following Demo blog,

Live Demo

How To Add the Multi Column Footer Widget To Blogger?

First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,
  1. Go To Blogger > Design > Edit HTML
  2. Backup Your Template
  3. Search for ]]></b:skin>
  4. Just above ]]></b:skin> paste the code below,
/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
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;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

       5.    Now search for </body> and paste the following code just above </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 id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>


<div style='clear: both;'/>
</div> </div>
      6.   Save your template and you are done!
Now go to Page Elements and add your widgets to the newly added Footer Widget that will look something like this,
image
You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.

How to Customize the Widget?

Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.
1.  In order to reduce or increase the overall width of the widget simply change width: 960px;
2.  If you wish to decrease the number of widgets to three then simply delete this part of the code,
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>
Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.
After you have added the fifth column then remember to change width: 23%; with width: 17%;
You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.

COMMENTS

Iklan Konten$show=post

loading...

Artikel Terbaru$type=three$author=hide$comment=hide$rm=hide$show=post$cate=2$count=9$pagination=5

Nama

'Umdatul Ahkam 25 november 4 nove 4 november aa gym aadc2 Abdul Chair Ramadhan abu bakar ashidiq aceh Adab ade armando ade komaruddin adik ahok administrasi adsense advertorial afrika aher ahmad baidhowi ahmad dhani ahmad zainuddin ahok ahok djarot ahok illuminati ahokers akhlak akmal sjafril aksi bela islam iii Al Hikmah al quran palsu al umm al washiliyah al-quran Alex Naddour alfian tanjung ali bin abi thalib ali jaber aliansi pemuda makassar aliran sesat allepo alwi shihab am fatwa amerika amien rais amir faishol fath amir hamzah an najah anis baswedan anis dan sandiaga anton medan anton tabah antv april Aqidah aqidah syiah arab saudi archandra ariana grande arief rahman arifin ilham arik banyadhu artikel ilmiah Artikel Ramadhan atmiwiloto australlia bab thoharoh bachtiar nasir backmasking badai pasir arab saudi balaraja band bandung bangka belitung bangkalan bangladesh banjar banjarmasjin bank banten banyuwangi barcelona bareskrim bashar asad bawaslu bbc beasiswa beasiswa iain antasari beasiswa kuwait beasiswa tahfidz beasiswa turki bedah buku syiah bekal dakwah bekam bekasi berita bid'ah bima arya bin bina qalam biografi bireun Bisnis Online bitung blog tutorial bmh bmh jatim bmh lumajang bnn bnpt bogor bom saudi bpi bpjs brebes britney spears brunei buddha budha bukit duri buku buku gratis Buletin bungkul buni yani burhan shodiq bus pendemo buya hamka buya yahya cadar cakung cangkul car free day cba Ceramah charlie hebdo china cholil nafis cholil ridwan cilacap cina colil ridhwan cut nyak din dahnil anzar darul hijrah dasrul Data Kesesatan Syi'ah dauroh ddi debat bahasa arab internasional mesir dede demo tolak ahok demonstrasi densus 88 depok detik didin hafidhuddin dimas kanjeng din syamsuddin dina y sulaeman djarot do'a donald frans donald trump Download dprd dr miftah el banjari dr tiar dr zakir naik Dr. Adian Husaini Dr. Ahmad Zain An-Najah dr. aidh al qarni dr. warsito dream dzan farid dzulhijjah emilia renita erdogan Esra Panese event facebook fadel muhammad fadl zon fahira idris fahri hamzah fakta fans celtic farid okbah fatih seferagic Featured felix siauw ferdinand hutahean ferihana filipina film Fiqih fiqih dakwah fiqih haji fiqih ihram fiqih jenazah fiqih jihad fiqih jual beli fiqih madzhab imam syaf'i fiqih nikah fiqih puasa fiqih qurban firanda andirja florida foto Foto-Foto kesesatan Syi'ah fpi freddy budiman gafatar gajah gallery gambar game online game pes garut gatot nurmantyo gaza gerhana matahari gerindra Gilbert Lumoindong globaltv golkar gontor google gp anshor gresik gubernur ntb guru gus manan gus sholah habib rizieq hacker Hadits hadyu hafidz quran haiti halal.ad ham hamdan zoelva hari pancasila Harits Abu Ulya hartoyo harvard hary tanoesoedibjo headline hidayat nur wahid hidayatullah hikmah hmi hollywood hukum seputar ta'ziyah husain syahid husni thamrin hut ri 71 ibadah ibnu khaldun ibu saeni ical idc ihw ikhsan modjo iklan ilc 8 november illuminati Ilmu Faroidh ilyas karim imam masjid al aqsa imamah imunisasi india indonesia indramayu inews info kajian inggris insan mokoginta inspiratif intermezo internasional ipb ipw irak iran irena handono irlandia Islamophobia islandia israel istanbul istiqlal istri ahok istri gus dur jabar jack ma jakarta jakut jamaah tabligh janet jackson jas jatim jawa barat jawa timur Jayawijaya Jeffry Winters jember jepang jerman jihad jihad internasional jil jilbab jk jokowi jokowi dan ahok jonru jpnn Kabar Muslim Burma 2012 kalbar kalimantan kammi kampung rambutan kanada Kapolda kapolri kapry nanda karawang kashmir kasih keluarga Kemendag kenan nabil kereta cepat kesehatan KH Ali Mustafa Ya'qub KH Hasyim Muzadi kh. abdur rasyid khairul anwar Khutbah jum'at Kiamat king abdul aziz king saudi university kiriman pembaca kisah kisah hikmah kisah para nabi kivlan zen kiwil knrp koko kolombia komnas ham komnas perempuan kompas kompastv komunis koneksi kopi jessica korea utara kotamabagu kpai kpk kpu kristen kristenisasi kristologi ktp kuba kuburan kuliner kurma iran kutab al fatih kyai nur labuhbatu Lain-lain lalu heru rojak lampung Laurence Rossignol lbh paham lenteng agung lgbt liberal Liberalisme Lieus sungkharisma lipia lira lomba lomba tahfidz lombok london luar batang lucky hakim Lucu luhut lukman hakim luthfi bashori ma'ruf amin mabuk madina madrasah madura magelang mahfud md Makalah Menarik Makalah Thoharoh makassar make money blog malang malaysia maluku manado mark zuckberg maroko marwah daud marzukie alie masjid nabawi mataram medan media mainstream megawati menag menakjubkan mendagri mengerikan menhan merdeka mesir metrotv minahasa miras mizanul muslim mnctv mpr ms kaban muallaf muda mudi mudik 2016 muhammad ali muhammad taufik muhammadiyah muharram muhasabah mui mukidi mukjizat mulyono munarman musa musik muslim uyghur muslimah Musthalahaat al-fuqaha’ wal ushuliyin Mustholahul Hadits Mustolahat Fil fiqh myanmar nabil narkoba nasi uduk babi nasyiatul aisyiyah natal new york nigeria niken taradina ntb nu nur tajib nusairiyah nusantara nushairiyah nushron wahid oemar mita oezil olahraga omran opini ozil padang Paham Sesat pajak pakistan palestina palu pamekasan pan Panduan Ibadah Qurban pangeran harry pangi syarwi chaniago papua paris pasar ikan patani pbnu pdip pekerja asing Pemerintah Indonesia pendeta cabul pendeta vatikan pendidikan penemu muslim pengungsi suriah penjaringan penyerangan polisi tangerang perda islam pers persis pesantren petisi pilkada dki jakarta pki pks Pluralisme pokemon polisi politik ponorogo pontianak poso pp muhammadiyah ppp prabowo prancis probolinggo Prof DR Abdul Hadi profil proxy war psq puisi punk purbalingga purworejo pushami pwnu qishash quraish shihab rachmawati rawajati rcti reklamasi retorika dakwah revenuehits Rezim Penguasa riau ridwan kamil rifkoh abriani rio haryanto risma Riyadh Badr Bajrey rizal ramli robithoh alam islami rohingya rokok ronaldo rudal jokowi ruhut rumah tangga rusia Sahabat sahabat nabi said aqil sains salafy indonesia salib mampang salibis salim a. fillah samarinda sambudi sampang sandiago uno santoso santri sayidiman suryohadiprojo sby sd cilegon Sejarah sekjen pbb sekte dan aliran Sekularisme selandia sepak bola Shahnaz Laghari shalawat badar shalawat nabi shared2earn sidoarjo simposium anti pki siroh siyono skotlandia Slank sma soekarno solo spanyol spbu sragen stand up comedy stevanus stiba makassar subang sudan sukabumi sukmawati sulawesi sulteng sumbar sumedang sumsel sumut surabaya suriah surya prabowo susanto swedia syafii maarif syaikh sudais Syarh 'Umdatul Ahkam Syarh Matan Thawiyah syariat islam syarifah salsabila Syiah syiah mencela nabi muhammad syiah mencela sahabat syiah menghina muawiyah syiah mengkafirkan aisyah syiah mengkafirkan asyariyah syiah mengkafirkan sahabat syiah suriah syiah takfiri syirik syubhat pengagung kubur Syubhat Sejarah Rosululloh SAW Tabi'in Tabi'ut Tabi'in Tafsir tafsir al maidah tahukah? takbir keliling tangerang tanjungbalai tawasul Tax Amnesty Tazkiyyatunnafs tebet tebingtinggi teknologi tema ceramah tema dakwah teman ahok tempelate blog tempo tengger Tengku Erry Nuradi terbaru tere liye Terjemahan kitab Musthalahaat al-fuqaha’ wal ushuliyin terompet dari sampul al quran teroris teroris separatis terorisme terorisme medan teuku nasrullah teungku zulkarnain thailand thibun nabawi timor leste tionghoa tiongkok Tips tki tni tni au keroyok jamaah masjid trans7 Tsaqofah tuban tulisan turki tutorial tvone tvri uea ui uighur uika bogor uim uin ulil ullcok Ulumul Quran umroh gratis unas unesco Unik universitas islam madinah universitas paramadina unj Ushulul Fiqh ust. budi ashari ust. zaitun rasmin ust. zulkifli vaksin palsu valentine day van dame video vietnam wacana wahdah islamiyah walisongo wasilah wawasan wtc yahudi yaman yogya yogyakarta yordania yusril yusuf al qardawi yusuf mansur yuyuk andriati zaid royani zakat zulkifli hasan
false
ltr
item
Jurnalmuslim.com: Multi Column Footer Widget For Blogger –The Hot
Multi Column Footer Widget For Blogger –The Hot
http://lh6.ggpht.com/_7wsQzULWIwo/TRz4ULldSMI/AAAAAAAADOc/uX5tVbJpXlw/Multi-Column-Widget%5B10%5D.gif?imgmax=800
http://lh6.ggpht.com/_7wsQzULWIwo/TRz4ULldSMI/AAAAAAAADOc/uX5tVbJpXlw/s72-c/Multi-Column-Widget%5B10%5D.gif?imgmax=800
Jurnalmuslim.com
http://www.jurnalmuslim.com/2012/12/multi-column-footer-widget-for-blogger.html
http://www.jurnalmuslim.com/
http://www.jurnalmuslim.com/
http://www.jurnalmuslim.com/2012/12/multi-column-footer-widget-for-blogger.html
true
3812561232547159440
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy