Tutorial

  • Android
  • Blogger
  • Printer
  • Computer
  • Laptop
  • MedSos
  • Recent Widget Blogger Post with Beautiful Thumbnails

    Recent Post is a new post Widget in a Blog to make it easier for visitors to discover the latest articles. Not only use text but drawing attention can add images. There are many tutorials but sometimes we confusion when we have to edit the HTML inside.

    I've previously shared an article on how to create the latest post Widget in Blogger using images. You can see on the Desktop version the right side of this Blog. Display the Thumbnail or the picture of the box and can look to the list of previous posts without having to open a new one.

    an image


    For this new version, it looks a bit unique and beautiful. The thumbnail image is visible on the right and rounded. For those of you who have installed it in Blogger is quite easy and does not need to go into the Blogger HTML. Please follow the settings below and note the instructions I provide.

    Recent Blogger Post with beautiful thumbnails Widget

    Step 1: Please sign in to the Dashboard Blogger, select Layout and then click Add a Gadget to display on the right side.

    Step 2: Select and click the + sign (HTML/JavaScript)

    Step 3: Write on the Julul "Recent Posts". In the content please fill out the Script I have archived below.
     
    <script src="//cloud.github.com/downloads/jhwilson/Create-a-Blogger-archive-page/Make-Blogger-Archive-Page.js" type="text/javascript"></script>
    <style type="text/css">
    img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
    ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
    ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
    ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
    ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
    ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
    ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
    ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
    .recent-posts-wrap a { text-decoration:none; }
    .recent-posts-wrap a:hover { color: #222;}
    .post-date {color:#e0c0c6; font-size: 11px; }
    .recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
    .recent-post-title {padding: 6px 0px;}
    .recent-posts-details a{ color: #222;}
    .recent-posts-details {padding: 5px 0px 5px; }
    </style>
    <script type="text/javascript">
    function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('
    <li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title">
    <a href="'+r+'" target ="_top">'+i+"</a></div>
    "),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">
    '),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>
    "),document.write("</li>
    ")}document.write("</ul>
    ")}
    </script>
    <script type="text/javascript">
    var posts_number = 5;
    var showpostswiththumbs = true;
    var insidereadmorelink = true;
    var showcomments = false;
    var posts_date = false;
    var post_summary = true;
    var summary_chars = 50;
    </script>
    <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrpwiththumbs"></script>
    <noscript>Your browser does not support JavaScript!</noscript>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet" type="text/css"></link>
    

    Description: For the red text above please change it as you wish. Several posts, show Thumbnail, date or time of post, words or sentences in a post. For the number please change it as it is and to False it is inactive and to activate it please replace True.

    Step 4: Don't forget to Save or save settings.

    Step 5: Finish.

    How easy enough is not to create a Recent Post by adding beautiful and unique thumbnails. Please practice and if you have trouble you can ask in the Comments field
    Want to subscribe to the Latest Post Update Notification? Please Join with Us Berbagi Tutorial Online WhatsApp Grup or Blogger SEO Knowledge On Google News
    Artikel Terkait:
    Help Support this Blog with Like FansPage, Subscribe and Share. If anything is unclear, please leave a message in the comments column
    Comment Now