Blogger Blog Ke Liye Star Rating Popular Post Widget

Darasal Blogger mein star rating support nehi karta hai. Lekin agar hum chahe to ise manually add kia ja sakta hai. Asal mein rating system use karke visitor kisi product ko ratings deta hai. Ye WordPress blogs mein acchi tarha se supported hai. Lakin bohot sara bloggers dukhi hai quki blogger rating system support nehi karti. Is liye maine ek aisa system laya hoon jisse visitors ki rating liye bina popular posts mein star rating show karaya ja sakta hai.

popular-post-widget-with-star-rating-for-blogger

Is post mein mai ek aisa widget share karunga jisse blogger blogs ki popular posts mein star rating dikhaya ja sakta hai. Pahle is widget ko design kiya tha Arlina. Lekin uski widget mein ek problem thi. Usmein 5 se jyada post mein star rating nehi use kia ja sakta tha. Lekin Blogger popular post widget mein 10 tak post show karane deti hai. Is liye ise re-develop karke 10 post ke liye banaya gaya hai. Iske elawa ap blue aur yellow star rating mein se kisi ko vi apne blog par use kar sakte hai. Ise use karke ap jarur khush honge.

Blogger mein kaise Default Popular Post Widget Jore?


Star rating add karne se pahle apko blogger ki default popular post widget ko add karna hoga. Agar apki blog mein pahle se jura hua hai to ye step skip kar de.

Step 1. Apna Blogger account mein log in kare aur Blogger Dashboard > Layout mein jae.

Step 2. "Add a Gadget" mein click karke "Popular Posts" select kare.

popular-post-widget-with-star-rating-for-blogger

Step 3. "image thumbnail" ko check aur "snippet" ko uncheck karke 10 posts select kare.

Step 4. Save option mein click kare.

Blogger Template Mein Font Awesome File Add Karna


Hum already jante hai ki blogger mein star rating unsupported hai. Isliye humko stars dikhane ke liye font awesome script use karna padega. Agar apki template mein pahle se font awesome script jura hua hai to ye step skip kare. Aur agar jura hua nehi hai to apni template par font awesome script jurne ke liye niche diya gaya steps ko follow kare.

Step 1. Blogger account mein login karke Dashboard > Template > Edit HTML par jae.

Step 2. Abh keyboard se CTRL+F(Windows), CMD+F(Mac) key press karke starting head tag search kare.

<head>

Step 3. Abh niche dia gaya font awesome script ko copy karke head tag ki bad mein/niche/after/below mein paste kare.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Step 4. Abh Template save kare.

Abhi abhi apne template mein font awesome script add kia hai. Abh apko star rating jorna hoga.

1. Popular Post Widget with Blue Star Rating


WordPress mein blue star rating bohot jyada use hoti hai. Isliye maine first mein blue star rating wala popular post widget dikhaunga.

popular-post-widget-with-star-rating-for-blogger

Step 1. Blogger account mein login karke Dashboard > Template > Edit HTML mein jae.

Step 2. Abh keyboard se CTRL+F key press karke niche wala code search kare.

]]></b:skin>

Step 3. Abh niche diya gaya codes ko upar wala code ki age/before/above mein paste kare.


/* Popular Post with Blue Star Rating by http://www.helperbus.com/ */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#30AEE1;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Step 4. Abh Template save kare.

2. Popular Post Widget with Yellow Star Rating


Blue star rating apko pasand nehi vi a sakti hai. Isliye main abh Yellow star rating wali popular post widget dikhaunga. Ise blog mein jorne ke liye niche diye gaye steps ko follow kare.

popular-post-widget-with-star-rating-for-blogger

Step 1. Blogger account mein login karke Dashboard > Template > Edit HTML mein jae.

Step 2. Abh keyboard se CTRL+F key press karke niche wala code search kare.

]]></b:skin>

Step 3. Abh niche diya gaya codes ko upar wala code ki age/before/above mein paste kare.


/* Popular Post with Yellow Star Rating by http://www.helperbus.com/ */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Step 4. Abh Template save kare.

Abh check karke dekhiye. Apki blog mein abh star rating wali popular post widget jur gayi hai. I am sure ise dekh kar apki readers khush hongi. Apko accha laga to comment karke hume support kare.

SHARE THIS

Author:

I'm an 18 years aged Passionate Blogger from West Bengal, India. I just love to write articles and share them with people. The day was 28th September 2015, when my dream of having a website comes true and I made this website to help you and peoples like you!

Previous Post
Next Post