Auto Slide Up 'Recommended Post For You' Widget For Blogger

Auto Slide Up 'Recommended Post For You' Widget For Blogger

    Live Demo

    Hello Friends We Are Back With Another Trending And Very Useful Widget For Blogger i.e. Auto Slide Up 'Recommended Post For You' Widget For Blogger & Popularly Known as You Might Also Like Widget. We have Added Many Great Features To this widget to make it look Beautiful and work Faster.

    Features of Recommended Post For You Widget:

    1. This Will Not Take Any Extra Space in Your Post Area
    2. This Widget Will Only Appear When the Reader/User Scroll Down Half the page.
    3. This Widget Will Hide Automatically When User Scroll Up The Page.
    4. This Will Show The Random Post From Your Blog to the user
    5. It is attractive and make your site or blog more professional.
    6. This Widget Will Only Appear in Posts Pages.
    7. This Widget Will Show Title, Thumbnail And Description of Post.

    ChangeLog for Recommended Post For You Widget:

    1. Added Close Button So That User Can Close The Widget.
    2. Duplicates Posts Displaying Issue Resolved
    3. Added Background Image To The Widget

    We Have Styled This Widget in Such a Way That It Looks More Official and Beautiful. We Checked in Many Templates This Widget Works Very Smoothly. Recommended post Widget Will Work Similar To Random Posts Widget But Here It Showcase only One Post From any Category or Label You Assigned.

    After A Lot of Hard Work and Tweaking Few Things We have Created this Widget For our Users So that They Can Add It and Increase User Engagement. 

    Benefits of Using Recommended Post For You Widget:

    We Can Get Many Benefits From This Widget as Many Blogs Does Not Have User Interaction. So From This Widget The Blog Will Recommend Related Post To Users This will increase Internal Linking as well as User Interaction will also increase So Bounce Rate Will Decrease When Bounce Rate Decreases This Shows Users are Spending Much Time In Your Site And When Pageviews Increases Ranking Also Improves.

    But Adding This Widget is little Tricky But We Will Guide You. Lets Start.

    First We Will Add The Styling( CSS ):

    STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard


    STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

    STEP 3: Click On Edit HTML.

    STEP 4: After Clicking on Edit HTML Search for

    Template Code

    STEP 5:  Copy This Below Code Before ]]></b:skin>

    /* Start Recommended Post Widget By */

    .ABT_Recommended_widget_Wrap {
                width: 300px!important;
                box-sizing: border-box;
                position: fixed;
                bottom: 10px;
                right: 0px;
                z-index: 99989658;
                background: rgb(183, 35, 61) url('');
                border-top: 4px solid rgb(54, 88, 156);
                font-family: 'Oswald', sans-serif;
            .ABT_Recommended_widget_Wrap .ABT_Recommended_widget_Inner_Wrap {
                padding: 10px;
                overflow: hidden;
            .ABT_Recommended_widget_Wrap img {
                width: 100%!important;
                max-height: 200px;
                border-radius: 5px;
            .ABT_Recommended_widget_Wrap .ABT_Widget_Title h2 {
                font-size: 18px;
                text-decoration: none;
                text-transform: capitalize;
                word-break: break-all;
            .ABT_Recommended_widget_Wrap .ABT_Widget_Title h2 a, .ABT_Small a {
                text-decoration: none;
                text-transform: capitalize;
                color: rgb(54, 88, 156);
                font-family: 'Oswald', sans-serif;
            .ABT_Widget_Close_Button span {
                position: absolute;
                left: 0;
                top: 0;
                padding: 1px 8px 3px;
                background: rgb(54, 88, 156);
                color: #FFF;
                font-size: 19px;
                cursor: pointer;
            .ABT_Recommended_widget_Wrap {
                display: none;
            .ABT_Widget_Close_Button h3 {
                display: inline-block;
                margin: 30px 0px 5px 0px;
                color: rgb(54, 88, 156);
                font-family: 'Oswald', sans-serif;
            .ABT_Widget_Snippet {
                font-size: 16px;
                line-height: 1.2em;
                font-size: 14px;
                text-decoration: none;
                text-align: right;
    /* End Recommended Post Widget By */

    STEP 6:  All Done Save the template.

    [II] We Will Add Markup ( HTML):

    STEP 1:  Go To Template Section As Shown in The Image Below

    STEP 2:  Now Search for (Search by Pressing CTRL + F) 


    You Will Find This Code 3 Times or more in your Template So Refer 2nd or 3rd Time.

    STEP 3:  Copy This Below Code After <data:post.body/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    &lt;div class=&#39;ABT_Recommended_widget_Wrap&#39; id=&#39;ABT_Recommended_widget_Wrap&#39;&gt;

    <script type='text/javascript'>   
    var ListCount = 1;var RandomArray = [];var TotalPosts = 0;
    function TotalCount(json) {TotalPosts = json.feed.openSearch$totalResults.$t;}
    document.write(&#39;&lt;script type=\&quot;text/javascript\&quot; src=\&quot;;callback=TotalCount\&quot;&gt;&lt;\/script&gt;&#39;);
    function GenerateNum() {
                for (var i = 0; i &lt; ListCount; i++) {
                    var RandomNum = Math.floor(Math.random() * (TotalPosts) + 1);
                    RandomArray[i] = RandomNum;}}
    function trendingWidgets(json) {
                var pageNum, thumbnail, trueThumbnail;
                var ul_list = document.getElementById(&#39;ABT_Recommended_widget_Wrap&#39;);
                for (var a = 0; a &lt; 1; a++) {
                    for (var b = 0; b &lt; json.feed.entry[a].link.length; b++) {
                        if (json.feed.entry[a].link[b].rel == &#39;alternate&#39;) {
                    var get_url = json.feed.entry[a].link[b].href;
                    var get_label = json.feed.category[a].term;
                    if (json.feed.entry[a].link !== null) {
                        var ListTitle = json.feed.entry[a].title.$t;}
                    if (json.feed.entry[a].media$thumbnail.url !== null) {
                        thumbnail = json.feed.entry[a].media$thumbnail.url;
                        var trueThumbnail = thumbnail.replace(&quot;?imgmax=800&quot;, &quot;&quot;);
                        trueThumbnail = trueThumbnail.replace(&quot;s72-c&quot;, &quot;&quot;);
                    } else if (json.feed.entry[a].content.match(/src=(.?[\.jpeg|\.jpg|\.gif|\.png])/) !== null) {
                        trueThumbnail = json.feed.entry[a].content.match(/src=(.?[\.jpeg|\.jpg|\.gif|\.png])/)[1];
                    } else {
                        trueThumbnail = &quot;&lt;span id=&#39;no-image&#39;&gt;No Thumbnail&lt;/span&gt;&quot;;}
                    var newContent = json.feed.entry[a].summary.$t;
                    var theContent = newContent.replace(/(&lt;([^&gt;]+)&gt;)/ig, &quot;&quot;).substr(0, 80);
                    var listing = "<div class='ABT_Widget_Close_Button'><span title='Close Button'>Close</span><center><h3 style='text-align: center'>You Might Also Like</h3></center></div><div class='ABT_Recommended_widget_Inner_Wrap'><div class='ABT_Widget_Thumbnail'><a href='" + get_url + "'><img src='" + trueThumbnail + "' alt='" + ListTitle + "' title='" + ListTitle + "'/></a></div><div class='ABT_Widget_Title'><h2><a href='" + get_url + "'>" + ListTitle + "</a></h2></div><div class='ABT_Widget_Snippet'>" + theContent + "</div><div class='ABT_Small'><a href=''>Get This Widget</a></div></div>";
                    ul_list.innerHTML += listing;}
                $(document).ready(function() {
                    $(&#39;.ABT_Widget_Close_Button span&#39;).on(&#39;click&#39;, function() {
                        $(&#39;#ABT_Recommended_widget_Wrap&#39;).animate({right: &#39;-550px&#39;}, &#39;slow&#39;, function() {
                            $(this).css(&#39;display&#39;, &#39;none&#39;);});});
                    var height = $(document).height() / 2;
                    $(window).on(&#39;scroll&#39;, function() {
                        if ($(document).scrollTop() &gt; height) {
                            $(&quot;.ABT_Recommended_widget_Wrap&quot;).slideDown(&quot;slow&quot;).css({right: &#39;0px&#39;});} else {
                                right: &#39;-550px&#39;});}}); }); }
    <b:if cond='data:top.showPostLabels and data:post.labels'>
        <b:loop index='i' values='data:post.labels' var='label'>
            <b:if cond='data:i == 0'>
           for (var i = 0; i &lt; ListCount; i++) {
                var blogLink = "";
                var callScript = document.createElement(&quot;script&quot;);
                callScript.src = blogLink + &quot;/feeds/posts/default?alt=json-in-script&amp;start-index=&quot; + RandomArray[i] + &quot;&amp;max-results=1&amp;callback=trendingWidgets&quot;;
                var latest_posts_new = document.getElementById(&#39;ABT_Recommended_widget_Wrap&#39;);

    STEP 4:  All done save the template and Open Your Post and Scroll Down Half The Way To See This Widget Working.


    • The Orange Highlighted Text Represents the URL Of The Blog. So Add Your Blog URL Starting With http and don't add the Slash at the end.


    Finally You have Added The Widget in Your Blog. And In our Upcoming Post We Will Share Related Recommended Post Widget. This Widget Will Work Similar To This But THe Difference is That This Will Generate Random Posts but That Widget Will Fetch Related Post.

    And those who have added this widget successfully without any hurdles congrats to them. and if you want any styling or improvement to this recommended widget notify us we will try to add it for you.

    That's It Thanks For Following our Tutorial '' Auto Slide Up 'Recommended Post For You' Widget For Blogger '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

    Incoming Search Terms:


    1. This comment has been removed by the author.

    2. This comment has been removed by the author.

      1. What Problems are you facing? we will try to resolve your problems. In HTML5 There is no need to close the img element it is also called void element because img does not contain any child elements.

    3. This comment has been removed by the author.