Are you a regular blog post updater? and you want to show your recently updated posts to your visitors but you can't because blogger doesn't have such widget. No problem 101Helper is here to help you and in this post I have a exclusively new widget which is not available on other blogs. Its a new widget which show all the posts you have just updated. In this post I will share its iframe code as well as source code so that you can use it for you desired purpose.
Before we move to steps and code of widget I would like to show you demo of this widget along with some info about it. So here is
demo of Recently Updated Posts Blogger Widget.
You can see that this widget is showing all the recently updated posts along with date. This widget is best for blogs which have selling products or any blog with software so that visitors can see which software has a new version now.
Best place to show this widget on is Homepage of your blog but you can show it anywhere you want.
Now lets install it in your blog.
How To Install Recently Updated Posts Blogger Widget?Step 1: Go to blogger and navigate to Layout.
Step 2: Click on add a gadget and a window will pop-up.
Step 3: Select HTML/JAVASCRIPT and copy below code.
<iframe src="https://rawgit.com/fahimraza/myblog/master/updater.html?url=//101helper.blogspot.com/" style="border: 0; height: 440px; width: 100%;"></iframe>
Step 4: Paste it and substitute 101helper.blogspot.com with your blog's homepage url.
Step 5: Save your widget and visit your blog to see it live.
How To Install Recently Updated Posts Blogger Widget Inside Post?If you want to put this widget inside your post like I did in this post, you can do it by putting the same code which is in step 3 above in your post's HTML editor.
Where else can you show this widget ? Well everywhere, its universal code you can even add it in wordpress or any webpage and it use same code for all blogger blogs but changes the data according to the link given.
In blogger this can be added in the blog theme code below every post or above post and anywhere in blog.
Source Code:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Updated Posts</title>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400italic,400,500,500italic,700,700italic,900%7CMaterial+Icons' rel='stylesheet' type='text/css'/>
<style>
body {
background-color:transparent;
margin:0;
padding:0;
overflow:hidden;font-family:'Roboto'
}
iframe{border:0;}
#updated-posts {
color: #808080
}li.update a {
color: #2196F3;
text-decoration: none;
font-weight: 300;font-family:'Roboto'; font-size: 13px;
}
li.update {
height: 60px;
overflow: hidden;
list-style: none;
border-bottom: 1px solid #e6e6e6;
padding: 0;
border-top: 1px solid #fdfdfd;
}
.imgupdate { float:left; margin:5px 10px 0 5px }
.tgl-com { display:block;font-size: 11px;
padding-top: 5px;}
ol#updated-posts {
margin: 0;
padding: 0;
}li.update a:hover {
color: #00ab60;
}
.credit {
Float: right;
font-size: 70%;
text-decoration: none;
right: 10px;
position: relative;
top: 10px;
}
</style>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
</script>
</head>
<body>
<ol id="updated-posts"></ol>
<script>
//<![CDATA[
var homePage = getQueryVariable("url"),
numPosts = 5
//]]>
</script>
<script>
function updatedPosts(a) {
if (document.getElementById("updated-posts")) {
var e = a.feed.entry,
title, img, link, date, content = "",
ct = document.getElementById("updated-posts");
for (var i = 0; i < 7; i++) {
for (var j = 0; j < 7; j++) {
if (e[i].link[j].rel == "alternate") {
link = e[i].link[j].href;
break
}
}
var title = e[i].title.$t,
pd = e[i].published.$t.substring(0, 10),
date = pd.replace(/-/g, "/");
if ("media$thumbnail" in e[i]) {
img = e[i].media$thumbnail.url
} else {
img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2s3sl8BUam3wPSd1jIAPZ18-4c-jW-yskmVgGY2TpugBloKtSZt4J8uVxYm1g9YIy3pWqIoQGdlTtHMFgFJeWd9W2mUxspy0FF4uKHHszQiZcZw1RBhJyMBdJ6A4fkGPIqcdItFDlt_k/s40/images+%25281%2529.jpg"
}
content += '<li class="update"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="imgupdate" alt="thumb" height="40px" width="40px"/>';
content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tgl-com"> Updated on: ' + date + "</span></li>";
}
ct.innerHTML = content
}
}
var you_script = document.createElement('script');
you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=7&callback=updatedPosts';
document.getElementsByTagName('head')[0].appendChild(you_script);
</script>
<div class="credit"><a href="https://101helper.blogspot.com/2019/06/updated-posts-widget-for-blogger-101helper.html">Get this widget.</a></div>
</body>
</html>
I hope you found this post helpful. If not leave your feedback in comments. Thanks for visiting.
0 nhận xét:
Đăng nhận xét