Monday 3 June 2013

Popular posts With Automatci Numbering

 Popular Posts Widget
hey mates,

how are you?

Its been a long time we never meet with each other. But still i thought U will remember me.

Today i m going To Just share a very exciting Blogers Windget, which will be very beautifull n attractive for your blog.

I got this artivle on one and only --->> My Bloggers Trick <<---

Here We Go ...

  1. Go to Blogger > Layout
  2. Click "Add a Gadget"
  3. Choose "Popular Posts"  from the list
  4. You will need to configure its settings as shown in the image below: uncheck "image thumbnail" and also "snippet"   Its better that you display at most 7-9 posts. Less is good and clean. 

popular posts widget settings
5. Save it.
Now You Are Done Here.


Now you need to change the default styles and change its look to our desired design using Custom styles.
  1. Go To Blogger > Template
  2. Backup your Template
  3. Click Edit HTML
  4. Search for </b:skin>.  Click the black arrow to expand the code.
compressed blogger stylesheet
   5.  Paste the following Styles just above </b:skin>
/*--- MBT 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;
}

6. Save your template and you are all done!

If You Want To Customize then,

  • To change the background color of the Square bubble edit #292D30
  • To change the text color of the bubble edit #ffffff
  • By default the shape of the bubble is Square. To change it to Circle simply add the following code just after box-shadow: 1px 2px 9px #666666;

 [Source:/www.mybloggertricks.com]


Thanks For being with Us plz Like us On Fb==> computer Stuffs <==

No comments:

Post a Comment

Blog Top Sites

Share Our Badge

 Computer Stuffs

Be Updated Its Free.

Subscribe via Email

Visitors Everyday



Website Security Test

Followers