Blogger.com platform
served blogger to edit and modify their blogs so it can be
attractive. One of the features is popular posts widget. It is
well-supported widget which manage the blog’s content
systematically. The tutorial how to add the popular posts widget and
the modification is written below.
Firstly, you need to open
blogger.com on your browser’s bar. And then sign in to your blog.
In the next stage go to blogger’s layout and click it. Then, click
“Add a Gadget” on the layout so you will find a list of widgets
in new window of the browser. At the same time, choose or search a
widget that namely “Popular Posts” and then click it. After
clicked it, the configuration of popular posts will be shown and you
need to configure its settings. The best options to set it are
uncheck the image thumbnail and snippet. It’s better to keep it
natural and clean and then save it.
In order to modify your
popular posts widget, you need to customize it with using a plugin.
The “popular posts” which has just created is in default styles
form. Technically speaking, the designing of it needs a custom styles
method. So, the next stage is click to your blog’s template on the
dashboard. And then, back up the template so if anything goes wrong,
you can turn it back to normal. Furthermore, you click the “Edit
HTML” and then the list of HTML’s codes is shown. At the same
time, search for a </b:skin> code and then expand it with click
the black arrow. And then copy and paste the bellows code’s styles
below just above </b:skin>.
/*---
Tips Monetize 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;
}
Finally, if you want to
customize the background’s color and the color just edit the number
of it (according to html codes of color) and save your template and
done. Visit your blog to see if it works.
0 comments:
Post a Comment