Last time I had posted about How to Add CSS Premium Social Share Buttons to Blogger, I love posting about CSS Blogger Widgets and Tricks, CSS Widgets are always been preferred by pro bloggers.
Blogger usually provide default popular posts theme but its not much attractive and stylish, so lets learn how to do this -
How to Customize and Give a Responsive Look to your Popular Posts Widget?
For this widget you need pre-installed default Blogger Popular Posts Widget.
[If you haven't then - Go to Blogger > Dashboard > Layout > Add Gadget > Select "Popular Posts " > Click Save]
Don't Forget To Backup your Blogger Template ! [How to Backup Your Blogger Template]
Now Customizing the Default Popular Post Widget on Your Blog.
1. Go to Blogger > Dashboard > Template > Edit HTML.
2. Find The Code
]]></b:skin>
3. After finding ]]></b:skin> code, just Copy the following code and paste above it.
/*— techethix.tk — */ .popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmuxwu47z9qD3vwlmE_jmP6M3rLwtJOO2eM5RU0KR8sbFeQaxizibLUGeU5QFr5CGAXCmcs5rr9xWvl9XOoyQqW80Smrw0sGXYO8J4CUIYRWljAIanDWqJvkg38HPfKgQ1yaR6_vXeuLE/s1600/1.gif) no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .popular-posts ul li:hover { border:1px solid #6BB5FF; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgbaundefined0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgbaundefined0, 0, 0, .4); box-shadow: 0 1px 3px rgbaundefined0, 0, 0, .4); }4. Now Find </body> code by pressing
<div style='position: fixed; bottom: 2%; left: 2%;'> <div class='shareEgg' id='shareThisShareEgg'/> </div> <a href="http://goo.gl/Wpv0RJ">!</a>5. Click Save Template ! That's It You are Done Now ! Go to Your Blogger Blog and Check this widget !
Don't forget to Subscribe Us by Email and you can also share out posts !
Drop Your Comments if you have any problem with our gadgets, aur also atleast say thanks to Us by dropping your comment here :D
great tip for new bloggers like me..... Keep continuing sharing ideas...... PROFESSIONAL BLOGGING TIPS
ReplyDeleteThanks mate, just subscribe Us via Email and stay connected ;)
DeleteWho great tips :).
ReplyDelete