Related Posts utility random avatar

Is probably you who see utility related article gravatar Linkwithin . Feature of this gadget is showing the article related to a topic with avatar and post titles. But one point that I think will cause problems for the most fastidious bloggers, which is associated Linkwithin displayed on the gadget. This is considered a type of advertising. This article about utility related article images represent random (Random Related Posts with Thumbnails) displays four random posts related to a label for the article, including avatars, article title and article summary. A special feature of this utility is: if the article has no avatar will display the default avatar, if the article does not have pictures that represent the labels such as Blogger, CSS, HTML, JavaScript, jQuery, Facebook, Twitter will display the default avatar is assigned available for the label. To install this utility, you follow the following steps. Step 1 . Sign in Blogger, go to Design >> Edit HTML, select Expand Widget Templates. Add the following code before the tag </ head>

/* Random Related Posts with Thumbnails Widget by Huynh Nhat Ha */
< b:if cond='data:blog.pageType == &quot;item&quot;'>
< style type='text/css'>
#rdrelatedposts {}
#rdrelatedposts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Tahoma,Times New Roman,serif;margin:0px 4px 0;margin-top:4px;padding:0 0 5px}}
.relaposts {float:left;height:200px;margin:0 5px;overflow:hidden;padding:5px;text-align:center;width:130px;}
.relaposts:hover {background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');}
.relaposts a {color:#a52a2a !important;display:inline;font-family:Arial;font-size:12px;line-height:1;}
.relaposts img {-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 20px #444 inset;-webkit-box-shadow:0 0 20px #444 inset;box-shadow:0 0 20px #444 inset;height:72px;padding:5px;width:72px;}
.relaposts h6 {display:table-cell;height: 5em;margin:5px 0 0;overflow:hidden;padding-bottom:2px;vertical-align:middle;width:130px;}
.relaposts p {border-bottom:1px dotted #555;border-top:1px dotted #555;color:#AAA;font-size:11px;height:4em;line-height:1;margin:5px 0 0;overflow:hidden;padding:5px 0;text-align:justify;}
< /style>
< script src='http://hacodeproject.googlecode.com/files/randomrelaposts.js' type='text/javascript'/>
< /b:if>

If you knows about CSS, you can adjust some CSS properties in the above code. Note the code on the template is used for post-body section with a width of 600px, depending on the width of the post-body in your template parameters that adjust width: 130px in the code are marked in red in line case.

You should download the file randomrelaposts.js for uploading to host your blog using to avoid bandwidth limitations by sharing files. Step 2 . Find the line <div post-footer-line-3'> class='post-footer-line then precede it with all the code below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
< div id='rdrelatedposts'>
< h2>Bài viết liên quan</h2>
< b:loop values='data:post.labels' var='label'>
< b:if cond='data:label.isLast != &quot;true&quot;'>
< /b:if>
< b:if cond='data:blog.pageType == &quot;item&quot;'>
< script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=100&quot;' type='text/javascript'/></b:if></b:loop>
< script type='text/javascript'>displayrelatedposts();</script>
< /div>
< div style='clear:both;'></div>
< /b:if>

Step 3 . A final but no less important to your success