If you want to look at the earlier versions of the related posts widget posted on my blog, then visit the following links
- Related Posts widget for blogger (based on Labels)
- New Stylish Related Posts For Blogger Blogs(older version).
Take a look at the demo (or) screen shot below to preview the widget.
Are you excited with the widget shown above??? Want to add this to your blog, then just follow the steps mentioned below.
How To Add Related Post Widget
1.Please create a back up of your template before you install this widget.To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.
2. Now, we are going to add the CSS part for this widget. Search for the following line in your template.
]]></b:skin>
3. Copy the following code and paste it just above the line mentioned in step2.<!--start related posts css Info : http://www.blogtipsntricks.com-->
#btnt-rp { -moz-background-inline-policy:continuous; background: none repeat scroll 0 0 #F2F2F2; border: 1px solid #CCCCCC; float:left; font-family:arial; font-size:12.2px; margin:0 0 40px ; padding:14px 0 12px 25px; width:550px; height: 220px; display: inline; }
#btnt-rp h3 { color:#000000; font-size:13px; margin-bottom:3px; margin-top:4px; font-weight:bold; }
.hidden { display:none;}
.social-bookmarks { float:left; display: inline; margin:0 20px 0 0; padding-left:0; padding-top:0; text-align:left; width:40%; border-right: 1px solid #CCCCCC; }
ul.blogtipsntricks-social { list-style:none; margin:0;display:inline-block; }
ul.blogtipsntricks-social li { display:inline; float:left; padding:5px; background-repeat:no-repeat; }
ul.blogtipsntricks-social li a { display:block; width:48px; height:48px; position:relative; text-decoration:none; }
ul.blogtipsntricks-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.blogtipsntricks-social li.blogtipsntricks-facebook { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-facebook.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-twitter { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-twitter.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-googlebuzz { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-googlebuzz.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-stumbleupon { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-stumbleupon.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-digg { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-digg.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-delicious { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-delicious.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-linkedin { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-linkedin.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-reddit { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-reddit.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-technorati { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-technorati.png"); }
#blogtipsntricks-cssanime:hover li { opacity:0.2; }
#blogtipsntricks-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#blogtipsntricks-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#blogtipsntricks-cssanime li:hover { opacity:1; }
#blogtipsntricks-cssanime li:hover a strong { opacity:1; top:-10px; }
.related-posts { float:left; margin:0; padding-left:0px; padding-top:0; text-align:left; width:48%; }
ul#related-posts{ font-family:Helvetica,Arial,sans-serif !important; font-size:10px !important; list-style: none !important; padding: 0 !important; text-transform: none !important; }
ul#related-posts li{ float: left !important; height: auto !important; margin:5px 5px !important; padding: 2px 1px 4px !important; }
*html ul#related-posts li{ margin:0 13px !important; }
ul#related-posts li a { -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; border: 2px solid #FFFFFF !important; display: block !important; height: 72px !important; position: relative !important; width: 72px !important; }
ul#related-posts li a { color: #474C51 !important; text-decoration: none !important; text-shadow: 0 1px 0 #FFFFFF !important; }
ul#related-posts li .overlay { height: 66px !important; line-height: 14px !important; padding:6px 0 0 6px !important; position: absolute !important; width: 66px !important; z-index: 10 !important; }
ul#related-posts li a:hover .overlay { background: #fff !important; display: block !important; opacity:0.9 !important; }
ul#related-posts li img { bottom: 0 !important; padding:0px !important; }
ul#related-posts li a:hover { -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; }
<!--end related posts css.Info : http://www.blogtipsntricks.com-->
#btnt-rp { -moz-background-inline-policy:continuous; background: none repeat scroll 0 0 #F2F2F2; border: 1px solid #CCCCCC; float:left; font-family:arial; font-size:12.2px; margin:0 0 40px ; padding:14px 0 12px 25px; width:550px; height: 220px; display: inline; }
#btnt-rp h3 { color:#000000; font-size:13px; margin-bottom:3px; margin-top:4px; font-weight:bold; }
.hidden { display:none;}
.social-bookmarks { float:left; display: inline; margin:0 20px 0 0; padding-left:0; padding-top:0; text-align:left; width:40%; border-right: 1px solid #CCCCCC; }
ul.blogtipsntricks-social { list-style:none; margin:0;display:inline-block; }
ul.blogtipsntricks-social li { display:inline; float:left; padding:5px; background-repeat:no-repeat; }
ul.blogtipsntricks-social li a { display:block; width:48px; height:48px; position:relative; text-decoration:none; }
ul.blogtipsntricks-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.blogtipsntricks-social li.blogtipsntricks-facebook { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-facebook.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-twitter { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-twitter.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-googlebuzz { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-googlebuzz.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-stumbleupon { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-stumbleupon.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-digg { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-digg.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-delicious { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-delicious.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-linkedin { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-linkedin.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-reddit { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-reddit.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-technorati { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-technorati.png"); }
#blogtipsntricks-cssanime:hover li { opacity:0.2; }
#blogtipsntricks-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#blogtipsntricks-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#blogtipsntricks-cssanime li:hover { opacity:1; }
#blogtipsntricks-cssanime li:hover a strong { opacity:1; top:-10px; }
.related-posts { float:left; margin:0; padding-left:0px; padding-top:0; text-align:left; width:48%; }
ul#related-posts{ font-family:Helvetica,Arial,sans-serif !important; font-size:10px !important; list-style: none !important; padding: 0 !important; text-transform: none !important; }
ul#related-posts li{ float: left !important; height: auto !important; margin:5px 5px !important; padding: 2px 1px 4px !important; }
*html ul#related-posts li{ margin:0 13px !important; }
ul#related-posts li a { -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; border: 2px solid #FFFFFF !important; display: block !important; height: 72px !important; position: relative !important; width: 72px !important; }
ul#related-posts li a { color: #474C51 !important; text-decoration: none !important; text-shadow: 0 1px 0 #FFFFFF !important; }
ul#related-posts li .overlay { height: 66px !important; line-height: 14px !important; padding:6px 0 0 6px !important; position: absolute !important; width: 66px !important; z-index: 10 !important; }
ul#related-posts li a:hover .overlay { background: #fff !important; display: block !important; opacity:0.9 !important; }
ul#related-posts li img { bottom: 0 !important; padding:0px !important; }
ul#related-posts li a:hover { -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; }
<!--end related posts css.Info : http://www.blogtipsntricks.com-->
4. Expand your template, that is, make sure you have a tick mark in box next to "Expand Widget Template". Now, search using "CTRL+F" for the following line:
<div class='post-footer'>
(or)
<div class='post-footer-line post-footer-line-1'/>
(or)
<div class='post-footer-line post-footer-line-2'/>
(or)
<div class='post-footer-line post-footer-line-3'/>
5.Copy the code below. Paste the code just below the line you searched in step4.(or)
<div class='post-footer-line post-footer-line-1'/>
(or)
<div class='post-footer-line post-footer-line-2'/>
(or)
<div class='post-footer-line post-footer-line-3'/>
<!--start related posts code Info : http://www.blogtipsntricks.com-->
<b:if cond='data:blog.pageType == "item"'>
<div id='btnt-rp'>
<div class='social-bookmarks'>
<h3>What's Next?</h3>
<ul class='blogtipsntricks-social' id='blogtipsntricks-cssanime'>
<li class='blogtipsntricks-facebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='blogtipsntricks-twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='blogtipsntricks-googlebuzz'>
<a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
</li>
<li class='blogtipsntricks-stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='blogtipsntricks-digg'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='blogtipsntricks-delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='blogtipsntricks-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='blogtipsntricks-reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='blogtipsntricks-technorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</div>
<div class='related-posts'>
<h3>Other Recommended Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://lh3.googleusercontent.com/_FQCCkMjyvSA/TWoCU9DxctI/AAAAAAAAAHk/ZW-sgbYYWBs/thumb_missing.jpg";
var maxresults=6;
</script>
<script src='http://yourjavascript.com/20110210123/related_post_with_hover.txt.js' type='text/javascript'/>
<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=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</div>
</b:if>
<!--end related posts code Info : http://www.blogtipsntricks.com-->
6. That's it!!! Save your template. View the widget on your post pages.<b:if cond='data:blog.pageType == "item"'>
<div id='btnt-rp'>
<div class='social-bookmarks'>
<h3>What's Next?</h3>
<ul class='blogtipsntricks-social' id='blogtipsntricks-cssanime'>
<li class='blogtipsntricks-facebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='blogtipsntricks-twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='blogtipsntricks-googlebuzz'>
<a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
</li>
<li class='blogtipsntricks-stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='blogtipsntricks-digg'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='blogtipsntricks-delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='blogtipsntricks-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='blogtipsntricks-reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='blogtipsntricks-technorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</div>
<div class='related-posts'>
<h3>Other Recommended Posts</h3>
<script type='text/javascript'>
var defaultnoimage="https://lh3.googleusercontent.com/_FQCCkMjyvSA/TWoCU9DxctI/AAAAAAAAAHk/ZW-sgbYYWBs/thumb_missing.jpg";
var maxresults=6;
</script>
<script src='http://yourjavascript.com/20110210123/related_post_with_hover.txt.js' type='text/javascript'/>
<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=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</div>
</b:if>
<!--end related posts code Info : http://www.blogtipsntricks.com-->
Note: You need to view the post pages to view the widget. That is, click on any of the posts in your blog to view the final result. You cannot find them on the home page of your blog.
I hope you enjoyed this post and the widget as well!!! Please share your views about the widget via comments!!! We love to here from you. More over, you gain backlinks for your comments :)
Thank you very much for this awesome widget. The relevancy of posts being showed is amazing (compared to the other widget I used previously).
ReplyDeleteI did some modifications and I only use the related posts, without the bookmarking buttons. And may I ask something. Is is possible to resize the thumbnails? I've tried some tweaks on the CSS code, but it didn't work. Any clue will be much appreciated.
BTW, if you need to look at the widget I placed, here is the link to my site MahaCopia.
Thanks. :)
@BruNo BurNed
ReplyDeleteYou can change the image size in the javascript file.
Here I have already changed the image size in the below js code. Just replace the javascript code in the widget with this code.
<script src='http://yourjavascript.com/32320214123/related_post_with_hover.js' type='text/javascript'/>
This .js file will change the image size to 100px
Then you have set the image css as
ul#related-posts li img {
bottom: 0 !important;
height: 120px;
padding: 18px !important;
width: 120px;
}
you have to replace the above piece of code with this code.
ul#related-posts li img {
bottom: 0 !important;
padding: 5px !important;
}
Now your widget image will work correctly.
I hope this will help you. Thanks for commenting.
Sweet! It works perfectly.
ReplyDeleteThanks a lot, mate. That's really a big help.
@BruNo BurNed
ReplyDeleteYou are welcome :)
Hi. I have got a problem. My related posts are going vertical, can you help me how to make them horizontal? Which part of script do I need to change?
ReplyDeleteThanks a lot.
same problem with me also ............
Deletetry to do something
http://studytipsandtricks.blogspot.in
@Cantiq
ReplyDeleteI want to know the url of the webpage you added the widget.
Then I can fix the error.
Thanks for commenting :)
looks some error in css coding...
Deletefix this problem...
Hi thanks for tutorial. I want to use related post only with large thumbnail image. can you send me the code, because i m not expert in coding. my site address is http://www.vidzpro.com
ReplyDeletekindly email me the code at vidzprohd@gmail.com
hello :) there are a problem with this gadget in my template .. can you help me ..
ReplyDeletemy e-mail : goy.man.mia@gmail.com
Somehow the social bookmark icons won't fit with the box. Please e-mail me. armanddc@gmail.com I really need your help.
ReplyDeleteE-mail sent check your inbox...
DeleteThanks :)
ReplyDeletewww.hitadam.com
I found two same HTML codes (step 4) in my template where i have to place the codes then.. Pls help me..
ReplyDeleteYou can place this code below on any one of the 4 codes you searched in step 4.
DeleteThis question is out of this post.. but can u help me out.. i'm unable to view more posts on other pages except first page can u help me out.. pls.. this is my link http://hdwallpapersthemes-pc.blogspot.in/search?updated-max=2012-10-13T23%3A06%3A00-07%3A00&max-results=4#PageNo=3
ReplyDeleteBy seeing your blogs home page I can understand you want to show 10 posts per page. To make it follow the steps below. :)
DeleteGo to Your blog template HTML page now search for this code
var postperpage=4;
Replace the No 4 with 10 and save your template.
Now you can see your post pages that shows 10 posts per page. :)
Thank You Very Much..
DeleteI only see thumbnails for my related posts. Can I get thumbnails and post titles under the thumbnail?
ReplyDeleteActually, you know what would be better? The post title showing up when the mouse is hovered over the image. You know, like img src="whateverpicture.jpg" title"Post Title shows when hovering over image"
Delete:)
Yes, you're right the title of the post has been shown when hovering the image. :)
DeleteCan u make them to show the title of the post by hovering the mouse over the image or else under the image.. Can u help me out..
ReplyDeleteIt's already designed to show the title when hovering the image. :)
DeleteJust See the demo given in the article.
U r great Man.. :) Thank u very much..
Deleteyou're welcome. :)
DeleteIt's not working for me. Why aren't the titles showing up? Here's my blog: http://costumingdiary.blogspot.com/
ReplyDeleteI'm only using the second part (related posts) part of your code.
Okay, I know what I did wrong. I didn't add this css code:
Deleteul#related-posts li .overlay { height: 66px !important; line-height: 14px !important; padding:6px 0 0 6px !important; position: absolute !important; width: 66px !important; z-index: 10 !important; }
ul#related-posts li a:hover .overlay { background: #fff !important; display: block !important; opacity:0.9 !important; }
ul#related-posts li img { bottom: 0 !important; padding:0px !important; }
ul#related-posts li a:hover { -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; }
Thanks so much for responding and for providing this script. You are made of awesome.
Thanks. That's my pleasure. :)
DeleteENGLISH
ReplyDeletehi i have installed this widget on 2 of my blogs would most like to know how to change the button for Google Buzz Google Buzz plus since died here in Brazil.
PORTUGUÊS
oi eu já instalei este widget em 2 dos meus blogs mais gostaria de saber como fazer para trocar o botão do Google Buzz pelo do Google plus uma vez que Buzz morreu aqui no Brasil.
Hi you Want to Replace the Google buzz button with Google plus button.
DeleteTo make it follow the instructions given below.
In the widget code search for
http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-googlebuzz.png
And Replace it with
http://i1203.photobucket.com/albums/bb382/chandeep10/plus-icon-48x48_zpsfcef1dbb.png
Then search for the following code
<a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
And replace the it with
<a expr:href='" http://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+'><strong>Google plus</strong></a>
Now Save your code. That's all ;)
i can't do like that, it's not working :(
ReplyDeletehttp://www.elines.vn/ve-may-bay-di-thanh-hoa.aspx
It's happen to me, the related post is not showed on my blog, Can u help me.. plz
ReplyDeletelook the preview http://pelajar-premium.blogspot.com/2013/07/menambahkan-sitemap-responsive-widget.html
How can I get the images to display at 150x150 instead of 72x72?
ReplyDeleteIn the widget code search for http://yourjavascript.com/20110210123/related_post_with_hover.txt.js
DeleteNow in this javascript file search for 72px two times then replace it with 150px
I tried that before I contacted you. All it does is enlarge the image to 150px, but keeps the same pixelation as the 72px.
DeleteI want the url to have the 150 in it so the image doesn't get blurry when expanded: "..../s150-c/....."
There is a script that can change the source url from s72-c to s150-c, but I don't know enough javascript to be able to use it with your script. I know it can be done, as I use the script for my label pages. Here's where I got it:
http://www.bloggerplugins.org/2011/09/post-thumbnails-for-blogger.html
It's the third gray box down.
Oops!! Sorry I forget to mention about the CSS. You have the edit the size of the thumbnail in CSS along with the JavaScript.
DeleteTo make it search for ul#related-posts li a below that change the height and width :)
Thanks...
Hm, that just stretches a 72px image to 150px. The image is blurry. What I want is the resulting image that shows is 150px to begin with.
DeleteI'd like the script to call, for example, https://lh4.googleusercontent.com/-BXiE6_YDChQ/Uc7p6d0gHWI/AAAAAAAAFw8/pClp2tKmKzM/s150-c/sewing-tools-organizer.JPG instead of https://lh4.googleusercontent.com/-BXiE6_YDChQ/Uc7p6d0gHWI/AAAAAAAAFw8/pClp2tKmKzM/s72-c/sewing-tools-organizer.JPG
I know this can be done (see link in my prior post), as I use it for my label pages, but I don't know enough about javascript to change the code on the related posts script.
This comment has been removed by the author.
ReplyDeleteThank you.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteit's not working
ReplyDeleteI'm using your Zett template, but I can't get this to work.
ReplyDelete