क्या आप अपने ब्लॉगर ब्लॉग में Recent Post Widget (लेटेस्ट पोस्ट्स) को साइडबार पर दिखाना चाहते है? अगर हा, तो इस आर्टिकल में आप यही सीखेंगे की कैसे अपने ब्लॉगर वेबसाइट में आसान तरिके से रीसेंट पोस्ट widget को ऐड कर सकते है।
ब्लॉगर, गूगल की बनायी हुयी एक वेबसाइट है जहाँपर हम फ्री में ब्लॉग बनाकर पैसे कमा सकते है. पर जैसे की मैंने कहा यह फ्री है. इसलिए सारे फीचर्स गूगल द्वारा प्रोवाइड किये हुए है और वर्डप्रेस के तुलना में बहोत की कम है।
इसके बावजूद भी हम कुछ CSS Tricks की सहायता से अपने हिसाब से ब्लॉगर ब्लॉग को डिज़ाइन कर सकते है. इसलिए मैंने यहाँ पर एक सिंपल सा code दिया है जिसे आप आपके ब्लॉगर में इन्सर्ट करके Latest Posts दिखा सकते हो।
Recent Posts दिखाने के फायदे
अगर आपकी खुद की वेबसाइट है और आप उस पर डेली कुछ ना कुछ अपडेट करते रहते हो पर यदि आपके ब्लॉग में, विजिट करने वाले यूजर को ये पता नहीं चला की आपने आज या फिर कल क्या पोस्ट किया है. तो इससे ये होगा के आपके सिर्फ विजिट होने वाले पेज पर ही व्यूज बढ़ेंगे और लोगो को आपके नए पोस्ट के बारे में पता नहीं चलेगा।
इसलिए जो आप हर दिन पोस्ट करते रहते हो उसके बारे में भी लोगो को पता चलना चाहिए जिससे वेबसाइट के व्यूज तो बढ़ेंगे ही, इससे वेबसाइट का बाउंस रेट भी कम होगा।
इसके अलावा आप इस widget का उपयोग करके अपनी नई पोस्ट को लोगो के सामने लाकर उसे भी गूगल पर रैंक कर सकोगे।
Blogger में Recent Post Widget कैसे लगाए
इसके लिए आपको निचे दिए गए कुछ सिंपल स्टेप्स को फॉलो करना होगा जिससे आप उसे Successfully ब्लॉग पर दिखा सको.
Step 1: सबसे पहले अपने ब्लॉगर account में लॉगिन करे.
Step 2: इसके बाद आपको side bar menu से Layout सेक्शन में जाकर >> Add a Gadget लिंक पर क्लिक करना है.
Step 3: Add a Gadget पर क्लिक करते ही ब्लॉगर के Inbuilt Widgets लिस्ट की एक विंडो pop-up होगी। जहां से आपको HTML/JavaScript widget ऑप्शन के सामने वाले + बटन पर क्लिक करना है.
Step 4: यह हमारी फाइनल स्टेप है. इस स्टेप में आपको HTML/JavaScript की विंडो में निचे दिया हुआ Recent Post Widgets का कोड कॉपी करके पेस्ट करना है.
URL डालने से पहले यह ध्यान रखे के आपने Blog के Settings में जाके HTTPS को इनेबल किया हो, नहीतो लेटेस्ट पोस्ट लोड होने में दिक्क्त आ सकती है। और अगर HTTPS से आपकी वेबसाइट लोड होती है तो code में HTTP भी डालोगे तब भी Widget काम करेगा।।
निचे का कोड कॉपी करे
<div id="hlrpsb">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d<r.link.length;d++)if("alternate"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]="Jan",u[2]="Feb",u[3]="Mar",u[4]="Apr",u[5]="May",u[6]="Jun",u[7]="Jul",u[8]="Aug",u[9]="Sep",u[10]="Oct",u[11]="Nov",u[12]="Dec",standardstyling||document.write(""),document.write('<div class="rctitles2">'),standardstyling&&document.write(""),document.write(i),standardstyling&&document.write(""),1==showpostdate&&document.write(" - "+l+" "+u[parseInt(o,10)]+" "+a),standardstyling||document.write("</div>"),document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("/div")}
</script>
<script type="text/javascript">var numposts = 7;var showpostdate = false;var standardstyling = true;</script>
<script src="https://xlhindi.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a { color: #333; font-weight: 400; font-size: 17px; font-style: normal;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}
</style>
Save करने के बाद आप ब्लॉग को ओपन करके साइड बार में चेक कर सकते है की Recent Posts दिख रहे है या नहीं।
Recent Post Widget Customization
Post की संख्या बढ़ाये – numpost = 7 की जगह दूसरा नंबर डालकर अपने हिसाब से नंबर ऑफ़ पोस्ट्स दिखा सकते हो.
Color चेंज करे – #333 को अपने कलर कोड से रेप्लस करे.
Font Size चेंज करे – 17px की जगह अपने ब्लॉग के फॉण्ट साइज के हिसाब से चेंज करे.
अगर आपको हमारी यह पोस्ट पसंद आयी हो तो इसे अपने दोस्तों के साथ या सोशल मीडिया पर शेयर करे जिससे सभी को इस टर्म के बारे में पता चले। और अगर कोड काम नहीं कर रहा है तो आप निचे कमेंट करे जिससे मैं आपको इसका सही सोल्युशन बता सकू.
Acchi post hai 👍