Tuesday, November 21, 2017

4 Best Popular Post Widgets Blog Website Ke Liye

Har Blog ke kuch post popular ho jate hai. Un posts ko ham blog me ek  popular post widget ke naam se add karte hai.  Blogspot blog me Popular post widget phale se bhi hota hai.  per hus widget ka design simple rehta hai.  Agar aap apne blog ke design ko unique rakna chata hai. To aapko apne blogger tempalate ko customize karke best bana skate hai.  Popular post widget ko  customize karke attractive bana sakte hai.

stylish popular post widget blog ke liye


Blog me  popular posts widget ko har blogger jarur add karta hai. Because unhi popular posts se blog popular hoti hai. Isliye popular post widget ka design acha hona chaiye taki reader us popular posts ke traf intersted ho jaye. Waise to me all blogger widget ke liye pahle hi post likh chuka hu. Jisse all blog website widgets add hai. aaj ham bat karne wale 5 best popular post widget design  ke Aur uhne blog me kaise add kare.



Blog Me popular post widget Ko Kaise Add kare.

Blog website me polular posts widget add karne ke liye niche diye step ko follow kariye.

Step 1.

  1. Sabse pahle aapne blogger dashboard me layout per click kare.
  2. Ab  sidebar me add  Getget per click kare.

Step 2.

  • Ab new window me popular posts per click kare.
  • Ab title me popular posts type kare.
  • Aur ab widget ko save kar de.

add popular post widget on blog
Ab popular posts widget customize karenge. Ab aapko niche diye gaye popular post widget me  se khoi bhi design select karke blog template me save karna hai. Lekin ushe phale jan lete hai. Blog me popular posts customize code ko  kaise add kare.

How to Add css Popular Post Widget code on template.

  • Blogger dashboard me theme per click kare.
  • Ab Edit HTML per click kare.
  • Ab Ctrl+F dabakar search box me   ]]></b:skin>  code ko search kare.
  • Ab  ]]></b:skin> code ke uper niche diye popular posts code ko add karna hai,
  • Ab finally Save Template  kar de.

Popular Posts design 1.

Popular post widget style 1

Css Code
#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;
}


Popular Posts design 2.

Popular post widget style 2

Css Code
#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #8E8E8E; /* background color of the numbers */height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;content: '';left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none; 
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */

#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

Popular Posts design 3.

Popular post widget style 3

Css Code
#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;width: 0px;height: 0px;border-bottom:12px outset transparent;border-left:12px solid #000000;
}
#PopularPosts1 h2:after{position:absolute;content:"";top:-6px;left:-5px;width: 0px;height: 0px;border-bottom:24px outset transparent;border-top:24px outset transparent;border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;
}
#PopularPosts1 li{width:100%;position:relative;left:0;margin:7px 0 16px 12px;padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}
#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

Popular Posts design 4.

Popular post widget style 4

Css Code
#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */content:counter(li);counter-increment:li;
position:absolute;top:3px;left:-39px;
font-size:21px;width:28px;height:28px;border-radius: 50%;color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{display:block;position:relative;left:-45px;width:100%;margin:0;min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;
}
#PopularPosts1 ul li a:hover{
color:#3366ff;margin-left:3px;
}

Popular Posts design 5.

Popular post widget style 5

Css Code
.popular-posts ul{padding-left:0px;} .popular-posts ul li {list-style-type: none;background: #FFF url(https://3.bp.blogspot.com/-Q-VefH-Eqzk/WBnscTcBXfI/AAAAAAAAD8s/vYPfjhijx5gv4ccT2BXkkmkP6pL8A1D3wCLcB/s1600/bo-pp-arrow.gif)  no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;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 {border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px;  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}

In 5 best  popular post widget design me khoi sa bhi widget select kar skate hai. Aur aapne blogger template me add kar skate hai. Botstrop popular post widgets ke liye me pahle hi post likh chuka aap inhe bhi blog me add kar skate hai. Aur agar aapko popular post widget add karne me khoi problem ho to hame comment karke aapne solution le skate hai.



I hope aapko ye post passand ayhi hogi. To is post ko social media aur other blogger ke sath Jarur share kare. 

Popular Posts:-

Share This Post On Soical Media:-
About Author :- My name is Sultan From dehradun india. Iam a passinate and full Time blogger. If you like his articles then share with your friend and Social media sites facebook twitter more Etc and Keep Visting on Blog net Book.

Let's Get Connected:- Facebook | Twitter | Google Plus

Related Posts

0 comments: