How To Modify Popular Post to Template Gallery

How To Modify Popular Post to Template Gallery.   Okay fella here I will review one by one the features of the template, the template before I'll share it , so hopefully you can make or create your own templates or at least you can modify the default widgets that have been provided by blogger. Widget from my blogger modification time is Popular Post or popular articles, a widget that serves to display the post or article where the most demanding visitors.

Popular Posts widget by default this is interesting because it has no features thumbnails and summary. But I think still conditional, the widget can be installed directly on the blog that use more than the pictures article, if it is the default widget installed on blogs that seem less suitable type of gallery.

DEMO

Well, this time I tried to modify the widget to match posted on a blog that has content template gallery . Picture as above, showing only thumbnails and titles in a horizontal position. If you are interested, here's how to make it:

1. Log in to your Blogger account
2. After that go to  the template  >> click  Edit HTML  do not forget to check the  Expand Widget Templates .
3. Then enter the following code above the  ]]> </ b: skin>  :
   

   .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

   .PopularPosts ul{padding:5px 0}

   . PopularPosts. Items-thumbnail img {width: 110 px; height: 110 px; padding: 11px; margin: 0}

   .PopularPosts .item-content{position:relative;float:left;margin:0}

   .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

   .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

   .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

   .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

   Color code  red  above is the length and width of the thumbnail image, you can change and adjust the width of the sidebar on the template, as shown in the sidebar of this blog.
4. Then go to  layout  >>  add a gadget  select Latest Posts on the fifth row.
5. Once the page appears Cool Post, the settings as shown below:
   
   
   
   
   
   Noteworthy is the only tick  thumbnail , leave the box  snippet  unnecessary blank checked. Title and the number of posts you want to display up to you.
6. After the above steps, go back to  Edit HTML  (tick  Expand Widget Templates ), find the following code:
7. Once you find it, replace it with the following code:
   
8. Finally,  save templates  see the results.

Modifying widget Download Post of bloggers are not just for blogs gallery, you can also wear it on the blog instead gallery as shown in the sidebar on this blog. So earlier tutorial to modify the look of Popular Post Gallery template if there are less understood please leave a message in the comment box sorry if there are tutorials like this before, good luck and hopefully useful