Recent Post Widget With Thumbnail For Blogger

recent post with thumbnail

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

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

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

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

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

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

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

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

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

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

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

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

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

Blogger में Recent Post Widget With Thumbnail कैसे लगाए Step 5: अब यहां पर नीचे दिये code को कॉपी करके इस विंडो में पेस्ट करे और कोड डालने के बाद इसे Save करना ना भूले।

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

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>

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

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

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

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

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

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

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

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here