digita7seven - Just Another Blogger Page

• Log in to your blogger account and go to LAYOUT.
• Click "Add Widget" (A pop up window will open)
• Choose "Popular Post" from the list.

• Save your Popular Post widget before taking the next steps (Put the widget anywhere you want in the header, right sidebar or in the footer section). 

1. Now go to TEMPLATE > EDIT HTML > PROCEED
2. Check the "Expand Widget Templates".
3. Use the “Ctrl+F” search function, Find this code :  

 ]]></b:skin>

1. Copy and paste the below codes BEFORE it :

    /*Popular Post*/
    .popular-posts{margin-left:15px;}
    .popular-posts .item-thumbnail{float:left;}
    .popular-posts ul{padding-left:0px;margin-left:4px;margin-top:6px;}
    .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
    .popular-posts ul li img {-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
    .popular-posts ul li img:hover {-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px violet, inset 0 0 20px rgba(255,255,255,1);}

• Use the “Ctrl+F” search function again to find this code : 

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
.......................
.......................
.......................
.......................
.......................
</b:widget>

• Replace the above codes from <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> to </b:widget> with these codes :

    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h3>
    <data:title/>
    </h3>
    </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;'>
    <!-- (1) No snippet/thumbnail -->
    <a expr:href='data:post.href'>
    <data:post.title/>
    </a>
    <b:else/>
    <!-- (2) Show only snippets -->
    <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;'>
    <!-- (3) Show only thumbnails -->
    <div class='item-thumbnail-only'>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
    <b:else/>
    <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png'/>
    </b:if>
    </a>
    </div>
    </div>
    <b:else/>
    <!-- (4) Show snippets and thumbnails -->
    <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>
    </div>
    </b:includable>
    </b:widget>

•  Save your template for changes to take effect.