Sunday, May 05, 2013
Other than Related Posts Widget With Thumbnails & Summary For Blogger Blog that i'm going to give here, there are also two other related posts widgets that i've written a while ago. The one of those loads no image, no summary, only titles of posts, while the other one is similar to this widget but with a shorter code. Just in case you're interested guys, take a look on these posts: Related Posts Widget Without Thumbnails >> Related Posts Widget With Thumbnails

Back to Related Posts Widget With Thumbnails & Summary For Blogger Blog. This widget takes a realy long enough code, but it's worth it perhaps. The widget is set to load image and summary, and of course the post title too. It's beautifull, and will probably make your blog looks like alive, more than before. Let's get straight down, the code is realy long.

How To Add Related Posts Widget With Thumbnails & Summary To Blogger?



It's never and never will be hard to add a widget on blogger, you only have to find the widget and you'll be all about to find some lines of code in your template, and then put another code around the codes you find. The same with that case, here you are all about to find some lines of code in your template and then put the codes that i give to you around accordingly.

Follow the instructions below to add Related Posts Widget With Thumbnails & Summary to your Blogger Blog.

1. Go to the Edit HTML tab on your blogger
2. Check the "Expand Widget Templates" box
3. Find the closing tag </head> in your template and put the following code right above it:

Copy here


4. Find the closing tag ]]></b:skin> in your template and add the following CSS code above it:

Copy here


5. Find the following code in your template:

<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>

6. Now put the following code in betwen </b:if> and </b:loop> that are red colored in the above code:

Copy here


7. Find the following code in your template:

</b:includable>
<b:includable id='postQuickEdit' var='post'>

8. Add the following code above it:

Copy here


Clue: The code above functions to call the widget, so you can put it wherever around your footer section, <div class="post-footer-line post-footer-line-1> for example

9. Save your changes and well done.

If you get confused of customizing the widget, just go back here, at least you can find which and where have you put the codes exactly. Now have a try..

0 comments:

Post a Comment