New and improved related post widget blogger

Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter! Mike on More-tech-tips has created easy setup wizard for demos and code generation. Also, to have code copied to your Blogger blog!

New Features

1. Display related posts with/without thumbnails.
2. Since, images added to Blogger posts are uploaded to PicasaWeb, you can use many custom thumbnail sizes.
3. You can use one of 2 CSS styles to help you get started quickly.
4. Display posts with transition effects or as a fixed list.
5. Many transition options are available like opacity, width, height, font-size.
6. Optional timeout technique is used to finish widget loading when one or more feed requests were not completed successfully, instead of waiting indefinitely.
7. Thumbnails loading is delayed until widget has finished aggregating related posts to avoid loading extra images
8. You can customize it by placing optional parameters -like custom animation- in a HTML comment or HTML5 data attribute.
9. You can disable widget if current page is not a post page.
10. Widget was rewritten as a jQuery plugin, use a typical jQuery call to load it or auto-load any number of div elements with "related-posts-widget" class in the same page.

Demo1 || Demo2 || Demo3 || Demo4

Auto generated meta tags description for blogger using python

Auto Generate Meta tags and Description for Blogger or Blogspot script written in python Sebastian Noack has written a very good script to auto-generate meta tags and description for Blogger or Blogspot.Previously we have seen how to add meta tags for each individual post and this script does that manually.

This generates the meta tags based on the feed of your blog and updates the html template at Blogger. It generates meta tags for the following pages.

The hompage

• with the blog description 
• with the most used tags in the blog as keywords 

The page of each post

• with the first paragraph of the post as description 
• with the tags of the post as keywords 

Unfortunately,it’s written in python language which is a bit complicated for Windows user(like me)who are not familiar with Linux operating system.

What we expect
He definitely have done a great job in creating this hack. it's however quite a challenge for ordinary blogger to understand.Blogspot user needs only to copy/paste the script into the Blogger template without any need to run a complicated python script.

See Screenshot from no-ack blog post -

Code to switch the meta tags, generated and inserted into the template by the script

Page of a post with corresponding meta tags

Hack blogger comment box to increase comments

Blogger comment box hack to increase comment in your blog.This is a very strange way but it is working,when i first applied it it made me laugh.Its a funny hack for blogger comments count, as with it you can increase your comment count for all blogger posts with any fixed count you want.I think i should proceed to the tutorial so that all of you can enjoy this funny hack in your blogger.

1. Sign in into your blogger account and go to Design > Edit HTML
2. Look out for </b:skin> tag
3. Add the following code before it

a.comment-link:before{content:"76";}

Now save the template and view your blog
Hurray now your post having 0 comments will show up 76 comments.Its really fun.
You can change 76 to any number you want.Try using it and have fun.

Removing Automatic readmore hack from static pages-blogger

Most of the Blogger's now days are using automatic read more hack with customized thumbnail.Blogger in drafts have recently announced a great feature called static pages (standalone pages).
Previous version of the Read more script does not have necessary modifications for static pages.So if you are using blogger template with older version of read more than you need to edit the template manually to remove read more option from web pages.and letting your pages display as standalone pages.

Do check out my previous post Show post titles on Home page Only and Add reply option to blogger like wordpress

Follow easy instructions to remove automatic read more from blogger static pages -

Just Login To Blogger and Go To (Dashboard → Layout → Edit Html → Expand Widgets → Press Ctrl+F) and now search for below codes.

<div class='post-body'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<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 "<data:post.title/>"</a></span>

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

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

What you have to do is search for the code similar to this in your blogger template and code and add the red code in the same position as i have added to above code.

This will solve your problem by removing automatic read more hack from static pages

How to show post titles on Home page only

If you have a News headline type blog and wish to display only post titles on home page then this blogger hack is for you.This hack will display Post titles on home page unlike some of the previous hack which shows Post titles on home page aor archive page.If  you looking for more blogger hack then i recommend you read Blogger Hacks.
You can add reply option to your blogger like most of the wordpress blogs and make it more professional. Add reply Option to blogger comments like wordpress

How to show post titles on Home page only

Step[1] Login to your blogger dashboard  > layout  > Edit HTML

Step[2] Scroll down to where you see tag .

Step[3] .Copy below code and paste it just before the tag .

And Add This Code:

<style type='text/css'><b:if cond='data:blog.url == data:blog.homepageUrl'>.post {margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;padding-bottom:1.0em;height:50px;}.post h3 {margin:.25em 0 0;padding:0 0 4px;font-size:20px;font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;font-weight:normal;line-height:1.4em;color:#cc6600;}.post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#cc6600;font-weight:normal;}.post h3 strong, .post h3 a:hover {color:#333333;}.post-body {display:none;}.post-footer {display:none;}.comment-link {display:none;}.post img {display:none;}.post blockquote {display:none;}.post blockquote p {display:none;}h2.date-header {display:none;}.post-labels {display:none;}.post-rating {display:none;}</b:if></style>
Step[4] Now Save your template.
You can chnage number of posts to show on your home page by Clicking on "Edit" link of Blog Posts Section.(Under Page Element Tab)


IF you carefully examine the Code Then you will Find that we are disabling all CSS Tags related to Posts

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

If you apply this hack to your blog ,please share with me.What do yoou say about this hack i would like to hear from you.

Add a reply option to blogger comments like Wordpress

If you Are using blogger platform for your blog than during some stage of your blogger life you must have noticed that blogger does not have Reply option to it comments.This is one of the major reason why people migrate towards Disqus or IntenseDebate comment Platform.
I suggest you to read this - Readers can't comment on your blog - Tip For You

With a very little change to your template you can add this hack to your blog.
This hack was originally posted on thisischen

ScreenShot :

Update - Previous Reply code was not working for some blogger templates.This is an updated version and work well with all templates

Adding Comment Replies to your blog.

Step [1] In your dashboard Click 'Layout' > 'Edit Html'> Tick the 'Expand Widget templates' box.

Step[2] Find the following code in your blogs Html : <data:commentPostedByMsg/> 
 
Step[3]. Paste the following code Directly Below/After <data:commentPostedByMsg/>  
 

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img style='float:right;padding-right:100px' title='Reply to comment' alt='Reply to comment' src='URL OF image'/></a></span>

Important !
In order to make this work you must add your blog Id .
What is your blog ID??
Simply go to your layout page, posting page or any of the pages and copy your I.D. from the address bar at the top of the page.

Replace URL of image with any image of your choice or you can choose one from below-

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnvcqfSOQuyxQiYJDqXS1Jr8zVg56Oc78EkKupoZu9XpNM6uVU_-LhMVA-8b4C1xF3wXnd3iuXDqE3-Qv587yxZgorXV9ik1pDcS7AzwX-LfbB46nnyCrM9jleRUQOJf8gUik-AejydRo0/s320/reply01.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmR2ziLrnpJzvx21UrlCS-MLw_ZDOepbnIxEWRRHORzK0SAYUvIQ27gqXkeAiP_JkBE1cJieLMmj4tKDAU86Ecv2YJhR9ewwkYNLDEDZpvkjCLfwwniMGVYdst6WGxeCbN8Ni7F1L8kQk_/s320/reply03.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdDZVXjhXp90efQsQ9SqXdoNh80N0TG9pHTdi0HoGallVEKKZyiInCvOMQB_RS-T0T-iuOCV5-hFCKvsXCzj7ep_ay9hxkkiG3O6zFj48QrwaGVK92LvLbG93IDwjGMVBIm63gtQwSu8wg/s320/reply04.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMbuj5Bpn2SydUZkfUe3CB89ttW8bFQ4XJXBDYmxuS5M9YyHHgTbl75s8vIZSluvCKnDM6-cKrRJt-OvUcKZa8Xktu8OamvA8Upb2b57ugP_9CJVVmdhs8mxUw38wX-YYVxmXXxt_NczZ/s320/reply02.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggv-vAXiOvB6b-pDpURMKnj1iLcmwC_BROh5EYic9hHbXErCwm7zdR_94MqpJAqm3nahus3E_1NR2GICLerU7rn39m_boaIuseEkURdwADH1Qw_9mmskLpQ7TfrB0BwTl3aLKkj5y_ZRwd/s320/reply05.png



Add This Reply to comments blogger hack to your blog and Do tell me if you like this Concept.

Reverse the order of your posts-blogger hack

Is there a way to make my posts show up in reverse order??

Newest to oldest posts.. can we change that order?

Put posts into chronological order??

How To Reverse The Order In Which Posts Are Listed On Your Blog??

IF you are a blogspot user and looking for solution to this problem then you are at the right place.
I have been a regular Visitor on Blogger help forums i found so many people asking this question ,even i want some handy solution for  my Guitar blog.
Until now in order to reverse the order you needed to play around with the dates (change the date of every post )which is not possible if the number of posts are large.
So here is a handy Blogger hack that can automatically reverse your post in chronological order.
This hack was first posted by David Merriman on The Merriman Family Blog.

Reverse the Order of your posts-blogger hack


Go to your blog's Layout tab and click Edit HTML
and find where it says </body>

Copy the following code and paste it Directly Above </body>

<!-- Start post reversal code --><script type='text/javascript'> var Blog1 = document.getElementById('Blog1'); var postContainer = Blog1.childNodes[1]; var first = postContainer.firstChild; var child = first.nextSibling; var childNext = null; var classes = ''; var dateHeaders = false; while (child != null) { if (child.className == 'date-header') { dateHeaders = true; break; } child = child.nextSibling; } child = first.nextSibling; while (child != null) { if (child.className != null) { if (child.className.match('date-header') != null) { childNext = child.nextSibling; postContainer.insertBefore(child, first); first = child; child = childNext; } else if (child.className.match('post hentry') != null) { childNext = child.nextSibling; if (!dateHeaders) { postContainer.insertBefore(child, first); first = child; } else { postContainer.insertBefore(child, first.nextSibling); } child = childNext; } else { child = child.nextSibling; } } else { child = child.nextSibling; } }</script><!-- End post reversal code -->

Save Template 


 See a Demo Test blog And tell me if it works for you because i have not tried it yet.

Previous post->Generate 300+ backlinks in 1 minutes