Recent Post Widget With Thumbnail For Blogger

July 31, 2020

हमारे इस ब्लॉगर के सिरीज में मैंने पिछले एक पोस्ट मे ब्लॉगर के लिए simple recent post widget (without thumbnail) के बारे में बताया था। पर आज के इस पोस्ट में, मैं आपको ब्लॉगर ब्लॉग में with thumbnail लेटेस्ट पोस्ट्स कैसे दिखते है इसके बारे में बताने वाला हूँ.

यदि आपने हमारी पिछली अपलोड की हुयी बिना थंबनेल की पोस्ट देखि नहीं है तो आप निचे की लिंक को फॉलो करके उसे देख सकते हो

Blogger के लिए Simple Recent Post Widgets

All headings show

Recent Posts दिखाने के फायदे

अगर आपकी खुद की वेबसाइट है और आप उस पर डेली कुछ ना कुछ अपडेट करते रहते हो, पर यदि आपके ब्लॉग में विजिट करने वाले यूजर को यह पता नहीं चला की आपने आज या फिर कल क्या पोस्ट किया है. तो इससे ये होगा के आपके सिर्फ विजिट होने वाले पेज पर ही व्यूज बढ़ेंगे और लोगो को आपके नए पोस्ट के बारे में पता नहीं चलेगा।

इसलिए जो आप हर दिन पोस्ट करते रहते हो उसके बारे में भी लोगो को पता चलना चाहिए जिससे वेबसाइट के व्यूज तो बढ़ेंगे ही, इससे वेबसाइट का बाउंस रेट भी कम होगा।

Bounce Rate क्या हैं? इससे आपके Blog की rank कैसे बढ़ाये

इसके अलावा आप इस widget का उपयोग करके अपनी नई पोस्ट को लोगो के सामने लाकर उसे भी गूगल पर रैंक कर सकोगे।

Blogger में Recent Post Widget With Thumbnail कैसे लगाए

Step 1: सबसे पहले अपने ब्लॉगर अकाउंट में लॉगिन करे.

Step 2: इसके बाद आपको जिस ब्लॉग के साइड बार में recent posts दिखानी उसे सेलेक्ट करे.

Step 3: अब आपको side bar menu से Layout सेक्शन में जाकर >> Add a Gadget लिंक पर क्लिक करना है.

Step 4: Add a Gadget पर क्लिक करते ही ब्लॉगर के Inbuilt Widgets की एक विंडो pop-up होगी, जहां से आपको HTML/JavaScript widget ऑप्शन के सामने वाले + बटन पर क्लिक करना है.

Step 5: अब यहां पर नीचे दिये code को कॉपी करके इस विंडो में पेस्ट करे और कोड डालने के बाद इसे Save करना ना भूले।

Note: यह कोड समझने में बहोत ही आसान है क्यों की इस कोड में आपको कुछ changes करने की जरूरत नहीं होगी और ना अपना ब्लॉग URL डालने की कोई जरूरत होगी।

निचे के कोड को कॉपी करे

<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;margin:0;padding:10px 0;position:relative;width:100%}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 10px 0 0;overflow:hidden;z-index:2;position:relative;width:62px;height:62px;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
.recent_posts_arlina strong {font-size:13px;}
ul.recent_posts_arlina li a{color:#000;font-weight:700;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#bbb}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://rawcdn.githack.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=5,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

कोड को सेव करने के बाद हमारी रीसेंट पोस्ट विजेट विथ थंबनेल कुछ इस प्रकार दिखेगी:

Recent Post Widget Customization

Post की संख्या बढ़ाये – numpost = 5 की जगह दूसरा नंबर डालकर अपने हिसाब से नंबर ऑफ़ पोस्ट्स दिखा सकते हो.

Color चेंज करे – #000 को अपने कलर कोड से रिप्लेस करे.

Font Size चेंज करे – 13 px की जगह अपने ब्लॉग के फॉण्ट साइज के हिसाब से चेंज करे.

Post के बिच की हाइट कम करे – padding:10px के जगह उसे कम या ज्यादा करके height को adjust कर सकते हो.

अगर आपको हमारी यह पोस्ट पसंद आयी हो तो इसे अपने दोस्तों के साथ या सोशल मीडिया पर शेयर करे जिससे सभी को इस टर्म के बारे में पता चले। और अगर यह कोड काम करने में दिक्क्त आ रही है तो आप निचे कमेंट करे जिससे मैं आपको इसका सही सोल्युशन बता सकू.