Related Videos and Posts Widget with Thumbnails for Video Blogger

If you are a video blogger, if you are doing videos blogging using YouTube, this is exactly what you are looking for: A Related Videos Widget With Thumbnails for Blogger. Actually this is not just a widget only with video thumbnails but with post thumbnails too. Basically it’s a related videos and posts widget with thumbnails for video blogger. So you can say it’s a related video-post hybrid widget or whatever you want. Anyway this is the deal.
If you have embedded a Youtube video as your post this widget can display other related videos or posts which you have categorized in same category with a thumbnail. When selecting a thumbnail it gives the priority to the images you have added to your post, if there is no such then it looks for Youtube videos which you have embedded. If you haven’t added any images or Youtube video, it shows a default thumbnail. It’s mean the main target is using a related posts widget for video blogs but still you can use this with any other blogger blog and no need to worry when you embed a Youtube video as a post occasionally. Not only that, this code is completely ads free and light weight. External JavaScript is hosted by Google Code, so 99.9% uptime Guarantee. Nice, isn’t it?
This is what you have to do:
Log in to Blogger Dashboard. Go to Layout > Edit HTML
(It’s always a very good habit to backup your template before whatever you do. No matter how much you know about it, just backup it first of all.)
If you are using updated Blogger interface click Proceed
Check Expand Widget Templates
Now use keyboard shortcut Ctrl + F and find,

</head>

and replace it with below code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

#fabv_same
{
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#fabv_same div
{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

#fabv_same a
{
color:black;
}

#fabv_same a:hover
{
color:black; 
background-color:#ffccff;
}

</style>
<script src='http://techtweaker.googlecode.com/files/related-videos-with-thumbnails-for-blogger_v1.0.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
var maxrslts = 40;
var brkerclr = "#ff66ff";
var SamePstTtl = "Related Videos";
var nopreview = "https://sites.google.com/site/fpforcodes/nopreviewyet.png"
//]]>
</script>
</b:if>
</head>

Let’s take a break and see what you can change here to adjust the appearance and style of the widget as you want it.
Basically you can change highlighted colors in the CSS code as you wish. Or if you know CSS, it’s OK to play with the style a little bit.
Then you can change:

var maxrslts = 40;

Maximum number of related posts to display in widget.

var brkerclr = "#000000";

Color of the splitter between related posts.

var SamePstTtl = "Related Videos";

Title of the widget.
and,

var nopreview = https://sites.google.com/site/fpforcodes/nopreviewyet.png

Default thumbnail to show.
That’s all editing.
Again use same Ctrl + F and find below line of code

<div class='post-footer-line post-footer-line-1'>

If you can’t find it then try to find this one

<p class='post-footer-line post-footer-line-1'>

If you have changed your template lately, there could be more than just one line. If there are two lines, I suggest you to use the first one. If there are three lines use second. Still can’t figure out? Shoot a comment.
Now immediately after any of those lines paste below code.

<b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'><div id='fabv_same'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &amp;quot;true&amp;quot;'></b:if><script expr:src='&amp;quot;/feeds/posts/default/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=same_kind_labels_thumbs&amp;amp;max-results=40&amp;quot;' type='text/javascript'/></b:loop><script type='text/javascript'>removeSameDuplicates_box();printSameLabels_boxs(&amp;quot;<data:post.url/>&amp;quot;);</script></div><div style='clear:both'/></b:if>

(I say immediately because related posts should appear after the post right away, right? But if you have decided to add some other codes or widgets like Share buttons, it’s ok to add this below them. The most important thing is locate below code where you need to appear related posts.)
That’s it!
Ah, there is one thing I forget to mention. I have added ‘Facebook Like button’ and ‘Google Plus button below every related posts. If you have used Facebook like and Google Plus code in your blog, buttons will automatically appear. If you are not willing to use them or having troubles with them let me know.
And one last this. I developed this code for a video blog and it works great. But in some situations you may have troubles with implementation. If you have any troubles with the widget shoot a comment. If you had trouble and could figure it out be kind enough to tell it too. Because it sure will help to keep the good work up.


Click Here to check a demo site with this widget.


UPDATE:
Thanks to ’3dclassic’ I noticesd some troubles with my bloggertube video blogging templete created by dantearaujo.net . So I made a little change with previouse code and made a new one for bloggertube users. So what you have to do is (only if you are a bloggertube user) simply replace:

http://techtweaker.googlecode.com/files/related-videos-with-thumbnails-for-blogger_v1.0.js

from the 1st code with:

http://techtweaker.googlecode.com/files/related-videos-with-thumbnails-for-blogger_bloggertube_v1.0.js

Then You have to change the location where you paste the second code.Use same Ctrl + F and find something like this. (Just search for “post-footer” you will get the other line right before it.),

<b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'><br /><br /><div class='post-footer'>

Now immediately before those lines paste that second code. Tell me if something went wrong.