Earn $250 Per Month Easy At Home

Home » » AUTOMATIC NUMBERING POPULAR POSTS WIDGET FOR BLOGGER

AUTOMATIC NUMBERING POPULAR POSTS WIDGET FOR BLOGGER


Automatic Numbering Popular Posts Widget for Blogger
Blogger released its popular posts widget in 2011. since then many alterations has been done by web developers to provide best to the fellow bloggers.
Blogger doesn’t provide options to add different plugins as per the requirement, hence we need to play with the HTML codes to customize our theme. Automatic Numbering Popular Posts Widget for Blogger is created by changing the default CSS to something that provides results as shown in the image.

ADD POPULAR POSTS WIDGET

  • Go to Blogger Dashboard
  • Go to Layout
  • Click “Add a Gadget” in Sidebar
  • Add “Popular posts Widget” from the list
  • Save it            
Automatic Numbering Popular Posts Widget for Blogger

CUSTOMIZE POPULAR POSTS WIDGET FOR BLOGGER FOR AUTOMATIC NUMBERING

We need to change the default Design and style of the popular posts widget using custom CSS
Go to Blogger Dashboard
Go to Template
Note- Backup your template (To restore if something goes wrong)
Click Edit HTML
Find this code in your template
</b:skin>

Paste this Code just above </b:skin> in your template
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*--- TRI Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
 
.popular-posts ul li a:hover {
text-decoration:none;
}

CUSTOMIZE AUTOMATIC NUMBERING POPULAR POSTS WIDGET FOR BLOGGER

  • Change the background color of the Square bubble by editing #292D30
  • Change the text color of the bubble by editing #ffffff
  • The Default shape of the bubble is Square. Change it to Circle by simply adding the following code just after “box-shadow: 1px 2px 9px #666666;”
Code
1
border-radius:15px;
Save your template and you are done with the customization. Check your blog to verify the changes made. You may comment us if you require assistance regarding the same.

0 comments:

Post a Comment