Cara Membuat Most Recent Post Simple Blogger

Kali ini zkrip akan memberika tutorial membuat most recent post yang simple dan ringan. Widget ini terinspirasi dari desain blog yang sudah terkenal dan sengaja tidak saya sebutkan namanya. Widget ini tidak membuat loading blog berat walaupun memakai javascript. Dengan tampilan yang elegan dan simple serta ringan cocok untuk template blog yang simple dan ringan pula. Langsung saja kita ke tutorialnya.

• Pertama masuk ke blogger kalian,lalu edit HTML dan letakan kode berikut di atas </b:skin> atau </style>.

#sidebar3 .widget-content{padding:0;z-index:9999}#sidebar3 a:link,#sidebar3 a:visited{font-weight:normal}#sidebar3 ul{width:100%;padding:0 0 10px;margin:0}#sidebar3 ul li{background:#fff;margin:0!important;padding:8px 10px!important;position:relative;border:1px solid #d6dee4;border-top-width:0;border-left-width:4px;border-left-color:#fd745c;font-size:14px}#sidebar3 ul li:nth-child(1){border-top-width:1px!important}#sidebar3 ul li a{font-weight:400!important;display:block;color:#555!important;text-decoration:none!important;line-height:1.4em!important;padding-right:8px!important}#sidebar3 ul li a:hover{color:#43a1a0!important;}#sidebar3 ul li:before,#sidebar3 ul li .item-title a{font-weight:400;font-size:12px;color:inherit;text-decoration:none}#sidebar3{margin:0 auto}

• Lalu masuk ke menu tata letak/layout pilih sidebar dan buat widget HTML baru dengan memasukan  kode di bawah ini.

<div class='sidebar3 section' id='sidebar3'><div class='widget HTML' data-version='1' id='HTML1'><h3 class='title'>Most Recent Post</h3><div class='widget-content'><ul id="recent-posts"></ul><script>//<![CDATA[var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){var homePage = "//www.zkrip.com/",numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);}//]]></script></div></div></div>

Tweet

Postingan terkait:

Ditulis Tarsisius — Juni 13, 2017 — Add Comment — Tutorial