After our previous widgets about Related Post With Thunmbail widget and some Awesome Related Post Text Widget and also Simple Related Post Text Widget that our user desired and ask, We are here with the new one that contain thumbnails as well as full title and short summary of your blog post that will provide more awesome look and will increase your visitor to view the rest of your posts.
There are also many third parties related post widgets like LinkWithIn that are also popular for Thumbnail related post widget but they have there external jquery file that can increase your clog loading time that is against SEO and also visitor didn’t like this. In LinkWithIn you can not increase more then 5 and that will be visible on home page also and not provide you the customization or any further control to your widget.
So here We have a Pro Style widget that you have seen in many top blog that are also based upon WordPress but this time we have this widget for blogger only. This is a very good an alternative to third parties one that is also full customizable according to your desire, Displaying the links to related posts along with a thumbnail of the corresponding post and also summary and title in grid style that will help you increase the page views/user and also style up your blog. Users will be tempted to go for the related posts when they are presented attractively with thumbnails as shown in the image above and below because you know that…
A Picture Is Worth A Thousand Words…!!!
From thumbnail visitor will be attract to here and after seeing this thumbnail, they will read out your post title and some summary that will definitely pressurised them to click on it from that you can increase your pageviews.
It’s also best for SEO as it is fully customized to decrease your bounce rate from attracting visitor and clicking on it, It also made all dofollow links to all your related post that can increase your inbound link count and we also made all link to open in new tab from that you can increase your time on a page count. So simply it’s also helpful to your SEO. Now without any more preface, here we proceed right to the code afters seeing the awesome features below.
DEMO ScreenShoot |
Table of Contents
Features:
1.) Awesome And Stylish Widget.
2.) Quick To Load And Easy To Use.
3.) One Click Links To Post.
4.) Grid View Style.
5.) Thumbnail Is Also Added.
6.) It Will Be Displayed Only On Post Pages.
7.) Awesome And Professional Look.
8.) Post Title And Post Summary Also Included.
9.) Full Customizable CSS.
10.) You Can Also Increase Related Posts Counts.
11.) Much Better For Your Blog SEO.
12.) Will Help You To Decrease Your Blog Bounce Rate.
13.) Will Also Increase Your PageViews.
14.) It Will Open Links In New Tab.
15.) All Related Post Links Are DoFollow.
16.) Increase Your Internal Link Count.
17.) Will Increase Your TimeOnPage Duration In SEO.
18.) No External JavaScript File Added.
19.) Keep Your Visitor Engaged In Your Jot Posts.
20.) WordPress Style Adopted.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </head> Code.
7.) Now Copy The Below Code And Paste It Before </head> Code.
<!-- This Is A CopyRight Code Of EXEIdeas.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
/*
Related Post With Thumbnail & Summary In Grid View
Copyright (c) 2013 EXEIdeas International.
*/
var exe_relatedpost_count = 6;
var exe_relatedpost_sum_count = 90;
var exe_relatedpost_data = 0;var exe_relatedpost_title=new Array();var exe_relatedpost_url=new Array();var exe_relatedpost_sum=new Array();var exe_relatedpost_img=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];exe_relatedpost_title[exe_relatedpost_data]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}exe_relatedpost_sum[exe_relatedpost_data]=saringtags(postcontent,exe_relatedpost_sum_count);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="https://lh4.googleusercontent.com/-EXnZN9FauRU/UcRqpwNIMbI/AAAAAAAAGjI/UTUcGgLuG6A/s72/no_image_72x72.jpg"}exe_relatedpost_img[exe_relatedpost_data]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){exe_relatedpost_url[exe_relatedpost_data]=g.link[f].href;break}}exe_relatedpost_data++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function exe_relatedpost_main(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<exe_relatedpost_url.length;u++){if(!contains(v,exe_relatedpost_url[u])){v.length+=1;v[v.length-1]=exe_relatedpost_url[u];w.length+=1;w[w.length-1]=exe_relatedpost_title[u];x.length+=1;x[x.length-1]=exe_relatedpost_sum[u];A.length+=1;A[A.length-1]=exe_relatedpost_img[u]}}exe_relatedpost_title=w;exe_relatedpost_url=v;exe_relatedpost_sum=x;exe_relatedpost_img=A;for(var u=0;u<exe_relatedpost_title.length;u++){var B=Math.floor((exe_relatedpost_title.length-1)*Math.random());var i=exe_relatedpost_title[u];var s=exe_relatedpost_url[u];var y=exe_relatedpost_sum[u];var C=exe_relatedpost_img[u];exe_relatedpost_title[u]=exe_relatedpost_title[B];exe_relatedpost_url[u]=exe_relatedpost_url[B];exe_relatedpost_sum[u]=exe_relatedpost_sum[B];exe_relatedpost_img[u]=exe_relatedpost_img[B];exe_relatedpost_title[B]=i;exe_relatedpost_url[B]=s;exe_relatedpost_sum[B]=y;exe_relatedpost_img[B]=C}var r=0;var D=Math.floor((exe_relatedpost_title.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<exe_relatedpost_count){if(exe_relatedpost_url[D]!=t){q="<li>";q+="<a href='"+exe_relatedpost_url[D]+"' rel='dofollow' target='_blank' title='"+exe_relatedpost_title[D]+"'><img src='"+exe_relatedpost_img[D]+"' /></a>";q+="<a href='"+exe_relatedpost_url[D]+"' title='"+exe_relatedpost_title[D]+"' rel='dofollow' target='_blank'>"+exe_relatedpost_title[D]+"</a>";q+="<span class='exe_relatedpost_description'>"+exe_relatedpost_sum[D]+"</span>";q+="</li>";document.write(q);r++;if(r==exe_relatedpost_count){break}}if(D<exe_relatedpost_title.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
<style type='text/css'>
#exe_relatedpost {float:center;text-transform:none;height:315px;background-color: #f4f4f4; box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset; padding:5px; }
#exe_relatedpost h4{padding: 10px 15px;margin:-5px 0px 5px -5px; font-family: Helvetica, Arial; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 20px; letter-spacing: -1px;color:#333; background: #E4E4E4; border: 1px solid white;width:658px;box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset;}
ul#exe_relatedpost_img_sum {margin:0;padding:0}
ul#exe_relatedpost_img_sum li {list-style:none;padding:5px;margin:0;width:48%;float:left;height:80px;}
ul#exe_relatedpost_img_sum li a{display:block;font-size: 12px;}
ul#exe_relatedpost_img_sum li a:hover{display:block;font-size: 12px;font-weight: bold;}
ul#exe_relatedpost_img_sum li img{float:left;width:72px;height:72px;margin-right:5px;background-color:#e4e4e4;border:3px solid #444}
ul#exe_relatedpost_img_sum li .exe_relatedpost_description {font-size: 11px;}
</style>
</b:if>
<!-- This Is A CopyRight Code Of EXEIdeas.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
8.) Again Press [CTRL+F] To Search The Following Code.
<div class=’post-footer-line post-footer-line-2’/>
<div class=’post-footer-line post-footer-line-3’/>
</div>
</div>
9.) Now Copy The Below Code And Paste It After The Above Code.
<!-- This Is A CopyRight Code Of EXEIdeas.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<b:if cond='data:blog.pageType == "item"'>
<div id='exe_relatedpost'>
<h4>Related Post:</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='exe_relatedpost_img_sum'>
<script type='text/javascript'>exe_relatedpost_main();</script>
</ul>
</div><div style='clear:both'/>
</b:if>
<!-- This Is A CopyRight Code Of EXEIdeas.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
10.) Click “Save Template” And Done.
Customization:
1.) Change 6 To Your Desired Number Of Post. Use Even Numbers…
2.) Change 90 To Your Desired Summary Count But We Suggest Not To Touch This Because It’s Default For 99.99% Blogs.
3.) Change Related Post: With Your Desired Text What You Want To Show As The Widget Heading.
4.) Can Also Change CSS If You Know It Or Simply Contact Us To Do This.
5.) Save And Done.
Last Words:
It’s a Copyrighted code so don’t try to remove HTML comment and as you know that simply we want to share what we have and what we think to be better so hopefully you also liked this widget that is full of features. If you have any quires related to this widget or need extra customization, Just contact us or if you liked this, just leave your views about it in comments. Waiting to see you there…
This is very interesting, I’d like to try and thank you for an interesting tutorial … : D
Welcome Here And Thanks For Liking, Must Leave Your Views About This After Using It…
Why don’t you ever create codes where we can just add it into the CSS stylesheet instead of always having to modify the html code. I centered all my google ads by simply adding a CSS code into the stylesheet.
Actually Everyone Want Different And We Can’t Provide One By One So We Just Share The Common And Simple Procedure. If You Know The Basic, You Can Change It With Your Style.
Thx, it looks awesome! will try out soon! 🙂
Welcome Here And Thanks For Liking This Code, Must Give It A Try On Your Blog…
not working on my blog
Mp3Marathi.in
Because You Are Not Using Our Codes. First Use It Then Comment Here…
i cant find this tag…please help
Search For “post-footer-line” In Your Template Only And Add The Code After 3rd One…
There is only two post footer line and its kind of weird that its repeat two times…
First Add After Second One. If Not Showing, Then Add After First One…
Congratulations for your helpfull website! I applied this related post in my blog successfully but I want to change the color of the six post tiltes from related posts…how can I fix it?
Thank you for your answer! The url of my blog page is:
http://indesnews.blogspot.gr/
I will waiting for your newer answer.
Welcome Here And Thanks For Using. Yes, You Can Change Its Color. Leave Your Blog URL So We Will Tell You After Checking Other CSS Codes…
Success!!! Thanks for the help!
Add The Below CSS in Your Blog And Change The Colour Code…
ul#exe_relatedpost_img_sum li a {color: #ff0000 !important;}
Welcome To Be Here…
I am using this code but with certain adjustment including..
Simple credits
Removed
target='_blank'
on all linksUse my own blank grey image instead of
'No Image Available'
And the followings style adjustments
#exe_relatedpost {text-transform:none;}
#exe_relatedpost h4{font-size:110%;font-weight:bold;padding-top:10px;}
ul#exe_relatedpost_img_sum {margin:0;padding:0;}
ul#exe_relatedpost_img_sum li {list-style:none;margin:0;width:48%;float:left;height:80px;}
ul#exe_relatedpost_img_sum li a{display:block;max-height:72px;overflow-y;hidden;}
ul#exe_relatedpost_img_sum li a:hover{display:block;}
ul#exe_relatedpost_img_sum li img{float:left;width:72px;height:72px;margin-right:10px;}
ul#exe_relatedpost_img_sum li .exe_relatedpost_description {display:none!important;}
Welcome here and thanks for liking our code and sharing the adjustments…