Wednesday, March 16, 2011

Related Posts Widget with thumbnails for Blogger

0 comments

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:
</head>
And immediately before it, paste this code:

<!--Related Posts with thumbnails Scripts bdlab.blogspot.com-->
<!-- 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/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='https://sites.google.com/site/bdlab12/javascript123/bdlab-related-posts-with-thumbnails-for-blogger-pro.txt' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts bdlab.blogspot.com-->

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

<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 bdlab.blogspot.com-->
<!-- 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=5&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://bdlab.blogspot.com'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSNkD-7JoTbhE3VhP2LZX5UyMDdY2xbxSeqv76acpbNmZjpirqOEBsEiWHX1nglsjOoy3N2QURm2WkvTFggaoDlWUsv0HpQdmGeZTAlQPeVkVLXDOzyaOA_-47a9INIeCZL7uE-QWa4Q1E/s1600/blogger-widgets.png" /></a><a href='http://bdlab.blogspot.com' ><img style="border: 0" alt="Blogger Templates" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqTFPJLXf7WKzokbM3NEJTFMRdTpMfx7aoNUOOKfzscABcn5qNv_je7oQCw8DFihJKOHuOyURmXH-QJrhHUDK80uIkoQHO30gMdB4bDrmYssi9BhyphenhyphenYttW-p-N-iAjK7BXxPGW9dqxhc86/s1600/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End bdlab.blogspot.com-->



Now Click Save Template

..................................................................................................................................
.......................................................................................................................................
..................................................................................................................................
You can adjust the maximum number of related posts being displayed by editing this line in the code.
var maxresults=5;
To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";
To change the default thumbnail, you can edit this line of code



var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png";

To Change the Colour of the Splitter Line , edit
var splittercolor="#d4eaf2";








Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png Code with The One You Like Bellow

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYixMbgfwqaJVuBlqa-aPYPW8yRkRUHhxLZ1UwH9J1j-mVfJcaI3WRfGflUQxFr4UvYOBh8tkUm0PlXWYYKU-Af7KFhSRzV4wJNgES4nThfWjokfWG3NFXhzPrMr743fD6x0SrvLKPtO16/s1600/no+Image+2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrrA3i8VxhBwfUX_-3YDfu9dvJnRccbSUwVihYYnsmFpPaQlGJSlF7wJ7MzFowMLzQswwhS70YMJGDa5YrNDCyxEugRh2CCLQ3A_Y2DVioCe-XII1Xl3wYRq98tzjbipqqOx8mWKFjJKK/s1600/no+Image+3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk1Zbvvuqw424JitxzT63MMSWjH7-xHy3CfKsotLZ30VEZviMM82JIpLJcuDzv_Y664uJ76fK93iDakNSK72Y-7fUaPQUU0yiulzuv9d2gaquhcZsJyhDqxJyXVx0jryZZiYMTSPIwvuvI/s1600/no+Image+4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKr2Xu4-KWOblUa8JKNgE3-EquKW_R3dGf1QBI7xWW3FYxmqDKctMHlPuS_DYlnS2n6W1tMIgixCkVNts177eCDF8uEaZwRXTduNscVoTZrVQ76_rcR37tEDuaAfY9VC6OcoExrNktIv5/s1600/no+Image+5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67afq_qtUJdkbur_v886HqR3YLejTs3_SAIbowH5uooFp9st6SIAkG2CNSIvYiRwcmEJBIFdekFQy265nLaipGUyx5FRUOpbAWiJUg0P_QqvImAKN28MmOk4yZ075j6ypbxs7Oxb60Jzo/s1600/no+Image+6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicFmQQOGVofdWGp2q_fqhWKFNwScZQZCnvPl4xeLAT-SE5ZRDtEA-39H4VeN0PZG0sbZwP4yKj5G1x60AFluvx2yIlrAjCbhgkLIEpagssu_cddIuxpUCXSxfrIVfrNunHDDCz6EC1g-Mm/s1600/no+Image+7.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0Ihjrs4VQob1h11fY6hsyXBntkbofIS4h7yvFr_Eh2z6SyyxYItnL91TKg1wLptiuDbxB_B0G3tGnAnBnMvR3JujWscu2W1l0IIIENcX8R2EoX60MM4nwAR_PKat3mdZaGoH-HP5ei24/s1600/no+Image+8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWKsL9ZRpSoqO4fNX66fYNMdAZsnfTfrHwL74vFyxxd30PWDtr5-xsPcxVlnVxe-2UKmHhtdMlhZH_rmmOq4bFVGupiratbleKhbi4og3J7Pgqi893mYPOo72TeKKT84ZwgfDIybD5lEs/s1600/no+Image+9.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrqXJaHz3Ro-vwQNpDhMPJN2KGAqRMtOBCr6S6pedn0B1yhQGjTozF83wE6GiBYh90-6Jiv_zlHnUrZN_9_4fCxAtk2VOXGbblURSlfVRDiJdMF53cZYaKNRpifP_Lz1Edo61dg_YqdDb/s1600/no+Image+10.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHx85OmW1ZvsMFami5qRUdGyQMvMRKBlFVnDMog6FFujH8TKs0LyPwGdurMtH2EGUacRC9IXy3Tr_UurKPV4OeyHDdfb3uNCkoMy8odlY25TFkp6iQrt_sxTirsVP0W06K-tkqHPSXesb/s1600/no+Image+11.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUijh3lhoEsNk7mvphDtuqQPkCeZom1fDnlntuq20q3kz5OJtK1yxROqA_HEkjwHQnQcrMmHkdgVMyQrYm1YIPW3lewBUMHhdDKqKJs7Y2DSEdqYCVGY5QZI-UAXZXrKPUmKmSrgYVDHl0/s1600/no+Image+12.png
                         https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU_HMYdhgAkOJuYJCsr7swJRzf4BNXQ8cxwcerzLQhZYQAkb5XAsXhe-l9EMMQXwMcDMo_iFqtNEd6izGDqbWFf_n1-yzP7ATl4O-Ev0CYbNUP39otGCs8ZVCiBCBiwvZ5WlB2X_5Ox04/s1600/no+Image+13.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerHbcv0zQWe329gi2kUthH56BuWxdNDZGoi4SMB0f1e9v3qtkPYCWHxE0EEGz95qjlqcrXBIHTNMzeCjIngh5EqBk_Y187rBvbvfTzOMd_yiJ5vFPSNU6xr5wOOasyMuOJG0-3ZI_qBcY/s1600/no+Image+14.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpUE-ZGBiqBNXi6kryudc4fAAenDdNJn18Hp0poGND4m7jjm9V_RgdZSZV5gkjzBpjCKNS22SNQ9RAs8m7B1j7cRlHoyIAEPod1PFvFSuqp5sH6hDCKHGZ7U-pwxBzmSO9qxtQYfEJaq6D/s1600/no+Image+15.png

Monday, March 14, 2011

Get ip-address widget for your blogger

45 comments
IF you are a webmaster.Isnt it looks cool to show an IP address widget on your blog.If your answer is yes then Your Wish Will BE Completed in 6 Easy Steps.

INSTALLATION INSTRUCTION

   1. copy code from below choose any one.
   2. Login to your dahboard and make your way through
   3. Layout
   4. page elements
   5. Choose a new gadget ,select html/javascript paste the code
   6. click save

1.       
IP
Blogger Widgets
 
<p><span style="text-align:center; display: block;"><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a><br /><small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span></p>
 
 
 



2.            
What's my ip address, create your own visitors IP image
Blogger Widgets
 

<p><span style="text-align:center; display: block;"><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html"><img src="http://www.findmyipaddress.info/myipaddressimg.aspx" alt="What's my ip address, create your own visitors IP image" border="0" /></a><br /><small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span></p>


3.         
IP
Blogger Widgets


<p><span style="text-align:center; display: block;"><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a><br /><small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span></p>

Followers

Blogumulus by Roy Tanck and Amanda Fazani
Free Blogger Tips, Hacks, Widgets, Templates and more