Showing posts with label Blog Widgets. Show all posts
Showing posts with label Blog Widgets. Show all posts

Clean Add Related Posts widget for blogger/blog-spot with Thumbnails

Clean Add Related Posts Widget To Blogger With Thumbnails 

Related Posts Widget

Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter!This widgets is one of most popular way to increase to showrelated post to blogger.After you will add this widget it will start above comment section.The related articles are chosen from other posts in that same category/label/tag.Related post widget help you to show visitor your past and previous stories.It also help to increase page and make readers engaged on reading your blog post.


  • Responsive Design
  • Fast Loading And SEO Friendly.
  • Shows Post of  same category/label/tag.
  • Blog Post Title with Thumbnail.
  • Easy to Install.
Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box; 

Step 3. Search (CTRL + F) for this piece of code:


Step 4. Copy and paste the below code just before/above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
#related-posts a{
border-right: 1px dotted #DDDDDD;
#related-posts a:hover{
<script type='text/javascript'>
var defaultnoimage=&quot;;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
<script src='' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code: ( Skip 1st found - code will be paste after 2nd search )

    <div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href=''><img alt='Blogger Tricks' src=''/></a>
<!-- Related Posts with Thumbnails Code End-->

- change the 6 value from max-results=with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Hurry Previous Code Modified With Above Now its Tested by 
 Working 100% Fine.

Enjoy :)
Read more button

Share this

Automatic Read More Link in Blogger

Automatic Read More Link in Blogger

Automatic Read More Link For Blogger With Thumbnails i.e expandable post when clicking Read more for blogger with thumbnail of image used in blogger posts and all this work is done by the script automatically, you just don't need to locate your image the script will do all work for you automatically.Just you have to write your post and publish it with one image in post related to post.
If you don't want to add thumbnail image in post summary then i had an post previously on automatic read more link for blogger, read this.
Now how to install Automatic Read More code For Blogger With Thumbnails Demo snapshot is below.
Lets start with its installation: Now Login to Blogger Go to Layout  >> Edit HTML in your Blogger dashboard and check the "expand widget templates" box. 
Find the closing </head> tag in your blog template, 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 type='text/javascript'> 
function removeHtmlTag(strx,chop){ 

var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
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; 

Note:  in above codes we can change the numeric numbers according to our need 
summary_noimg = 430; is post cut height without image 
summary_img = 340; is post cut height with image 
img_thumb_height = 100; is thumbnail image height 
img_thumb_width = 120; is thumbnail image width

Now find this code <data:post.body/> in your template and replace it with below codes.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/> 
<b:if cond='data:blog.pageType != "item"'> 
<div expr:id='"summary" +'><data:post.body/></div> 
<script type='text/javascript'>createSummaryAndThumb("summary<>"); 
</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 cond='data:blog.pageType == "item"'><data:post.body/></b:if> 
Preview Your template if its showing thumbnail with read more code Save it. 
Note: You can Change Read more.. to Continue Reading.. or Read full post as you like.. Best of luck for your blog!
Read more button

Share this

Floating Social Buttons

Social Media or Social Share button is play important role in blogger blog. Submitting your blog post in the social bookmarking sites will help to increase your blog traffic and the search engines can easily find you blog post with the help of social bookmarking websites. Social MediaSharing sidebar Buttons help to spread your blog post and more chance of visitors will come on your blog. Social Share Sidebar contains collection of popular social media sharing buttons which you can add to the sidebar of your blog. Social Media Buttons Facebook, Twitter, StumbleUpon, Digg, and Google Plus. This will increase sharing by 20-30% because of its unique and permanent position.

I strongly suggest every blogger must have a floating social media icons in the sidebar as the share options will be made visible across the blog posts We have included Face book like, Tweet, Stumble, Google Plus and Digg. Each of them comes with a live counter.

Adding the Social Share Button in Sidebar   

  1. Go to Layout
  2. Click on Add A Gadget
  3. From the pop-up window, scroll down and select HTML/Javascript
  4. Copy the below code and paste it inside the empty box.
  5. Save the gadget
<!-- Sidebar share buttons Start><style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color: #b2e0ff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from"> 
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src=''></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div> 
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='techkgp' expr:data-counturl='data:blog.url' href='' rel='nofollow'>Tweet</a><script src=''; type='text/javascript'></script> 
<br /><div class='sbutton' id='su'> <script src=""></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src=""></script> <g:plusone size="tall"></g:plusone></div><br/><div style="clear: both;font-size: 9px;text-align:center;"> 
<a href="" target="blank"><font color="red">Get This<font></font></font></a></div><!-- Sidebar share buttons End --></div></div>


    1. Vertical alignment - Change the value in Blue to fix the Bottom distance even when window is resized.
    2. Horizontal alignment - Change the value in Red of margin-left. . Increase or decrease the value based on your needs.
    3. Twitter setting - Replace Techkgp with your Twitter username
    4. Background Color - To Change the color of Background change the value of Color Code. You can use our Color Code Generators Tool for Color Code.
    5. Replacing and removing buttons - You can replace the existing buttons with your own buttons . Each button is represented by this sample code: <div class='sbutton'> Button Code Here </div>
      That’s all
      Enjoy !
      Read more button

      Share this

      Recent Posts Widget with the Thumbnails For Blogger Blog

      Today we are discussing about how to add Beautiful Recent Posts Widget with Thumbnails to your Blogger Blog. ThisRecent Posts Widget helps your visitors to find your recent posts quickly. Displaying small thumbnail images with post titles in the recent post widget on your Blogger blogs could be the right fix. This not only looks nice, but also visitors to click on your posts. This widget shows the Title of Post, post summaries, thumbnail of post. This Recent Posts widget will give more attraction to your blog and catch the visitors easily.

      How to add Recent Posts Widget to Blogger

      Go to Blogger > Layout
      Click on Add a Gadget
      Choose HTML/JavaScript and paste the below code in it.

      <style type='text/css'>
      img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
      .recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
      ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
      .recent_posts_with_thumbs a {text-decoration:none;}
      .recent_posts_with_thumbs strong {font-size:10px;}</style>
      <script style='text/javascript' src=''></script>
      <script style='text/javascript'>
      var numposts = 5;
      var showpostthumbnails = true;
      var displaymore = false;
      var displayseparator = true;
      var showcommentnum = false;
      var showpostdate = false;
      var showpostsummary = true;
      var numchars = 100;</script>
      <script src=''></script>


      Change to Your Blog address 
      Change numposts = 5 to Show number of Recent posts with thumbnails 
      Change numchars = 100 to number of characters to show in summary of recent posts 
      Change true to false to activate or deactivate any feature of this widget 
      Save your widget. 
      That’s all 
      Read more button

      Share this

      Simple Recent Posts Widget For Blogger/Blogspot

      The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and it's easy to customize/ apply different style on it. To style it into your own design, you just have to modify the CSS style - you can change the link or background color, the size and color of text/links. 

      What you can do with this widget:
      • display post titles only
      • change the number of posts
      • change the number of characters of the post snippet/excerpt
      • show the post dates

      See the screenshot below:

      How to add Recent Posts Widget to Blogger

      Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link

      Step 2. From the pop-up window, scroll down and choose HTML/JavaScript

      Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript: 

      Option 1: Recent posts widget with snippets

      <div id="hlrpsa">
      <script src="">
      var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
      <script src=";alt=json-in-script&amp;callback=showrecentposts">
      <div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
      <a href="" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="" title="Recent Posts Widget">We make it simple</a></div>
      <noscript>Your browser does not support JavaScript!</noscript>
      <style type="text/css">
      #hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url( 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
      #rpdr, #rpdr a {color:#808080;}
      #hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
      .hlrps a {font-weight:bold; }
      .hlrpssumm {}

      Option 2: Recent Posts Widget Showing Post Titles Only

       <div id="hlrpsb">
      <script style="text/javascript" src=""></script>
      <script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
      <script src=""></script></div>
      <div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="" title="Recent Posts Widget">We make it simple</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
      <style type=text/css>
      #hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
      #rpdr, #rpdr a {color:#808080;}
      .bbrecpost2 {
      border-bottom: 1px #cccccc dotted; }

      Step 4.
      • Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. 
      • Change false to true if you want the posts dates to appear 
      • Change 100 (option 1) if you want more characters to be displayed.
      • To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
      • To change the style of posts summary, modify the values in green (color) and orange (font size)
      • Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

      Step 5. Save your widget. And that's it! Enjoy!

      If you need any help, leave a comment below.
      And if you liked this post, please consider sharing it. Thanks.
      Read more button

      Share this