Cara Memasang Recent Post Warna Warni

Cara Memasang Recent Post Warna Warni - Sebelumnya pernah aku tulis wacana Cara Membuat Recent Post Ringan di Blog, Nah, pada kesempatan kali ini aku akan mengulas wacana cara memasang recent post yang berwarna. Perlu anda ketahui bahwa, Recent Post salah satu navigasi blog yang menjadi pertimbangan setiap blogger. Dengan menambahkan artikel terbaru sanggup membantu mandapatkan traffik yang berlimpah dan juga mempermudah pengunjung untuk menjelajai setiap konten yang ada.

Dengan kata lain, bila anda memasang recent post di blog maka akan berdampak pada penurunan bounce rate blog. Selain itu juga, menciptakan anda mengurangi ketergantungan pada email marketing, lantaran anda tidak perlu lagi memberitahukan kepada orang lain bahwa ada anda telah menciptakan posting baru.

Baca Juga: Daftar Kode Warna CSS Blog.

Namun, perlu anda ketahui bahwa widget recent post atau artikel terbaru tidak serta merta ada pada widget blog, oleh lantaran itu anda harus memasangnya sendiri, untuk lebih jelasnya ikuti langkah-langkah memasang recent post blog dibawah ini.

Cara Memasang Recent Post Warna Warni

1. Buka dashboard blog kemudian klik sajian Layout > HTML/JavaScript, kemudian copy paste isyarat dibawah gambar berikut ini.

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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:"https://mamankdzgn.blogspot.com//search?q=5-cool-recent-post-widgets-for-blogger" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

2. Simpan Template

Sumber isyarat : https://mamankdzgn.blogspot.com//search?q=5-cool-recent-post-widgets-for-blogger

Demikian, Cara Memasang Recent Post warna warni, supaya berkhasiat dan bermanfaat. Salam blogger.