• Admin
  • Receive an Update

    You are Here in » » How To Make Related Posts To Show On Blogger Mobile View





    How To Make Related Posts To Show On Blogger Mobile View






    After showcasing the redesigned mobile view of Ogbongeblog yesterday when I published "how to make addynamo ads appear on blogger mobile view", I have received mails from some blogspot users, asking me how I make the related posts widget to appear on the mobile view of my blogger blog.





    Well, you can get it done if you've switched to blogger custom mobile template and would be easier for you if you've installed my related posts widget to your blog. All you will just need to do is to carefully add some few lines of code to your blog's html.



    How To Get Started



    ==> Click here to install my related posts widget



    *** Change the width in the css from 350px to 300px; perfect for the screen of most mobile phones.



    ==> If you have not enabled custom mobile template, login to your Blogger dashboard, go to "Template". Under "Mobile", select "Yes. Show mobile template on mobile devices" and choose "Custom" from the "choose mobile template" dropdown box and save your settings.



    ==> Now, we need to find the code for the default mobile share buttons so we can place the related posts gadget directly below it.



    ==> So, back up your template and go to "Template" > "Edit HTML"



    ==> Click inside the HTML and use CTRL F to find <b:if cond='data:top.showMobileShare'>



    ==> Carefully find the ending </div> as seen in the screenshot below









    ==> Directly below it, copy and paste the code below:





    <br>

    <div style='float:left;'>

    <!-- Related Posts with Thumbnails Code Start-->

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div id='related-posts'>

    <font
    face='Arial' size='3'><b>Related Posts:
    </b></font><font
    color='#FFFFFF'><b:loop values='data:post.labels'
    var='label'><data:label.name/><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=5&quot;'

    type='text/javascript'/></b:if></b:loop>
    </font>


    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

    </script>

    </div>

    </b:if>

    <!-- Related Posts with Thumbnails Code End-->

      </div></br>




    ==> Save your template



    ==> View any blog post that has labels and you should see related posts links appearing right below the mobile share buttons.



    Note: If you did not add a label (category) to a post, you might not see the related posts below it.



    Did it work for you? Please, let me hear from you via comments.




    More Articles

    ADSENSE SCRIPT HERE

    Make use of Smilleys Codes

    Contact

    Oyo, Nigeria.

    08053151099

    [email protected]

    Mondays to Saturdays 09:00 - 18:00 (GMT +01:00)

    About

    Azeeztech is a Nigerian-based Tech. support platform where anybody can get free solutions to device issues & questions.

    Azeeztech

    Get notified on FB