LATEST: We are offering PENTESTING and WEB DEVELOPMENT service with low price Learn More

6/17/2013

Add Related Post Without Thumbnils Widget To Blogger

You have heared many about Related Posts With Thumbnail, Many Bloggers dont like it becouse, Many of there posts have no image.So then it look very ugly and un proffesional.So after a hard work i have completed the coding of Related Posts Without Thumbnail Widget For blogger.It looks very beautifull and display posts related ti the same Category or Label.

So lets start, How to add this widget ti your blog.Complete the below steps Carefully.


Step one: Go to Template >> Edit HTML. [In old blogger Go to Design >> Edit HTML] And then click on Expand Widget Template.

Step two: Find </head> and just above it paste the code below.

    <!-- Related Post by www.hacking-articles.blogspot.com !-->
    <style>
    #related-postz { float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 25px; font-weight: bold; font: 18px Arial,sans-serif; margin-bottom: 10px; }
    #related-postz .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
    #related-postz .widget h2, #related-posts h2 {
    font-size: 0.7em;
    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-postz a { text-decoration : none; }
    #related-postz a:hover { text-decoration : underline; }
    #related-postz ul { border : medium none; margin : 10px; padding : 0; }
    #related-postz ul li {
    display : block;
    background : url(&quot;http://smallbusiness.chron.com/favicon.ico&quot;) no-repeat 0 0;
    padding-left : 21px;
    padding-bottom : 1px;
    margin-bottom : 5px;
    line-height : 2em;
    border-bottom:1px dotted #cccccc;
    font-size: 0.7em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    } </style>
    <script src='http://blogfilez.googlecode.com/files/related.js' type='text/javascript'/>
    <!-- Related Post by www.hacking-articles.blogspot.com !-->


Step three: Now again, find <data:post.body/> in your blog template and just below it, paste the below code.

     <!-- Related Post by www.hacking-articles.blogspot.com !-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-postz'>
    <font face='Verdana' size='4'><b>Related Posts:</b></font>
    <b:loop values='data:post.labels' var='label'><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=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
    </script>
    <div align='right' style='font-size:1px'><a href='http://hacking-articles.blogspot.com'>Get This Widget</a></div></div>
    </b:if>
    <!-- Related Post by www.hacking-articles.blogspot.com !-->


Step four: Now click on Save Template and Enjoy!

About Author:

Hi, Its me Aamir Khan, Owner of HACKING ARTICLES. I am an Ethical Hacker, Pro Blogger, addicted Web Developer and Security Researcher with experience in various aspects of Information Security. I am from Pakistan.Hacking is my passion and i wanna myself to be called as a LEGEND in this field.

Follow him @ Twitter | Facebook


0 comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.