$type=grid$meta=0$readmmore=0$snippet=0$count=4$hide=mobile$show=home

$type=ticker$meta=0$readmore=0$snippet=0$columns=4$hide=mobile$show=home

Multi Column Footer Widget For Blogger –The Hot

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 Menarik Lainnya]$hide=home

Nama

''1a,10,'Umdatul Ahkam,52,25 november,2,4 november,34,aa gym,15,aadc2,1,abu bakar ashidiq,1,aceh,14,Adab,8,ade armando,16,ade komaruddin,2,adik ahok,2,administrasi,5,adsense,3,advertorial,2,afrika,2,aher,2,ahmad baidhowi,1,ahmad dhani,1,ahmad zainuddin,1,ahok,271,ahok djarot,1,ahok illuminati,1,ahokers,2,akhlak,8,akmal sjafril,1,aksi bela islam iii,2,Al Hikmah,1,al quran palsu,1,al umm,1,al-quran,14,Alex Naddour,3,ali bin abi thalib,1,ali jaber,3,aliansi pemuda makassar,1,aliran sesat,3,allepo,1,am fatwa,1,amerika,9,amien rais,8,amir faishol fath,1,an najah,12,anis baswedan,1,anis dan sandiaga,1,anton medan,2,april,1,Aqidah,97,aqidah syiah,14,arab saudi,4,archandra,2,ariana grande,1,arief rahman,1,arifin ilham,2,arik banyadhu,3,artikel ilmiah,5,Artikel Ramadhan,7,australlia,3,bab thoharoh,1,bachtiar nasir,6,backmasking,1,badai pasir arab saudi,1,balaraja,1,band,1,bandung,3,bangka belitung,2,bangkalan,1,bangladesh,1,banjar,1,banjarmasjin,1,bank,1,banten,1,banyuwangi,1,bareskrim,2,bashar asad,5,bawaslu,1,beasiswa,27,beasiswa iain antasari,1,beasiswa kuwait,2,beasiswa tahfidz,1,beasiswa turki,1,bedah buku syiah,1,bekal dakwah,25,bekam,4,bekasi,3,berita,14,bid'ah,13,bima arya,1,bina qalam,1,biografi,2,bireun,1,Bisnis Online,3,bitung,1,blog tutorial,49,bmh,7,bmh jatim,2,bmh lumajang,3,bnn,1,bnpt,2,bogor,4,bom saudi,2,bpi,1,bpjs,4,brebes,1,britney spears,1,brunei,1,buddha,1,budha,3,bukit duri,2,buku,1,buku gratis,1,Buletin,35,bungkul,1,buni yani,6,burhan shodiq,1,bus pendemo,1,buya hamka,2,buya yahya,4,cadar,1,cakung,2,cangkul,8,car free day,1,cba,1,Ceramah,5,charlie hebdo,1,china,19,cholil nafis,1,cholil ridwan,1,cilacap,1,cina,5,cire,1,colil ridhwan,1,cut nyak din,3,dahnil anzar,1,darul hijrah,1,dasrul,6,Data Kesesatan Syi'ah,15,dauroh,1,debat bahasa arab internasional mesir,1,demo tolak ahok,40,demonstrasi,2,densus 88,4,depok,1,didin hafidhuddin,2,dimas kanjeng,2,din syamsuddin,3,djarot,2,do'a,1,donald frans,1,donald trump,11,Download,5,dprd,2,dr miftah el banjari,1,dr zakir naik,3,Dr. Adian Husaini,1,Dr. Ahmad Zain An-Najah,3,dr. aidh al qarni,3,dr. warsito,2,dzulhijjah,1,emilia renita,3,erdogan,7,Esra Panese,1,facebook,1,fadel muhammad,1,fadl zon,5,fahira idris,1,fahri hamzah,4,fakta,3,fans celtic,1,farid okbah,1,fatih seferagic,1,Featured,4,felix siauw,12,ferihana,1,filipina,1,film,2,Fiqih,144,fiqih dakwah,20,fiqih haji,8,fiqih ihram,2,fiqih jenazah,11,fiqih jihad,5,fiqih jual beli,3,fiqih madzhab imam syaf'i,1,fiqih nikah,8,fiqih puasa,2,fiqih qurban,2,firanda andirja,1,florida,1,foto,7,Foto-Foto kesesatan Syi'ah,4,fpi,9,freddy budiman,2,gafatar,1,gajah,1,gallery,1,gambar,3,game online,1,game pes,1,garut,5,gatot nurmantyo,4,gaza,7,gerhana matahari,1,gerindra,2,golkar,3,gontor,1,gp anshor,2,gresik,1,guru,13,gus manan,1,gus sholah,1,habib rizieq,10,hacker,1,Hadits,17,hadyu,2,hafidz quran,2,haiti,1,halal.ad,3,ham,2,hamdan zoelva,1,hari pancasila,1,Harits Abu Ulya,1,hartoyo,6,harvard,1,hary tanoesoedibjo,5,headline,90,hidayat nur wahid,2,hidayatullah,1,hikmah,8,hmi,12,hollywood,1,home,4,hukum seputar ta'ziyah,2,husain syahid,1,husni thamrin,1,hut ri 71,2,ibadah,5,ibnu khaldun,1,ibu saeni,15,ical,1,idc,1,ihw,1,iklan,1,ilc 8 november,1,illuminati,3,Ilmu Faroidh,20,ilyas karim,1,imam masjid al aqsa,2,imamah,5,imunisasi,1,india,4,indonesia,645,indramayu,1,info kajian,1,inggris,2,inspiratif,1,intermezo,1,internasional,199,ipw,1,irak,1,iran,6,irena handono,2,irlandia,2,Islamophobia,2,islandia,1,israel,10,istanbul,1,istiqlal,1,istri ahok,1,istri gus dur,1,jabar,2,jack ma,1,jakarta,20,jakut,1,jamaah tabligh,1,janet jackson,1,jatim,5,jawa barat,2,jawa timur,2,Jayawijaya,2,Jeffry Winters,1,jember,1,jepang,4,jerman,4,jihad,1,jihad internasional,5,jil,8,jilbab,5,jk,6,jokowi,93,jokowi dan ahok,2,jonru,1,Kabar Muslim Burma 2012,3,kalimantan,4,kammi,3,kampung rambutan,1,kanada,1,Kapolda,1,kapolri,2,kapry nanda,1,karawang,1,kashmir,1,kasih,1,keluarga,4,Kemendag,1,kenan nabil,1,kereta cepat,1,kesehatan,3,KH Ali Mustafa Ya'qub,1,KH Hasyim Muzadi,1,khairul anwar,1,Khutbah jum'at,6,Kiamat,3,king abdul aziz,1,king saudi university,2,kiriman pembaca,7,kisah,11,kisah hikmah,5,kisah para nabi,6,kivlan zen,5,kiwil,1,knrp,1,koko,1,kolombia,1,komnas ham,1,komnas perempuan,1,kompas,7,kompastv,2,komunis,17,kopi jessica,1,korea utara,1,kotamabagu,1,kpai,1,kpk,3,kpu,1,kristen,5,kristenisasi,9,kristologi,25,ktp,1,kuba,1,kuburan,1,kuliner,1,kurma iran,2,kutab al fatih,1,kyai nur,2,labuhbatu,1,Lain-lain,8,lalu heru rojak,1,lampung,2,Laurence Rossignol,1,lbh paham,1,lenteng agung,1,lgbt,19,liberal,1,Liberalisme,6,Lieus sungkharisma,1,lipia,2,lira,1,lomba,1,lomba tahfidz,1,lombok,1,london,1,luar batang,1,lucky hakim,1,Lucu,5,luhut,1,ma'ruf amin,1,mabuk,1,madina,2,madrasah,1,madura,3,magelang,2,mahfud md,2,Makalah Menarik,96,Makalah Thoharoh,35,makassar,5,make money blog,12,malang,1,malaysia,3,manado,1,mark zuckberg,1,maroko,1,marwah daud,1,masjid nabawi,2,mataram,1,media mainstream,5,megawati,9,menag,3,menakjubkan,7,mendagri,8,mengerikan,4,menhan,4,merdeka,4,mesir,3,metrotv,9,miras,5,mizanul muslim,6,mnctv,1,ms kaban,1,muallaf,23,muda mudi,1,mudik 2016,1,muhammad ali,3,muhammad taufik,1,muhammadiyah,20,muharram,1,muhasabah,66,mui,21,mukjizat,6,mulyono,1,munarman,4,musa,6,musik,3,muslim uyghur,1,muslimah,12,Musthalahaat al-fuqaha’ wal ushuliyin,35,Mustholahul Hadits,1,Mustolahat Fil fiqh,30,myanmar,12,nabil,1,narkoba,3,nasi uduk babi,2,nasyiatul aisyiyah,1,natal,1,new york,4,nigeria,1,niken taradina,1,ntb,3,nu,10,nur tajib,1,nusairiyah,3,nusantara,2,nushairiyah,1,nushron wahid,26,oemar mita,14,oezil,1,olahraga,1,omran,2,opini,1,ozil,1,padang,2,Paham Sesat,22,pajak,1,pakistan,1,palestina,41,palu,1,pan,1,Panduan Ibadah Qurban,3,pangi syarwi chaniago,1,papua,2,pasar ikan,2,patani,1,pbnu,3,pdip,2,pekerja asing,1,Pemerintah Indonesia,11,pendeta cabul,2,pendeta vatikan,1,pendidikan,14,penemu muslim,1,pengungsi suriah,6,penjaringan,3,perda islam,2,pers,1,pesantren,1,pilkada dki jakarta,3,pki,89,pks,1,Pluralisme,5,pokemon,28,polisi,5,politik,1,ponorogo,1,pontianak,1,pp muhammadiyah,2,ppp,2,prabowo,1,prancis,3,probolinggo,1,Prof DR Abdul Hadi,3,profil,4,proxy war,3,puisi,1,punk,1,purbalingga,2,purworejo,1,pwnu,2,qishash,2,rachmawati,3,reklamasi,3,retorika dakwah,26,revenuehits,2,riau,1,ridwan kamil,4,rio haryanto,1,risma,2,Riyadh Badr Bajrey,4,rizal ramli,1,rohingya,7,rokok,3,ronaldo,1,rudal jokowi,1,ruhut,4,rumah tangga,4,rusia,1,Sahabat,4,sahabat nabi,1,said aqil,11,sains,1,salafy indonesia,4,salibis,1,salim a. fillah,1,samarinda,1,sambudi,5,sampang,1,sandiago uno,1,santoso,1,santri,1,sayidiman suryohadiprojo,1,sby,9,sd cilegon,1,Sejarah,18,sekjen pbb,1,sekte dan aliran,5,Sekularisme,6,selandia,1,sepak bola,1,Shahnaz Laghari,1,shalawat badar,8,shalawat nabi,18,shared2earn,1,sidoarjo,1,simposium anti pki,4,siroh,16,siyono,4,skotlandia,2,sma,1,soekarno,1,solo,2,spanyol,1,spbu,1,sragen,2,stand up comedy,1,stevanus,2,stiba makassar,1,sudan,1,sukabumi,2,sukmawati,1,sulawesi,2,sumbar,2,sumedang,1,sumsel,1,sumut,2,surabaya,3,suriah,32,susanto,1,swedia,1,syafii maarif,8,syaikh sudais,1,Syarh 'Umdatul Ahkam,42,Syarh Matan Thawiyah,20,syariat islam,3,syarifah salsabila,1,Syiah,195,syiah mencela nabi muhammad,6,syiah mencela sahabat,22,syiah menghina muawiyah,4,syiah mengkafirkan aisyah,6,syiah mengkafirkan asyariyah,4,syiah mengkafirkan sahabat,1,syiah suriah,1,syiah takfiri,1,syirik,7,syubhat pengagung kubur,2,Syubhat Sejarah Rosululloh SAW,9,Tabi'in,12,Tabi'ut Tabi'in,13,Tafsir,4,tafsir al maidah,1,tahukah?,4,takbir keliling,2,tanjungbalai,15,tawasul,4,Tax Amnesty,1,Tazkiyyatunnafs,24,tebet,2,tebingtinggi,1,teknologi,18,tema ceramah,20,tema dakwah,3,teman ahok,8,tempelate blog,6,tempo,1,tengger,3,Tengku Erry Nuradi,1,terbaru,1,tere liye,1,Terjemahan kitab Musthalahaat al-fuqaha’ wal ushuliyin,35,terompet dari sampul al quran,4,teroris,8,teroris separatis,1,terorisme,1,terorisme medan,3,teuku nasrullah,2,teungku zulkarnain,7,thailand,2,thibun nabawi,1,timor leste,1,tionghoa,4,tiongkok,2,Tips,4,tki,1,tni,4,tni au keroyok jamaah masjid,3,Tsaqofah,6,tuban,1,tulisan,1,turki,11,tutorial,1,tvone,2,tvri,1,uea,1,ui,1,uighur,1,uim,2,uin,1,ulil,4,ullcok,1,Ulumul Quran,3,umroh gratis,1,unas,1,unesco,1,Unik,19,universitas islam madinah,3,universitas paramadina,1,unj,1,Ushulul Fiqh,1,ust. budi ashari,1,ust. zaitun rasmin,2,ust. zulkifli,2,vaksin palsu,1,valentine day,3,van dame,1,video,37,wacana,11,wahdah islamiyah,2,walisongo,1,wasilah,1,wawasan,34,wtc,3,yahudi,7,yaman,1,yogya,1,yogyakarta,5,yordania,1,yusril,1,yusuf al qardawi,1,yusuf mansur,2,yuyuk andriati,1,zaid royani,4,zakat,4,
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
Loaded All Posts 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