Related Posts Widget for Blogger

Now here is wonderful hack for displaying links to related posts beneath each of your blog posts. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Preview of Related Posts Links:

Error Fix:

If your related posts have not been working correctly:

1. Search for this line of code: http://theblogtemplates.com/scripts/Related_posts_hack.js
2. Replace the URL above withhttps://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js

How to Add Related Posts Widget to Your Blog?

1. Go to Layout >Edit HTML in your Blogger Dashboard.
2. Back up your existing Template before making any changes!
3. Make sure to check the “Expand Widget Templates” box.
4. Search for the </head> tag.
5. Add the following code just before the </head> tag.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnWjcg9ponqnFy1nvNzqrMcCljx9mIBaIszjoo62XYO3H_S7lq1PuxNye06zCf-HhIxZ5WlpzwYS5aKb3rRDa7N-PmFMK2J9sDF2_rglmaeiOI_RUwCZ7x1xNGpqlQHUaT4jJ8Kb9_lI/”) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src=’https://sites.google.com/site/widgetsforfree/scripts/Related_posts_hack.js’ type=’text/javascript’/>

1. Now search for <data:post.body/>. In some of the templates this code may look like this
   <div class=’post-body>
   or
   <data:post.body/>
2. Add the following code just beneath the code you just searched for.
   

   <b:if cond=’data:blog.pageType == “item”‘>
   <div id=”related-posts”>
   <font face=’Arial’ size=’3′><b>Related Posts : </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>
   <script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font>
   <script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
   </script>
   </div></b:if>

 Now Save your Template and you’re done!

 Customization

• In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number “5” to any desired number.

max-results=5

Facebook Popup Like Box Widget for Blogger

Here’s a fantastic way to increase facebook likes for your blog or website.  Add this enticing widget to your website and a facebook like box will pop up with the lightbox effect when a user visits your page.  The facebook widget will show up on your page about 10 seconds after the page loads (but can be customized).  This is a surefire way to dramatically increase your likes.

Add Widget to Your Site

Add the following code anywhere in the body section of your template. For WordPress themes, Weebly templates, and Tumblr, you will need to manually copy and paste the script into your template.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127

<!-- Facebook Popup Widget START --><!-- Brought to you by www.JasperRoberts.com - www.TheBlogWidgets.com --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style> #fanback { display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; } #fan-exit { width:100%; height:100%; } #JasperRoberts { background:white; width:420px; height:270px; position:absolute; top:58%; left:63%; margin:-220px 0 0 -375px; -webkit-box-shadow: inset 0 0 50px 0 #939393; -moz-box-shadow: inset 0 0 50px 0 #939393; box-shadow: inset 0 0 50px 0 #939393; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: -220px 0 0 -375px; } #TheBlogWidgets { float:right; cursor:pointer; background:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgafdoSq6NbOuscdQpfOi6Dv1YA3ggHRnM45K1iFySbkBVlM3y1Rh-1-VYXcbV6vgxgmrwPLgv9RvBcXuCpzMRXH4NGb-tTjuzLlKriOnCpk6RpETCTsUM2ex5KmMVV5Y4WUO0uFNGXvqhL/s1600/TheBlogWidgets.png) repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .remove-borda { height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } #linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style>     <script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) {   // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options);   if (value === null || value === undefined) { options.expires = -1; }   if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); }   value = String(value);   return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); }   // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(10000).fadeIn('medium'); $('#TheBlogWidgets, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); }); </script>   <div id='fanback'> <div id='fan-exit'> </div> <div id='JasperRoberts'> <div id='TheBlogWidgets'> </div> <div class='remove-borda'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?   href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'   style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center> <span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Blog</a></span></center> </div> </div> <!-- Facebook Popup Widget END. Brought to you by www.JasperRoberts.com - www.TheBlogWidgets.com -->

How to Customize

Where to find the code?
If you’ve installed the widget by clicking “Add to Blogger” you’ll need to locate the code in order to make customizations. In order to find the html go to the blogger dashboard>Layout. Click “edit” on the “HTML/Javascript” gadget.

Enter your facebook username
Search for http://www.facebook.com/theblogwidgets and replace it with your site’s facebook page URL.

Change the 10 Second Time Delay
By default the widget pops up 10 seconds after the page finishes loading.  Search for the code below and change the number 20000 to a greater or lesser number.
1 second = 1000.  10 seconds = 10000. 60 seconds = 60000.

1	.delay(10000)

Popup every time the page loads 
By default, the like box widget only shows up the first time the user visits your page.  If you would like the facebook box to popup every time the page loads, then remove this line of code:

1	$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Display only when user visits your homepage
You can do this by surrounding the widget code with these conditional tags below. Go toTemplate > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right above this body tag.  Make sure to include the conditional tags below.

1	<b:if cond='data:page.type == "index"'>REPLACE-WITH-FACEBOOK WIDGET-CODE-HERE </b:if>

Having trouble seeing the facebook widget?

By default, this facebook like box widget is only displayed once every 30 days. You may need to delete your cookies if you would like to see it again.  Or check out the “How to Customize” section above, in order to display the widget every time a user visits your site.

If you’re still having trouble with the popup widget, please leave a comment below.  I am happy to help you!