REMOVE POST FOOTER FROM BLOGGER BLOGS

It is really to easy to remove post footer by CSS. Post Footer are useful in blogs.Post-footer has a share button,rating poll etc.But if you want to remove the post footer then follow following steps.

Let's do it with step-by-step instruction.

• First go to Blogger Dashboard >> Template >> Customize >> Advanced >> Add CSS

• Now Copy the following code and paste it on there.

.post-footer
{
display: none;
}

Now Apply this And Your Blog Footer will removed.

Blogger Featured Post Widget With Thumbnail Opacity Effect

Below are the few simple steps by which you could add the widget to your blogger blog.

Step #1 Find The Destination Code 

Go to Blogger Dashboard >> Design >> Edit HTML and backup your template. Now search for the following code (By using CTRL +F).

Note: There is no set code that you need to search for. The only reason why i have included this step is to find a place for this particular tutorial to add the featured post widget. You can experiment with different positions and then use this widget any where you may wish to.

Search for:

<div id='main-wrapper'>
<div id='content-wrapper'>

Now it may vary from template to template. So you might not be able to find the above code. BUT, you could try finding anything similar to this. We would add the Featured Post widget code above it so that the widget would appear on the top of the blog (as shown in the picture above).

Step #2 Add The Featured Post Widget Code

Now just above the code mentioned in step #1, add the following code above it. Again, there can be errors. Trial and error is the key.

<div id='BeHboxes'><div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '><ul><li><div class='BeHbody'><a class='Fadein3' href='POST 1 LINK'><img height='100' src='POST 1 IMG LINK' width='170'/></a><div class='clear'></div><h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3><p>POST 1 PARAGRAPH</p></div></li><li><div class='BeHbody'><a class='Fadein3' href='POST 2 LINK'><img height='100' src='POST 2 IMG LINK' width='170'/>
</a><div class='clear'></div><h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3><p>POST 2 PARAGRAPH </p></div></li><li><div class='mbtbody'><a class='Fadein3' href='POST 3 LINK'><img height='100' src='POST 3 IMG LINK' width='170'/></a><div class='clear'></div><h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3><p>POST 3 PARAGRAPH</p>
</div></li><li><div class='BeHbody'><a class='Fadein3' href='POST 4 LINK' rel='nofollow'><img height='100' src='POST 4 IMG LINK' width='170'/></a><div class='clear'></div><h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3><p>POST 4 PARAGRAPH</p></div></li><li><div class='Behbody'><a class='Fadein3' href='POST 5 LINK'>
<img height='100' src='POST 5 IMG LINK ' width='170'/></a><div class='clear'></div><h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3><p>POST 5 PARAGRAPH</p></div></li></ul></div></div>

Replace the color tags (each post box represents a unique color above) with the information as mentioned.

Step #3 Adding The CSS

Search for ]]></b:skin>

Now just above this code, add the following CSS for the featured post widget.

/*----------- BeH Featured Post Widget -----------------*/
#BeHboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;}#BeHboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }#BeHboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }#BeHboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }#BeHboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}#BeHboxes img:hover{border: 1px solid #c5c5c5; }.BeHbody img{float:left}.BeHbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}.BeHbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}.BeHbody h3 a:link,.BeHbody h3 a:visited{color:#2F97FF;}.BeHbody h3 a:hover{color:#c5c5c5}.BeHbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}.Fadein3 img {filter:alpha(opacity=80);opacity: 0.8;border:0;}.Fadein3:hover img {filter:alpha(opacity=100);opacity: 1.0;border:0;}

 In case of any problems, leave out a comment below and i would love to get back to you as soon as possible.

Add a Customized Three Column Footer Widget In Blogger

Add This Three Column Widget Inside Your Blogger Templates

Follow these steps,

1. Go To Blogger > Layout > Edit HTML
2. Back Up your template
3. Search for ]]></b:skin>
4. Just before ]]></b:skin> paste this CSS code, 

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434; } 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;        float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;        width: 32%;        text-align: justify;
       font-size:100%;
       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;
       color:#0084ce;         text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #0084ce; }
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

5.   Now Search For </body> and just above this code paste the code below,

<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 style='clear: both;'/>
</div> </div>

6.  Save your template. done!
Now visit the page Layout > Page Elements and start adding widgets! :>>

Customization

You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our advanced Colour Code Generator

• background:#333434;   Changing the six digit colour code will change the background colour of this widget.
• width: 960px;  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
• background:#fff;  and    width: 32%; is the background colour and width of the three columns where the widgets are added.
• color:#0084ce; This is the Colour of Title Headings
• font: bold 14px Arial, Tahoma, Verdana;  Edit this to change the font size and family.
• border-bottom:3px solid #0084ce;   Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading
• border-bottom: 1px dotted #ccc; Editing this will change the size, style and colour of the border that appears below links.

That’s All!

Multi Column Footer Widget For Blogger –The Hot!

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,

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,

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.

That’s it! Enjoy :D

Blogger Featured Post Widget With Thumbnails

 

1. Go to Design 

2.Add a Gadget 

3. HTML/JavaScript. 

Now simply add the following code in that widget:

<div id='mbtboxes'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>

<ul>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 1 LINK'>
<img height='100' src='POST 1 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3>
<p>POST 1 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 2 LINK'>
<img height='100' src='POST 2 IMG LINK' width='170'/>

</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3>
<p>POST 2 PARAGRAPH </p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 3 LINK'>
<img height='100' src='POST 3 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3>
<p>POST 3 PARAGRAPH</p>

</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 4 LINK' rel='nofollow'>
<img height='100' src='POST 4 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3>
<p>POST 4 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 5 LINK'>

<img height='100' src='POST 5 IMG LINK ' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3>
<p>POST 5 PARAGRAPH</p>
</div>
</li>
</ul>
</div>
</div>

Add Your Own Links The widget contains 5 featured posts. So your have to configure all those posts links, images for each posts, their description and a small paragraph related to that article.

I have separated all those 5 posts areas with different colors. Note that description is the main heading for the post. So don't confuse it with a small paragraph of few lines. Check the demo if you haven't.

Post 1 | Post 2 | Post 3 | Post 4 | Post 5
Step 2: Adding CSS Now go to Design >> Edit HTML and tick the check box. And don't forget to download your template for backup purposes.

Now search for the following code by (Ctrl + F):

]]></b:skin>

Now just above this code, add the following code:

/*----------- MBT Gallery -----------------*/

#mbtboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#mbtboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#mbtboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#mbtboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }
#mbtboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#mbtboxes img:hover{border: 1px solid #c5c5c5; }
.mbtbody img{float:left}
.mbtbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.mbtbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.mbtbody h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.mbtbody h3 a:hover{color:#c5c5c5}
.mbtbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}

Now simply save your template and would be all done.

NOTE: The images that you would link to the widget, should be 170px width and 100px in height. You may like to read :

Create Blogger Backup For Images And Get Image URLs


Customization: Say if you want to match the widget with your colored template. You can easily do that by changing the background color code that i have made bold the coded above.

background: Your Color Code;

Or you could add a border to the widget by using 1 or 2 at most instead of value 0.
border:0px

Thats all. Hope that was useful and exciting. Waiting for your feed back.
Cheers!