Recent Post Widget for Blogger (CSS and Javascript)
Create and Add Recent Post or Latest Post Blogger in Sidebar with CSS and Javascript. Awesome!
Widget Recent Post Blogger Keren Dengan CSS dan Javascript
Widget is one important element for SEO optimization on page. By placing the Recent Post widget in the sidebar, it could be that our visitors will be longer in our website and certainly will increase the rate of ad clicks.
This time, I will share Tutorial on how to create the Latest Article Widget that can be used by blogs that use Blogger.com CMS. This tutorial cannot be applied to AMP templates because it uses JavaScript.
This time, I will share Tutorial on how to create the Latest Article Widget that can be used by blogs that use Blogger.com CMS. This tutorial cannot be applied to AMP templates because it uses JavaScript.
Add Widget Recent Post
Go to Blogger.com and open the blog you want to install the Latest Post Widget.
Then click Layout, then add the Gadget and select HTML / Javascript Widget.
Then click Layout, then add the Gadget and select HTML / Javascript Widget.
Copy this following HTML code.
<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom: 1px solid #f1f1f1;border-left: solid 3px #019688;padding: 10px 5px 5px 10px;margin: 10px auto;text-decoration: none;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#000;text-decoration:none}
li.recent-posts {border-left: solid 3px #019688;
padding: 10px 5px 5px 10px;
margin: 10px auto;}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "https://www.YOURBLOG.com",
numPosts = 6;
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+'" >'+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>
I have entered this CSS to modify the appearance of the widget. Actually you can also enter the CSS code in the template, but for easier installation, then I just enter it in the <style> tag.
Don't forget to change the yellow mark with your blog address, complete using the https:// or http://.
After that, click Save. Then the widget will be directly installed on your blog. For demo widgets, please look at the sidebar of this blog.
May be useful :)
Don't forget to change the yellow mark with your blog address, complete using the https:// or http://.
After that, click Save. Then the widget will be directly installed on your blog. For demo widgets, please look at the sidebar of this blog.
May be useful :)