Related posts widget is demanding for Blogger users as this help your blog readers to know about your older posts. While there are many widgets available on different blogs, there aren’t many which are more customizable than this one which I will be sharing with you.
Why more customizable? It’s because you will get both Related Posts and Recent Postswidget which can be a link list, link list with image thumbnail or with only thumbnail with popup title, transition effects and above all, it’s fast. This is one of the best widget for Blogger ever made and found on the web.
Mike More of More Tech Tips made this widget by using the awesome feature of jQuery. The installation is also very easy. Let’s start with it.
So first you have to visit easy setup page and choose the options you like to have. To start with live examples, you can visit demo 1, demo 2, demo 3 or demo 4. After selecting the correct options click “Update Demo and Code”.
After generating you will find required scripts and codes under the Code section. There are two parts. First is the jQuery library, jQuery plugin, which will run the related post widget and the CSS. Second is therequired HTML part. Here is an example image, click to enlarge:
Click to view large image To add the first part to Blogger, follow the steps below: Step 1: Go to Dashboard > Page Elements > Edit HTML tab. Step 2: Find ]]></b:skin> tag and below it add the jQuery library and the plugin, which is required, and the CSS files, if needed. Example:<!-- CSS (required if needed) --> If you have previously added the jQuery library then you need not to add another one, just check if it’s latest or not (marked in red) and if not the latest, then you can replace it. If you have selected Widget Loading option to “jQuery method call”, some extra script code will appear in the Code section under Calling widget, example: <!--~~~~~~~~ Calling widget --> This should be added just before closing </head> tag.Step 3: Save your template. Step 4: Adding the second part is easy. You can add it anywhere you like. You can add it to sidebar or within and below post.
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML --> If you have selected Post Pages Only option to No then put the generated required HTML code intoconditional tags. <b:if cond='data:blog.pageType == "item"'> This ensures that it picks up correct related posts. Step 5: Save your template. Notes:To have the thumbnails for your widget, your post images should be hosted on Picasa Web. For Bloggers who don’t know, when you write your post in Post Editor and add images from there, the image gets automatically uploaded to Picasa Web. You can find more detailed options in: If you are having any problem with this related post widget then ask Mr. More on his original post to get better answer. |
0 nhận xét:
Post a Comment