Blogger Auto Read more with thumbnail

Not too long ago I wrote a tutorial on how to make a “conventional” read more or expandable post. This time we will make an auto read more with thumbnail. Before we proceed, let me highlight the differences between conventional and auto read more.

(Blogger’s own read more -the jump break, can be classified as conventional read more)

 

Conventional read more vs. auto read more

Conventional read more	Auto read more with thumbnail
Uses HTML	Javascript
Need to insert code in post.	Post is untouched.
Length of each snippet can be customized.	Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added.	Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post).	The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet.	Only loads the snippet.

 

Applying auto read more

Here we go:

1. Login to your Blogger account.
2. Go to Dashboard>Layout>Edit HTML.
3. Back up your template.
4. Check the  Expand Widget Templates check box on top right of the HTML window.
5. In the code window, look for </head>.
6. Add the Read More code below right after that line.

   <!-- Auto read more script Start -->
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <script type='text/javascript'>
   var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
   summary_noimg = 430; //summary length when no image
   summary_img = 340; //summary length when with image
   img_thumb_height = 200;
   img_thumb_width = 200;
   </script>
   </b:if>
   <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(thumbnail_mode == "yes") {
   	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>
   <!-- Auto read more script End -->

7. After that, find this line: <data:post.body/>
8. Replace the line with this code:

   <!-- Auto read more Start -->
   <!-- http://BloggerSentral.blogspot.com -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   <b:else/>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
   <a class='more' expr:href='data:post.url'>Read more ...</a>
   </b:if>
   <!-- Auto read more End -->

9. Click Preview. If it works, then click Save Template.

Customizing the snippet

You can customize the read more by changing the values of the variables below:

1. thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
2. summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
3. summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
4. img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
5. You can change the words “Read more” with your own by changing it in line 9 of the code in step 8.

That’s it, enjoy!

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.

How to install a three column Blog footer

This tutorial will show you how to install a three-column footer in Blogger blog, similar to the one in this blog.

1. Login to your Blogger account.
2. Go to Dashboard > Layout > Edit HTML.
3. Back up your template.
4. Look for the existing footer code near the end of your HTML. It might look something like this:

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

   if you already have contents in the footer, the code should be longer.
5. Copy and paste the code below immediately under the footer </div>. This code will create 3 new gadget containers (one for each column) under the existing footer container.

   <!-- three column footer HTML Start by BloggerSentral -->
   <div id='new-footer-wrapper'>
   <div id='column1-wrapper'> 
   <b:section class='new-footer' id='new-footer1' preferred='yes'/>
   </div>
   
   <div id='column2-wrapper'> 
   <b:section class='new-footer' id='new-footer2' preferred='yes'/>
   </div>
   
   <div id='column3-wrapper'> 
   <b:section class='new-footer' id='new-footer3' preferred='yes'/>
   </div> 
   <div style='clear: both;'/>
   </div>
   <!-- three column footer HTML End -->

6. Copy the code below and paste it in CSS section, before ]]></b:skin>.

   /* three column footer CSS Start by BloggerSentral */
   #new-footer-wrapper {background: #E1E2B8; margin: 0 auto;width:98%; padding: 0 10px  10px 0;} 
   #column1-wrapper, #column2-wrapper, #column3-wrapper { float: left; width: 33%;padding: 0px 0px 0px 0px; text-align: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }  
   .new-footer h2 { margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold;font-size: 0.9em;} 
   .new-footer .widget { margin: 10px 0 0 10px; border: 1px solid #F1F5CA; background: #F7FCDF;}
   .new-footer .widget-content { padding: 0px 5px 5px 5px; } 
   .new-footer ul { list-style-type:square; margin-left:15px; }
   /* three column footer CSS End by BloggerSentral */

7. Save the template and go to Layout > Page Elements. You should have the 3 empty footer containers added at the bottom of the layout.
8. You can now drag and drop the gadgets from the existing footer or sidebars into the new footer containers. The end result should look something like this.
9. If the columns are not distributed evenly, try adjusting the width in line 3 and right margin in line 5 of CSS code (in step 6).
10. Once satisfied with the result, if you want you can go back to the old footer code in step 4 and delete it (from <div until </div>).

Enjoy!

 

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.

Adding, removing and renaming a label across multiple posts

You can add, remove or rename labels without entering into each individual post. You don’t have to do it post by post, it can be done across multiple posts, in one go.

To do this, go to Dashboard>Edit Posts tab. Notice all the labels used in your blog are listed on the left side of the screen, under Labels. On the right is the list of your blog posts. Each post has a checkbox next to it.

 

Adding a label

To add a label:

1. Select the posts you want to apply the label to by ticking the checkboxes.
2. Click on Label Actions… dropdown menu, then select New Label... .
3. Enter the label in the Enter New Label text box and hit OK.

Removing a label

To remove a label:

1. Click on the label (in label list) you want to remove. All posts containing that label will be listed on the right.
2. Select all posts by clicking Select All link on the right of Label Actions… dropdown menu.
3. Click on Label Actions… dropdown menu, then under Remove Label, select the label to be removed.  

Renaming a label

Renaming a label is a combination of adding a new label and removing the original one:

1. Click on the label (in the label list) you wish to rename. All posts containing that label will be listed on the right.
2. Select all posts.
3. Click on Label Actions… dropdown menu, add in the new label .
4. Lastly, remove the original label.
5. Reminder: Add in a new label first, then remove the original one, as explained above. Don’t do the other way around.

Enjoy!

 

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.

Changing the look of blog pager (those newer, home and older Posts links)

This tutorial will show you five hacks to change the look of Blogger blog pager. Blog pager are those “Newer Post(s)”, “Home” and “Older Post(s)”  links at the bottom of your blog page. Here they are:

1. Changing the text with your own text
2. Replacing the text with an image
3. Switch sides between “Newer Post(s)” and “Older Post(s)”
4. Adding background to the text
5. Removing the pager from page

Okay let’s proceed. First you have to find the blog pager code.

1. Login to your Blogger account.
2. Go to Dashboard>Layout>Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. Look for following code:

<b:includable id='nextprev'> 
<div class='blog-pager' id='blog-pager'> 
<b:if cond='data:newerPageUrl'> 
<span id='blog-pager-newer-link'> 
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> 
</span> 
</b:if> 
<b:if cond='data:olderPageUrl'> 
<span id='blog-pager-older-link'> 
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> 
</span> 
</b:if> 
<b:if cond='data:blog.homepageUrl != data:blog.url'> 
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
<b:else/> 
<b:if cond='data:newerPageUrl'> 
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> 
</b:if> 
</b:if> 
</div>
<div class='clear'/>
</b:includable>

You want to take notice three data tags in line 5, 10, 14 and 17. Below are the three data tags and their corresponding link texts.

 

Data tag	Link text
<data:newerPageTitle/>	Newer Post(s)
<data:homeMsg/>	Home
<data:olderPageTitle/>	Older Post(s)

 

1. Changing the text with your own

To change the link text with your own, just replace the data tag with your intended text, for example if you want to replace “Newer Post(s)” with “Newer Entries”, just replace

<data:newerPageTitle/> with Newer Entries

Note: Special characters such as “/”, “<”, “>” and quotation mark need to be converted to escaped characters, otherwise Blogger will interpret it as a part of your template code, which could potentially mess up your template. You can convert it with Quick Escape.

 

2. Replacing the text with an image

To use an image, replace the data tag with this:

<img src="YOUR_IMAGE_URL" />

YOUR_IMAGE_URL is the URL of the image that you are replacing the link text with.

 

3. Switch sides between “Newer Post(s)” and “Older Post(s)”

If you want to switch sides between  “Older Post(s)” and “Newer Post(s)”, look for something like this in the CSS section of your template code:

#blog-pager-newer-link { 
font-size:12px; 
float: left; 
} 
#blog-pager-older-link { 
font-size:12px; 
float: right; 
} 

just switch the floats - float:left; to float:right; and vice versa.

 

4. Adding background to the text

This can be done in CSS by applying background code to the respective classes, namely .blog-pager-older-link, .home-link and .blog-pager-newer-link.

For example to apply green background to “Older Post(s)”, use:

.blog-pager-older-link {background: #00FF00;}

To use an image as a background, use:

.blog-pager-older-link {background: url(YOUR_IMAGE_URL) no-repeat;}

 

5. Removing the pager from page

Removal can be done by deleting the above HTML code. But I prefer to hide it using CSS, by adding display:none to the link’s class. One advantage of using this method is if you want to get them back you can simply delete the display:none code.

For example if you want to remove the “Home” link use:

.home-link {display:none}

If you want to remove all three links at once use:

#blog-pager {display:none}

 

That’s it. Enjoy!

 

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.