How To Add New Widget Section In Blogger Layout Anywhere
Sometime time we feel that some widget are not in those place which we want most exactly and where we want to display our widget but here is the solution for you because i also face this problem when i need a place in blogger layout but there was nothing to add anything then i decide to search about it and i found solution for myself and now i’m sharing with my website visitors. Hope you understand and follow my instructions to make it simple,
There is some places in layout section where we can add these widget
- Header Section
- Right Sidebar
- Above Blog Posts
- Below Blog Posts
- Footer Section
Note: You can’t add any widget between (Next & Previous) button in blogger.
First of all go to the HTML editor of your blogger template. Do not click “Expand Widgets”
Search for :
Search for :
<BODY>
Now the actual works starts from here.
Add Widget Section In Header Area
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!
How to add this widget wherever you want then just search for the exiting widget and find that in Template HTML place like if i have already Widget (Popular Post) and want to add widget with this widget below or above section just paste the above code there that’s it.
Add Widget Section Above Blog Posts!
Search for
<B:WIDGET ID=’BLOG1′ LOCKED=’TRUE’ TITLE=’BLOG POSTS’ TYPE=’BLOG’/>
Note: Blog1 is your complete part of blog like whole template and there is only 1 code like this so don’t worry it should be there you can find easily.
So now decide where you want to add new widget area like if you want new widget above the blog posts then paste code above like showing in above picture & want to add below blog posts the paste code below above Blog1 code.
Note: There is maybe some same code like each others but you have to carefully paste code before <b:section or after </b:section> not in between.
Now How To Add New Widget Area In Right Sidebar
Some people want to add only right sidebar widget area so here is also option for you just Search for the existing widget in your Template HTML and if you want to add above then paste code above it or want to add below just paste it below.
Just Like, 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>
Want to show this widget everywhere on your website/blog page ? then this code will work for you,replace it with above code.
<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>
When you replace code with above then also search last step for (Adding two Widget Area in Right Sidebar)
Search for </b:skin> and add this code above it
#MAGAZINE-LEFT {
WIDTH: 45%;
FLOAT: LEFT;
}
#MAGAZINE-RIGHT {
WIDTH: 45%;
FLOAT: RIGHT;
}
Remember: If you want to use this widget again and again on your website/blogger just change the name of every widget which you add on your blog then you can use as long as you want.
Changing Name Why ?: Because every widget on blogger has different names and you can’t keep same name on every widget and even when you use those widget you will get error so you must change the name of new widget and use how much you want to use it for your blog.
How To Add New Widget Section In Blogger Layout Anywhere
4/
5
Oleh
Rahul
