Welcome visitor! Please wait till I load my blog page...

.......

Related Posts Widget For Blogger


Guest Post - By 24work

Related Posts Widget For Blogger / Blogspot with jQuery



  • 17+ Featured Content Slider for Blogger Using jQuery Tutorial


  • Related posts widget is very important for a blog as it increases the number of page views and also help the visitor to view other related posts on the blog.Now here is wonderful hack for displaying links to related posts beneath each of your blog posts.At present there are many types of related post widget like with thumbnails by using Java script Using HTML etc... Here i am going to show a method which is very easy to install.It will show only title of related posts using jQuery.It will look like an image below.



    • Related Posts Widget For Blogger

    Instructions To Follow:
    STEP #1
    Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"




    Then, find (CTRL+F) this code in the template:


    </head>

    And immediately before it, paste this code:


    <!--Related Posts Scripts and Styles www.bdlab.blogspot.com Start-->
    <!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }
    #related-posts .widget{
    padding-left:6px;
    margin-bottom:10px;

    }
    #related-posts .widget h2, #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:blue;
    }
    #related-posts a:hover{
    color:blue;
    }
    #related-posts ul{
    list-style-type:none;
    margin:0 0 0px 0;
    padding:0px;
    text-decoration:bold;
    font-size:15px;
    text-color:#000000
    }
    #related-posts ul li{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKIJoqM0hB1olnFaZ__1EaA6EDA2PuvShBt6V-jJBlGd11_vpgJJX7ADuPrPUiQueeZaRQcXvPbXNYdcbDQy69kRBLuOcK9r8wbfRiB63QyXpYUNd8qCtU3l7hFiotWAy37kSAZXShWw/s200/greentickbullet.png) no-repeat ;
    display:block;
    list-style-type:none;
    margin-bottom: 13px;
    padding-left: 30px;
    padding-top:0px;}
    </style>

    <script type='text/javascript'>
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-for-blogger-24work.js' type='text/javascript'/>

    <!--Remove--></b:if>
    <!--Related Posts Scripts and Styles www.bdlab.blogspot.com End-->


    If you want to change the title of your widget you can edit this line of the above code

    var relatedpoststitle="Related Posts";

    If you want you can edit the blue and black colors present in this code

    2.Now find this line of code


    <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 Code www.bdlab.blogspot.com Start-->

    <!--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>
    <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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://bdlab.blogspot.com'><img style="border: 0" alt="Related Posts Widget for Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEhLBL1HiErWg_Fiw1XL2S9OSv5tVQ5FyKnzkzDqpkthoU4qk1aiuB6cgSaq3IxygwOj1_kXC9np7Fae2NJ6FHF3_QQZ8MpqWCjKkP5knc9gl20A9COpJ_t8xcnZkfrKiNQCRzh0dukGmR/s1600/blogger-widgets.png" /></a>

    <script type='text/javascript'>
    var maxresults=5;
    removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
    </script>
    </div>

    <!--Remove--></b:if>
    <!-- Related Posts Code www.bdlab.blogspot.com End-->



    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;


    Note: If you want to display the Related Posts on every page, then remove the 4 lines of code starting with <!--Remove-->














    How To Add jQuery Related Posts Widget for Blogger 




    Typical Usage #1
    To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section. Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again. 


    Instructions To Follow:
    STEP #1
    Log in to Blogger, go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"

    STEP #2
    Now find (CTRL+F) this code in the template:


    <data:post.body/>


    And immediately after it, paste this code:

    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>



    <script src="http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-widget-1.0-24work.js" type="text/javascript"></script>



    <script type="text/javascript">

    relatedPostsWidget({

    'containerSelector':'div.post-body'

    ,'loadingText':'loading...'

    });</script>


    Now Click Save Template



    Typical Usage #2

    To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.Again, If you already included jQuery into your blog. no need to do it again.


    Instructions To Follow:
    STEP #1
    Log in to Blogger, go to Design ->





    Add a Gadget of HTML/JavaScript type.


    <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-widget-1.0-24work.js" type="text/javascript"></script>
    <script type="text/javascript">
    relatedPostsWidget({
       'loadingText':'loading...'
    });</script>



    Now Click Save

    6 comments:

    1. my friend, can you tell me how can i display a specific number of posts in a label page? The default in blogger is 20 posts and i want to display only 7 pasts per page.
      thank you,
      Deme.

      ReplyDelete
    2. Worked like charm; but may I inquire is this related osts widget in 'label' oriented or 'title' oriented??
      because I ain't able to see nay correlation.
      http://defencedog.blogspot.com/

      ReplyDelete
    3. Thanks for this widget... works very nicely! I have been using the jQuery version, and suggest one improvement. The 'ignore current URL' feature currently does not work if the page is referenced by something other than a 'naked' URL, e.g. via an RSS feed (in which case it is followed by '?parameters'), or via the 'read more' link (in which case it is followed by '#more').

      I have 'fixed' this by using the following code to generate a suitable current URL:

      var currentURL = ((location.href.toLowerCase().split('?'))[0].split('#'))[0];

      This is a bit quick-and-dirty, because it assumes a 'standard' blogger URL, with no '#' or '?' symbols anywhere else in the path, but works fine.

      Cheers, and thanks again for the great tips and code.

      Mark

      ReplyDelete
    4. it's not work in my blog. http://freecall24.blogspot.com/

      ReplyDelete
    5. This blog is really a great which have been helped me a lot to know more information which is really very much interesting.

      ReplyDelete
    6. thnx this is amazing i have applied it on my blog www.careerandtricks.com

      ReplyDelete