How to Add Middle Related Posts in Blogger Template

How to Add Related Post AdSense on Blogger Post - जय हिन्द दोस्तों, आज का हमारा टॉपिक है related posts ब्लॉगर आर्टिकल में कैसे दिखाए - यदि आप एक ब्लॉगर है तो bounce rate के बारे में भी जानते होंगे, अगर जानते है तो आप रिलेटेड पोस्ट विजेट का इस्तेमाल भी करते होगे। लेकिन जो बाउंस रेट के बारे में नहीं जानते उनकी जानकारी के लिए बता दूं "बाउंस रेट" जब कोई विजिटर आपकी साइट पर आकर बिना किसी पेज पर जाए बिना आपकी साइट से बाहर निकाल आता है उसे बाउंस रेट कहा जाता है। इससे आपकी एडसेंस इनकम पर भी बहुत ज्यादा प्रभाव पड़ता है। ब्लॉगस्पॉट शुरुआती ब्लॉगर्स के लिए एक अच्छा प्लेटफॉर्म है हालांकि, ब्लॉगर में आपको वर्डप्रेस जैसे प्लगइन देखने को नहीं मिले जो कि आजकल अधिकांश ब्लॉगों में आवश्यक हैं। यहां तक कि आपको ब्लॉगर में सबसे अधिक लोकप्रिय फीचर related post विजेट भी देखने को नहीं मिलता है। ब्लॉग में रिलेटेड पोस्ट एड करने से आपकी तीन बड़ी परेशानियों को आसानी से हल किया जा सकता हैं। आप अपनी बाउंस रेट कम कर रहे हैं, आप अपनी एड्स इनकम बढ़ा रहे हैं, और साथ ही अपने व्यू बड़ा सकते हैं। इस पोस्ट में हम आपको ब्लॉगर में रिलेटेड पोस्ट विजेट लगना सिखाएंगे।

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

Features of Inline Similar Post

1. इस इंस्टाल करना बहुत ही सरल और आसान है। आपको इंटरनेट पर बहुत से रिलेटेड पोस्ट विजेट/प्लगइन मिल जायेगे पर इस आसान इंस्टॉलेशन आपको कहीं नहीं मिलेगी।

2. यह प्लगइन आसानी से आपके ब्लॉग के डिजाइन के मैच हो जाएगा। फिर चाहे आप ब्लॉगर का कोई प्रीमियम टेम्पलेट इस्तेमाल कर रहे हो यह फ्री वर्जन।

3. यहां आपको ऑटोमेटिक रिलेटेड पोस्ट प्रदर्शन किए जाएंगे। जो कि एक रेस्पॉन्सिव प्लगइन की पहचान है।

4. यह आपको डार्क मूड भी देखने को मिल जायेगा अगर आपके ब्लॉगर टेम्पलेट में डार्क मूड एक्टिव है।

Installation of Inline Related Posts

ब्लॉगर में रिलेटेड पोस्ट देखने के लिए नीचे दिए गए चरणों का पालन करें। कृपया अपने टेम्पलेट को 'HTML Edit' मोड में ओपन करें। ओपन करने के लिए Theme ऑप्शन पर क्लिक करके और नीचे की और दिखाए गए अरो बटन ऑप्शन पर जाकर edit html पर क्लिक करें। एडिट करने से पहले अपने टेम्पलेट का बैकअप जरूर करे।

Add CSS Code

यह CSS कोड रिलेटेड पोस्ट प्लगइन को आर्टिकल प्रदर्शित में करने का कार्य करता है। आपको नीचे दिए कोड को ]]></b:skin> or </style> के ऊपर सेव करना है।

.Blog .post-related{margin:50px 0;padding:25px 15px;border:2px solid rgba(230,230,230,.5);border-left:0;border-right:0;font-size:14px;line-height:1.58em}
.Blog .post-related h3{margin:0;font-size:inherit}
.Blog .post-related ul, .Blog .post-related ol{margin-bottom:0;padding-left:18px}

Add Java Script

आपके ब्लॉग में </b:includable> को सर्च करके नीचे दिए कोड को </b:includable> के ऊपर पेस्ट करे। ये कोड अपके टेम्पलेट में बहुत सारे मिल जाएंगे आप किसी भी </b:includable> के ऊपर ऐड कर सकते हैं।

><b:includable id='postTextRelated'>
<div class='post-related' id='post-relatedIn'>
<script>/*<![CDATA[*/ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_posts(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}; function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("post-body"); var midAd3 = document.getElementById("post-relatedIn"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[4]);}; /*]]>*/</script>
<b:if cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i&lt;1'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_posts&amp;max-results=3&quot;' rel='preload'/>
</b:if>
</b:loop>
</b:if>
<h3>Also Read</h3>
<script>removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:includable>

• मार्क किए गए स्थान पर आपके अनुसार रिलेटेड पोस्ट संख्या दिखाएं, मैने यह 3 पोस्ट दिखाएं है आप अपने अनुसार इसमें बदलाव कर सकते है।
• आप Also Read Text को भी अपने अनुसार बदल सकते है। उदाहरण के तौर पर You may like these posts भी लिख सकते हैं।
• यह मार्क 4 का अर्थ है रिलेटेड पोस्ट 4th पैराग्राफ के बाद दिखाई देगी इसलिए कृपया इसे आपके अनुसार एडजस्ट करें, आपको आर्टिकल लिखते समय पोस्ट में <p> tag का उपयोग अवश्य करना होगा यदि आप <br> टैग का उपयोग करते हैं तो रिलेटेड पोस्ट दिखाई नहीं देगे।

Final Step

अंतिम चरण कृपया नीचे दिए गए कोड को कॉपी करें और इसे <data:post.body/> कोड के ठीक नीचे पेस्ट करे, आमतौर पर यह कोड एक से अधिक होते है। जो आपके टेम्पलेट निर्भर करता है कि आप किस टेम्पलेट का उपयोग कर रहे हैं तो कृपया इसे अंतिम <data:post.body/> कोड के नीचे पेस्ट करके।

<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='postTextRelated'/><script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("post-body"); var midAd3 = document.getElementById("post-relatedText"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>

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

You May Like These Posts:

Go to Link