What is a Sticky Post
I know a regular update on our blog is important; however, we sometimes want to keep some of our blog post at the top on our homepage, to do that we should use a sticky post. Sticky post, simply highlighting a post on our homepage whether it's a hot topic or it's the most important post for our audience.Go to my homepage to see live preview.
Installing sticky post in blogger
Before we start installing you should backup first your blog's template in case you did something wrong.Finally, to install sticky post just go to your Blogger Dashboard ->> Template ->> Edit HTML and find this code
blog-posts. Just after that div class copy and paste the following codes provided below. Refer also to the image below.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#wrapfullpost_2 { margin: .8em 0em 0em;width: 600px;background: #DBEEFF; padding: 5px; overflow: auto; }
.post-body2{ font-family: Arial, Helvetica, Sans-serif; font-size: 1.2em; line-height: 1.48em; color: #3C3C3C; }
.post-title2 { margin: 0 0 .6em 0; padding: 0; font-family: Arial, Helvetica, Sans-serif; font-size: 1.6em; font-weight: normal; }
.post-title2 a{ text-decoration: none; color: #000; }
.post-title2 a:hover{ color: #2A2B2F; }
.postmeta-primary2{ color: #808080; }
.postmeta-primary2 span, .postmeta-secondary2 span { padding: 0em .9em 0em 1em; background-position: left center; background-repeat: no-repeat; }
.featured_post_image{ float: left; margin-right: 5px; padding: 2px; background: #fff; border: 1px solid black !important; -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, .8); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, .8); box-shadow: 0px 0px 12px rgba(0, 0, 0, .8); max-width: 98%; }
.meta_author2 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNITSN3OwDleT_XuuVZ8jQzFi4Mpd0Mea5Lh679M-OJnS6Arh3CidMv2YnJzX8N5heMP2iWbbr6z068tea_IYkixgED05nzE_LElrCzHu2BCx-OWzYVr3WL44JDMPKpDrruR5V_zatzpp4/s0/author.png); }
.meta_categories2 { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPOIPMVERXefGnwBm7xr7iQruT38gkxaOrw6-AMfa69kfmuk_4VEWZCIu8S6o3tr5T1r9ZL0Jg1zErAdbNOBoq-Oznn0KaeVQNSbyMlL_YNmiW02Lv7xrb5xYrwwrSY38DDhnL37Rfuiuy/s0/category.png); }
</style>
<div id="wrapfullpost_2">
</div>
<script type="text/javascript">
//<![CDATA[
function featured_snip(json){
var Image_width = 220;
var content_num = 200;
var post_url = "http://www.internetsmash.com/2015/12/what-to-do-after-publishing-blog-post.html";
var default_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7uWDvGEFylvu1oEDIeFQkFYwBTiMHDeKYFD5vFPAryAC_KDtZg_hPyKwVnhcXwsheSe5TSCBvznrFMq1YP8-7bQ5ywWV-BhaWtQT1BrF2GZ1nCHKp9lVTgdDsNVbuihFahqrf0eHieQ/s200/Icon.png";
for(var i=0;i<json.feed.entry.length;i++)if(json.feed.entry[i].link[4].href==post_url){var title=json.feed.entry[i].title.$t,url=json.feed.entry[i].link[4].href;if(json.feed.entry[i].media$thumbnail)var get_image=json.feed.entry[i].media$thumbnail.url,image=get_image.replace("/s72-c/","/s"+Image_width+"/");else if(null!=json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var image=json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var image=default_img;var get_content=json.feed.entry[i].content.$t,content=get_content.replace(/(<([^>]+)>)/gi,"").substr(0,content_num)+"....";if(json.feed.entry[i].category)var get_category2=json.feed.entry[i].category[0].term;else var get_category2="";var get_author=json.feed.entry[i].author[0].name.$t}
var container = document.getElementById("wrapfullpost_2");
container.innerHTML = "<h2 class=\"post-title2\"><a href=\""+ url +"\">"+ title +" </a></h2>"+
"<div class=\"postmeta-primary2\"><span class=\"meta_author2\">"+ get_author +"</span><span class=\"meta_categories2\">"+ get_category2 + "</span></div><div class=\" is_featured_post \">"+
"<div class=\"featured_post_image\"><img src=\""+ image +"\"></div><p class=\"post-body2\">"+ content +"</p></div>"
}
//]]>
</script>
<script type="text/javascript" async="async" src="http://www.internetsmash.com/feeds/posts/default?alt=json-in-script&callback=featured_snip&max-results=1000">
</script>
</b:if>
Customization
220: Just change this value if you want to change the width of the thumbnail.200: This is the default number of character in the summary of the post. Just change this if you want to make the description longer or shorter.
Default URL: Change this url with the url of your post that you want to be in a sticky post.
Domain Name: Change this with your own domain name.
How the Codes Work
With the json API provided by Google Blogger we extracted the data on it. The codes will simply check all the post’s URL on the json API and then it will compare with the URL you specified recently. Then, if the comparison returns true it will extract the title, author, label, thumbnail and content of the post on the json API.The JavaScript codes will choose what thumbnail should be included in Sticky Post, the first thing it will do is to check if you uploaded images on your blog post, then if it return true, it will pick the first image in your post. If you used a third party site to include images on your blog post it will simply get its url and put it on Sticky Post. If your blog post does not contain image the codes will simply get and used the default image specified on it.
