How To Add New Widget Sections In Blogger On Different Places?


This is a detailed post in which i will try to teach you how to add extra columns to your blogger template. It is very easy but for this you must know a little about HTML. Follow my steps and try and please give your feedback. If required any further information, feel free to ask.

widget section

Step #1 


First of all go to the HTML editor of your blogger template. Do not click "Expand Widgets"


Search for :

 <body>


Now the actual works starts from here.

Adding New Widget Section In The Header Area



before adding the blogger section



Now search for 

<div id='headerbg'>

 in some cases you might search for this

<div id='header-wrapper'>

Here is the code for the new Widget Section

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:section class='sidebar' id='magazine-left' showaddelement='yes' > <b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/> </b:section> </b:if>



You have to change the Orange text if you want to use this code again and again in your template. You can write anything. This widget will be shown only in home page. If you want it on every page, than use this code


<b:section class='sidebar' id='magazine-left' showaddelement='yes' > <b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/> </b:section>






Now here is where to add the above code






OR 





Now here is the Change





The easy way to find where to add the widget is that search for the existing widget. For example, i gave a title " Delete this element" to a widget. Now if i want to put a new widget section above it, than simply search for " Delete this element " and paste the code above it.





How to Add new widget Section above the blog Posts :



Search for


<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>


Remember you cannot add a section in between the previous section. Just like this






Now if you want new widgets above the Blog Posts, than add the code above the code shown in the picture. If you want below the post, than simply add the code below.

Note: Your code might be some different, so you have to look yourself. Only thing to remember is that you have to put your new code before <b:section or after </b:section> not in between.


How To Add A New Widget In The Sidebar


To add new widget section in the sidebar, simply do the easy work as i mentioned above. Search for the existing widget and choose where to add, BELOW or ABOVE. Just like this.





In my case, i will search for " Follow me "





Now add the code above or below the entire section.

Just like this, you can add new widgets on any place in your template. Simply add a new widget, give a title to it and than search for that title in HTML editor and place the new code Above or Below. Its Simple. But remember, add the code before the opening section or after the closing section.

If you want to add Two columns at a time just like the one below




Than simply follow these steps. The steps are same just one step will be added.

Use this code instead of the one above

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>
</b:if>


If you want to show this widget section on every page than use this


<b:section class='sidebar' id='magazine-left' showaddelement='yes' >
<b:widget id='Text51' locked='false' title='Test Title 1' type='Text'/>
</b:section>

<b:section class='sidebar' id='magazine-right' showaddelement='yes' >
<b:widget id='Text52' locked='false' title='Test Title 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>


Search for </b:skin> and add this code above it

#magazine-left {
width: 45%;
float: left;
}
#magazine-right {
width: 45%;
float: right;
}


Note: If you want to use this code again and again than simply just change the text in Orange. The Orange text in first and second part of code should be similar.

If have any questions, than ask.Would love to help.smile

About The Author

My Name is Haider Afridi. I love Blogging but due to lack of knowledge in any particular Topic, i thought to start a Fan Club on a Celebrity whom i Love the most. The Salman Khan Fan Club. You can contact me on Facebook

COMMENTS

BLOGGER: 7
Loading...
.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: How To Add New Widget Sections In Blogger On Different Places?
How To Add New Widget Sections In Blogger On Different Places?
http://4.bp.blogspot.com/-X8uTl4S_SFw/T5Dja1I5LJI/AAAAAAAADWE/kaU7VBsGosU/s1600/widget+section+in+blogger.jpg
http://4.bp.blogspot.com/-X8uTl4S_SFw/T5Dja1I5LJI/AAAAAAAADWE/kaU7VBsGosU/s72-c/widget+section+in+blogger.jpg
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/04/how-to-add-new-widget-sections-in.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/04/how-to-add-new-widget-sections-in.html
true
5839591175544873606
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
Resources

Tools of the Trade