Here’s an easy way to make a cool and responsive recent post

Here’s an easy way to make a cool and responsive recent postRecent Post is a widget that displays the latest articles on the blog, the appearance of this widget is cool and definitely does not make loading the blog heavy and long, this widget is also equipped with thumbnail images that are ok so that it adds to the beauty of the widget.

If you want to install this widget like the picture on the side, please just follow the tutorial steps below:

How to Make Cool Recent Posts on Blog

1. Login to blogger
2. Go to Layout => add gadget => HTML/javascript
3. Please Copy Paste the script below into the available column

font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
background:white url(‘Data: image / gif; base64, R0lGODlhEAAQAPYAAP /// wAAANTU1JSUlGBgYEBAQERERG5ubqKiotzc3KSkpCQkJCgoKDAwMDY2Nj4 + Pmpqarq6uhwcHHJycuzs7O7u7sLCwoqKilBQUF5eXr6 + vtDQ0Do6OhYWFoyMjKqqqlxcXHx8fOLi4oaGhg4ODmhoaJycnGZmZra2tkZGRgoKCrCwsJaWlhgYGAYGBujo6PT09Hh4eISEhPb29oKCgqioqPr6 + vz8 / MDAwMrKyvj4 + NbW1q6urvDw8NLS0uTk5N7e3s7OzsbGxry8vODg4NjY2PLy8tra2np6erS0tLKyskxMTFJSUlpaWmJiYkJCQjw8PMTExHZ2djIyMurq6ioqKo6OjlhYWCwsLB4eHqCgoE5OThISEoiIiGRkZDQ0NMjIyMzMzObm5ri4uH5 + fpKSkp6enlZWVpCQkEpKSkhISCIiIqamphAQEAwMDKysrAQEBJqamiYmJhQUFDg4OHR0dC4uLggICHBwcCAgIFRUVGxsbICAgAAAAAAAAAAAACH / C05FVFNDQVBFMi4wAwEAAAAh / hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh + QQJCgAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD + CBQ0UsQA7RYIGDhWxN0E + ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh + QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyN EkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM + t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc + DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkECQoAAAAsAAAAABAAEAAAB4 + AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN / QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh + QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI / 1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo + hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje / QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkECQoAAAAsAAAAABAAEAAAB4iAAIKDhIWFNz0 / Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczr JBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAkKAAAALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAA ‘) no-repeat 50% 50%;
background-color:white;
border-bottom:1px solid #ddd;
#dte_recent-post li a img {
#dte_recent-post li a.title {
#dte_recent-post li a.title:hover {
text-decoration:underline;
#dte_recent-post li span.foot {
<ul id=“dte_recent-post”>ul>
var rp_homePage = http://ulr-sobat here.blogspot.com, // Your blog homepage
rp_numPosts = 5, // How many posts?
rp_thumbWidth = 72, // Thumbnail widths. Change to 0 if you want to disable the post thumbnail
rp_numChars = 100, // Number of posts summary
rp_sortByLabel = false, // Replace `false` with your specific label name to display posts by specific label
// Example: rp_sortByLabel = “JQuery”, to sort posts by label “JQuery”
rp_noImage = “data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC”, // A ‘no-image’ image
rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab
rp_loadTimer = “onload”; // “onload” || time in milliseconds (eg: 3000, 4000, …)
<script src=“http://dte-project.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js”>script>


4. Please save your template and see the results.

Notes : Change the colored url blue with url buddy

  1. I got the script above from DTE, please visit the original source.
  2. http://www.dte.web.id/2012/07/recent-post-widget-with-preloader.html

.