Blog Me Stylish Popular Post Widget Kaise Add Kare

Hello, Blogger aaj hum janege ki apne blog ya site me popular post widget kaise add karate hai.

Popular Post Widget Kya Hai?

Popular post widget yane humare site par jo popular post hai unhe dikhane ke liye hota hai. Ise apne blog pe add karane se visitor use post ko padh sakate hai jo sabse popular hai. Ye widget add karane se aapka blog ka look professional site ki tarah dikhayi deta hai.

Aaj mai aapko 3 types ke popular widget dikha raha hu isme se aapko jo accha lage use aap add kar sakate hai.

           Þ    Blog Me Comment Enable or Disable Kaise Kare.

          Þ    Blog Post Ko Automatically Share Kare Social Media Pe

   

          Þ    Meta Tag Description Kaise Add Kare

Simple Popular Widget Kaise Add Kare?

Niche di gyai step ko follow kare.

Step 1:

Blogger.com pe chale jaye waha se apne blog ke dashboard me chale jaye.

Step 2:

Niche Layout me chale jaye aur waha se add widget pe click kare.

Step 3:

Pop-up windows khul jayegi. Aapke samane bahut sari widget hongi waha se popular post widget select kare.

Step 4:

Ab aapke manae popular post widget ki setting ka page khul jayega jaise niche image me dikhaya hai.

Configure Popular Post is tarah dikhayi dega.

1. Title: Aap jo title rakhana chahe jaise “Popular Post”, “All Time Hits Post”, “Top Most Article” is tarah aap jo chahe wo dal sakate hai.

2.Most Viewed: Me aap yaha se konsi post ko dikana chahate hai yane all time popular, ya last 30 din me popular hui ya last 7 din me popular post ko select kare.

3. Show: Post title and

   Image thumbnail: Agar aap post title ke sath uski image dikhana chahate hai to ise tik mark kare.

  Snippet: Agar aap post title ke sath kuch post ki line bhi dikha sakate hai.

4. Display Up Until:

Yaha se aapko kitnai popular post dikhani hai jaise 5,7 ya 10 ye select kare.

Save par click kar de. Aapke blog pe popular post widget add ho chuki hai wo kuch is tarah dikahyi dega.

Ye to ho gaya simple widget ye to koi bhi add kar sakata hai par hume ise attractive karana hai.

Multi Colored Popular Post Widget Kaise Add Kare:

Multi colored popular post widget add karane se 100% user aapke post ko read karane ke liye attract ho jayege. Is par aapko post ke sath-sath post number bhi dikhayi dega.

Upar di gayi setting kar le uske bad maine jo niche step di hai use follow kare. Step follow karane se pahale apne blog ka backup lena na bhule.

          Þ    Seo Friendly Imges Kaise Banaye

          Þ    Black Hat SEO Vs White Hat SEO

          Þ    Blog Content Ko Copy Hone Se Kaise Roke

Step 1: Blogger ki dashboard pe chale jaye phir niche template me chale jaye.

Step 2: Template ko edit html me open kare.

Step 3: Phir apne keyword pe Ctrl+F dabaye aur usme ]]></b:skin> is code ko find kare.

Step 4: Niche do code diye hai usme se aapko jo pasand hai use copy kar le.

Code 1:

<!-- Popular post widget by www.hindimeearn.com--> #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 www.hindimeearn.com-->

Is coding ke bad ye kuch is tarah ka dikhayi dega.

Code 1:

<!-- Popular post widget by www.hindimeearn.com--> .popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL-LTfNst8_M8Kki-nNeosek9x_NWLSMq08DYEtdQ3DFf2HgRhghPOxcvZf_ZNrQTFTCYxGrDn8me8Pl3J9wO4b4N2J3LfC4A3puVfaVOU4f270-_eIPYb_Sm2YJuWIq0XH5Iilcr9STs/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.hindimeearn.com-->

Is coding ke bad ye kuch is tarah ka dikhayi dega.

Step 5: Code ko ]]></b:skin> is code ke upar kahi par bhi paste kar de aur template ko save kar de.

Aap ne successfully multi-color popular widget add kar liya hai. Is widget ko customize ya edit karana chahate hai, aur agar aapko isme kuch problem ho to niche comment karana na bhule.