Blogger में Related Post Widget Thumbnail के साथ कैसे Add करें

Blogger में Related Post Widget कैसे Add करें – How to add Related Post Widget with Thumbnail in Blogger Blog? Hello Friends! How are you? Welcome again to Guptatreepoint blog. दोस्तों आज के इस पोस्ट में मैं आपको बताऊंगा की Blogger में Related Post Widget Thumbnail के साथ कैसे Add करें? इससे पहले हम ये जानेंगे की Thumbnail क्या होता है और Related post widget क्या होता है और इससे क्या फायदा होता है?

Related Post Widget क्या होता है?

Related post widget किसी भी blog का important पार्ट होता है जो की currently open post से related another post को show करता है| यह label या categories basis पर work करता है| जैसा की आप सभी जानते हैं की blog का design करना बहुत ही important होता है क्योंकि बिना design का blog उस प्रकार लगता है जैसे बिना शृंगार के दुल्हन| तो जितना अच्छा आपके blog का design होगा उतना ही लोग आपके blog की तरफ attract होंगे और आपके blog को ध्यान से पढेंगे|

यह widget ज्यादातर blog में post के निचले हिस्से में लगाया जाता है जिससे कोई भी readers currently open पोस्ट को पढने के बाद ही उस पोस्ट से related पोस्ट को देख सके और अगर उस पोस्ट से related पोस्ट उस readers के लिए हेल्पफुल हो तो वो वह reader उस पोस्ट को भी पढ़ेगा|

बहुत सारे blogger template का design एकदम सिंपल होता है जिसमें related post widget available नहीं होता है लेकिन आजकल अधिकांश blogger template related पोस्ट widget के साथ आते हैं| लेकिन जिस template में related post widget available नहीं होता है उसमें हमें manually add करना पड़ता है जिससे हमारे readers आसानी से related पोस्ट को पढ़ सकें|

इस widget को लगाने से क्या फायदा है:

यदि आप blogging field में नए हैं तो शायद आपको पता नहीं होगा की related पोस्ट widget को blog में लगाना कितना जरुरी होता है|आपने जितने भी popular blog देखे होंगे तो उन सभी में related post widget लगा हुआ रहता है क्योंकि इसके बहुत सारे फायदे होते हैं जो की readers के लिए भी होते हैं और साथ ही साथ blog owner के लिए कुछ फायदे होते हैं| तो चलिए हम दोनों के फायदे के बारे में जानते हैं|

Readers के लिए क्या फायदे हैं :

जब भी कोई readers आपके blog पर कोई पोस्ट पढ़ रहा होता है और यदि वह पोस्ट उस reader को अच्छा लगा तो वो आपके blog पर बहुत ज्यादा समय बिताता है क्योंकि उसको वहां पर अच्छे अच्छे और important content मिलते हैं| यदि वो आपके किसी पोस्ट को अंत तक पढता है और उससे related कोई दूसरा पोस्ट उसे show होता है तो 90% ऐसे chances होते हैं की वो उससे related पोस्ट को जरुर पढ़ेगा|

इससे readers को यह फायदा हो जायेगा की जो information के बारे में वो नहीं जानता था मतलब की वो उस टॉपिक को search engine में नहीं search कर पा रहा था वो टॉपिक उसको वहां पर मिल गया जिससे उसको knowledge प्राप्त हो गया| दोस्तों मेरे साथ भी ऐसा बहुत बार हुआ है की जब हम किसी के blog post को पढ़ रहे होते हैं तो बहुत सारे post ऐसे होते हैं जिनके बारे में हम नहीं जानते हैं और वहां पर मिल जाने के कारण उस topic के बारे में जान लेते हैं|

Blog owner के लिए फायदे :

दोस्तों अब आप सोच रहे होंगे की इससे तो readers को फायदा हुआ लेकिन blog owner को क्या फायदा होगा इससे| तो दोस्तों आप सभी जानते हैं की एक blogger अपने blog पर traffic पाने के लिए बहुत ज्यादा मेहनत करता है और जब तक उसके blog पर traffic नहीं आ जाते हैं तब तक वो अपने blog को लेकर दुखी रहता है|

तो यदि आप एक blogger हैं और आपने अपने blog पर related पोस्ट widget add किया हुआ है तो इससे आपको यह फायदा होगा की जब भी कोई readers आपके related पोस्ट को भी पढ़ेगा तो आपका traffic increase होगा और alexa rank बहुत अच्छा होगा| साथ ही साथ आपका blog भी अच्छे position पर rank करेगा|

Thumbnail क्या होता है?

Thumbnail एक term होता है जो की graphics designer या photographer के द्वारा किसी भी larger image को smaller form में represent करने के लिए use होता है| जब भी आप YouTube open करते हैं तो video को start करने से पहले आपने एक image देखा होगा जिस पर उस video के बारे में लिखा हुआ रहता है उसे thumbnail कहा जाता है|

Thumbnail एक image होता है जो की किसी भी large size image को small size image में represent करता है या फिर किसी भी video के स्टार्टिंग में show होता है जो ये बताता है की यह video किस चीज पर आधारित है मतलब की यह video में क्या दिखाया गया है|

जब आप किसी के blog को open करते होंगे तो आपको उस blog के homepage पर पोस्ट का image show होता है जो की small size का होता है जो यह represent करता है की यह post किस चीज पर आधारित है| लेकिन जब आप उस पोस्ट को open करते हैं तो वह image आपको large size में show होता है तो जो image blog के homepage पर show हो रहा था उसी को thumbnail कहा जाता है|

Blogger blog में Related post widget कैसे add करें?

दोस्तों अब आपको related पोस्ट widget के बारे में पता चल गया होगा और साथ ही साथ इसके फायदे के बारे में भी पता चल गया होगा| तो अब मैं आपको blogger blog में related post widget add करने के तरीके बताएँगे| इस पोस्ट में मैं आपको दो code दूंगा एक code होगा जिसमें की आपको related पोस्ट के साथ thumbnail भी show होगा और दूसरा code होगा उसमें केवल related पोस्ट का टाइटल show होगा|

बहुत सारे ऐसे थीम होते हैं जिसमें related पोस्ट widget thumbnail के साथ अच्छा दीखता है पर कुछ थीम ऐसे भी होते हैं जिसमें related post widget बिना thumbnail के अच्छा दीखता है| तो मैं आपको दो code दूंगा आप अपने blog के थीम के अनुसार कोई एक code select करके अपने blog में लगा सकते हैं|

Steps To Add Related Post Widget With Thumbnail

सबसे पहले आप अपने blogger dashboard में अपने Gmail address और password के द्वारा login करें| (Click here for Blogger)

उसके बाद निचे दिए गए code को copy कर लें|

<!–Related Posts with thumbnails Scripts and Styles Start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=’text/css’>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type=’text/javascript’>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf(“<img”);b=s.indexOf(“src=””,a);c=s.indexOf(“””,b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=””)){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]=’http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png’}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+”…”;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==’alternate’){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i–}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write(‘<h4>’+relatedpoststitle+'</h4>’);document.write(‘<div style=”clear: both;”/>’);while(i<relatedTitles.length&&i<20&&i<maxresults){document.write(‘<a style=”text-decoration:none;margin:0 4px 10px 0;float:left;’);if(i!=0)document.write(‘”‘);else document.write(‘”‘);document.write(‘ href=”‘+relatedUrls[r]+'”><img class=”related_img” src=”‘+thumburl[r]+'”/><br/><div id=”related-title”>’+relatedTitles[r]+'</div></a>’);if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write(‘</div>’);relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>

अब उसके बाद Blogger dashboard के बगल में Theme tab पर click करने और उसके बाद Blogger dashboard में Edit HTML पर click करें|
Theme and Edit HTML
अब आपके सामने एक code box open हो जायेगा जिसमें आपको कहीं पर भी code के बीच में mouse pointer को click करना है और उसके बाद Ctrl + F press करना है| आप जैसे ही Ctrl + F प्रेस करेंगे तो coding area में top right side में एक search box open होगा जिसमें </head> लिखें और उसके बाद Enter प्रेस करें|
अब copy किया हुआ code को </head> टैग के ऊपर paste कर दें और उसके बाद Save Theme पर क्लिक कर दें| ज्यादा जानकारी के लिए निचे दिए गए image को देखें|
Paste code above head tag

अब उसके बाद फिर से निचे दिए गए code को copy करें|

<!– Related Posts with Thumbnails Code Start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != &quot;true&quot;’>
</b:if>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;’ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class=’clear’/><div style=”font-size: 9px;float: right; margin: 5px;”><a  style=”font-size: 9px; text-decoration: none;” href=”http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html” rel=”nofollow” >Related Posts Widget</a></div>
</b:if>
<!– Related Posts with Thumbnails Code End–>

अब उसके बाद फिर से code area में mouse pointer को क्लिक करें और <b:includable id=’postQuickEdit’ var=’post’> code को search करें|
उसके बाद copy किया गया code को </b: includable> के ऊपर paste कर दें| ज्यादा जानकारी के लिए निचे दिए गए image को देखें|
Code Pasting
और सबसे अंत में Save Theme पर क्लिक कर दें|

Note: Thumbnail का size कम ज्यादा करने के लिए सबसे ऊपर वाले code में width और height का size कम ज्यादा कर सकते हैं| अभी width का size 110px है जबकि height का size 100 px है|

Steps to Add Related Post Widget Without Thumbnail

सबसे पहले आप अपने blogger dashboard में अपने Gmail address और password के द्वारा login करें| (Click here for Blogger)

उसके बाद निचे दिए गए CSS code को copy कर लें|

<br />#related-posts {<br />float : left;<br />width : 350px;<br />margin:20px 0 20px 5px;<br />font : 18px Verdana;<br />}<br />#related-posts .widget {<br />margin : 5px 0 5list-style-type:circle;px 0;<br />padding:0px;<br />list-style-type:circle;<br />}<br />#related-posts .widget h2, #related-posts h2 {<br />font-size : 20px;<br />font-weight : normal;<br />margin : 5px 7px 0;<br />padding : 0 0 5px;<br />}<br />#related-posts a {<br />text-decoration : none;<br />}<br />#related-posts a:hover {<br />text-decoration : underline;<br />}<br />#related-posts ul {<br />border : medium none;<br />margin : 10px;<br />padding : 0;<br />}<br />#related-posts ul li {<br />display : block;<br />margin : 0;<br />padding : 0 0 5px 21px;<br />margin-bottom : 5px;<br />line-height : 2em;<br />border-bottom:1px dotted #cccccc;<br />}<br />

अब उसके बाद Blogger dashboard के बगल में Theme पर क्लिक करें और उसके बाद Customise पर click करें|
उसके बाद Advanced option पर क्लिक करें और फिर Add CSS option पर click करें| अब एक code box open होगा जिसमें copy किया गया CSS code को paste करें| और उसके बाद Apply to blog पर click करें|
अब उसके बाद Back to Blogger पर क्लिक करें|

फिर से निचे दिया गया code को copy करें|

<br />&lt;script type='text/javascript'&gt;<br />//&lt;![CDATA[<br />var relatedTitles = new Array();<br />var relatedTitlesNum = 0;<br />var relatedUrls = new Array();<br />function related_results_labels(json) <br /> {<br />  for (var i = 0; i &lt; json.feed.entry.length; i++) <br />   {<br />    var entry = json.feed.entry[i];<br />    relatedTitles[relatedTitlesNum] = entry.title.$t;<br />    for (var k = 0; k &lt; entry.link.length; k++) {<br />    if (entry.link[k].rel == 'alternate') <br />     {<br />      relatedUrls[relatedTitlesNum] = entry.link[k].href;<br />      relatedTitlesNum++;<br />      break;<br />     }<br />    }<br />   }<br /> }<br />function removeRelatedDuplicates() <br /> {<br />   var tmp = new Array(0);<br />   var tmp2 = new Array(0);<br />   for(var i = 0; i &lt; relatedUrls.length; i++) <br />    {<br />     if(!contains(tmp, relatedUrls[i])) <br />      {<br />       tmp.length += 1;<br />       tmp[tmp.length - 1] = relatedUrls[i];<br />       tmp2.length += 1;<br />       tmp2[tmp2.length - 1] = relatedTitles[i];<br />      }<br />    }<br />    relatedTitles = tmp2;<br />    relatedUrls = tmp;<br /> }<br />     <br />function contains(a, e) <br /> {<br />  for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true;<br />   return false;<br /> }<br />     <br />function printRelatedLabels()<br /> {<br />  var r = Math.floor((relatedTitles.length - 1) * Math.random());<br />  var i = 0;<br />  document.write('&lt;ol&gt;');<br />  while (i &lt; relatedTitles.length &amp;&amp; i &lt; 5) <br />   {<br />    document.write('&lt;li&gt;&lt;a href="' + relatedUrls[r] + '"&gt;' + relatedTitles[r] + '&lt;/a&gt;&lt;/li&gt;');<br />    if (r &lt; relatedTitles.length - 1)<br />     {<br />      r++;<br />     } <br />     else <br />     {<br />      r = 0;<br />     }<br />     i++;<br />   }<br />   document.write('&lt;/ol&gt;');<br /> }<br />//]]&gt;<br />&lt;/script&gt;<br />

और उसके बाद Blogger dashboard के बगल में Theme tab पर click करने और उसके बाद Blogger dashboard में Edit HTML पर click करें|
अब आपके सामने एक code box open हो जायेगा जिसमें आपको कहीं पर भी code के बीच में mouse pointer को click करना है और उसके बाद Ctrl + F press करना है| आप जैसे ही Ctrl + F प्रेस करेंगे तो coding area में top right side में एक search box open होगा जिसमें </head> लिखें और उसके बाद Enter प्रेस करें|
अब copy किया हुआ code को </head> टैग के ऊपर paste कर दें और उसके बाद Save Theme पर क्लिक कर दें| ज्यादा जानकारी के लिए निचे दिए गए image को देखें|
Paste code above head tag

अब उसके बाद निचे दिया गया JavaScript code को copy करें|

<br />&lt;b:if cond='data:blog.pageType == "item"'&gt;<br />&lt;div id='related-posts'&gt;<br />&lt;font face='Arial' size='5'&gt;&lt;b&gt;You May Also Like: &lt;/b&gt;&lt;/font&gt;&lt;font color='#FFFFFF'&gt;&lt;b:loop values='data:post.labels' var='label'&gt;&lt;b:if cond='data:label.isLast != "true"'&gt;,&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == "item"'&gt;<br />&lt;script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/&gt;&lt;/b:if&gt;&lt;/b:loop&gt; &lt;/font&gt;<br />&lt;script type='text/javascript'&gt; removeRelatedDuplicates(); printRelatedLabels();<br />&lt;/script&gt;<br />&lt;/div&gt;<br />&lt;/b:if&gt;<br />

अब उसके बाद फिर से code area में mouse pointer को क्लिक करें और <b:includable id=’postQuickEdit’ var=’post’> code को search करें|
उसके बाद copy किया गया code को </b: includable> के ऊपर paste कर दें| ज्यादा जानकारी के लिए निचे दिए गए image को देखें|
Code Pasting
और सबसे अंत में Save Theme पर click कर दें|

Conclusion and Final Words

किसी भी blog को rank कराने से पहले उसका design करना बहुत ही जरुरी होता है| जब तक आप अपने blog को अच्छा से design नहीं करते हैं तब तक आपका blog अच्छा तरीका से rank नहीं करेगा क्योंकि आपके readers आपके blog को पसंद नहीं करेंगे इसलिए designing को importance दें| आपको related post widget लगाने के लिए बहुत सारे website मिलेंगे जो easily related post widget add करने का code provide करेंगे लेकिन उससे आपका blog का loading speed slow हो जाता है इसलिए ऐसा कोशिश करें की किसी website का इस्तेमाल करके कोई widget ना लगायें|

मैंने इस पोस्ट में बताया की Blogger blog में related post widget कैसे लगायें| मुझे उम्मीद है की यह पोस्ट आपको बहुत पसंद आया होगा इस पोस्ट को अपने दोस्तों के साथ जरुर share करने और साथ ही साथ आप अपना feedback भी जरुर दें| Thank you for Visit Guptatreepoint blog. Please visit again.