Sticky post" refers to a fix post that remains at the top of the author's page indefinitely, often to announce important information to the reader, such as a contest or upcoming event. So A sticky post means any post, that is displayed on top of all other posts, in the homepage. This can be made in by following ways
HTML/Javascript widget
by adding a "HTML/Javascript widget" above your "Posts Body" in the Layout section, then make the necessary changes in it to show the widget only in the Homepage.
For this Follow the following method.
◦Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface it is Dashboard > Template)
•As always download a copy of your template before making any changes.
•Now find for below code in your template
<b:section class='main' id='main' showaddelement='no'>
After that, change the code 'no' to 'yes'
Changing the date of publishing
Create the post (the one you want to be sticky) as usual, and publish it. Then immediately edit the post. Now while editing, you need not have to edit anything in the content zone, but you have to change the date of publishing - to any future date.
for this Go to Blogger Dashboard > Design >select posts> edits> Publish on> set a date and time
. After that change the publish date in future.
Adding The html code in tamplete
You can control posts' sticky state simply by giving post a label, default is "sticky" but you can change that if you want. You can set how many sticky posts are shown at most, and if more "sticky" labels are found than this amount, then the newest posts are shown.
Edit template html. Put this code just before </body>.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.sticky-post { background-color: #F0F0F0; padding: 8px;}
.stickies-container { background-color: #E4E4E4; padding: 4px; margin-bottom: 2em;}
.stickymore { display: none; }
</style>
<script type='text/javascript'>
//<![CDATA[
// Sticky posts by MS-potilas 2011. See http://yabtb.blogspot.com/
// Configuration:
var stickyLabel = "sticky"
var maxStickies = 2; // 1-20
var showDate = true;
var showTitle = true;
var showFooter = true;
var showPostedBy = true;
var showCommentLink = true;
var showLabels = true;
var showStickyLabel = false;
var showEmailPost = false;
var showShareButtons = true;
var showShareEmail = true;
var showShareBlog = true;
var showShareTwitter = true;
var showShareFacebook = true;
var showSharePlusone = true;
var widthPlusone = 300;
var txtComment = "comment";
var txtComments = "comments";
var txtPostedBy = "Posted by [user] at [time]";
var txtLabels = "Labels:";
var txtMore = "Read more »";
var dynamicMore = true;
var txtHideMore = "« <small>Hide</small>";
// config end
function findQuickEdit() {
var elements = document.getElementsByTagName("*");
var expr = /(^| )quickedit( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className))
return (elements[i].offsetWidth != 0);
return false;}
function toggleStickyMore(id) {
if(document.getElementById(id)) {
if(document.getElementById(id+'-morelink').style.display != 'none') {
document.getElementById(id).style.display = 'block';
document.getElementById(id+'-morelink').style.display = 'none';
} else {
document.getElementById(id).style.display = 'none';
document.getElementById(id+'-morelink').style.display = 'inline';
}
}
var elm=document.getElementById(id+'-buttons');
if(elm) {
var old=elm.style.display;
elm.style.display = 'none';
elm.style.display = old; // because of IE...
}
}
function renderStickies(result) {
if(!result || !result.feed || !result.feed.entry || !result.feed.entry.length) return;
var divSticky = document.createElement('div');
divSticky.className = "stickies-container";
var elm = document.getElementById("Blog1");
elm.insertBefore(divSticky, elm.firstChild);
if(!showLabels && !showPostedBy && !showCommentLink)
showFooter = false;
var strBuffer="";
var isQuickEdit = findQuickEdit();
for(var i = 0 ; i < result.feed.entry.length && i < maxStickies ; i++) {
if(strBuffer != "")
strBuffer += "<br />";
var entry = result.feed.entry[i];
strBuffer += "<div class=\"sticky-post\">";
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
postDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
if(showDate)
strBuffer += "<h2 class=\"date-header\">" + postDate.toLocaleDateString() + "</h2>";
var link="";
for(var k = 0; k < entry.link.length; k++ ) {
if(entry.link[k].rel == 'alternate') {
link = entry.link[k].href;
break;
}
}
var blogid = entry.id.$t.split('-')[1].split('.')[0];
var postid = entry.id.$t.split('-')[2];
if(postid != "") {
var elepost=document.getElementsByName(postid);
if(elepost && elepost[0]) {
elepost = elepost[0].parentNode;
while(elepost && !/(^| )date-outer( |$)/.test(elepost.className))
elepost = elepost.parentNode;
if(elepost && elepost.parentNode) elepost.parentNode.removeChild(elepost);
}
}
if(showTitle)
strBuffer += "<h3 class=\"post-title entry-title\"><a href=\"" + link + "\">"+ entry.title.$t + "</a></h3><br />";
var content = entry.content.$t;
if(content.indexOf("<a name='more'")!=-1) {
if(!dynamicMore) {
content = content.replace(/\n/g, " ");
content = content.replace(/<a name='more'.*$/, "<div style='clear: both;'></div><div class='jump-link'><a href='"+link+"#more' title='"+entry.title.$t+"'>"+txtMore+"</a></div>");
} else {
var morelink = '<a href="javascript:void(0);" id="sticky'+postid+'-morelink" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="'+entry.title.$t+'">';
morelink += txtMore+'</a><div class="stickymore" id="sticky'+postid+'">';
morelink += '<a style="float:right;margin-left:1em;" href="javascript:void(0);" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="Hide text">' + txtHideMore + '</a>';
content = content.replace(/\n/g, " ").replace(/<a name='more'.*?<\/a>/, morelink) + "</div>";
}
}
strBuffer += content;
if(showFooter) {
var strComments = "";
if(showCommentLink)
strComments = "<a class=\"comment-link\" href=\"" + link + "#comments\">" + entry.thr$total.$t + " " + ((entry.thr$total.$t==1) ? txtComment : txtComments) + "</a>";
strBuffer += "<div class=\"post-footer-line post-footer-line-1\"><div class=\"post-footer\">";
if(showPostedBy) {
var strPostedBy = txtPostedBy.replace('[user]', entry.author[0].name.$t);
strPostedBy = strPostedBy.replace('[time]', '<a class="timestamp-link" href="'+link+'">'+postDate.getHours() + ":" + String("0"+postDate.getMinutes()).slice(-2)+'</a>');
strBuffer += strPostedBy;
if(showCommentLink)
strBuffer += " ";
}
if(showCommentLink && (showShareButtons || showEmailPost)) {
strBuffer += strComments + " ";
strComments = "";
}
if(isQuickEdit) {
strBuffer += "<a href='http://www.blogger.com/post-edit.g?blogID="+blogid+"&postID="+postid+"&from=pencil' title='Edit Post'><img class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a> ";
}
if(showEmailPost) {
emailPostUrl = "http://www.blogger.com/email-post.g?blogID="+blogid+"&postID="+postid;
strBuffer += '<span class="item-action"><a href="'+emailPostUrl+'" title="Email Post"><img class="icon-action" height="13" src="http://img1.blogblog.com/img/icon18_email.gif" width="18"/></a></span> ';
}
if(showShareButtons) {
strBuffer += "<div id='sticky"+postid+"-buttons' class='post-share-buttons goog-inline-block'>";
sharePostUrl = "http://www.blogger.com/share-post.g?blogID="+blogid+"&postID="+postid;
if(showShareEmail)
strBuffer += '<a class="goog-inline-block share-button sb-email" href="'+sharePostUrl+'&target=email" title="Email This" target="_blank"><span class="share-button-link-text">Email This</span></a>';
if(showShareBlog)
strBuffer += '<a class="goog-inline-block share-button sb-blog" href="'+sharePostUrl+'&target=blog" onclick="\'window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;\' title="BlogThis!" target="_blank"><span class="share-button-link-text">BlogThis!</span></a>';
if(showShareTwitter)
strBuffer += '<a class="goog-inline-block share-button sb-twitter" href="'+sharePostUrl+'&target=twitter" title="Share to Twitter" target="_blank"><span class="share-button-link-text">Share to Twitter</span></a>';
if(showShareFacebook)
strBuffer += '<a class="goog-inline-block share-button sb-facebook" href="'+sharePostUrl+'&target=facebook" onclick="\'window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;\' title="Share to Facebook" target="_blank"><span class="share-button-link-text">Share to Facebook</span></a>';
if(showSharePlusone)
strBuffer += ' <div class="goog-inline-block dummy-container"><div class="g-plusone" data-size="medium" data-href="'+link+'" data-width="'+widthPlusone+'" data-annotation="inline"></div></div>';
strBuffer += "</div>"; }
if(showLabels && (showPostedBy || showShareButtons))
strBuffer += "<br />";
if(showLabels) {
if((entry.category.length > 1 && !showStickyLabel) || (entry.category.length > 0 && showStickyLabel)) {
strBuffer += txtLabels + " ";
for(var z = 0 ; z < entry.category.length ; z++) { if(entry.category[z].term == stickyLabel && !showStickyLabel) continue;
if(z) strBuffer += ", ";
strBuffer += "<a href=\"/search/label/" + encodeURIComponent(entry.category[z].term) + "\">" + entry.category[z].term + "</a>";
}
}
if(strComments != "")
strBuffer += " ";
}
strBuffer += strComments;
strBuffer += "</div></div>";
}
strBuffer += "</div>"; }
strBuffer = strBuffer.replace(/<img width=.1. height=.1. [^>]+>/g, "");
divSticky.innerHTML = strBuffer;
}
feedURI = "/feeds/posts/default/-/" + stickyLabel + "?max-results=25&redirect=false";
document.write('<script type="text/javascript" src="http://'+window.location.hostname+feedURI+'&alt=json-in-script&callback=renderStickies"></'+'script>');
//]]>
</script>
</b:if>
</b:if>
You may edit the CSS styles for stickies-container and sticky-post, and configure the following javascript variables:
stickyLabel: the label which turns a post into a sticky post
maxStickies: maximum number of posts displayed as sticky, 1-20 (don't overdo it)
showDate: show date or not, you may want to hide it
showTitle: show post title or not
showFooter: you may want to hide the whole footer
showPostedBy: show Posted By text in footer
showCommentLink: show link to comments in footer
showLabels: show post labels in footer
showStickyLabel: show also the sticky label in the labels list, or hide it
showEmailPost: show Email Post button
showShareButtons: show the sharebuttons group or not
showShareEmail: show email button in sharebuttons
showShareBlog: show blog button in sharebuttons
showShareTwitter: show twitter button in sharebuttons
showShareFacebook: show facebook button in sharebuttons
showSharePlusone: show plus one button in sharebuttons
widthPlusone: you may want to limit this, small enough and text disappears
txtComment: singular form, used in sentence "1 comment", just the text, without number
txtComments: plural form, used in sentence "# comments", just the text, without number
txtPostedBy: text in Posted by, can have variables [user] and [time]
txtLabels: text preceding the labels list
txtMore: "Read more »" text for posts with a jump break.
dynamicMore: if true, jump break text (after "more link") is revealed dynamically
txtHideMore: text of the link to hide "more text", if dynamicMore is used (true)
HTML/Javascript widget
For this Follow the following method.
◦Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface it is Dashboard > Template)
•As always download a copy of your template before making any changes.
•Now find for below code in your template
<b:section class='main' id='main' showaddelement='no'>
After that, change the code 'no' to 'yes'
Changing the date of publishing
Create the post (the one you want to be sticky) as usual, and publish it. Then immediately edit the post. Now while editing, you need not have to edit anything in the content zone, but you have to change the date of publishing - to any future date.for this Go to Blogger Dashboard > Design >select posts> edits> Publish on> set a date and time
. After that change the publish date in future.
Adding The html code in tamplete
You can control posts' sticky state simply by giving post a label, default is "sticky" but you can change that if you want. You can set how many sticky posts are shown at most, and if more "sticky" labels are found than this amount, then the newest posts are shown.
Edit template html. Put this code just before </body>.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.sticky-post { background-color: #F0F0F0; padding: 8px;}
.stickies-container { background-color: #E4E4E4; padding: 4px; margin-bottom: 2em;}
.stickymore { display: none; }
</style>
<script type='text/javascript'>
//<![CDATA[
// Sticky posts by MS-potilas 2011. See http://yabtb.blogspot.com/
// Configuration:
var stickyLabel = "sticky"
var maxStickies = 2; // 1-20
var showDate = true;
var showTitle = true;
var showFooter = true;
var showPostedBy = true;
var showCommentLink = true;
var showLabels = true;
var showStickyLabel = false;
var showEmailPost = false;
var showShareButtons = true;
var showShareEmail = true;
var showShareBlog = true;
var showShareTwitter = true;
var showShareFacebook = true;
var showSharePlusone = true;
var widthPlusone = 300;
var txtComment = "comment";
var txtComments = "comments";
var txtPostedBy = "Posted by [user] at [time]";
var txtLabels = "Labels:";
var txtMore = "Read more »";
var dynamicMore = true;
var txtHideMore = "« <small>Hide</small>";
// config end
function findQuickEdit() {
var elements = document.getElementsByTagName("*");
var expr = /(^| )quickedit( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className))
return (elements[i].offsetWidth != 0);
return false;}
function toggleStickyMore(id) {
if(document.getElementById(id)) {
if(document.getElementById(id+'-morelink').style.display != 'none') {
document.getElementById(id).style.display = 'block';
document.getElementById(id+'-morelink').style.display = 'none';
} else {
document.getElementById(id).style.display = 'none';
document.getElementById(id+'-morelink').style.display = 'inline';
}
}
var elm=document.getElementById(id+'-buttons');
if(elm) {
var old=elm.style.display;
elm.style.display = 'none';
elm.style.display = old; // because of IE...
}
}
function renderStickies(result) {
if(!result || !result.feed || !result.feed.entry || !result.feed.entry.length) return;
var divSticky = document.createElement('div');
divSticky.className = "stickies-container";
var elm = document.getElementById("Blog1");
elm.insertBefore(divSticky, elm.firstChild);
if(!showLabels && !showPostedBy && !showCommentLink)
showFooter = false;
var strBuffer="";
var isQuickEdit = findQuickEdit();
for(var i = 0 ; i < result.feed.entry.length && i < maxStickies ; i++) {
if(strBuffer != "")
strBuffer += "<br />";
var entry = result.feed.entry[i];
strBuffer += "<div class=\"sticky-post\">";
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
postDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
if(showDate)
strBuffer += "<h2 class=\"date-header\">" + postDate.toLocaleDateString() + "</h2>";
var link="";
for(var k = 0; k < entry.link.length; k++ ) {
if(entry.link[k].rel == 'alternate') {
link = entry.link[k].href;
break;
}
}
var blogid = entry.id.$t.split('-')[1].split('.')[0];
var postid = entry.id.$t.split('-')[2];
if(postid != "") {
var elepost=document.getElementsByName(postid);
if(elepost && elepost[0]) {
elepost = elepost[0].parentNode;
while(elepost && !/(^| )date-outer( |$)/.test(elepost.className))
elepost = elepost.parentNode;
if(elepost && elepost.parentNode) elepost.parentNode.removeChild(elepost);
}
}
if(showTitle)
strBuffer += "<h3 class=\"post-title entry-title\"><a href=\"" + link + "\">"+ entry.title.$t + "</a></h3><br />";
var content = entry.content.$t;
if(content.indexOf("<a name='more'")!=-1) {
if(!dynamicMore) {
content = content.replace(/\n/g, " ");
content = content.replace(/<a name='more'.*$/, "<div style='clear: both;'></div><div class='jump-link'><a href='"+link+"#more' title='"+entry.title.$t+"'>"+txtMore+"</a></div>");
} else {
var morelink = '<a href="javascript:void(0);" id="sticky'+postid+'-morelink" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="'+entry.title.$t+'">';
morelink += txtMore+'</a><div class="stickymore" id="sticky'+postid+'">';
morelink += '<a style="float:right;margin-left:1em;" href="javascript:void(0);" onclick="toggleStickyMore(\'sticky'+postid+'\');return false;" title="Hide text">' + txtHideMore + '</a>';
content = content.replace(/\n/g, " ").replace(/<a name='more'.*?<\/a>/, morelink) + "</div>";
}
}
strBuffer += content;
if(showFooter) {
var strComments = "";
if(showCommentLink)
strComments = "<a class=\"comment-link\" href=\"" + link + "#comments\">" + entry.thr$total.$t + " " + ((entry.thr$total.$t==1) ? txtComment : txtComments) + "</a>";
strBuffer += "<div class=\"post-footer-line post-footer-line-1\"><div class=\"post-footer\">";
if(showPostedBy) {
var strPostedBy = txtPostedBy.replace('[user]', entry.author[0].name.$t);
strPostedBy = strPostedBy.replace('[time]', '<a class="timestamp-link" href="'+link+'">'+postDate.getHours() + ":" + String("0"+postDate.getMinutes()).slice(-2)+'</a>');
strBuffer += strPostedBy;
if(showCommentLink)
strBuffer += " ";
}
if(showCommentLink && (showShareButtons || showEmailPost)) {
strBuffer += strComments + " ";
strComments = "";
}
if(isQuickEdit) {
strBuffer += "<a href='http://www.blogger.com/post-edit.g?blogID="+blogid+"&postID="+postid+"&from=pencil' title='Edit Post'><img class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/></a> ";
}
if(showEmailPost) {
emailPostUrl = "http://www.blogger.com/email-post.g?blogID="+blogid+"&postID="+postid;
strBuffer += '<span class="item-action"><a href="'+emailPostUrl+'" title="Email Post"><img class="icon-action" height="13" src="http://img1.blogblog.com/img/icon18_email.gif" width="18"/></a></span> ';
}
if(showShareButtons) {
strBuffer += "<div id='sticky"+postid+"-buttons' class='post-share-buttons goog-inline-block'>";
sharePostUrl = "http://www.blogger.com/share-post.g?blogID="+blogid+"&postID="+postid;
if(showShareEmail)
strBuffer += '<a class="goog-inline-block share-button sb-email" href="'+sharePostUrl+'&target=email" title="Email This" target="_blank"><span class="share-button-link-text">Email This</span></a>';
if(showShareBlog)
strBuffer += '<a class="goog-inline-block share-button sb-blog" href="'+sharePostUrl+'&target=blog" onclick="\'window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;\' title="BlogThis!" target="_blank"><span class="share-button-link-text">BlogThis!</span></a>';
if(showShareTwitter)
strBuffer += '<a class="goog-inline-block share-button sb-twitter" href="'+sharePostUrl+'&target=twitter" title="Share to Twitter" target="_blank"><span class="share-button-link-text">Share to Twitter</span></a>';
if(showShareFacebook)
strBuffer += '<a class="goog-inline-block share-button sb-facebook" href="'+sharePostUrl+'&target=facebook" onclick="\'window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;\' title="Share to Facebook" target="_blank"><span class="share-button-link-text">Share to Facebook</span></a>';
if(showSharePlusone)
strBuffer += ' <div class="goog-inline-block dummy-container"><div class="g-plusone" data-size="medium" data-href="'+link+'" data-width="'+widthPlusone+'" data-annotation="inline"></div></div>';
strBuffer += "</div>"; }
if(showLabels && (showPostedBy || showShareButtons))
strBuffer += "<br />";
if(showLabels) {
if((entry.category.length > 1 && !showStickyLabel) || (entry.category.length > 0 && showStickyLabel)) {
strBuffer += txtLabels + " ";
for(var z = 0 ; z < entry.category.length ; z++) { if(entry.category[z].term == stickyLabel && !showStickyLabel) continue;
if(z) strBuffer += ", ";
strBuffer += "<a href=\"/search/label/" + encodeURIComponent(entry.category[z].term) + "\">" + entry.category[z].term + "</a>";
}
}
if(strComments != "")
strBuffer += " ";
}
strBuffer += strComments;
strBuffer += "</div></div>";
}
strBuffer += "</div>"; }
strBuffer = strBuffer.replace(/<img width=.1. height=.1. [^>]+>/g, "");
divSticky.innerHTML = strBuffer;
}
feedURI = "/feeds/posts/default/-/" + stickyLabel + "?max-results=25&redirect=false";
document.write('<script type="text/javascript" src="http://'+window.location.hostname+feedURI+'&alt=json-in-script&callback=renderStickies"></'+'script>');
//]]>
</script>
</b:if>
</b:if>
You may edit the CSS styles for stickies-container and sticky-post, and configure the following javascript variables:
stickyLabel: the label which turns a post into a sticky post
maxStickies: maximum number of posts displayed as sticky, 1-20 (don't overdo it)
showDate: show date or not, you may want to hide it
showTitle: show post title or not
showFooter: you may want to hide the whole footer
showPostedBy: show Posted By text in footer
showCommentLink: show link to comments in footer
showLabels: show post labels in footer
showStickyLabel: show also the sticky label in the labels list, or hide it
showEmailPost: show Email Post button
showShareButtons: show the sharebuttons group or not
showShareEmail: show email button in sharebuttons
showShareBlog: show blog button in sharebuttons
showShareTwitter: show twitter button in sharebuttons
showShareFacebook: show facebook button in sharebuttons
showSharePlusone: show plus one button in sharebuttons
widthPlusone: you may want to limit this, small enough and text disappears
txtComment: singular form, used in sentence "1 comment", just the text, without number
txtComments: plural form, used in sentence "# comments", just the text, without number
txtPostedBy: text in Posted by, can have variables [user] and [time]
txtLabels: text preceding the labels list
txtMore: "Read more »" text for posts with a jump break.
dynamicMore: if true, jump break text (after "more link") is revealed dynamically
txtHideMore: text of the link to hide "more text", if dynamicMore is used (true)
Comments
Post a Comment