SeORuM: Related

Browsing "Older Posts"

How To Add jQuery Related Posts Widget for Blogger

How To Add jQuery Related Posts Widget for Blogger

Typical Usage #1

To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section. Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

And immediately after it, paste this code:

And now click Save Template

Typical Usage #2

To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.Again, If you already included jQuery into your blog. no need to do it again.

How to Install Related Posts Widget related links at the side column

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

And now click Save

понедельник, 22 июня 2015 г.

Related Posts Widget with thumbnails for Blogger

One of the best way to increase page views and readership is using a related posts plugin. After the huge success of thumbnail realated posts widget by linkwithin, Aneesh developed the same widget using custom code which was indeed more reliable and totally customizable.

Now Like wise Wordpress Blogger Users can also have Related Posts with Thumbnails in Blogspot Blogs.To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.

Related Posts Widget with Thumbnails for Blogger

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

STEP #1

Log in to Blogger -> Layout -> Edit HTMLand select the tick-boxExpand Widget Templates
Then, find (CTRL+F) this code in the template:

And immediately before it, paste this code:



<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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/AVvXsEirMOpGVprfvusdwqR9v9a6HJMWYHBsiTlVcI-tn07suOywFWPHUBiQ5pG8Hl-D38CkMS4lggyspD4kTn9DL-2PbXOH0TGwuUL6fvRzvSxZwXRX1H5pOu1vD2riYNjBE5CIBeTStaRywyJv/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
script>
<script src='http://24work.ucoz.com/24work-blogspot/related-posts/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
b:if>

STEP #2:
Now find this code in the template:

If you cant find it then try finding this one

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


<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/>b:loop>



                            Read more