Home
Blogging
Education

How to Make Popular Post Full Blue Color By TopBlog Pk

2 min read
This time I will give a Tutorial on How to Make Popular Post Full Blue Color. As the name implies, this popular post appearance is blue. 

 However, I designed it with a gradient of color in a blue pattern. Actually this view is only a redesign of the popular post display as in the Evo  template . This is what it looks like.


How to Make Popular Post Full Blue Color

Okay, go straight to how to make it. 
Follow the steps:
Step One: Login Blogger
Step Two: Go to Blog Dashboard
Step Three: Enter the Template tab
Step Four: Click Edit HTML
Step Five: Look for the code 
]]></b:skin>
Step Six: Copy the code below


/ * Custom CSS for Blogger Popular Post Widget Share By Top Blog Pk * / 

.PopularPosts ul, 

.PopularPosts li, 

.PopularPosts li img, 

.PopularPosts li a, 

.PopularPosts li a img { 

margin: 0 0; 

padding: 0 0; 

list-style: none; 

border: none; 

background: none; 

outline: none; 

}. 

PopularPosts ul { 

margin: .5em 0; 

list-style: none; 

color: black; 

counter reset: num; 

}. 

PopularPosts ul li img { 

display: block; 

margin: 0. 5em 0 0; 

width: 50px; 

height: 50px; 

float: left; 

}. 

PopularPosts ul li { 

background-color: #eee;

margin: 0 10% .4em 0! important; 

padding: .5em 1.5em .5em .5em! important; 

counter-increment: num; 

position: relative; 

}. 

PopularPosts ul li: before, 

.PopularPosts ul li. Item-title a, .PopularPosts ul li a { 

font-weight: bold; 

color: # 000! important; 

text-decoration: none; 

}. 

PopularPosts ul li: before { 

content: counter (num)! Important; 

display: block; 

position: absolute; 

background-color: # 333; 

color: #fff! important; 

width: 22px; 

height: 22px; 

line-height: 22px; 

text-align: center; 

top: 0px; 

right: 0px; 

padding-right: 0px! important; 

}

/ * Set color and level Share By Top Blog Pk * / 

.PopularPosts ul li: nth-child (1) {background-color: # 0000CE; margin-right: 1%! 

Important }. PopularPosts ul li: nth-child (2) {background- color: # 5B5BFF; margin-right: 2%! important}. 

PopularPosts ul li: nth-child (3) {background-color: # 7373FF; margin-right: 3%! important}. 

PopularPosts ul li: nth-child (4) {background-color: # 8282FF; margin-right: 4%! 

Important }. PopularPosts ul li: nth-child (5) {background-color: # 9191FF; margin-right: 5%! 

Important } .PopularPosts ul li: nth-child (6) {background-color: # A8A8FF; margin-right: 6%! important}. 

PopularPosts ul li: nth-child (7) {background-color: # B7B7FF; margin-right: 7 %! important}. 

PopularPosts ul li: nth-child (8) {background-color: # C6C6FF; margin-right: 8%! important}

. PopularPosts ul li: nth-child (9) {background-color: #DBDBFF; margin-right: 9%! 

Important }. PopularPosts ul li: nth-child (10) {background-color: #EEEEFF; margin-right : 10%! 

Important }. PopularPosts. Item-thumbnail { 

margin: 0 0 0 0; 

}. 

PopularPosts. Item-snippet { 

font-size: 11px; 

}. 

profile-img { 

display: inline; 

opaciry: 10; 

margin: 0 6px 3px 0; 

}



/* End -  ADD Popular Post code in Blogger Share by Top Blog Pk • Mubassir Ali */

Step Seven: Put the code directly above the code 
]]></b:skin>

Step Eight: Save

🚫 IMPORTANT !
YOU CAN ALSO REDESIGN THE COLOR CODE AS IN ABOVE CSS USE.

Hope it is useful for you guys.
Thanks ! 

You may like these posts

Post a Comment