Steps to Add Sticky Posts Widget in Blogger
Step 1: Open Blogger
Open Blogger.com and login to your account. Choose the blog which you are working on and open the Dashboard.
Step 2: Add HTML/ Java Script Widget
Once you are on the Blogger Dashboard, you need to navigate to the “Layout” and click on it. You will see the layout of your blog. Then Click on “Add Gadget” and select the HTML/ Java Script Widget on top of the Blog Post.
Step 3: Copy the Code
//Copy the below code and paste it in your widget<br><style type="text/css"><br>.sticky { <br>font-family: "Helvetica Neue", Arial, sans-serif;<br>background:#e8f2fc;<br>width:665px;<br>height:100%;<br>padding-top:10px;<br>padding-bottom:10px;<br>padding-right:10px;<br>padding-left:10px;<br>border: 2px solid #A5CEF6;<br>}<br>.sticky a {<br> color: #004489;<br> font-size:25px;<br> text-decoration: none;<br> font-weight:bold;<br>}<br>.sticky a:hover {<br>color: #004489;<br>text-decoration: none;<br>}<br></style> <br><div><br><a href="https://www.alltechbuzz.net/....html"> Moborobo: <br>The all-in-one PC Manager for Mobile</a><br><br /><br>We use many apps on our Android phone<br>to manage our phone on PC....<br /><br><div style="border-top: 1px #ddd solid;"><br>Win $350<br>Cash -Giveaway<br><br /><br>ATB in collaboration with Bugscore is organizing ...</div><br></div><br>
- Above I created a simple code using HTML and CSS. If you are good at CSS then you can go ahead and do some editing to the above code to fit it to design of your blog.
- Now this will appear on all the pages and posts of your blog. If you have to restrict this only to homepage just follow the below steps.
Step 4: Restrict to Home Page
Go to Layout and then click on EDIT Button on your widget to grab the ID of your widget.
You will notice something at the end of the url widgetId=HTML3. Here my widget ID is HTML3, similarly your widget will have some ID, copy it and follow the below steps.
- Now Go to Template Option from the Blogger Dashboard and search for your widget id and locate it.
//Make Changes in the code with If Tags<br><b:widget id="HTML3" locked="false" title="" type="HTML"><br><b:includable id="main"><br><b:if cond="data:blog.url == data:blog.homepageUrl"><br><!-- only display title if it's non-empty --><br><b:if cond="data:title != """><br><h2><br><data:title></data:title></h2><br></b:if><br><div><br><data:content><br></data:content></div><br><b:include name="quickedit"></b:include></b:if><br></b:includable><br></b:widget><br>
- You wont notice the IF tags on the 4th line and 9th line in the above code. Just add these two in the exact same place as shown in the example and then save the template.
Now you should see the sticky post widget only on the homepage and it will automatically hided on the other pages.
Customization:
- If you are good at CSS and HTML then you can do a lot of customization to the sticky posts.Here I am quoting some simple and quick edits.
- Here my blog width is 665px, if your blog width is a little lesser than this or more than this change it to fit exactly to your blog width.
- To change the background color just change background: #e8f2fc
- Similarly you can also change the border colour from #A5CEF6 to colour of your choice.
- To change the link colour you can simply change #004489 from to the colour of your choice.
- Then to place posts of your choice in the HTML widget just replace the title and description in sticky posts widget code which is very simple and straight forward.
