How to Add Footer Column Widget into Blogger blog

You may have seen many blogs that have a three or four column widget at the bottom of there page. When we searching blogger template sometimes we can't find 3 column footer blogger template. In this tutorial i'm going to teach you how to add 3-4 columns footer widget box, With more columns in your blogger footer you can add extra stuff you like. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About me etc at the bottom of your template.

Adding a 3 Column Footer Widget

1. Navigate to template > edit HTML
2. Before making any edit always remember to backup your template
3. Find the following section in your Blogger template

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

If you are having difficulty finding this section trying searching for footer-wrap or something similar.

4. Replace all the code located in Step 3 with the following,

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes'
style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes'
style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes'
style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Adding a 4 Column Footer Widget

Replace all the code located in Step 3 with the following,

<div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes'
style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes'
style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes'
style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes'
style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

5. Save changes to your Blogger template
6. Navigate to Layout > Page Elements. You will now see a 3 column footer or a 4 column footer depending on what option you chose. 

Center or Right Alignment of Blogger Header Image

In general uploaded your header image via page element option you will see that image will automatically align to the left and there are no option for right or center alignment. For those who has been facing this problem we hope this article can help you have more control over the header positioning, Using CSS (Cascading Style Sheet) you can make this easily align right, left or center.

At first you need to check the image placement method you choose when you uploaded the header image to Blogger.

• If you used “Behind title and description” option.

1. Go to Dashboard
2. Template > Customize > Add CSS
3. Add the following snippet of code,

To align center

#header-inner {background-position: center !important; width: 100% !important;}

To align right

#header-inner {background-position: right !important; width: 100% !important;}

• If you used “Instead of title and description” or “Have description placed after the image” option.

To align center

#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;} /*include this line if you are using Template Designer*/

To align right

#header-inner img {margin: 0 auto 0 300px;}

Enjoy!

Auto Read More Button With Thumbnails For Blogger

By default on blogger you have the option to add a jump break to your blog post, Using this option blogger displayed only a part of your posts on index pages and the link to read the full post will be below. This is a conventional read more option provided by blogger in post editor. In this conventional read more hack, every time you need to insert code in post.

In today's post we will share auto read more hack with thumbnail for blogger blog, This script will automatically create post summaries with thumbnail. You don't need to add any extra code in every blogger post and if you insert image, it appears thumbnail.

Applying Auto Read More

• Go to Design > edit HTML
• Backup your template
• Tick on "Expand Widget Templates"
• In the code window Find this code..

<data:post.body/>

•  Replace with this code below,

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read more...</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

• Now, search for </head> and paste the following section of code immediately before it:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Customizing the code above :

You can customize the 'Read more' option by changing the value of the variables below:

1. If you want to change image thumbnail size then find these numbers 100 and  120
2. To change post cut height without image  find these line of code - summary_noimg = 430;
3. To change post cut height with image find these line of code - summary_img = 340;

Adjust the Alignment of Sidebar on Blogger

If you are new on blogger, you get a ready-made page layout that allows you to post your articles or add new widgets. Many bloggers prefer changes to their layout to modify the blog and keep them in a neat and clean format, By the using of CSS (Cascading Style Sheets) you can adjust the alignment of your sidebar. Here in my post i will share how to align your blogger sidebar?

To Align Blogger Sidebar

Here we go :

• Login to your blogger account.
• Go to Dashboard > Design > edit HTML
• In the code window find these lines..

div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: right;
}

Change the value of alignment 'right' to 'left'. Code will look like below:

div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: left;
}

Save it and you are Done!

Before you leave:

• Do you find this article helpful then please share it via tweet, like or pin it buttons below.
• Any suggestion or question please post in the comment below.

How to Permanently Delete Your Facebook Account

If you are sick of Facebook or if you are spending large amounts of time on this site than you can cancel your account, Facebook allows you to temporarily deactivate your account which will hide all your information on Facebook from others that means no one will be able to access your information on Facebook But this does not permanently delete your Facebook account, In this article we will guide you on how to permanently delete a Facebook account.

• Steps to Permanently Deleting Your Facebook Account

Important :Take a backup of your Facebook data before deleting the account, it may be useful in future.

1. At first login to your Facebook account.

2. Now go to Facebook permanent account deletion page and click on Delete My Account

3. Now when it pops up follow the steps such as entering your password and fill out a captcha code

After submitting the account deletion process successfully you will get an email from Facebook saying “Your account will be deleted in 14 days” For 14 days after you delete your account, Facebook retains your data in case you wish to reverse your decision. If you don’t log in to Facebook for 14 days, your account will be permanently deleted.

• E-Mail Method

You can email at private@facebook.com from your registered email id and request them to delete your account.

How to Tweet More Than 140 Characters in Twitter

Twitter is second largest social media company in the world, It has  500 million active users and daily millions of users sharing their thoughts via tweets but one of the very few irritating things about Twitter is the limit of 140 characters per tweet, Sometimes you want to share your thought which contains more then 140 characters on twitter you feel very inconvenient. So what to do? Below are some ways to tweet more than 140 characters on the Twitter.

• How to Tweet More Than 140 Characters

Here are listed some Apps to tweet more than 140 characters limit.

TwitLonger

Using TwitLonger you will post the first 100 or so characters along with a shortened URL to the TwitLonger web apps. You can write what you need and a link to what you said will automatically be posted. If it still asks for an invite – get a beta invite at hello@twitlonger.com

Tinypaste

Tinypaste is a simple web app that lets you to paste any text or code and then save it. Once you save it, you will get a Tiny url where you can share it directly on twitter.

Tall Tweets

Tall Tweets will slice your long tweet into multiple smaller tweets of 140 characters or less, and publishes them all to Twitter in one shot. The tweets are numbered and are sent in a reverse arrangement such that they can be read from top-to-down inside any Twitter client.

Jumbo Tweet

The another service to tweet more than 140 characters is jumbo tweet, jumbo tweet is a simple web app that solves the same problem but in a slightly different manner.

 Now you can beat Twitter’s 140 character limit!

How To Add Categories Section To Blogger Blog

Blogger Blog does not support categories but has only comes with labels, In this tutorial  i will show you how to manually create categories in Blogger blog. Category is a very important section of any blog or website, because with the help of categories people can easily find what they are looking for. Now we would manually create category section in blogger from labels, This tutorial is aimed at beginner bloggers, Let me explain how to add category section in blogger blog.

» Awesome Facebook Like Box with Hover Effect for Blogger (No Coading Needed)

The first and easiest way to create categories section in Blogger is to rename the section of labels widget as categories. Of-course this is not the appropriate solution for a blog in which there are huge number of labels. An easy way round this problem is create a separate categories section.

• Adding categories section to a Blogger blog involves following steps :

1. First of all you have to decide how you want to group your articles, according to the labels applied, and what group heading you want to give to each grouping of articles.

2. Navigate individual page of the label for first category which you want to use by clicking on the label in side bar. Copy URL address of this page. For example the URL address of the label of Blogger Widget on my site is :

http://things-guide.blogspot.in/search/label/Blogger%20Widget

3. Now go to Dashboard > Layout > Add a Gadget > Link List

5. Enter "Categories" as the title

6. In the Configure Link List dialog box, paste the link of the label you've copied from the address bar to  Site URL

7. Enter the name of your Category

7. Click on Add Link to add the link to your new categories list.

8. For every label you wish to put into the Categories Section copy the link and add it to the Configure Links List. By the end you will end up with two or more categories in your list

9. Use the arrow keys to each link to move them according to your choice where you want to place them.

• Limit the number of posts :

You can also Limit the Number of Posts Displayed in the Categories Section. For this you will need to adjust the URL's of each label as follows :

From :

http://yoursite.blogspot.com/search/label/CategoryName

To :

http://yoursite.blogspot.com/search/label/CategoryName?max-results=max number of posts to display

Change the value of max results to number of posts you want to display, for example max-results=20

I hope this Tutorial of manually adding categories using the Link List widget into blogger blog would of great importance to you.

» Awesome Facebook Like Box with Hover Effect for Blogger (No Coading Needed)