Installing Widget Latest Articles Without Pictures

Updated on June 22, 2016
Recent Post Widget or Latest articles is a widget that will display the latest posts on a website or blog. One optimize your blog become seo friendly is to put this widget recent post. Various types of widget recent post / recent articles, one of which is the recent post widgets that display only the title of the latest articles only.

Author: Namina Kiky

Memasang Widget Artikel Terbaru Tanpa Gambar

By doing so, the widget recent post this time not using thumbnails / picture, posting date and the snippet of an article. So loading your blog or website remains light because not much progress when someone read a particular article.

Well, for those of you who are interested in using a recent post thumbnail and valid HTML5 without this, please follow the tutorial below.

How to Make a Widget Latest Articles (Recent Post) without Thumbnail

Login to blogger.com, dashboar blog entry, then click Layout, in the sidebar click Add a Gadget> HTML / JavaScript, then copy-paste JavaScript code below.

<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script><ul>
<script type="text/javascript">var numposts = 10;var standardstyling = true;</script><script type="text/javascript" src="http://www.iumari.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul>

Note:
Code “var numposts = 10” is the number of recent articles that you want to display www.iumari.com and replace it with the blog url

Then click Save. Only that the manufacture of the latest articles widget has been completed, but it looks still a bit messy. To improve the appearance of the widget recent post, note the following way.

Adjust css below with css template of your blog.

/* Widget Recent Post */
#sidebar3 h4, #sidebar3 h3, #sidebar3 h2{background:#5fb564;color:#fff;text-transform:capitalize;font-family:Arial, Sans-Serif;font-size:135%;font-weight:400;position:relative;padding:12px 0 15px;text-align:center;margin:0}
#sidebar3 .widget-content{background:#fff;padding:0 0 0 10px}
#sidebar3 a:link, #sidebar3 a:visited{font-weight:normal}
#sidebar3 ul li {margin:0 5px 0 0 !important;padding:6px 0 !important;position:relative;border-bottom:1px dashed #d5d5d5 !important}
#sidebar3 ul li:last-child{border:none !important}
#sidebar3 ul li a {font-size:14px !important;font-weight:normal !important;color:#333 !important;text-decoration:none;transition: all 0.3s ease-out 0s !important;line-height:1.4em !important}
#sidebar3 ul li a:hover {color:#6aba82 !important;}

If you only want to display the widget recent post on the post full course (on blogspot), then you need to do is click on the dashboard blog template and click again Edit HTML, then add conditioner tag below.

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

Put like that given arrow in the picture below, do not forget to add a covering (by the arrow purple).

Memasang Widget Artikel Terbaru Tanpa Gambar

After that save the template.
Share this: pinterest