Blogger Buzz: popular posts

How to Increase Thumbnail Resolution on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger 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. 
 
In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget but we can apply this trick on any of the blog widgets. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R3oRLt0j-aECl1UADTDqMhfJlXK7nkmNh33vqOnYDryL5BRzQ2iHqnCV44slwLNMB2s5KUIQB3GEBEEYO1Mpt-pc_UrF5piGWdq-T-Lgum6qhrAUwPgq7N1ywMXWma6UA1ufVpemRFig/s1600/change-thumbnail-resolution-on-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Increase Thumbnail resolution " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R3oRLt0j-aECl1UADTDqMhfJlXK7nkmNh33vqOnYDryL5BRzQ2iHqnCV44slwLNMB2s5KUIQB3GEBEEYO1Mpt-pc_UrF5piGWdq-T-Lgum6qhrAUwPgq7N1ywMXWma6UA1ufVpemRFig/s1600/change-thumbnail-resolution-on-blogger.png" title="Increase Thumbnail resolution on Blogger" /></a>.</div>
 
<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. 
 
Step 2. Go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box. Step 3. Type or paste the </head> tag inside the search box then hit Enter to find it. After you found the </head> tag, add this CSS above it: 
<blockquote class="tr_bq">
<style type='text/css'> 
.PopularPosts .item-thumbnail a { 
clip: auto; 
display: block; 
height: 130px; 
margin: 0 0px 5px; 
overflow: hidden; 
width: 210px; 
border: 2px solid #EEEEEE; 
border-radius: 20px; 
} 
.PopularPosts .item-thumbnail img { 
position: relative; 
top: -30px; 
transition:all .2s linear; 
 -o-transition:all .5s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear; 
} 
.PopularPosts .item-thumbnail img:hover{ 
opacity:.6; 
filter:alpha(opacity=60) 
} 
.PopularPosts .widget-content ul li { 
background: #F9F9F9; 
border: 2px solid #EEEEEE; 
border-radius: 10px; 
box-shadow: 0 4px 10px #EEEEEE; 
color: #555555; 
padding: 10px; 
margin-bottom: 5px; 
} 
.PopularPosts .item-title { 
font: 14px Cambria,Georgia, sans-serif; 
color: #2288BB; 
font-weight: bold; 
text-transform: uppercase; 
text-align: center; 
} 
.PopularPosts .item-snippet { 
display: none; 
} 
.widget .widget-item-control a img { 
height: 18px; 
width: 18px; 
} 
</style></blockquote>
Step 4. Search for the </body> tag and just above it, add this script: 
<blockquote class="tr_bq">
<script type='text/javascript'>                   
function changeThumbSize(id,size){ 
var blogGadget = document.getElementById(id); 
var replacement = blogGadget.innerHTML; 
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); 
var thumbnails = blogGadget.getElementsByTagName("img"); 
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
} 
} 
changeThumbSize("PopularPosts1",210);                   
</script></blockquote>
What I highlighted in red is the widget ID for the Popular Posts gadget - to change the thumbnails size for any of your blog widgets, first you need to find the gadget/widge ID and then add a line below this part: 
<blockquote class="tr_bq">
changeThumbSize("PopularPosts1",210); 
changeThumbSize("widget-ID-HERE",210);</blockquote>
 ... and replace widget-ID-HERE text with the ID of that widget/gadget. 
 
Note: you'll not be able to see the changes if the widget has a class selector - for this you will need to change class with id and replace the dot "." symbol with "#" within the CSS... 
 
Step 5. Finally, Save the Template.  
 
 If you need more help, please leave a comment below.</div>

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

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 to the "Layout" of our Blog. 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 four possible combinations: (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. <div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0cNE5TKve9sOZG2WJRxHtKSlJDSnqL8RNsN1Id4qUWbZx-UsBQpTUWbAhAYLFtbzY0akHRaSAevE6RQwauvuG4FhnzbxwNL4dECE053e9zbCtOZknHuLDrKmsTW8K9K7BHRTcZh7bmQt/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/AVvXsEhJ0cNE5TKve9sOZG2WJRxHtKSlJDSnqL8RNsN1Id4qUWbZx-UsBQpTUWbAhAYLFtbzY0akHRaSAevE6RQwauvuG4FhnzbxwNL4dECE053e9zbCtOZknHuLDrKmsTW8K9K7BHRTcZh7bmQt/s320/blogger-popular-posts-gadget-style.png" width="320" /></a></div> 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. <h3>Preliminary steps: Add the gadget, if you haven't done it yet.</h3> 1. Select the "Layout" tab and add the "Popular Posts" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "Add a Gadget". 2. 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. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpD3-QK9-kjkIgHiB_wWluBfRM4-H4KhWcjJroLlm8p66cGV1IUR9LW_7Yxe0eFknT6O8DXyzWUBn3z_ZrMJg5mBRzX_haNvBryWugThUSp2S58dT4Dg0zhvm_05l33OtTw7ESCyHJ9B_p/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/AVvXsEgpD3-QK9-kjkIgHiB_wWluBfRM4-H4KhWcjJroLlm8p66cGV1IUR9LW_7Yxe0eFknT6O8DXyzWUBn3z_ZrMJg5mBRzX_haNvBryWugThUSp2S58dT4Dg0zhvm_05l33OtTw7ESCyHJ9B_p/s320/configure-blogger-popular-posts.png" width="320" /></a></div>3. After configuring the widget, save the changes by clicking on Save, and then Save arrangement. <h3>How to add the CSS to create the style of the Popular Posts widget</h3> 1. Choose a style, then copy the CSS that appears below the image that shows the style. 2. Select the "Template" tab, then click on Customize > Advanced > Add CSS and then paste the CSS style that you like the most. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh32DrwvRXKn4FRg4ae1dDOs1wbH33agT-oJ21_xppEQoyH8BsIaL8ydg28igzl3qiwgVV84x_8KnecGLV8aaTAt-lgbYLoJhUIimdgkh2-p1IkWcE4jzGsrQdGPT5aCQ31E1DlbAk6NWNU/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/AVvXsEh32DrwvRXKn4FRg4ae1dDOs1wbH33agT-oJ21_xppEQoyH8BsIaL8ydg28igzl3qiwgVV84x_8KnecGLV8aaTAt-lgbYLoJhUIimdgkh2-p1IkWcE4jzGsrQdGPT5aCQ31E1DlbAk6NWNU/s640/adding-css-in-blogger-template-designer.png" title="adding css in blogger template designer" width="640" /></a></div>3. Once you add the CSS, Save changes by clicking on the "Apply to Blog" button. 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) And that's it! You've already customized the popular posts widget when it shows only post titles. Styles 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: <a href="http://demo-blog343.blogspot.com/" rel="nofollow">http://demo-blog343.blogspot.com</a> Style 1: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1M5Wnlmrm2jyyH2GB_EgvxVM9bhQPI7EC8NlevxbWH-J7amPc5308ykH23joyymBWvaQkpqHC6-KaaLKNPHAW69rO1He4ZVOkc6t5upEl3NWvIYGwYZ7iF4TcT-x5LdLxl625iBVzEklY/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/AVvXsEh1M5Wnlmrm2jyyH2GB_EgvxVM9bhQPI7EC8NlevxbWH-J7amPc5308ykH23joyymBWvaQkpqHC6-KaaLKNPHAW69rO1He4ZVOkc6t5upEl3NWvIYGwYZ7iF4TcT-x5LdLxl625iBVzEklY/s1600/blogger-popular-posts-gadget-style.png" title="styles for blogger popular posts gadget" /></a></div><blockquote>#PopularPosts1 h2{ padding:7px 0 3px 0; width:100%; margin-bottom:10px; font-size:1.3em; text-indent:-12px; font-size:18px; text-align:center; color: #757575; /* Color of the widget's title */ } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:8px 0px 1px; left:-7px; width:290px; } #PopularPosts1 li{ position:relative; margin:0 0 10px 0; padding: 3px 2px 0 17px; left:-5px; width:285px; } #PopularPosts1 ul li{ background: #eee; position: relative; display: block; padding: .4em .2em .4em 2em; *padding: .2em; margin: .5em 0; background: #ddd; text-decoration: none; border-radius: .3em; transition: all .3s ease-out;   } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; top: 50%; margin: -1.3em; height: 2em; width: 2em; line-height: 2em; font-size: 15px; color: #fff; /* text color of numbers */ background: #FB8835; /* background color of numbers */ border: .2em solid #fff; /* border color */ -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; position: absolute;   left: 0; transition: all .3s ease-out; } #PopularPosts1 ul li:hover{ background: #eee; } #PopularPosts1 ul li:hover:before{ transform: rotate(360deg);   } #PopularPosts1 ul li a{ font: 14px Georgia, serif; /* font size of post titles */ text-shadow: 0 -1px 2px #fff; color: #444; display:block; min-height:25px; text-decoration:none; text-transform: uppercase; } #PopularPosts1 ul li a:hover{ color: #444; }</blockquote> Style 2: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqatidmL9cGVMGcnB9rClExD48lIEBJ-TlloL14CNG_8E8PYk9aPsEWhMYGG9acJXwiZDITUC_o9mS2Cl3-CqNAne2MA0x2kvnNWaSObYFpIMzLthvgP5TC9fS6ChL7ufoMtnkrVKsgc5Z/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/AVvXsEgqatidmL9cGVMGcnB9rClExD48lIEBJ-TlloL14CNG_8E8PYk9aPsEWhMYGG9acJXwiZDITUC_o9mS2Cl3-CqNAne2MA0x2kvnNWaSObYFpIMzLthvgP5TC9fS6ChL7ufoMtnkrVKsgc5Z/s1600/blogger-popular-posts-gadget-style-2.png" title="styles for blogger popular posts gadget" /></a></div><blockquote>#PopularPosts1 h2{ position:relative; padding:8px 10px 6px 10px; width:100%; margin-bottom: 5px; font-size:17px; color:#757575; /* Color of the widget's title */ text-align:left; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 1px 12px; padding:4px 5px; } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; left: -30px; top: 50%; margin-top: -13px; background: #8E8E8E; /* background color of the numbers */ height: 1.9em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; color: #fff; font-size: 14px; } #PopularPosts1 ul li:after{ position: absolute; content: ''; left: -2px; margin-top: -.7em; top: 50%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left:10px solid #8E8E8E; /* background color of the right arrow*/ } #PopularPosts1 ul li a{ color: #444; text-decoration: none;   font-size:15px; } #PopularPosts1 ul li { position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 0.4em; background: #ddd; transition: all .3s ease-out; text-decoration:none; transition: all .1s ease-in-out; } #PopularPosts1 ul li:hover{ background: #eee; /* Background color on mouseover */ }   #PopularPosts1 ul li a:hover{ color:#444; /* Link color on mouseover */ margin-left:3px; }</blockquote> Style 3: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-urXDqDj49ov6tG-Cee2Nw0S7izwrJ3daBp7RO1q9HlFqoLJgdbl_RmFE0ZhyphenhyphenLfdTfWPjIVgW3u57howfkoNf2WZrLJZG5wD9Yy2wTFnLpkN0pCNVlBGeDtPuSSH2n1lmH202vLuU0rRg/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/AVvXsEg-urXDqDj49ov6tG-Cee2Nw0S7izwrJ3daBp7RO1q9HlFqoLJgdbl_RmFE0ZhyphenhyphenLfdTfWPjIVgW3u57howfkoNf2WZrLJZG5wD9Yy2wTFnLpkN0pCNVlBGeDtPuSSH2n1lmH202vLuU0rRg/s1600/blogger-popular-posts-gadget-style3.png" title="styles for blogger popular posts gadget" /></a></div><blockquote class="tr_bq">#PopularPosts1 h2{ position:relative; right:-2px; padding:8px 63px 6px 17px; width:100%; margin:0; font-size:16px; background:#4F4F4F; /* Background color */ color:#f2f2f2; /* Color of the widget's title */ text-align:left; text-indent:18px; } #PopularPosts1 h2:before{ position:absolute; content:""; top:36px; right:0px; width: 0px; height: 0px; border-bottom:12px outset transparent; border-left:12px solid #000000; } #PopularPosts1 h2:after{ position:absolute; content:""; top:-6px; left:-5px; width: 0px; height: 0px; border-bottom:24px outset transparent; border-top:24px outset transparent; border-left:24px solid #ffffff; /* Arrow background color on the left */ } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; } #PopularPosts1 li{ width:100%; position:relative; left:0; margin:7px 0 16px 12px; padding:10px  4px 0 5px; } #PopularPosts1 ul li:before{ content:counter(li); counter-increment:li; position:absolute; top:-2px; left:-20px; font-size:35px; width:20px; color:#888888; } #PopularPosts1 ul li a{ display:block; font-size:16px; /* Font size of the links */ color: #666; /* Color of the links */ text-decoration:none; transition: all .1s ease-in-out;font-weight: bold; } #PopularPosts1 ul li a:hover{ color:#3366FF; margin-left:3px; }</blockquote> Style 4: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPTTRgvVc3Oh6aUqycZ6y4tAaTq_OVLiOEDCCHEIE82n-ZtHCjbqVJIpTJ-f9pCE2gKh8ZPwRiDPoaX-IDnUmyqa0IhmsjxT0wI1nES-y6F0w_KJhAkm_CK69epTLPPxJEgxWUWgLktzJo/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/AVvXsEhPTTRgvVc3Oh6aUqycZ6y4tAaTq_OVLiOEDCCHEIE82n-ZtHCjbqVJIpTJ-f9pCE2gKh8ZPwRiDPoaX-IDnUmyqa0IhmsjxT0wI1nES-y6F0w_KJhAkm_CK69epTLPPxJEgxWUWgLktzJo/s1600/style-4.png" title="styles for blogger popular posts gadget" /></a></div><blockquote class="tr_bq">#PopularPosts1 h2{ padding:8px 10px 3px 0; width:100%; margin:0; font-size:16px; position:relative; left:-20px; display:block; border-bottom:2px solid #ccc; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 6px 10px; padding:4px 5px; } #PopularPosts1 ul li:before{ /* Style of the numbers */ content:counter(li); counter-increment:li; position:absolute; top:3px; left:-39px; font-size:21px; width:28px; height:28px; border-radius: 50%; color:#777; /* Text color */ border: 2px solid #ddd; /* Rounded border color */ padding:0; text-indent:9px; } #PopularPosts1 ul li a{ display:block; position:relative; left:-45px; width:100%; margin:0; min-height:28px; padding: 5px 3px 3px 39px; color:#333; /* color of the links */ text-decoration:none; font-size:14px; /* Font size of the links */ font-style: italic; } #PopularPosts1 ul li a:hover{ color:#3366ff; margin-left:3px; }</blockquote> Final Notes 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.

Blog Design popular posts posts Widgets 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...

Add a Popular Posts Gallery just above your Blogger posts

<div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsatL_UnpkBJAIcim0znWQfAfXQNwWMluQqeNnUqkfvYrClJfT9iTfE_xoI07CsKMm11KMzc9obiCIT4OKnJDODwxJC92epYMEnWkR8UPRmInDIJYbAuc9RC4ZvqwHJX3La-lexp7GZXKa/s1600/add+a+popular+posts+gallery+widget+above+blogger+blogspot+posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsatL_UnpkBJAIcim0znWQfAfXQNwWMluQqeNnUqkfvYrClJfT9iTfE_xoI07CsKMm11KMzc9obiCIT4OKnJDODwxJC92epYMEnWkR8UPRmInDIJYbAuc9RC4ZvqwHJX3La-lexp7GZXKa/s1600/add+a+popular+posts+gallery+widget+above+blogger+blogspot+posts.png" /></a></div>The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog. <div class="separator" style="clear: both; text-align: center;"><img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhocSFYQUpfs6kuknqBljCVf3SDUt4H6C0t2aqhWoMIgaZJYs6GkgSDaVd8AEqgpLV-NuI7LXCtZYT7GFB6DpAt_mp0yLf7_qgyONOPYhBzKF3r4owps-2ckZ6pUhgbkscZO5_3arJeNOeN/s640/popular+posts+blogger+blogspot+widget+with+jQuery+effect.png" width="640" /></div>Let's start adding it Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps: 1. Go to Dashboard - Template - Edit HTML - click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box <ul></ul>2. Type or paste this piece of code inside the opened search box: <blockquote class="tr_bq">]]></b:skin></blockquote>Note: you might need to click on the arrow next to it and after try to find ]]></b:skin> again. 3. Just above/before it, add the following code: <blockquote class="tr_bq">#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff} #gallery .belt{position:absolute;top:0;left:0;list-style-type:none} #gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUWucgCjEh-J__0MYzkpP-VvlvOqDdPVxCzygLfCxDtjK0aNHFu4Oqom6fXvkFugLeYf-4TBUot0gxNSEQkMAJiv5z-ln6F5t0K7kRZKHn0E5kdB_1NAubw8YzTDWr6WFJr1jCVWqdNrQo/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden} #gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px} #gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}</blockquote>Note: you can adjust the size of gallery, changing the values in red (590 and 126). 4. Now search for the following piece of code: <blockquote></head></blockquote>5. Just above/before it, add this code: <blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ stepcarousel.setup({ galleryid: "gallery", beltclass: "belt", panelclass: "panel", autostep: {enable:true, moveby:1, pause:6000}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYejBTsuA6_WtbNYaf2TAkbKr5Z3B4D16AlL8HalNWHcuJZUOuf5gFSTnU2G5KB6te0UbLBUP1_Fs92YwFhhXF_YhQO3LwKMXIOpg6sT7OUrMpxlKebTIMGpXirBy1C57kJgZlHXTWTjC/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix0OmCL3CjDNLRFLFeT4L38gHxB-GxPo5chAy5scLBBzOV1ifLsiwe64bLlYPRHDfuNr2EU2n15l9WNXOFB7c9zHEjyZ4AHXxglnPukD3SD2qUWwlCccswMolWYPflA5uoVBR8gMVeJaYY/s1600/next.png", 2, 36]}, contenttype: ["external"] }) //]]> </script></blockquote>Next thing to do is to place the widget just above the blogger posts. 6. Search for this code: <blockquote class="tr_bq"><b:section class='main' id='main' showaddelement='yes'></blockquote>...or if you can'find it, search for this one: <blockquote class="tr_bq"><b:section class='main' id='main' showaddelement='no'></blockquote>7. Just below it, add the following code: <blockquote class="tr_bq"><b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>   <div id='gallery'>    <ul class='belt'>     <b:loop values='data:posts' var='post'>      <li class='panel'>       <b:if cond='data:showThumbnails == &quot;false&quot;'>        <b:if cond='data:showSnippets == &quot;false&quot;'>         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>        <b:else/>         <div class='item-title'>          <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>         </div>         <div class='item-snippet'>          <data:post.snippet/>         </div>        </b:if>       <b:else/>        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>         <b:if cond='data:post.thumbnail'>          <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>         <b:else/>          <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE_eTNLzcpe_mAyUZoUDnYmhxGp6x8FZKsZdyuLSPzG3XEwWIozZAWSFwXnagfzKtsqzGhycRr-SLfeX2ASyJlX6oH_G07eTh8YjjFfS-7srMObBdEvRT0_ijn-XGk1wJ3Ffi-syZPRuFN/s1600/no-image.PNG'/>         </b:if>        </a>       </b:if>      </li>     </b:loop>    </ul>   </div></div></b:if>  </b:includable> </b:widget></blockquote>Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also. 8. Preview and if everything is ok, Save the Template.

blogger posts popular posts posts Widgets Add a Popular Posts Gallery just above your Blogger posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It...

Add Multi-Colored Popular Posts to Blogger

Popular Posts is a widget provided by Blogger that displays the most viewed posts on the blog in the last 7 days, last month and of all time. It has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets. To customize this popular posts widget, we have to add a new variable and some CSS codes to our blogger template. So let's begin: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYIytXgjND9kRivyPPo5y0rSPJ2T9cvIYMEwFR6oIESnF6TxxH4_515hde5FUmyzkVaGUOGwKL5stY6edf7OGLVtPQdaA9l8swWXFKLXRn5e-sZZfrg8qMNsukfwpGvgQV_PCRCJLtL2XB/s1600/add+colored+popular+posts+for+blogger+with+numbers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="popular posts widget, blogger gadgets" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYIytXgjND9kRivyPPo5y0rSPJ2T9cvIYMEwFR6oIESnF6TxxH4_515hde5FUmyzkVaGUOGwKL5stY6edf7OGLVtPQdaA9l8swWXFKLXRn5e-sZZfrg8qMNsukfwpGvgQV_PCRCJLtL2XB/s320/add+colored+popular+posts+for+blogger+with+numbers.png" title="multi-colored popular posts widget for blogger blogspot" width="295" /></a></div> How to add multi-colored popular posts to Blogger Step 1. Login to your <a href="http://www.blogger.com/home">Blogger Dashboard</a>, go to Design >> Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4HGurQq4CR79YIFUVSDBIeFY4InvpP0_sNeGItcBPdt_deuhF2klFDcYFUT8j1v7u69SK7rDpZ4RkR2O8pY6qnBu3LmCOOkKKBdkvAD8hXszDm-uX2_zDvPq9P3KqfNOeXGAmZjwOSbH/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="popular posts widget, blogger widgets" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4HGurQq4CR79YIFUVSDBIeFY4InvpP0_sNeGItcBPdt_deuhF2klFDcYFUT8j1v7u69SK7rDpZ4RkR2O8pY6qnBu3LmCOOkKKBdkvAD8hXszDm-uX2_zDvPq9P3KqfNOeXGAmZjwOSbH/s1600/remove-blogger-labels.png" title="multicolored popular posts widget for Blogger" width="320" /></a></div> Step 2. Select "Expand Widget Templates" (make a backup first) <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHB5UtkpHNSs5zVs7GYJzHdu2XdZIQTinJbrf278R6dKZ_MsFo0wmh_WgeJXeuc5fZR5Z69yjnRZTrU5cwXqH2pRWrySI_HzNEV1cQISJBUsc454erP4p6zU6Li6MLdOIYQy4JXmK3-Cjb/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHB5UtkpHNSs5zVs7GYJzHdu2XdZIQTinJbrf278R6dKZ_MsFo0wmh_WgeJXeuc5fZR5Z69yjnRZTrU5cwXqH2pRWrySI_HzNEV1cQISJBUsc454erP4p6zU6Li6MLdOIYQy4JXmK3-Cjb/s1600/blogger-expand-widget-templates.png" width="320" /></a></div> Step 3. Search for the following tag: <blockquote class="tr_bq">/* Variable definitions    ====================</blockquote> Note: If you can't find it, paste it below the autor information that is usually below this tag (CTRL + F): <blockquote class="tr_bq"> <b:skin><![CDATA[/* </blockquote> ...and should end up with this symbol:   <blockquote class="tr_bq"> ----------------------------------------------- */</blockquote> Step 4. Copy and paste just below/after this tag, the next code: <blockquote class="tr_bq"><Group description="PopularPosts Backgrounds" selector="#PopularPosts1"> <Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/> <Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/> <Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/> <Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/> <Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/> </Group></blockquote> Step 5. Search for the following piece of code: <blockquote class="tr_bq">]]></b:skin></blockquote> Step 6. Just above/before it, add this code: <blockquote class="tr_bq">#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}</blockquote> Step 7. Now find the following code: <blockquote class="tr_bq"><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'></blockquote> Step 8. Delete it until you reach at this tag (delete the </b:widget> also): <blockquote class="tr_bq"></b:widget></blockquote> Note: Be very careful when removing it. The entire fragment of code should look like this: <blockquote class="tr_bq"><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'>   <b:if cond='data:title'><h2><data:title/></h2></b:if>   <div class='widget-content popular-posts'>     <ul>       <b:loop values='data:posts' var='post'>       <li>         <b:if cond='data:showThumbnails == &quot;false&quot;'>           <b:if cond='data:showSnippets == &quot;false&quot;'>                          <a expr:href='data:post.href'><data:post.title/></a>           <b:else/>                          <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>             <div class='item-snippet'><data:post.snippet/></div>           </b:if>         <b:else/>           <b:if cond='data:showSnippets == &quot;false&quot;'>                          <div class='item-thumbnail-only'>               <b:if cond='data:post.thumbnail'>                 <div class='item-thumbnail'>                   <a expr:href='data:post.href' target='_blank'>                     <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>                   </a>                 </div>               </b:if>               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>             </div>             <div style='clear: both;'/>           <b:else/>                          <div class='item-content'>               <b:if cond='data:post.thumbnail'>                 <div class='item-thumbnail'>                   <a expr:href='data:post.href' target='_blank'>                     <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>                   </a>                 </div>               </b:if>               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>               <div class='item-snippet'><data:post.snippet/></div>             </div>             <div style='clear: both;'/>           </b:if>         </b:if>       </li>       </b:loop>     </ul>     <b:include name='quickedit'/>   </div> </b:includable> </b:widget></blockquote> Step 9. After you have deleted the above code, paste the following in its place: <blockquote class="tr_bq"><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'>    <b:if cond='data:title'>     <h2><data:title/></h2>    </b:if>    <div class='widget-content popular-posts'>     <ul>      <b:loop values='data:posts' var='post'>       <li>        <b:if cond='data:showThumbnails == &quot;false&quot;'>         <b:if cond='data:showSnippets == &quot;false&quot;'>          <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>         <b:else/>          <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>         </b:if>        <b:else/>         <b:if cond='data:showSnippets == &quot;false&quot;'>          <b:if cond='data:post.thumbnail'>           <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>          <b:else/>           <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI7nxRTn0Na3X_yqsBxM-GlJ8r_8mjQyT947d95bNvyvOQhqZ9C3Ym4uSn_TtPrM2CPE2xz9OGotxW_8IsywuErSMunV5lXhpr1cP7Hqdbh5NfONkB9r0sUZcCRaxBjQZllE_nUBLZNg0/s1600/default.jpg'/>          </b:if>          <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>          <div class='clear'/>         <b:else/>          <b:if cond='data:post.thumbnail'>           <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>          <b:else/>           <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI7nxRTn0Na3X_yqsBxM-GlJ8r_8mjQyT947d95bNvyvOQhqZ9C3Ym4uSn_TtPrM2CPE2xz9OGotxW_8IsywuErSMunV5lXhpr1cP7Hqdbh5NfONkB9r0sUZcCRaxBjQZllE_nUBLZNg0/s1600/default.jpg'/>          </b:if>          <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>          <div class='clear'/>         </b:if>        </b:if>       </li>      </b:loop>     </ul>    </div>   </b:includable> </b:widget></blockquote> Step 10. Save template. Settings - Go back to Layout  and click on the edit link of Popular Posts widget. Select to "display up to 5 posts", then Save the widget. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBLKL_5gcw2-kyKtPU3s9SIzuPimTkZHszwywEbiWpdWbVjpCSm_eGOvG7ULXeKtKk0zkNSowVnC6anBXh1Ka0o1EZRYPs3aQyR-uqZNxEQAaZjyPndxkeXonq6rZIODm81tU0FyrIJ78/s1600/add+colored+rainbow+popular+posts+how+to+customize+popular+posts+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBLKL_5gcw2-kyKtPU3s9SIzuPimTkZHszwywEbiWpdWbVjpCSm_eGOvG7ULXeKtKk0zkNSowVnC6anBXh1Ka0o1EZRYPs3aQyR-uqZNxEQAaZjyPndxkeXonq6rZIODm81tU0FyrIJ78/s200/add+colored+rainbow+popular+posts+how+to+customize+popular+posts+blogger.png" width="198" /></a></div> - You can easily change the background color of the popular posts widget, going to Template >> Customize  >> Advanced >> PopularPostsBackground and there you can select any color you want. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV6u7ED46hdKyKzsDxBRvjQY9UeMo8lAxK3OxKSBoR1Hqr2DeNem90tVTXjMHY-CRHSZ52Cc1rmUfrzw9CZSEz6H4llfB7eODnxeqyeSNIi3bfQThpVe5MBLKPa7KY2OjDvCMfiszw0Jl/s1600/blogger+blog+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV6u7ED46hdKyKzsDxBRvjQY9UeMo8lAxK3OxKSBoR1Hqr2DeNem90tVTXjMHY-CRHSZ52Cc1rmUfrzw9CZSEz6H4llfB7eODnxeqyeSNIi3bfQThpVe5MBLKPa7KY2OjDvCMfiszw0Jl/s320/blogger+blog+blogspot.png" width="320" /></a></div> You're done! If you are enjoying reading this blog, please like & subscribe for more tutorials. For any questions or suggestions, leave a comment below.

popular posts posts Widgets Add Multi-Colored Popular Posts to Blogger

Popular Posts is a widget provided by Blogger that displays the most viewed posts on the blog in the last 7 days, last month and of all time...

How to Increase Thumbnail Resolution on Blogger

Popular Posts Widget for Christmas

4 Different Styles For the Popular Posts Widget

Add a Popular Posts Gallery just above your Blogger posts

Add Multi-Colored Popular Posts to Blogger