Make Coloured Popular Post In Blogger

what are pop post

popular postal service are the gadget inward blogger andit present what is pop inward a blog. yous can customize it equally yous desire . generally when you
add a gadget of pop postal service given yesteryear blogger it was non really awesome together with skillful looking. and yous desire to brand beautiful color popular post yous many involve a lilliputian effort. you involve yous produce about elementary stepsjust glue about of code inward your html together with you
will larn coloured pop postal service widget equally you
can come across below.

how to add together color pop postal service inward blogger

go to template together with edit html together with saltation together with expand

widget.

step1: search for this

steps2: if yous bring no discovery it glue it below this

and halt it alongside this code

copy together with glue the code given below

search this code

paste the next code earlier that

#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}

now discovery this code

and delete untill </b:widget> but produce not
delete </b:widget>. right away glue given code above
</b:widget>

<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 == "false"'>         <b:if cond='data:showSnippets == "false"'>          <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 == "false"'>          <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/AVvXsEghYrv1wxd6roiZq96RjYPnL-g8kroWib_jedBRk6jVaVNCUUwe8H5OZONEbdvHGsc1sWnn4YpDWxBblFep6O1QgKMyX5zlL9fu3NH0lgq4ETjKG3zJt-Uwt_I0HCDJQHoUXCKmvvtrsVc/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/AVvXsEghYrv1wxd6roiZq96RjYPnL-g8kroWib_jedBRk6jVaVNCUUwe8H5OZONEbdvHGsc1sWnn4YpDWxBblFep6O1QgKMyX5zlL9fu3NH0lgq4ETjKG3zJt-Uwt_I0HCDJQHoUXCKmvvtrsVc/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>

now salve template together with yous consummate the process
vist your spider web log together with yous come across coloured popular
post