Add 2, 3 or 4 Column Widget on Blogger Footer

Add 2, 3 or 4 Column Widget on Blogger Footer

Add Extra Column On Blogger Footer:

Now I discuss with you, how to add two, three or four column footer widget on blogger. You have a stylish blogger blog but there is no any footer widget column. Now you will get this problem solution in this tutorial. In this footer widget section you can add whatever you want. So friends follow the bellow tutorials and make you footer widget and enjoy.

Create Extra Columns to Your Blogger Footer Layout:


  • Login to your Blogger dashboard
  • Select your blog and click on right side bar
  • Select "Template" on drop down menu
Create Extra Columns to Your Blogger Footer Layout

Now create a backup of your blogger template because if you have any wrong this template after edited, you can restore this. So click on Backup /Restore and download Full Template.

              Best Widget:
                 * Add Flash Animated Label Tags Cloud Widget
                 * How To Add Total Preview Hit Counter Widget
                 * Add Multi Color Social Followers Widget on Blog

After backup your blogger theme you follow the bellow lesson steps by step and create your own extra footer column.
Step 1:

Add Additional 4 Column Footer in Blogger Template:

  • Click on "Edit HTML" button
Add Additional 4 Column Footer in Blogger Template
  • Click anywhere inside the code area and press the CTRL + F keys on your keyboard to open the Blogger' search box.
               A. Write Search box then hit enter your keyboard and find this tag
]]></b:skin>
       B. Past the bellow footer widget code before this tag

Add Additional 4 Column Footer in Blogger Template

           Useful Tips:
                * How to Add Blog Archive Widget on Blogger

Four 4 Column Footer Widget CSS Code:

/* -----   help2blogging three column footer widget With two style---- */
#
h2b {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#h2b-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
# h2bbar-wrapper {
     border:1px solid #DEDEDE;
       background:#038F69;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 23.5%; 
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       . h2bbar {margin: 0; padding: 0;}
       . h2bbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
. h2bbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#
FFFFFF;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #FFFFFF;
}
. h2bbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

. h2bbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

Four 4 Column Footer Widget CSS Code

Blogger Footer Customization:

    1 Change background:#333434; to customize your widget backside background color
   2. Change width: 960px; to customize your widget backside background width size
   3. Change DEDEDE to customize widget outline color
   3. Change background:#038F69; to customize your widget background color
   4. Change color:# FFFFFF; to customize title font color
   5. Change solid #FFFFFF; to customize title underline color

           Most Popular:
                 * Add Google Custom Search Box On Blogspot Blog

Step 2:

Create Extra Columns Footer Widget HTML Tag:

    [A] Now search again </body> tag inside the code area
    [B] Past the bellow code before this tag

<div id='h2b'>
<div id='h2b-wrapper'>
<div id='h2bbar-wrapper'>
<b:section class='h2bbar' id='h2bbar1' preferred='yes'>
</b:section>
</div>
<div id='h2bbar-wrapper'>
<b:section class='h2bbar' id='h2bbar2' preferred='yes'>
</b:section>
</div>
<div id='h2bbar-wrapper'>
<b:section class='h2bbar' id='h2bbar3' preferred='yes'>
</b:section>
</div>
<div id='h2bbar-wrapper'>
<b:section class='h2bbar' id='h2bbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Create Extra Columns Footer Widget HTML Tag
  • But you can need this column before footer-wrapper please find
<div id='footer-wrapper'>

<div id='footer'>
or
<div class='credit'>

<div class='credit-wrapper'>
  • And past above code before this tag
Create Extra 3 Columns Footer Widget To Blogger
    
 [C] Now click on Save template button.
  • That’s all.
              Free top templates:
                 * eMag Responsive Flat Blogger Template Downloa
                 * Detra Premium Blogger Template Free Download

Create Extra 3 Columns Footer Widget To Blogger:

Create Extra Three Columns Footer Widget To Blogger
  • Now you want to three column widget
A, This code converted to two columns change width: 23.5%; to 32% from step 1
B. Delete bellow color tag from step 2

<div id='h2bbar-wrapper'>
<b:section class='h2bbar' id='h2bbar3' preferred='yes'>
</b:section>
</div>
  • That’s all.
               SEO tips:
                 * Best Custom Robots.txt File For Blogger Blog
                 * Sitemap Submission To Google Search Console

Adding A Two Footer Section To Blogger:

 Adding A Two Footer Section To Blogger
  • Now you want to three column widget
A, This code converted to two columns change width: 23.5%; to 48% from step 1
B. Delete bellow color tag from step 2

<div id='h2bbar-wrapper'>
<b:section class='h2bbar' id='h2bbar3' preferred='yes'>
</b:section>
</div>
<div id='h2bbar-wrapper'>
<b:section class='h2bbar' id='h2bbar3' preferred='yes'>
</b:section>
</div>
  • That’s all.
--------------------------------------------------------------------

Thanks to follow this tutorial

Best Custom Robots.txt File For Blogger Blog

Robots.txt file helps to crawlers and indexing in Google search engine of your all site URL. If you need to custom page not found in blogger site you can customize Robots.txt in your blog setting. 

Best Custom Robots txt File For Blogger Blog

Custom Robots.txt To Blogger For SEO Friendly:

Robots.txt tag is the most important part of any blog. You can easily to create it. What’s the site URL submitting in Google search console? Google easily can know this idea from robots.txt file.

In fact, the robots.txt helps to give guidance about your site to index in Google webmaster tools. So robots.txt must be necessary of any blog. Now follow the bellow lesson step by step and create your own robots.txt tag for your blogger blog. 

How To Add Robots.txt In Blogger:

Now open your web site then go to blog ‘Settings’ and past the bellow robots.txt code in custom robot place.
  • Here I will discuss about ‘Blogger’ blog.
  • So, go to Blogger >Select your blog
   [A] Go to ‘Settings’
   [B] Search preferences>

Crawlers And Indexing Setting In Blogger:

            [C] Go to ‘Crawlers and indexing’ section
            [D] In ‘Custom robots.txt’ – click on “Edit

Crawlers And Indexing Setting In Blogger

Enable Custom Robots.txt Content In Blogger:

               [E] Enable custom robots.txt content? – checked ž Yes
               [F] Past the bellow robot code in here
               [G] Click “Save changes’ to finished web submission.

 Enable Custom Robots.txt Content In Blogger:

Blogger robots.txt File:

User-agent: Mediapartners-Google Disallow:
User-agent: *
Disallow: /search
Allow: /
User-agent: *
Disallow: /*.html
Allow: /*.html$
Sitemap: http://help2blogging.blogspot.com/feeds/posts/default?orderby=UPDATED

Customize: Replace http://help2blogging.blogspot.com with your blog URL
Thanks.

No Index or Block Custom URL/ Specific Post:

For post:
Disallow: /2016/10/post URL.html

If you don’t like a custom post in Google search engine please add the tag. But of course replace /2016/10/post URL.html with your URL to do not index stop crawling posts.

No Indexing or Block Custom URL-Specific Post in blogger

For page:
Disallow: /p/page URL.html

This tag add for custom blogger page URL stop crawlers and indexing in Google search engine. Replace page URL.html code for your page URL with after blog name. 
No Index or Block Specific Post url in blogger blog

 

Show/ Block/ Stop crawling and indexing Blogger complete page:

Disallow: /p/*

If you don’t like to indexed by crawler of your blogger total page just add this code with Robots.txt file.

Show-Block-Stop crawling and indexing Blogger complete page


Thanks that's all.
---------------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

Sitemap Submission To Google Search Console


Sitemap Submission To Google Search Console

Submit URL To Google Search Engine:

Google is the most powerful and popular search engine in the world. Google 
helps your website get maximum visitors. Google have a Google service called Google Webmaster Tools for indexing complete URL to your site. You can easily to add your website in Google Search Console. Google automatically continue crawl your sitemap to indexing all site URL.

How to Create a Custom Static Home Page To Blogger

Every blogger needs to be custom homepage with any static page or post on his blogs. Now I share bellow lesson how to solve this problem. If you enter blog address on browser redirect automatically opens selected custom page.

How to Create a Custom Static Home Page To Blogger

Creating Blogger Static Home Page:

Firstly copy the link to any page or post as you need. But do not copy full link, without blog address only example picture bellow

Creating Blogger Static Home Page

Blogger Homepage Design:

  • Now choose your blog
A. Go to "Settings"
B. Click on "Search preferences"
C. Select "Errors and redirections" show on page section then click on Edit beside the Custom Redirects? option
D. In the From: input field type only “/"
E. In the To: input field past copied link or type "/p/about.html" as you need permanent homepage
F. Check the Permanent: R
G. Click Save
H. Click on  Save changes  button

Blogger Homepage Design


----------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team
Add Static Pages to Blogger Blog:- Help2blogging logoMake Custom Home Page Design -Help2blogging smile logo