Monday, January 13, 2014

Related Posts Widget with Image Thumbnail for Blogger

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 1demo 2demo 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 libraryjQuery 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) -->
<link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />

<!-- jQuery Library (required only once) -->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/>

<!-- jQuery Plugin (required) -->
<script type='text/javascript' src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js'/>
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 --> 
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){
$('#related-posts-widget').relatedPostsWidget();
});
//]]>
</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~-->

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.
  1. If you want it to add to sidebar then go to Dashboard > Page Elements tab and add therequired HTML by adding a HTML/JavaScript gadget.
  2. If you want it below post then go to Edit HTML tab and check “Expand Template Widget”. Find<data:post.body/> and below it and the required HTML. Example:
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML --> 
<div class="related-posts-widget">

<!-- {
thumb_size:'s104-c'
,titles:0
,max_posts:12
,tags:[]
,show_n:4
,animate:'width'
} -->
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

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"'>
Generated required HTML
</b:if>
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.




Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 nhận xét:

Post a Comment

Labels

1 column 2 column 3 column 4 column aaSolah Accessories add button subscrise for blogger Add Digg Button to Blogger add feedburner for blogger add like button facebook to blogger Add Pinterest Pin it Button to Blogger add sitemap blogger to google add stumbleUpon badge to blogger Ads Ready afghan afghan stitch AGULHAS AMIGURUMI Anchor text Ảnh đẹp Ảnh vui Animasi applique Art artikel Árvore de Natal em croche Aulia baby crochet Baby Dress baby knitting Baby learn bag Bags Bài viết BAKTUS Ballet Bun Cover balloons BARRADOS Bayi Bead Beads Bear Ear Hat BEBÊS belts Berita Berry Best WP Theme 2014 Better Blogger Seo Biologi Black blanket Blogal Template Blogger Codex Blogger Images Slider blogger navbar Blogger Rating blogger template 2014 Blogger Templates Blogger Tool Tip Blogger Tutorials Blogger Widgets Blogger-Template Blogspot Blogspot Templates Blue BLUSAS BOINA BOLEROS BOLSAS books BORBOLETAS Bounce Rates bows boxes bracelet Brown Browse Business Butterfly Button Counter Button Facebook CACHECOL CACHECOLAR cake candles candy Candy Cane Cards carving carving fruit carving fruits CASACO INFANTI CASACOS CASAQUINHO EM CROCHE CASAQUINHO EM TRICO CASAQUINHO PARA BEBÊ Cerpen CHAPEU clay COLAR COLAR DE FLORES COLETE coloring Competitor Research Contact Form for Blogger CORDÃO CORUJUINHAS crafts CROCHE COM SAQUINHOS PLASTICOS CROCHE IRLANDES Crochet Crochet Geek crochet pattern cross stitch Curtain customize cutting paper DECORAÇAO Design blogger template Dicionário de Trico - Inglês/Portugues Digg button Dijual Documentation Doily Domain dress dwell time earring ECHARPE Ecommerce Embroidery ENXOVAL PARA BEBÉ ESTOLAS Event Exit Rates facebook facebook button facebook like in blogger facebook share button facebook share button with counter FAIXA PARA CABELOS fashion Favicon for blogger feed rss Felt Fisika Flat News Templates FLORES Flower flower arrangement flowers crochet Folding paper FOLHAS food food decor Foto Free Blogger Templates Free Download Blogger Templates FREE FORM Free Premium frustration Funny Galaxy Stitch Gallery Games garden Gaya Hidup gel grips Geografi gift Gifts Girl glass Go Green GOLINHAS Google Google Analytics Google Merged All Accounts into One google plus button Google SERPs Google Webmaster Tools Google+ Google+ comment GORRO GRÁFICOS Granny Square Gray Green hair clip Haji Hama hats Heart Hexagon hide blogger navbar holiday craft holiday crafts home and garden Hook how to how to add favicon for blogger how to add feedburner How to install flat news how to turn off google plus comment how-to-guides Hunian Iklan Baris Ilmu Pertanian Image Thumbnail for Blogger imam Indexed Quickly for blogspot iNews 2014 Blogger Template Info Kontes Installing Blogger Template Internet Iseng Islam Itunes jewelery jewelry Karma Blogger Template Kata Bijak Kata Mutiara Kesehatan Kewarganegaraan Keyword Research Kiếm tiền kirigami Knit knitting knitting pattern knot Kuliner Landing Page Blogger Templates Lập trình Blogspot Latent Semantic Indexing LEAVES Like button facebook Lirik Lagu LirikNasyid Log Cabin Square LSI LUMINÁRIAS LUVAS LUVINHAS PARA BEBÊ Magazine Magazine Blogger Template make up making flower making flowers Making toys Manta MANTA PARA BEBÊ MANTA PARA SOFÁ Mashable MEUS MOMENTOS MEUS TRABALHOS mittens motif Motivasi Movie Multiples Music Nail art Nature necklace News News blogger template News Google News Pro Blogger Template Nivo image slider Olah Raga On page seo Online store Orange Organik Origami Pagerank painting PANTUFAS PAP Paper Patchwork PELERINE Penyakit Tanaman Peribahasa Personal Phần mềm pictures Pilihan Pillows Pink plastic POLAINA PONCHO Popcorn Popular Posts Popular Posts Code For Blogger Portfolio post automatically to twitter Premium Blogger Teamplates professional blogger templates Profil puff stitch Puisi pumpkin cap QUADRADO Quilling paper Quilt RECEITA RECEITA CULINÁRIA RECEITA DE PONTOS recycle recycling Red redirected to FeedBurner Related Post Widget remove navbar blogger RENDA DE PELO DE CABRA repair work Responsive Blogger Template retweet button ribbon rings rss for blogger rugs SACOLAS SAIAS DE CROCHE SANDÁLIAS EM CROCHÊ SAPATINHOS SAPATINHOS PARA BEBÊ Sastra Scarf scarves search engine optimization Search engine users seo Seo Blogger Template SEO Course Outline Seo For Blogger SEO Friendly Seo in 2014 Seo tips Seo Tutorial Seo Tutorial 2014 Seo With Blogger Serba Info Serba Tips serps sewing share button share twitter button shawls shoes and sandals Simple Singing sitemap blogspot sitemap page skirt Slider for blogspot snood Snowflake soap socks SQUARE steps to design a nice blogger template Strawberry subscrise button SUÉTER sweater Swiffer Sweeper Cover Syahira blogger theme TABELAS DE MEDIDAS DE TRICO E CROCHE tablecloths Tanaman Padi TAPETES. RECEITA Template TENIS PARA BEBÊ Thank you the panda update Thủ thuật Tien Nguyen tip tips Tips and Tricks TOALHAS TOUCAS TOUCAS PARA BEBÊ Travel TRICO Từ điển Blogspot TÚNICA tunisian turn off google plus comment Tutorial Tutorial Blog Tutorial video twitter button Twitter follow button twitter for blogspot underwear Valentine's day Vegeta Blogger Templates Video VÍDEO Video Blogger Templates video tutorial weaving Web 2.0 wedding Wedding Mag what is a bounce What Is Anchor Text what is bounce rate What is Seo White WIDGET Widget For Blogger wood Wordpress Look WordPress Themes XALE Yellow Youtube