Related Posts Widget for Blogger with Thumbnails

Related Posts with Thumbnails for Blogger

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box

2.Now look for

</head>

and replace it with

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
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;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnHZ65eOv4sSbt-WX4N1ksyJ6PXT7EG-CvKJvRE8rg77nBE-3pFrT76wqGHyw7hvnKczU8kUYKEZbpPP-d3iZRknndhy5xmDFk3vk4GCTr1HBHAecBO8SrBxd8Wj8K9e18lUW1yhygJp0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Now Find

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

If you cant find it then try finding this one

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

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- 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;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &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'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</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='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

you will also have to edit the posts per label(it should ideally be one more that maxresults)

max-results=6

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

6.To change the default thumbnail, you can edit this line of code

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnHZ65eOv4sSbt-WX4N1ksyJ6PXT7EG-CvKJvRE8rg77nBE-3pFrT76wqGHyw7hvnKczU8kUYKEZbpPP-d3iZRknndhy5xmDFk3vk4GCTr1HBHAecBO8SrBxd8Wj8K9e18lUW1yhygJp0/s400/noimage.png";

7.To Change the Colour of the Splitter Line , edit

var splittercolor="#d4eaf2";

To change the other colours and all you will have to modify the CSS

If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?

Just remove the two lines starting with <!-- remove --> from both step 3 and step 2.

that is lines

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

and

<!-- remove --></b:if>

Reference/Source :  http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html

Read More

How To Add Smart Jquery Featured Slider to Blogger/Websites

This is a another tutorial about, how to add great featured jquery content slider to your blogger blog or other website.Read the instruction given below to add this featured content slider to your blog with in few minutes.Remember to use 307px width and 254px height images for this slider. you can see theDEMO of this slider HERE.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script src='http://makingdifferent.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://makingdifferent.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://makingdifferent.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap:"both",
scroll:2,
animation:"slow"
});
function mycarousel_initCallback(carousel) {
jQuery('#featured-next-button').bind('click', function() {
carousel.next();
return false;
});

jQuery('#featured-prev-button').bind('click', function() {
carousel.prev();
return false;
});
jQuery('.button-nav span').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery('#feature-carousel').jcarousel({
wrap:"both",
scroll:1,
auto:10,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0sgFy9rfGMBkoMNNkcAXZr4bKNrzjqyU7ioCU8V7hx0CepJQSx5mCBcGkK-2_ZcuL7koILKXD_WP7OtvXXB5AcCboQ26olW42D5jBAFieOv5zs5yar1PkF4LF3qvYsmal7mo86TpeAZq/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0sgFy9rfGMBkoMNNkcAXZr4bKNrzjqyU7ioCU8V7hx0CepJQSx5mCBcGkK-2_ZcuL7koILKXD_WP7OtvXXB5AcCboQ26olW42D5jBAFieOv5zs5yar1PkF4LF3qvYsmal7mo86TpeAZq/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>


4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:


<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>




NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9NK7zy04vwOTL-M0XKjmZKFZk-lGYJzDTeQbLxNVeL84UXUn8pbfOMZIOuZKiPwn-ccWPtNh_EVQ7guwavOfQk_56yi3t84jNPsydMhFHgGdibqJLFDcjL6x5RuBfO92v22Ffzb_a15TV/s1600/%2528gj37765.blogspot.com%2529slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikTcVTCGZNjBmaCHkN-PaIQ8eg_AAIS03NIu4MlI-2HaiHcR4UKt5y0BQ9yWCbz8sJq6DYNk77CgZ4r3Xvh2iahD3LC_zfg1lxzpvC2iVErcTC6wEtjAaMkZeA6C2xJr4M7L0VPdE1hrJ-/s1600/%2528gj37765.blogspot.com%2529slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6zV0KwhrDmW5ztkd44mYNmeKxb6Q3fJBVlVKUVVrCicQGmuGGNO8C7NYbEPRcA5BW0m3BU-zf4ia0_uhS3yWDVp5Ii3W8l2z1qf6J84vqHhn7s1-mk7gXpfxbW9vxhhQ05Vn9zEcTAX6/s1600/%2528gj37765.blogspot.com%2529slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC_PpmkCvQ0fG3mOcdPhAB6UkNmouN671sreYHqKgq4o_CWZFCxkwUrFXswZSxjXXvu05J9BP1Fora7ljIUiDeJDCX-QJ7AiyzH-wHZ3TlzphzlABlC13Ll2eEZu0ui3OKpLlpRe1mj7fT/s1600/%2528gj37765.blogspot.com%2529slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTgR6sBxeAL489d97i0HMISiLiRJ3V17dhjzVQicO3MqDDDhSV5m6O8rYgw9jE0f7MGPtO0K0jzxWzANCziE31Nt0kn6wDH0zJoGgxFbLKOQ21JRZttZX_RtbwaozYg-riQzJvMJGy6aNj/s1600/%2528gj37765.blogspot.com%2529slide5.jpg'/></a></li>
</ul>
</div>




Reference/Source : http://gj37765.blogspot.com/2011/03/how-to-add-smart-jquery-featured-slider.html

Read More

How To Add jQuery Link Nudging to Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation


var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements 
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
}, 
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}

//]]>
</script>

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

<ul id="sliding-navigation">

<li class="sliding-element"><a href="#">Link 1</a></li>

<li class="sliding-element"><a href="#">Link 2</a></li>

<li class="sliding-element"><a href="#">Link 3</a></li>

<li class="sliding-element"><a href="#">Link 4</a></li>

<li class="sliding-element"><a href="#">Link 5</a></li>

<li class="sliding-element"><a href="#">Link 6</a></li>

<li class="sliding-element"><a href="#">Link 7</a></li>

<li class="sliding-element"><a href="#">Link 8</a></li>

<li class="sliding-element"><a href="#">Link 9</a></li>

<li class="sliding-element"><a href="#">Link 10</a></li>

</ul>

You are done.

 Demo

Source/Reference :  http://gj37765.blogspot.com/2011/03/how-to-add-jquery-link-nudging-to.html

Read More