Engineer Cafe

<div dir="ltr" style="text-align: left;" trbidi="on"> <article class="post hentry" id="4784694747065400217" itemscope="" itemtype="http://schema.org/BlogPosting"><div class="breadcrumbs">Learn how to add a new widget or gadget section in Blogger blog header, above or below of post of the Blogger blog easily with one line code.</div><div class="post-header meta"> <div class="a2a_kit a2a_kit_size_22 a2a_default_style" id="post-top-share" style="line-height: 22px;"><a class="a2a_button_facebook" href="https://www.blogger.com/" rel="nofollow" target="_blank"></a><a class="a2a_button_twitter" href="https://www.blogger.com/" rel="nofollow" target="_blank"></a><a class="a2a_button_google_plus" href="https://www.blogger.com/" rel="nofollow" target="_blank"></a> <div style="clear: both;"></div></div></div><div class="post-body entry-content" id="post-body-4784694747065400217"><div itemprop="articleBody"> <center><img alt="Add new Gadget/Widget container Sections Anywhere In Blogger" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigLBW_sVeqbeQMqXx2pNpAQXvX84sNkLV94fAia2VY2fcjU2XLtz1V4xYf049dLddWrz2O-dRX87oEAq8g2ufQctywTvXa4qhGQBM1dYIHNmNb1i6mHe22MkHF8hD10I_RejpAQHcHuybD/s320/How-to-create-new-widget-or-gadget-section-in-blogger.png" title="Add new Gadget/Widget container Sections Anywhere In Blogger" width="320" /></center> <h3>What is Code for Adding Gadget/Widget Sections in Blogger</h3> For adding a gadget or widget section in your blogger blog; following code is the only way to do so; <div class="blockcode"><pre><b:section class='newsectionclass' id='uniquesectionid' maxwidgets='1' showaddelement='yes'/><div style='clear: both;'/></pre></div> You can add a <code>b:section</code> tag anywhere between <code><body></code> and <code></body></code> in your blogger blog. See the table below to know about the <code>b:section</code> tag and its attributes; <table style="width: 100%px;"><tbody><tr><td valign="top" width="10">Element</td><td valign="top" width="628">description</td></tr><tr><td valign="top" width="10"><b:section</td><td valign="top" width="628"><code>b:section</code> tag indicates the place or section to add widget/gadget in the blogger blog. For adding gadget this code is a must. You can add this tag anywhere in between the body tag of your blogger template.</td></tr><tr><td valign="top" width="10">class='newsectionclass'</td><td valign="top" width="628">The class of a <code>b:section</code> tag. It is better to use a unique class of this.</td></tr><tr><td valign="top" width="10">id='uniquesectionid'</td><td valign="top" width="628">The id of the b:section tag and it must be a unique one. This is also handy if you want to add custom CSS code for it.</td></tr><tr><td valign="top" width="10">maxwidgets='1'</td><td valign="top" width="628">Indicates the number of gadgets or widgets can be used inside the section. Value starts from 1. If you do not use this then you can as many gadgets in the section as you like.</td></tr><tr><td valign="top" width="10">showaddelement='yes'</td><td valign="top" width="628">Values of showadddelement are yes and no. If it is set yes; then you will see Add a Gadget link in the layout tab of your Blogger blog’s dashboard. If it is set no; then you will not see Add a Gadget link in the layout tab of Blogger dashboard.</td></tr></tbody></table> Yes it is that simple; just add the <code>b:section</code> tag inside your template and you can add gadgets or widgets in that section of your blogger template. Remember before making any sort of customization in your <a href="http://www.techinfoknow.com/2014/01/backup-restore-blogger-template.html" target="_blank" title="How to backup Blogger template">Blogger template you should create a backup copy</a> of it. In below you will see some typical places where one might require to add gadgets section or edit existing gadget sections in the Blogger blog and how to add and customized them. <h3>How to Add Widget Section Below the Post in Blogger</h3> <center><img alt="Widget Section Below the Post in Blogger" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6PbKHEKxZPwtqT-nCNxODtXuuTRjYvqnCzsNgmv0IobY3iW5VGr4qeL1G6Q9WGceXlQn_RAog4iH-khoUN9bB-I2FJliUS3uYwn-RSeDAxYP-3FsNHMhqNSbula8xKwp-k7hDVMylZF1W/s1600/add-widget-section-below-post-in-Blogger.png" title="Widget Section Below the Post in Blogger" width="300" /></center> It's great if you have a separate widget section just below or above the post widget in Blogger. After backing up your template; <ol><li>Go to Blogger dashboard > Template > click 'Edit HTML'.</li><li>Look for the following code;</li> <div class="blockcode"><pre><b:section class='main' id='main' showaddelement='yes'></pre></div> <li>Just after closing the <code>b:section</code> main paste your new widget section codes like this;</li> <div class="blockcode"><pre><b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>... </b:widget> </b:section> <b:section class='main-bottom' id='main-bottom' showaddelement='yes'/></pre></div> <li>Click 'Save template'.</li></ol> If you want to add two widgets or section side by side then follow the instructions below; <center><img alt="add two widgets sections side by side below post in Blogger" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMN2lEIfpY11zN-MD3eCxoPlIoVXkY1_oIBb-hiyqQh7rSA-lAidq37EwhHOWyKucU0afle2K9ev6cIb7PeRLv6Gl9VHkjw-kMLcdLrPUVmkRW9T5a_A3yWHpz6PUoig84UaOEns08h19/s1600/add-two-widget-section-side-by-side-below-post-in-Blogger.png" title="add two widgets sections side by side below post in Blogger" width="300" /></center><ol><li>At the step-3 in the above instructions paste two <code>b:section</code> tag like this;</li> <div class="blockcode"><pre><b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>...</b:widget> </b:section> <b:section class='main-bottom-left' id='main-bottom-left' showaddelement='yes'/> <b:section class='main-bottom-right' id='main-bottom-right' showaddelement='yes'/> <div style='clear: both;'/></pre></div> For showing widgets side by side you must use <code><div style='clear: both;'/></code> after the two <code>b:section</code> tags. <li>Search for <code>]]></b:skin></code> in the template editor and Add following CSS code for displaying them side by side. Also you can add this in a style tag in your template too.</li> <div class="blockcode"><pre>#main-bottom-left {width:48%;float:left;display:inline;} #main-bottom-right {width:48%;float:right;display:inline;}</pre></div> <li>Save the template.</li></ol> Change the width in the CSS code until you get it right according to you template. <h3>How to Add Widget Section Above the Post in Blogger</h3> <center><img alt="Widget Section Above the Post in Blogger" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDym4VVqd9sbv9syU9rlfSiPL2u1IXkGm-yFtXuqMjFxmrN3WwePASSnCf_A6aSNV3k8LzXk2WQc8bSZ0oSEAN7_5IpHZNT7mOBnDDIRxK26L5ugz9oPcvE5PW6ODXqcDUDca7kDsWBKXP/s1600/add-widget-section-above-post-in-Blogger.png" title="Widget Section Above the Post in Blogger" width="300" /></center> The codes and process is almost the same if you want to add one, two or more widget section. For this; <ol><li>Go to Blogger dashboard > Template > click 'Edit HTML'.</li><li>Look for the following code;</li> <div class="blockcode"><pre><b:section class='main' id='main' showaddelement='no'></pre></div> <li>Paste you new <code>b:section</code> code just before it. like this</li> <div class="blockcode"><pre><b:section class='main-bottom-left' id='main-bottom-left' showaddelement='yes'/> <b:section class='main-bottom-right' id='main-bottom-right' showaddelement='yes'/> <div style='clear: both;'/> <b:section class="main" id="main" showaddelement="no">...</b:section></pre></div> <li>Click save template.</li></ol> Here also if you want to add two widgets section side by side just above the post widget; then follow the instructions below; <center><img alt="two side by side widgets section above post widget in Blogger" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTlUdwO7xE-UGACLSv90EJnpcdWLDNfTJ5KNs_BYecDX8EoxmdoYXAoBO4oCzju32JLg1m9ZhTxFDrExRVXI0sjqiJjrlI2Wjpn9nIQO0vshClHpdD4YEEhMyxa9xVXbRmR5IZLhyF-J-A/s1600/add-two-widget-section-side-by-side-above-post-in-Blogger.png" title="two side by side widgets section above post widget in Blogger" width="300" /></center><ol><li>at the step-3 in the above instructions paste two <code>b:section</code> tag like this;</li> <div class="blockcode"><pre><b:section class='main-top-left' id='main-top-left' showaddelement='yes'/> <b:section class='main-top-right' id='main-top-right' showaddelement='yes'/> <div style='clear: both;'/> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>...</b:widget> </b:section></pre></div> For showing widgets side by side you must use <code><div style='clear: both;'/></code> after the two <code>b:section</code> tags. <li>Search for <code>]]></b:skin></code> in the template editor and add the CSS code below just before it for displaying them side by side. You can also add this in a style tag in your template too.</li> <div class="blockcode"><pre>#main-top-left {width:48%;float:left;display:inline;} #main-top-right {width:48%;float:right;display:inline;}</pre></div> <li>Save the template.</li></ol> Adjust width in the CSS code until you get it right according to you template. <h3>How to Add a gadget/widget section in the header</h3> <center><img alt="add gadget box in header of Blogger blog" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtqJqykVO5iKygwIDh4jDVPs__KfIz6zyEugDEP3b22_xKw5Qjx0A4qljL1ePMBSgl9ZPuEPnqvdOrDKvw8Q_77N3HHVM-2lsvqdJk8iu5fYvoA0i4XCkR4Qr0_qLwo6R_BRqb-4f3TAbF/s1600/add-gadget-in-header-of-Blogger-blog.png" title="add widget in header of Blogger blog" width="580" /></center> One of the great places to add ads or a search box is at the right side of your blog's logo or name. For this you will need to add a new gadget/widget section in the Blogger template. For this follow the instructions below; <ol><li>In the template look for this code;</li> <div class="blockcode"><pre><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></pre></div> <li>Just after closing <code><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></code> paste the following <code>b:section</code> tag like this;</li> <div class="blockcode"><pre><b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='blog demo blogger (Header)' type='Header'>...</b:widget> </b:section><b:section class='header-right' id='header-right' showaddelement='yes'/> <div style='clear: both;'/></pre></div> <li>Now search for <code>]]></b:skin></code> in the template and add the below CSS code just before it. You can also add this in a style tag in your template too.</li> <div class="blockcode"><pre>#header {width:50%;display:inline-block;float:left;} #header-right{width:40%;display:inline-block;float:right;}</pre></div> <li>After this click 'Save template'.</li></ol> Adjust the widths in the CSS code according to your blog's style and layout. Remember the main code for adding a new gadget/widget section is one that is give at the top. All you need to do is find where you want to add this code and how you want to customize it. Hope this post helped you in customizing your Blogger template. If you need any help on this do mention it in the comments section.</div><div style="clear: both;"></div></div><div class="post-footer"><div class="post-footer-line post-footer-line-1"></div><div class="post-footer-line post-footer-line-3"><div id="pfootads"><center><ins class="adsbygoogle" data-ad-client="ca-pub-3593500811848044" data-ad-slot="2062411014" style="display: inline-block; height: 280px; width: 336px;"> </ins><script>(adsbygoogle = window.adsbygoogle || []).push({}); </script></center></div></div></div></article></div>

How to Add Gadget/Widget Sections Anywhere in Blogger

Learn how to add a new widget or gadget section in Blogger blog header, above or below of post of the Blogger blog easily with one line code...

Top Menu

How to Add Gadget/Widget Sections Anywhere in Blogger

Tutorial Revit architecture & structure Pdf

Popular Posts

Blog Archive