Blog Me Popular Posts Widget Kaise Add Kare (Top 5 Widgets)

3

Agar aap blogger hai to ye post aapke liye jarror helpfull hai. kyuki pure world me ese bhut kam blog honge jin par popular post widget na ho. kyuki ye widget hmare blog ke liye bhut he usefull hoti hai. eliye aaj ham aapke liye ye post lekar aaye jisme ham aapko ye full detail se batayinge ki aakhir blog me popular post widget kaise lagaye. or uske top 5 design bhi aap choose kar sakte hai.





 



Blog Me Popular Posts Widget Kaise Add Kare?

1. Sabse phele neeche diye gye widgets me se koi ek choose karke uska code copy kar le.

#1Widget

 

<!-- Popular post widget by www.futuretricks.in-->
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif) no-repeat scroll 5px 10px;
 list-style-type: none;
 margin:0 0 5px 0px;
 padding:5px 5px 5px 20px !important;
 border: 1px solid #ddd;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
}
.popular-posts ul
 li:hover {
 border:1px solid #6BB5FF;
}
.popular-posts ul
 li a:hover {
 text-decoration:none;
}
.popular-posts .item-thumbnail img {
 webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
 box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
<!-- Popular post widget by www.futuretricks.in-->

 

#2Widget

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out; 
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute; 
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg); 
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

#3Widget

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}

#4Widget

.PopularPosts .item-title { 
 display:none; 
 } 
 .PopularPosts .widget-content ul li { 
 background: none repeat scroll 0 0 transparent; 
 float: right; 
 list-style: none outside none; 
 margin: 10px 0 0 !important; 
 padding: 0 !important; 
 } 
 .PopularPosts .item-thumbnail { 
 margin: 0 8px !important; 
 } 
 #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);} 
 .item-thumbnail img { 
 -moz-border-radius: 8px; 
 -webkit-border-radius: 8px; 
 border-radius: 8px; 
 -webkit-transition: all 0.5s ease; 
 -moz-transition: all 0.5s ease; 
 transition: all 0.5s ease; 
 border: 3px solid #ccc; 
 height: 60px; 
 padding: 3px; 
 width: 60px; 
 } 

#5Widget

<!-- Popular post widget by FutureTricks-->
#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:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;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:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular post widget by FutureTricks --> 
2. Ab code ko copy karne ke baad. apne blog ke admin panel ma jaker edit html me jaker  ]]></b:skin> Search kare.. 
 
3. Search karne ke baad copy kiya hua code ]]></b:skin> ke upar paste kar de.
 
4. Code ko copy karne ke baad template save kar de. After save the template layout par jaye or add widget par click karke popular post widget ko add kare.
 
Now save par click kare. ab aapka kaam ho chuka hai.
u can chech your blog with stylish popular post widget. umeed hai aapko widget jarror pasand aayi hongi. esliye es post ko share jarror kare. or apne friends ko bhi en widgets ke baare me bataye.


3 COMMENTS

  1. Wow that was unusual. I jist wrote ann very long comment but after I
    clichked subit my comment didn't appear. Grrrr…
    well I'm not wriing all thyat over again. Regardless,
    just wanted tto say supeerb blog!

LEAVE A REPLY

Please enter your comment!
Please enter your name here