5 Best Popular Posts Widgets for Blogger

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers.<br /><br />Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="popular posts widget for blogger" border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8E-uevpulu-qfwETZFbiiFZGgBOope8a3WrRJxFoXjcjeROomCJhInC14Xi0Gg-wFCl2ri0ltGlzOrENN1ZRP3vId-xuC4WmPUW6c3Xl5h5Thn-5DUlFSUeTm1YEO1vn5ZkG5LgsXMSH_/s320/top-popular-posts-widget-for-blogger.png" title="popular posts widgets for blogger" width="320" /></div><br /><h2>Adding the Popular Posts Widget for Blogger</h2>Just click on your blog title, access the "Layout" menu, click "Add a Gadget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet. (Remember that each widget style has different requirements, so follow the styles and instructions carefully to find out if you need the snippet and image thumbnail or not).<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Configuring Popular Posts Widget for Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPiYQmEqfazfMSi3tpqeBcMz1xHHnyrOpAmlExb3p9rT5KJqx-u-X9tn7GXtoLixdQTMsXvfblWU2aewI3oPMNz8P8VtPOsFy0SHhT-YRze9l_KD2z_GuUBthtJeta94hYsDOZF4ijP0T/s1600/popular-posts-widget-for-blogger.png" title="Configuring Popular Posts Widget for Blogger" /></div><br />Once you've followed these instructions, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You can stick with this if it matches your blog design but, if it sticks out like a sore thumb or doesn't suit your taste, there's no need to fret since you can personalize it. You can choose from the following styles - see the demo blog:<br /><div style="text-align: center;"><a class="demo-link" href="http://popular-posts-blogger-widget.blogspot.com/" rel="nofollow" target="_blank">Demo blog</a></div><br /><h3>Popular Posts Style 1 - Box within a box</h3>This is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="popular posts widget for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oGFuv5x9S32cWJ7BcI7mFcflxh1LY173F3Fx8DjcaWJxiXs3z77lcE4R5Dg4zYRjP5R4ZlRmg-xh_6vy6k_w5NJ2-Jj9bGI2GAsxaZbxCTvVHbPjVInrcU1btcWu9doqnvuY-XBXVOO-/s1600/popular-posts-blogger-widget-transparent-background.png" title="Popular Posts Widget for Blogger With Tumbnails Style 1" /></div><br /><b>CSS code:</b><br /><blockquote class="tr_bq"><style type='text/css'><br />.sidebar .PopularPosts ul{margin:0;padding:0;}.sidebar .PopularPosts ul li{list-style:none !important;padding:0 !important;margin-bottom:10px;}.sidebar .PopularPosts .item-thumbnail{height:190px;margin:0;overflow:hidden;width:100%;}.sidebar .PopularPosts .item-title{position: relative;}.sidebar .PopularPosts img{height:auto;width:100%;padding:0;}.sidebar .PopularPosts .item-title a{color: #FFFFFF;font:20px Oswald;text-transform:uppercase;padding:10px;position:absolute;right:0;left:0px;margin:0px auto;text-align:center;text-decoration:none;top:40px;width:60%;height:26px;overflow:hidden;z-index:2;}<br />.sidebar .PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top:6px solid rgba(0, 0, 0, 0.1);border-bottom:6px solid rgba(0, 0, 0, 0.1);color:#FFFFFF;left:0px;right:0px;margin:0px auto;padding:65px 10px 10px;position:absolute;font:13px 'Times New Roman',Times,FreeSerif,serif;text-align:center;top:35px;width:60%;z-index:1;}.sidebar .PopularPosts .item-content{position:relative;}<br /></style></blockquote><h3>Popular Posts Style 2 - Large thumbnails with small post titles underneath </h3>This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.<br /><div class="separator" style="clear: both; text-align: center;"><img alt="popular posts widget for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3GEYf1ZmXElAjoRi9obckRLSEWKG_4PQw6FqA9wAwQFWWToT9JGWOp6sNaVQNUIuT18dWsRsXFz2pg7VG0oEDnl8tF5pJK72Cd_42erqGHxuNpjCIVsMwARAYos41nZNRbyLdMo7Ou_UD/s1600/minimal-popular-posts-blogger-widget.png" title="Popular Posts Widget for Blogger With Tumbnails Style 2" /></div><b>CSS code:</b><br /><blockquote class="tr_bq"><style type='text/css'><br />.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:&quot;&quot;;height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}<br /></style> </blockquote><h3>Popular Posts Style 3 - Colorful boxes</h3>If your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="popular posts widget for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Xw-QshE927Zk1Qg8OgC1nsX4DUVE3aloloaKor7iyok8Q6zSIbzYSu_Sw4vLv9uDH0VHjyoDP3YMqZyfybx9PYIJYwEYIc3b9qD-RvN5ZUNXNKVepQnf00JaN-ES9IQnLDMnx-I0q4il/s1600/colorful-popular-posts-blogger-widget.png" title="Popular Posts Widget for Blogger With Tumbnails Style 3" /></div><br /><b>CSS code:</b><br /><blockquote class="tr_bq"><style type='text/css'><br />.sidebar .PopularPosts ul{padding:0;margin:0;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}.sidebar .PopularPosts ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}.sidebar .PopularPosts ul li:first-child{background:#D9EDF7;}.sidebar .PopularPosts ul li:first-child + li{background:#F2DEDE;}.sidebar .PopularPosts ul li:first-child + li + li{background:#DFF0D8;}.sidebar .PopularPosts ul li:first-child + li + li + li{background:#FFEEBC;}.sidebar .PopularPosts ul li:first-child + li + li + li + li{background:#E0E0E0;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:10px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right:5px;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px!important;}<br /></style></blockquote><h3>Popular Posts Style 4 - Grid layout</h3>Just like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="popular posts widget for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXls9G4RNFiCPUW9kxdCefrpjhFx0JxOdpKuBk2YpyuebhnGviGi2i8oGjYKUs78zmmSUfFkNsJBDjD3qUoiCpPzS1yXM1UUHmVTzvziHA6jSok14xHXi4qTMX2z64SmT2FU8p_vAlkEam/s1600/popular-posts-blogger-widget-grid-thumbnails.png" title="Popular Posts Widget for Blogger With Tumbnails Style 4" /></div><br /><b>CSS code: </b><br /><blockquote class="tr_bq"><style type='text/css'><br />.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px &#39;Oswald&#39;, sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}<br /></style></blockquote><h3>Popular Posts Style 5 - Numbered posts</h3>If you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="popular posts widget for blogger " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_9PSUEcAiTQDLzZ9-XngJlpP-nyMWRb_byzjiNhoqqARcqkJn_t6KIJk_sSGncRETKjB-dQsghwNCKj9cbQTJZc4MOyTEJF6bpix4X61Pvr2m91xpPTQrrriBCvPGz9PPW2sqs4V6fWF/s1600/numbered-popular-posts-widget-for-blogger.png" title="Popular Posts Widget for Blogger With Tumbnails Style 5" /></div><br /><b>CSS code:</b><br /><blockquote class="tr_bq"><style type='text/css'><br />.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px &#39;Oswald&#39;, sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:&quot;&quot;;height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}<br /></style></blockquote>These are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click "Theme" on the left side and select "Edit HTML" under the template preview.<br /><br />These next codes need to be pasted above the "</head>" or "</body>" tags, so check the instruction to know exactly where you need to put the code.<br /><h4>Adding the CSS</h4>When the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:<br /><blockquote class="tr_bq"></head></blockquote>Just ABOVE the <span style="background-color: yellow;"></head></span> tag, copy-paste the CSS code of one of the styles above.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXDRwK9hAheEk_DyaKRCEyi44varTZgrFXs8xa3td6vEONIJTpLTdMzEjpLHYpZ8y0uIKO15rbOjp5m37c-ZRjdBwg4guaUMdrL8bE8Uf0Y6mTGckQ7tKMGs_Irj4TGSqHEE59ABUO_e4u/s640/popular-post-css-style-for-blogger.png" width="640" /></div><br />Important: If the Popular Posts widget is located in the footer of your blog, remove the <b>.sidebar</b> class found in the CSS code in order to make it work.<br /><br />Please note that most of the styles are using the 'Oswald' font which you need to add to your template's code as well.<br /><br />So, search for this tag:<br /><blockquote class="tr_bq"><head></blockquote>... and just BELOW it, add this line:<br /><blockquote><link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/></blockquote><h4>Adding the JavaScript</h4>These styles also require using a script in order to resize the popular posts image / thumbnail and trim the post snippet and title. To add the JavaScript code, search the <span style="background-color: yellow;"></body></span> tag and paste the following script just above it:<br /><blockquote class="tr_bq"><span style="color: red;"><script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/></span><br /><script type='text/javascript'><br />//<![CDATA[<br />$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});<br />//]]><br /></script></blockquote>Note: if you have already the jQuery library in your template, remove the line in red.<br /><br />After you have added all the codes in the right place, press the "Save theme" button to save the changes.<br /><br /><b>That's it!</b><br /><br />The five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. They all have different appearance for determining what makes a post popular, but the end result is the same: visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog.

5 Best Popular Posts Widgets for Blogger

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and mak...

Read more »

How to Display Most Commented Posts in Blogger

One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts are right now and encourages them to click on them to read them. This basic widget is just a little too basic, however, for the modern day website visitor. Not only do they want to see your trending posts, but they also want to join the discussions that are happening on your blog. To do that, you'll need a most commented posts widget for Blogger.<br /><br />Having a customized widget on your site is a lot easier than you might think. In order to have an effective widget, however, you're going to need a few specific things to help you out.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="most commented posts widget" border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-NXnC4bCkmWhaVcKqpn7YYXtbU8dYasEEWOwVC9UGknYV9HLdmjKUSZ7sDTKQBP1t92Yzv1HSmzkhNl8E8yKxEyyPM4xjpCPvmyl2rzlj6SYxdC2LTlnBZ2COjKkkVjfCvv6T4j-aBK8p/s1600/most-commented-posts-widget-for-blogger.png" title="Get a Most Commented Posts Widget For Blogger" width="320" /></div><br /><div style="text-align: center;"><a class="demo-link" href="http://helplogger-demo-blog2.blogspot.com/" rel="nofollow" target="_blank">Demo</a></div><br /><h3>Here's What You're Going To Get</h3>There are certain aspects in the design of a most commented posts widget that you should expect. That's why you'll find these specific components with this custom widget: <ul><li><b>Ordered by popularity.</b> The posts that have the most comments are the most likely to have visitors want to read the post and join in with the conversation. By ordering your posts based on the popularity of them, you'll give each visitor the chance to see what the hype really is about! This lets you have a charted graphic that gives a visitor easy recognition, but also allows you to keep it straight and aligned if you're looking for a cleaner look.</li><li><b>Graphic incorporation.</b> Blog posts that have at least one graphic incorporated with them will receive 100% more traffic than posts that have no images at all. For every graphic that you include with a blog post, the more likely you are to get a click! The same is true with your most commented posts widget, so be sure to incorporate graphics that stand out with your design.</li><li><b>Descriptions that blend in.</b> The internet today revolves around the value that you can provide each individual user. People don't just click on things because they look visually tempting. They click on them because they promise a level of value that another website like yours isn't able to provide. By having descriptions that blend in, you'll be able to enhance the perceived value that your site can provide. This leads to more clicks!</li></ul>Related: <a href="http://helplogger.blogspot.com/2012/03/add-multi-colored-popular-posts-to.html">Add Multi-Colored Popular Posts to Blogger</a><br /><br /><h2>Add the Most Commented Posts Widget to Blogger</h2>Step 1. Log in to your <a href="https://www.blogger.com/home" rel="nofollow" target="_blank">Blogger account</a> and go to Template, press the "Edit HTML" button.<br /><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type the following tag inside it and hit Enter to find it:<br /><blockquote class="tr_bq"></Group></blockquote>Step 3. Just below <span style="background-color: yellow;"></Group></span>, add this code:<br /><blockquote class="tr_bq"><Group description="Most Commented" selector=".most-commented"><br /><Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/><br /><Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/><br /><Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/><br /><Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/><br /><Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/><br /></Group> </blockquote><br /><div class="separator" style="clear: both; text-align: center;"><img alt="add code to blogger html" border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaTk-jac7tPfVA_mBoFpvx0h0cJJ-Xde9gf8ZeTUukcqW_LPjDpiGbDzcg6oLxPv5rUInFdt46NDjyOn-ZIDoRoF5Igph5WWAGnl56pCdhgBF4OyWERMA2QhvZQ1J9LWs2uo6wcmTUXgnO/s1600/add-css-to-blogger-template-html.png" title="Get a Most Commented Posts Widget For Blogger 1" width="640" /></div>Note: if you can't find the </Group> tag, try to find the following tag instead and add the variables just below it:<br /><blockquote><b:skin><![CDATA[</blockquote><br />Step 4. Now search for the following tag (CTRL + F):<br /><blockquote class="tr_bq">]]></b:skin></blockquote>Step 5. And just above it, add this CSS code:<br /><blockquote class="tr_bq">.comment-count {<br />    padding: 3px 10px;<br />    background: #fff;<br />    color: #000;<br />    font-size: 10px;<br />    float: right;<br />}<br /><br />.most-commented ul {<br />    padding: 0px !important;<br />    font-family: Century Gothic, sans-serif;<br />}<br /><br />.most-commented ul li {<br />    list-style-type: none;<br />    padding: 10px;<br />    color: #555;<br />    margin-top: -10px;<br />}<br /><br />.most-commented ul li a {<br />    color: #444;<br />    font-weight: bold;<br />    text-decoration: none;<br />    font-size: 11px;<br />}<br /><br />.most-commented ul li img {<br />    float: left;<br />    margin: 0px 5px 0px 0px;<br />    width: 60px;<br />    height: 60px;<br />}<br /><br />.most-commented:nth-child(3n+0) {<br />    background: $(most.commented.background1);<br />    width: 100%;<br />}<br /><br />.most-commented:nth-child(4n+0) {<br />    background: $(most.commented.background2);<br />    width: 95%;<br />}<br /><br />.most-commented:nth-child(5n+0) {<br />    background: $(most.commented.background3);<br />    width: 90%;<br />}<br /><br />.most-commented:nth-child(6n+0) {<br />    background: $(most.commented.background4);<br />    width: 85%;<br />}<br /><br />.most-commented:nth-child(7n+0) {<br />    background: $(most.commented.background5);<br />    width: 80%;<br />}</blockquote>Step 6. Save the template.<br /><br />Now, let's add the Most Commented Posts widget to the Layout of our Blogger blog. Head over to the "Layout" section of your Blogger dashboard and click on the "Add a gadget" link on the right side. From the pop-up window, scroll down the list and select the "HTML/JavaScript" gadget:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger html javascript gadget" border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXSf6tFcGPAwIBhI2SUOsNrhKYAWVBJZqhrqsTdi78wltYUHBlPaRJeIgCfzH4lRWrROJHmeder6pt3VQZxjQzojqv8EGKDuvhNin5NLGGsmfJDQtQLWLLU4t_2J3MK4-Xn8Rl10wnRRxf/s1600/add-a-gadget-or-page-element-html-javascript-blogger.png" title="Get a Most Commented Posts Widget For Blogger 2" width="640" /></div><br />Copy and paste this script inside the content box:<br /><blockquote class="tr_bq"><script type="text/javascript"><br />function stripTags(s,n) {<br />    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")<br />}<br />function mostcommented(feed) {<br />    var i;<br />    for (i = 0; i < feed.count ; i++) {<br />var postURL = "'" + feed.value.items[i].link + "'";<br />var postTitle = feed.value.items[i].title;<br />var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";<br />var postDescription = feed.value.items[i].postdescription;<br />var postComments = feed.value.items[i].commentcount;<br />var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,<span style="color: red;"><b>10</b></span>)+'...</p>' + '</li></ul></div>';<br /> document.write(postList);<br />     }<br /> }<br /> </script><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?<br />AddUrlHere=<b><span style="color: blue;">http://helplogger.blogspot.com</span></b><br />&NumberofPosts=5<br />&_id=2cb5eb603ed55a6264ee1484e5fdd45c<br />&_callback=mostcommented<br />&_render=json"<br />type="text/javascript"></script><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span></blockquote>Here, change <span style="color: blue;">http://helplogger.blogspot.com</span> with your blog URL. If you want to add more characters to the description, modify the "<span style="color: red;">10</span>" value in red from "postDescription,<span style="color: red;">10</span>".<br /><br />If you want a more simple look (without the thumbnails and post snippets), add this script instead:<br /><blockquote class="tr_bq"><script type="text/javascript"><br />function stripTags(s,n)<br />    {<br />    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")<br />}<br />function mostcommented(feed) {<br /> var i;<br /> for (i = 0; i < feed.count ; i++)<br /> {<br />var postURL = "'" + feed.value.items[i].link + "'";<br />var postTitle = feed.value.items[i].title;<br />var postComments = feed.value.items[i].commentcount;<br />var postList = '<div class="most-commented"><ul><li style="margin-bottom: 10px"><span style="color: #cc0000;"><div class="comment-count">' + postComments + "</div>"</span> + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';<br /> document.write(postList);<br /> }<br /> }<br /> </script><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?<br /> AddUrlHere=<b><span style="color: blue;">http://helplogger.blogspot.com</span></b><br />&NumberofPosts=5<br />&_id=2cb5eb603ed55a6264ee1484e5fdd45c<br />&_callback=mostcommented<br />&_render=json"<br />type="text/javascript"></script><br /><span style="font-size: 80%; float:left;"><a href="http://helplogger.blogspot.com/2014/08/most-commented-posts-blogger-widget.html">Add this widget</a></span></blockquote>.... and replace <span style="color: blue;">http://helplogger.blogspot.com</span> with your address.<br />To add the "comments" text after the comments number, replace the line in red:<br /><blockquote class="tr_bq"><div class="comment-count">' + postComments + "</div>"</blockquote>with:<br /><blockquote class="tr_bq"><div class="comment-count">' + postComments + " comments" + "</div>" </blockquote>Once you have finished adding your own settings, press the "Save" button to enable the gadget in the sidebar of your blog. That's it! <br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="configure html javascript gadget" border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvMLXdPFuGvXdGMXJpglsU5VBxPgv0ayFBv-RDLiz646z54s5l1jT9JOW0QQxKC6sxFR8fLgMytPMehXlJthqvtcOfR0_qs1Y0JpWFBfBYvO2022SWbcHERml2kReBVTIWsw3OQriCBUN/s1600/add-blogger-gadget.png" title="Get a Most Commented Posts Widget For Blogger 3" width="640" /></div><br />To change the background colors of the most commented posts, go to "Template" > hit the "Customize" button and navigate to "Advanced" > "Most Commented" tab. Here you can pick 5 different colors by clicking on the color boxes:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template designer" border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7L9GM_-bpVpktzVTGRedW0gjXh7O4k4b9eddd6hXvBGNKVYlsQ4P746Z7_yU_slyCanF0vGRgcvvw3ZEMQArrtRZQKWAAAFLZhVSuvNMRGz9UUvIYVxJcwMFtL3tOHcH_wNU_f2C2QH1f/s1600/most-commented-posts-blogger-widget.png" title="Get a Most Commented Posts Widget For Blogger 4" width="640" /></div><br />Once you've selected your favorite color scheme, click the "Apply to blog" button to save the changes... and you're done.<br /><br /><h3>Why Use the Most Commented Posts widget?</h3>The basic psychology in every human is that they want to feel like they belong to a community. That's exactly what this customized widget will bring to your site. No matter what content drew a visitor to see your content, this widget will invite them to join the lively parts of your piece of the internet. This helps to build relationships, with you and with other visitors, and this relationship-building engagement is what you need to start having real value.<br /><br />Take the time to install this most commented posts widget on your site and you'll see for yourself why this is one of the most useful widgets that is available right now. Enjoy ;)

How to Display Most Commented Posts in Blogger

One of the best gadgets for your Blogger blog is a popular posts widget for your sidebar. This lets visitors see what your trending posts ar...

Read more »

How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will maintain a default size of 72 x 72px which might not look good if we try to make them larger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry.<br /><br />So this tutorial will show you how to increase the thumbnail resolution size of the popular posts Blogger widget, even though we can apply this trick on any of the blog widgets.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE9Z5iXC8UG_YdkgkoQry-GTMnWc_q9dNiQwHnC4M-Ea6UaO2gCbNc-WHJ16saPi9t-dwQvTnDhetcHfvGqL6uJZmZKR5xLjZjtawT7PnINEz9WPJwnJyMC2uOiMI1Rb125vhAZIAMf1x0/s1600/change-thumbnail-resolution-on-blogger.png" /></div><div style="text-align: center;"><a class="demo-link" href="http://demohelplogger1.blogspot.com/" rel="nofollow" target="_blank">Demo Blog</a>.</div><br /><h3>Changing the Thumbnail Size for the Popular Posts Widget</h3>Step 1. First, let's add the Popular posts gadget by going to "Layout" > click on the "Add a gadget" link and select "Popular Posts" from the popup window.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="adding popular posts gadget" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKkH2ogLS1H2rwzlgnV1eo2iPkQrWmrD2DbkYsLOEOAuzmsbqfHMsqhnptS0tWOCvqpdOA4UEnhOmIjfgzY77Lzh6Es0tyEugAEUTLjyIR7-Bh6Eu5Y9PGkhidx-HNKkBNGeaNWs89sYpY/s1600/add-popular-posts-gadget-widget-in-blogger.png" title="How to Increase Thumbnail Resolution on Blogger 1" width="400" /></div><br />Step 2. Next, go to "Template" > click on the "Edit HTML" button > click anywhere inside the code area to open the Blogger search box using the CTRL + F keys.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="edit blogger template html" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTB9B6haG3lHQgVxNVR0Ovj6pQT0aRvxVcIgpwZZiTGvzIzcJmsMUP-eV0rswDQk8CPy_5GlQluN6Z6zm-h2-mS3-BC2QXUXs2ZPfY2b9Nws0gK7bZY6f5Npdhntl33tc0ZYtg9oWcFS8/s1600/open-blogger-search-box-ctrl+f.png" title="How to Increase Thumbnail Resolution on Blogger 2" width="640" /></div><br />Step 3. Type or paste the following tag inside the search box then hit Enter to find it:<br /><blockquote class="tr_bq"></head></blockquote>After you found the <span style="background-color: yellow;"></head></span> tag, add this CSS above it:<br /><blockquote class="tr_bq"><style type='text/css'><br />.PopularPosts .item-thumbnail a {<br />clip: auto;<br />display: block;<br />height: 130px;<br />margin: 0 0px 5px;<br />overflow: hidden;<br />width: 210px;<br />border: 2px solid #EEEEEE;<br />border-radius: 20px;<br />}<br />.PopularPosts .item-thumbnail img {<br />position: relative;<br />top: -30px;<br />transition:all .2s linear;<br /> -o-transition:all .5s linear; <br />-moz-transition:all .2s linear; <br />-webkit-transition:all .2s linear;<br />}<br />.PopularPosts .item-thumbnail img:hover{<br />opacity:.6; <br />filter:alpha(opacity=60)<br />}<br />.PopularPosts .widget-content ul li {<br />background: #F9F9F9;<br />border: 2px solid #EEEEEE;<br />border-radius: 10px;<br />box-shadow: 0 4px 10px #EEEEEE;<br />color: #555555;<br />padding: 10px;<br />margin-bottom: 5px;<br />}<br />.PopularPosts .item-title {<br /><b>clear: both</b><br />font: 14px Cambria,Georgia, sans-serif;<br />color: #2288BB;<br />font-weight: bold;<br />text-transform: uppercase;<br />text-align: center;<br />}<br />.PopularPosts .item-snippet {<br />display: none;<br />}<br />.widget .widget-item-control a img {<br />height: 18px;<br />width: 18px;<br />}<br /></style></blockquote>Step 4. Now search for this tag: <br /><blockquote class="tr_bq"></body></blockquote>And just above it, add this script:<br /><blockquote class="tr_bq"><script type='text/javascript'>                   <br />function changeThumbSize(id,size){<br />var blogGadget = document.getElementById(id);<br />var replacement = blogGadget.innerHTML;<br />blogGadget.innerHTML = replacement.replace(/w72-h72-p-k-no-nu/g,"s"+size+"-c");<br />var thumbnails = blogGadget.getElementsByTagName("img");<br />for(var i=0;i&lt;thumbnails.length;i++){ <br />thumbnails[i].width = size; <br />thumbnails[i].height = size; <br />}<br />}<br /><span style="color: #999999;">changeThumbSize("<span style="color: #cc0000;"><b>PopularPosts1</b></span>",210);      </span>             <br /></script></blockquote>Highlighted in red is the widget ID for the Popular Posts gadget. To change the thumbnail size for any of your blog widgets, find the gadget/widget ID and then add a line below this part:<br /><blockquote class="tr_bq"><span style="color: #999999;">changeThumbSize("<span style="color: #e06666;"><b>PopularPosts1</b></span>",210); </span><br />changeThumbSize("<span style="color: #cc0000;"><b>widget-ID-HERE</b></span>",210);</blockquote>Then replace <span style="color: #cc0000;"><b>widget-ID-HERE</b></span> text with the ID of that widget/gadget.<br /><br />Note: you won't see the changes if the widget has a <b>class</b> selector - for this you may need to change <span style="background-color: yellow;">class</span> with <span style="background-color: yellow;">id</span> and replace the dot "<span style="background-color: yellow;">.></span>" symbol with "<span style="background-color: yellow;">#</span>" in the CSS code.<br /><br />If you don't know how to find the id of a particular widget, please check out this tutorial on <a href="http://helplogger.blogspot.com/2014/08/how-firebug-helps-you-design-your.html" rel="nofollow" target="_blank">How to Use Firebug to Design a Blogger blog</a>.<br /><br />Step 5. Finally, press the "Save Template" to save the changes and this is how you can increase thumbnail resolution on Blogger. Enjoy!

How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will maintain a default size of 72 x 72px which might not look good if we try to make them l...

Read more »

Popular Posts Widget for Christmas

The Christmas countdown has begun and while homes are decorated with colorful lights and the sweet smell of pine trees, there's no reason why we wouldn't decorate our Blogspot blog with Christmas bells next to the <a href="http://helplogger.blogspot.com/2015/09/5-popular-posts-widget-for-blogger.html">Popular Posts widget for Blogger</a>!<br /><br />So, today I was playing around a bit with CSS and I was thinking that it would be cool to add some fresh styles to the Popular Posts widget in such a way to look just ready for the forthcoming Christmas holiday.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="popular posts widget, blogger gadgets " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_wMu1fioBgzYQd20-BIky0GVTSQ-5IuGCYlqJFJu9nmHXOAi0CpeLNwyF8qMZ-1ov0hlg_vTarhr5CZGfFUpugHx4igkX6sxqYN9iaSu-hCEYPz4wWW4A3sNGnEVe3qSz24vXlfei6IX/s1600/popular-posts-widget-for-blogger-with-christmas-bells-sounds.png" title="how to add popular posts widget for christmas to blogger" /></div><br />To see a demo for the Popular Posts widget for Christmas, please visit the demo blog:<br /><br /><div style="text-align:center;"><a class="demo-link" href="http://demohelplogger.blogspot.com/" rel="nofollow" target="_blank">Demo blog</a></div><br /><h3>How to Add Popular Posts Widget with Christmas Bells in Blogger</h3>Step 1. Log in to your Blogger Dashboard, then go to 'Template' and click the 'Edit HTML' button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys, then search for this tag:<br /><blockquote class="tr_bq"></head></blockquote>Step 3. Just above the </head> tag, add the following CSS code:<br /><blockquote class="tr_bq"><style><br />#PopularPosts1 .item-thumbnail:before{<br />display: block;<br />content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj52Yi4e4KNlqiXw_Kre7X41g_hZGq5CpAp7WT_Q_L2t8bJxw1J0LPXoOB9jZPEe3sXWdRKOhEOTuL238vJmZH2fIhzM99eHCwr62JANxJLxhfSM9jgYLhITOC0QhjRYHPzfTyBp1HQBiER/s1600/bells.png');<br />margin-left: -15px;<br />margin-top: -5px;<br />z-index: 2;<br />position: absolute;<br />}<br />#PopularPosts1 .item-thumbnail img{<br />float:left;<br />margin:5px;<br />padding: 2px;<br />border: 6px solid #FED74C;<br />height: 72px; <br />width: 92px;<br />position: relative;<br />background: #F11C25;<br />-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);<br />-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);<br />box-shadow: 2px 2px 5px rgba(0,0,0,0.3);<br />transition: opacity 1s ease;<br />}<br />#PopularPosts1 ul li:nth-child(odd){<br />  -ms-transform:rotate(20deg); /* IE 9 */<br />  -moz-transform:rotate(20deg); /* Firefox */<br />  -webkit-transform:rotate(20deg); /* Safari and Chrome */<br />  -o-transform:rotate(20deg); /* Opera */<br /> -webkit-transition: all 0.2s ease-in-out;<br />-moz-transition: all 0.2s ease-in-out;<br />-o-transition: all 0.2s ease-in-out;<br />transition: all 0.2s ease-in-out;<br />}<br />#PopularPosts1 ul li:nth-child(even){<br />  -ms-transform:rotate(-40deg); /* IE 9 */<br />  -moz-transform:rotate(-40deg); /* Firefox */<br />  -webkit-transform:rotate(-40deg); /* Safari and Chrome */<br />  -o-transform:rotate(-40deg); /* Opera */<br /> -webkit-transition: all 0.2s ease-in-out;<br />-moz-transition: all 0.2s ease-in-out;<br />-o-transition: all 0.2s ease-in-out;<br />transition: all 0.2s ease-in-out;<br />}<br />#PopularPosts1 ul li:nth-child(odd):hover{<br />  -ms-transform:rotate(0deg); /* IE 9 */<br />  -moz-transform:rotate(0deg); /* Firefox */<br />  -webkit-transform:rotate(0deg); /* Safari and Chrome */<br />  -o-transform:rotate(0deg); /* Opera */<br />}<br />#PopularPosts1 ul li:nth-child(even):hover{<br />  -ms-transform:rotate(0deg); /* IE 9 */<br />  -moz-transform:rotate(0deg); /* Firefox */<br />  -webkit-transform:rotate(0deg); /* Safari and Chrome */<br />  -o-transform:rotate(0deg); /* Opera */<br />}<br />#PopularPosts1 ul li{<br />display: inline-block;<br />float: left;}<br />#PopularPosts1 .item-thumbnail{<br />width: 70px;<br />}<br />#PopularPosts1 li{<br />margin-right: 15px;<br />}<br />#PopularPosts1 .item-snippet, .item-title{<br />display: none;<br />} </style></blockquote>Step 4. Click the 'Save Template' button to save the changes and you're done. Enjoy!<br /><br />Also, please check out this tutorial on <a href="http://helplogger.blogspot.ro/2013/12/how-to-add-snow-in-background-of-your.html">how to add falling snowflakes in the background of a Blogger blog.</a>

Popular Posts Widget for Christmas

The Christmas countdown has begun and while homes are decorated with colorful lights and the sweet smell of pine trees, there's no reaso...

Read more »

4 Different Styles For the Popular Posts Widget

Blogger allows us to easily add a "<b>Popular Posts</b>" widget, that we select from its list of gadgets, and we can do that by going to the "Layout" of our Blog.<br /><br />This gadget, as the name implies, shows which are the most visited blog posts, and you can set it to display the info you want in <b>four possible combinations</b>: (1) only the title of the post, (2) a thumbnail of the image and the post title, (3) post title with a summary, and (4) post title with a thumbnail and a post snippet.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvmMApXOQMoBwV0w7kqwTNtjK7mb8i0dDw9epL5qrfGkfz0N5mm9POyNAsJ4B1lfwoAnzY8sieweBGyuQa3rEqfJxcXyk_WG20sSa78Wtx-FHspLuPqDwWOUjeZ3Tg6nrm8Vxpegsv-rrB/s1600/blogger-popular-posts-gadget-style.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvmMApXOQMoBwV0w7kqwTNtjK7mb8i0dDw9epL5qrfGkfz0N5mm9POyNAsJ4B1lfwoAnzY8sieweBGyuQa3rEqfJxcXyk_WG20sSa78Wtx-FHspLuPqDwWOUjeZ3Tg6nrm8Vxpegsv-rrB/s320/blogger-popular-posts-gadget-style.png" width="320" /></a></div><br />This is an element that you shouldn't miss in your blog because it encourages your visitors to navigate through your content and that can result in higher income if you're monetizing your blog because it would generate an increase in the number of pages visited, and in turn, can attract the users' interest to subscribe to the blog and to read interesting content.<br /><!-- adsense --><h3><b>Preliminary steps: Add the gadget, if you haven't done it yet.</b></h3><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>1.</b></span></span> Select the "<b>Layout</b>" tab and add the "<b>Popular Posts</b>" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "<b>Add a Gadget</b>".<br /><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>2.</b> </span></span>Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnaWbhdjan8AHC4nutcCFvuaNKo86Kpr9HaYxBZS7JVMYtt9rlYgpa3LSFVQSJZ_5I2kYlFkiF6VuE3sS7w_3dahSY6eE8a2HOwIEMy34a_rm1egVDYS4YAo5KEwj98Are2xm3CwB-vIZ/s1600/configure-blogger-popular-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbnaWbhdjan8AHC4nutcCFvuaNKo86Kpr9HaYxBZS7JVMYtt9rlYgpa3LSFVQSJZ_5I2kYlFkiF6VuE3sS7w_3dahSY6eE8a2HOwIEMy34a_rm1egVDYS4YAo5KEwj98Are2xm3CwB-vIZ/s320/configure-blogger-popular-posts.png" width="320" /></a></div><span style="color: #3d85c6;"><span style="font-size: large;"><b>3. </b></span></span>After configuring the widget, save the changes by clicking on Save, and then Save arrangement.<br /><br /><h3>How to add the CSS to create the style of the Popular Posts widget</h3><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>1.</b> </span></span>Choose a style, then copy the CSS that appears below the image that shows the style.<br /><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>2.</b></span></span> Select the "<b>Template</b>" tab, then click on <b>Customize </b>> <b>Advanced </b>> <b>Add CSS </b>and then paste the CSS style that you like the most.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVXkvFcxP2yI_Nmo9TxK42G69Kcx5AQ371FDNsDPDsih89M2ZJ6baKPSyaL63R0rv0LjctZxg7vrvmBbzggl84McEDw-JMVA6lQq-nbkyYZNb2I__JovzVEezHpzYTZGb7ZO5Eh9_Ag2d/s1600/adding-css-in-blogger-template-designer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tutorials" border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqVXkvFcxP2yI_Nmo9TxK42G69Kcx5AQ371FDNsDPDsih89M2ZJ6baKPSyaL63R0rv0LjctZxg7vrvmBbzggl84McEDw-JMVA6lQq-nbkyYZNb2I__JovzVEezHpzYTZGb7ZO5Eh9_Ag2d/s640/adding-css-in-blogger-template-designer.png" title="adding css in blogger template designer" width="640" /></a></div><span style="color: #3d85c6;"><span style="font-size: large;"><b>3.</b> </span></span>Once you add the CSS, Save changes by clicking on the "<b>Apply to Blog</b>" button.<br /><br /><i>Note: Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]></b:skin> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again)</i><br /><br />And that's it! You've already customized the popular posts widget when it shows only post titles.<br /><br /><span style="color: #0b5394;"><span style="font-size: large;"><b>Styles</b></span></span><br /><br />Here is the CSS of each style, just choose the one you like the best and put it on your blog. You can see each of these styles in action in the following demo blog:<br /><br /><a href="http://demo-blog343.blogspot.com/" rel="nofollow">http://demo-blog343.blogspot.com</a><br /><br /><span style="color: #3d85c6;"><i><b><span style="font-size: large;">Style 1:</span></b></i></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCzmRZ0DSHZKhixhlmh159-xQDKNYZWqodbpSdUlljY9S1KG6YcEh_rnvoLS65FTDXx1nDCMxynE_4_rOkUbn_TkH9iV38YQoqPsSN4YYU0Nf1m8CVurz8PZ-vcA0bWSt1V4-ZHzCnnsH3/s1600/blogger-popular-posts-gadget-style.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets, popular posts widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCzmRZ0DSHZKhixhlmh159-xQDKNYZWqodbpSdUlljY9S1KG6YcEh_rnvoLS65FTDXx1nDCMxynE_4_rOkUbn_TkH9iV38YQoqPsSN4YYU0Nf1m8CVurz8PZ-vcA0bWSt1V4-ZHzCnnsH3/s1600/blogger-popular-posts-gadget-style.png" title="styles for blogger popular posts gadget" /></a></div><blockquote>#PopularPosts1 h2{<br />padding:7px 0 3px 0;<br />width:100%;<br />margin-bottom:10px;<br />font-size:1.3em;<br />text-indent:-12px;<br />font-size:18px;<br />text-align:center;<br />color: <span style="color: #3d85c6;"><b>#757575</b></span>; <span style="color: #38761d;">/* Color of the widget's title */</span><br />}<br />#PopularPosts1 ul{<br />list-style:none;<br />counter-reset:li;<br />padding:8px 0px 1px;<br />left:-7px;<br />width:290px;<br />}<br />#PopularPosts1 li{<br />position:relative;<br />margin:0 0 10px 0;<br />padding: 3px 2px 0 17px;<br />left:-5px;<br />width:285px;<br />}<br />#PopularPosts1 ul li{<br />background: #eee;<br />position: relative;<br />display: block;<br />padding: .4em .2em .4em 2em;<br />*padding: .2em;<br />margin: .5em 0;<br />background: #ddd;<br />text-decoration: none;<br />border-radius: .3em;<br />transition: all .3s ease-out;   <br />}<br />#PopularPosts1 ul li:before{<br />content: counter(li);<br />counter-increment: li;<br />position: absolute; <br />top: 50%;<br />margin: -1.3em;<br />height: 2em;<br />width: 2em;<br />line-height: 2em;<br />font-size: 15px;<br />color: <span style="color: #3d85c6;"><b>#fff</b></span>; <span style="color: #38761d;">/* text color of numbers */</span><br />background: <span style="color: #3d85c6;"><b>#FB8835</b></span>; <span style="color: #38761d;">/* background color of numbers */</span><br />border: .2em solid <span style="color: #3d85c6;"><b>#fff</b></span>; <span style="color: #38761d;">/* border color */</span><br />-webkit-box-shadow: 0 8px 5px -7px #888;<br />-moz-box-shadow: 0 8px 5px -7px #888;<br />box-shadow: 0 8px 5px -7px #888;<br />text-align: center;<br />font-weight: bold;<br />border-radius: 2em;<br />position: absolute;   <br />left: 0;<br />transition: all .3s ease-out;<br />}<br />#PopularPosts1 ul li:hover{<br />background: #eee;<br />}<br />#PopularPosts1 ul li:hover:before{<br />transform: rotate(360deg);   <br />}<br />#PopularPosts1 ul li a{<br />font: <span style="color: #3d85c6;"><b>14px </b></span>Georgia, serif; <span style="color: #38761d;">/* font size of post titles */</span><br />text-shadow: 0 -1px 2px #fff;<br />color: #444;<br />display:block;<br />min-height:25px;<br />text-decoration:none;<br />text-transform: uppercase;<br />}<br />#PopularPosts1 ul li a:hover{<br />color: #444;<br />}</blockquote><br /><span style="color: #3d85c6;"><span style="font-size: large;"><i><b>Style 2:</b></i></span></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyirGwUmoRRcOc24oOjLSoLVhjjpXpuNef3KNEYrPa1SLtXipm5sJCXycu19dyZ3xbISiGOyVR_k7cAXDtp-8HpmLS8wVw1PMzFK0WBx1DWce8lvQHwzXl9y5jw-dTReKR-HI7YI0vxl2/s1600/blogger-popular-posts-gadget-style-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets, popular posts widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyirGwUmoRRcOc24oOjLSoLVhjjpXpuNef3KNEYrPa1SLtXipm5sJCXycu19dyZ3xbISiGOyVR_k7cAXDtp-8HpmLS8wVw1PMzFK0WBx1DWce8lvQHwzXl9y5jw-dTReKR-HI7YI0vxl2/s1600/blogger-popular-posts-gadget-style-2.png" title="styles for blogger popular posts gadget" /></a></div><blockquote>#PopularPosts1 h2{<br />position:relative;<br />padding:8px 10px 6px 10px;<br />width:100%;<br />margin-bottom: 5px;<br />font-size:17px;<br />color:<b><span style="color: #3d85c6;">#757575</span></b>; <span style="color: #38761d;">/* Color of the widget's title */</span><br />text-align:left;<br />}<br />#PopularPosts1 ul{<br />list-style:none;<br />counter-reset:li;<br />padding:10px;<br />left:-8px;<br />width:100%;<br />}<br />#PopularPosts1 li{ <span style="color: #38761d;">/* Styles of each element */</span><br />width:100%;<br />position:relative;<br />left:0;<br />margin:0 0 1px 12px;<br />padding:4px 5px;<br />}<br />#PopularPosts1 ul li:before{<br />content: counter(li);<br />counter-increment: li;<br />position: absolute; <br />left: -30px;<br />top: 50%;<br />margin-top: -13px;<br />background: <span style="color: #3d85c6;"><b>#8E8E8E</b></span>; <span style="color: #38761d;">/* background color of the numbers */</span><br />height: 1.9em;<br />width: 2em;<br />line-height: 2em;<br />text-align: center;<br />font-weight: bold;<br />color: #fff;<br />font-size: 14px;<br />}<br />#PopularPosts1 ul li:after{<br />position: absolute;<br />content: '';<br />left: -2px;<br />margin-top: -.7em; <br />top: 50%;<br />width: 0;<br />height: 0;<br />border-top: 8px solid transparent;<br />border-bottom: 8px solid transparent;<br />border-left:10px solid <span style="color: #3d85c6;"><b>#8E8E8E</b></span>; <span style="color: #38761d;">/* background color of the right arrow*/</span><br />}<br />#PopularPosts1 ul li a{<br />color: #444;<br />text-decoration: none;   <br />font-size:15px;<br />}<br />#PopularPosts1 ul li {<br />position: relative;<br />display: block;<br />padding: .4em .4em .4em .8em;<br />*padding: .4em;<br />margin: .5em 0 .5em 0.4em;<br />background: #ddd;<br />transition: all .3s ease-out;<br />text-decoration:none;<br />transition: all .1s ease-in-out;<br />}<br />#PopularPosts1 ul li:hover{<br />background: <span style="color: #0b5394;"><b>#eee</b></span>; <span style="color: #38761d;">/* Background color on mouseover */</span><br />}   <br />#PopularPosts1 ul li a:hover{<br />color:<span style="color: #3d85c6;"><b>#444</b></span>; <span style="color: #38761d;">/* Link color on mouseover */</span><br />margin-left:3px;<br />}</blockquote><br /><span style="color: #3d85c6;"><b><i><span style="font-size: large;">Style 3:</span></i></b></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJLnlph2X5EUMbF_Edeli7sO6DI6HdYtTLS_2GavX8xX6w9w37mrfJCU9RP7cRvWVFZ848bNdyMOmG1nuXheFhapUXT32AoQ6u5mjz0JcYMcVKPLAfvrvvzzfVcq8uEgvc5M69ma_xxzGm/s1600/blogger-popular-posts-gadget-style3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets, popular posts" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJLnlph2X5EUMbF_Edeli7sO6DI6HdYtTLS_2GavX8xX6w9w37mrfJCU9RP7cRvWVFZ848bNdyMOmG1nuXheFhapUXT32AoQ6u5mjz0JcYMcVKPLAfvrvvzzfVcq8uEgvc5M69ma_xxzGm/s1600/blogger-popular-posts-gadget-style3.png" title="styles for blogger popular posts gadget" /></a></div><blockquote class="tr_bq">#PopularPosts1 h2{<br />position:relative;<br />right:-2px;<br />padding:8px 63px 6px 17px; <br />width:100%;<br />margin:0;<br />font-size:16px;<br />background:<span style="color: #3d85c6;"><b>#4F4F4F</b></span>; <span style="color: #38761d;">/* Background color */</span><br />color:<span style="color: #3d85c6;"><b>#f2f2f2</b></span>; <span style="color: #38761d;">/* Color of the widget's title */</span><br />text-align:left;<br />text-indent:18px;<br />}<br />#PopularPosts1 h2:before{<br />position:absolute;<br />content:"";<br />top:36px;<br />right:0px;<br />width: 0px;<br />height: 0px;<br />border-bottom:12px outset transparent;<br />border-left:12px solid #000000; <br />}<br />#PopularPosts1 h2:after{<br />position:absolute;<br />content:"";<br />top:-6px;<br />left:-5px;<br />width: 0px;<br />height: 0px;<br />border-bottom:24px outset transparent;<br />border-top:24px outset transparent;<br />border-left:24px solid <span style="color: #3d85c6;"><b>#ffffff</b></span>; <span style="color: #38761d;">/* Arrow background color on the left */</span><br />}<br />#PopularPosts1 ul{<br />list-style:none;<br />counter-reset:li;<br />padding:10px;<br />left:-8px;<br />width:100%;<br />}<br />#PopularPosts1 li{ <br />width:100%;<br />position:relative;<br />left:0;<br />margin:7px 0 16px 12px;<br />padding:10px  4px 0 5px;<br />}<br />#PopularPosts1 ul li:before{ <br />content:counter(li);<br />counter-increment:li;<br />position:absolute;<br />top:-2px;<br />left:-20px;<br />font-size:35px;<br />width:20px;<br />color:#888888; <br />}<br /><br />#PopularPosts1 ul li a{<br />display:block;<br />font-size:<span style="color: #3d85c6;"><b>16px</b></span>; <span style="color: #38761d;">/* Font size of the links */</span><br />color:<span style="color: #3d85c6;"><b> #666</b></span>; <span style="color: #38761d;">/* Color of the links */</span><br />text-decoration:none;<br />transition: all .1s ease-in-out;font-weight: bold;<br />}<br />#PopularPosts1 ul li a:hover{<br />color:#3366FF;<br />margin-left:3px;<br />}</blockquote><br /><span style="color: #3d85c6;"><b><i><span style="font-size: large;">Style 4:</span></i></b></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NzAzQOloeHHUzpDmFdyZcioVQcrJkWNNbMUps4HCKVht-1ECzcleo4iSxa7ol8d9IP46WdQLGqogxq28dIr4qtjECcvFphjz3j3j4WEgP3CelvztNq_qZTJEeXvZKRHQLH3r03XX3IeF/s1600/style-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NzAzQOloeHHUzpDmFdyZcioVQcrJkWNNbMUps4HCKVht-1ECzcleo4iSxa7ol8d9IP46WdQLGqogxq28dIr4qtjECcvFphjz3j3j4WEgP3CelvztNq_qZTJEeXvZKRHQLH3r03XX3IeF/s1600/style-4.png" title="styles for blogger popular posts gadget" /></a></div><blockquote class="tr_bq">#PopularPosts1 h2{<br />padding:8px 10px 3px 0;<br />width:100%;<br />margin:0;<br />font-size:16px;<br />position:relative;<br />left:-20px;<br />display:block;<br />border-bottom:2px solid #ccc;<br />}<br />#PopularPosts1 ul{<br />list-style:none;<br />counter-reset:li;<br />padding:10px;<br />width:100%;<br />}<br />#PopularPosts1 li{ /* Styles of each element */<br />width:100%;<br />position:relative;<br />left:0;<br />margin:0 0 6px 10px;<br />padding:4px 5px;<br />}<br />#PopularPosts1 ul li:before{<span style="color: #38761d;"> /* Style of the numbers */</span><br />content:counter(li);<br />counter-increment:li;<br />position:absolute;<br />top:3px;<br />left:-39px;<br />font-size:21px;<br />width:28px;<br />height:28px;<br />border-radius: 50%;<br />color:#777;<span style="color: #38761d;"> /* Text color */</span><br />border: 2px solid #ddd;<span style="color: #38761d;"> /* Rounded border color */</span><br />padding:0;<br />text-indent:9px;<br />}<br />#PopularPosts1 ul li a{<br />display:block;<br />position:relative;<br />left:-45px;<br />width:100%;<br />margin:0;<br />min-height:28px;<br />padding: 5px 3px 3px 39px;<br />color:#333; <span style="color: #38761d;">/* color of the links */</span><br />text-decoration:none;<br />font-size:14px; <span style="color: #38761d;">/* Font size of the links */</span><br />font-style: italic;<br /><br />}<br />#PopularPosts1 ul li a:hover{<br />color:#3366ff;<br />margin-left:3px;<br />}</blockquote><br /><b><span style="color: #0b5394;"><span style="font-size: large;">Final Notes</span></span></b><br /><br />All the CSS is valid. I just have to mention that the numbering is not visible in Internet Explorer 7, since that version of the browser does not support properties that make the numbers appear. For example in the 4th style, the circles look squared in IE8 and earlier versions since, these versions do not support a property that makes them look as circles.

4 Different Styles For the Popular Posts Widget

Blogger allows us to easily add a " Popular Posts " widget, that we select from its list of gadgets, and we can do that by going t...

Read more »