Fully different Style popular posts widget for Blogger

Fully different Style popular posts widget for Blogger

Fully different popular posts widget.This widget is very popular and compulsory for every blogger. Add This widget to your blog and Get more traffic to your blog.
Blogger ustaad introduce new blogger Widgets for every blogger user.

First Go to template > Edit html
Press CTRL+F and find ]]></b:skin>
Add the below given code just above of ]]></b:skin>  .

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

Now search for <b:widget id='PopularPosts1'  Find full code select the code and   Replace with this code

<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;'>            <!-- (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'>              <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/>            <!-- (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>    <b:include name='quickedit'/>  </div></b:includable></b:widget>

Now save the template and check.

Share :

Tweet

✚

Related Post