VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi, ब्लॉगर ब्लॉग में स्टाइलिश संबंधित पोस्ट विजेट कैसे जोड़े ?

VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi, ब्लॉगर ब्

VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi ,

 ब्लॉगर ब्लॉग में स्टाइलिश संबंधित पोस्ट विजेट कैसे जोड़े ? जोड़ने की पूरी जानकारी इन हिंदी :

नमस्कार दोस्तों आप सभी का इस ब्लॉग "VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi , ब्लॉगर ब्लॉग में स्टाइलिश संबंधित पोस्ट विजेट कैसे जोड़े ? जोड़ने की पूरी जानकारी इन हिंदी" में आपका स्वागत है, आज मैं आपको बताऊंगा की ब्लॉगर ब्लॉग में थंबनेल के साथ एक स्टाइलिश संबंधित पोस्ट विजेट Related Post widget कैसे जोड़ें।

What is a Related Post widget ?|| संबंधित पोस्ट विजेट क्या है? 

दोस्तों ! Related Post widget या संबंधित पोस्ट विजेट या गैजेट ब्लॉग के जरिये ब्लॉग में ब्लॉग पर उपलब्ध पोस्ट में से सम्बंधित categuri/ कैटेगरी या लेबल के पोस्ट को आसानी से दिखा सकते है | ब्लॉग में related post widget के इस्तेमाल से ब्लॉग या वेबसाइट automatic स्वतह ही किसी पोस्ट से सम्बंधित पोस्ट को दिखाते रहता है | जिस पर click करके विजिटर आसानी से संबधित पोस्ट / related post को आसानी से पढ़ सकता है |

हमें ब्लॉग में संबंधित पोस्ट विजेट जोड़ने की आवश्यकता क्यों है? || Why we need to add a Related Post widget in the blog?

दोस्तों ! आप सभी जानते ही होंगे की blogger plateform / ब्लॉगर प्लेटफॉर्म में कोई संबंधित पोस्ट विकल्प नहीं है, जिस कारण से जब भी हमारे विज़िटर हमारे किसी ब्लॉग पोस्ट पर जाते हैं तो वे बस पढ़ते हैं और उन्हें पोस्ट फुटर क्षेत्र में कोई अन्य संबंधित पोस्ट नहीं दिखाई देता है, जिस वे सिर्फ उन्ही पोस्ट तक ही सिमित रहते है और उसके बाद वे पोस्ट को ऑफ कर देते है जिससे हमारा पूरा ka पूरा वेबसाइट ऑफ हो जाता है | इसी वेबसाइट को चालू रखने के उद्देश्य से किसी ब्लॉग या वेबसाइट में related पोस्ट widget का उपयोग किया जाता है |

दोस्तों ! आप सभी जानते ही होंगे की ब्लॉगर में related post widget / संबंधित पोस्ट नहीं है, केवल लोकप्रिय पोस्ट उपलब्ध है ब्लॉगर डिफ़ॉल्ट थीम में कोई संबंधित पोस्ट सुविधा नहीं होती है जो ब्लॉग पोस्ट फ़ुटर क्षेत्र में संबंधित पोस्ट दिखाती है।

दोस्तों ! Related पोस्ट widget हमेशा प्रीमियम थीम / Premium टेम्पलेट में ही देखने को मिलता है | जिसमे पहले से related post show करने का कोडिंग दिया रहता है | लेकिन यदि आपके टेम्पलेट में related पोस्ट शो करने का आप्शन नहीं दिया गया है तो कोई बात नहीं | यहां मैं आपको थंबनेल के साथ संबंधित पोस्ट/ related पोस्ट शो करने का कोडिंग देता हूं, जिससे ब्लॉग पोस्ट को अन्य पोस्ट दिखाने में मदद करता है जो हमारे पेज व्यू को बढ़ाते हैं या आसानी से आगंतुकों को संलग्न करते हैं और साथ ही यह हमारे बाउंस दर अनुपात को कम करता है |

ब्लॉग में related post widget add करने हेतु निम्नलिखित चरण/ स्टेप्स हैं:

चरण 1 :

सबसे पहले ब्लॉगर ब्लॉग डैशबोर्ड खोलें |





VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi, ब्लॉगर ब्लॉग में स्टाइलिश संबंधित पोस्ट विजेट कैसे जोड़े ?

चरण 2 :

थीम विकल्प पर क्लिक करें और HTML संपादित करें बटन पर क्लिक करें।




VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi, ब्लॉगर ब्लॉग में स्टाइलिश संबंधित पोस्ट विजेट कैसे जोड़े ?

चरण 3 : 

अब इस वेबपेज में हम कोड में कहीं भी क्लिक करते हैं और Ctrl+F दबाते हैं फिर "<div class='post-footer'>" कोड ढूंढते हैं और उसके ऊपर कॉपी किए गए कोड को पेस्ट करते हैं ।





VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi, ब्लॉगर ब्लॉग में स्टाइलिश संबंधित पोस्ट विजेट कैसे जोड़े ?

यहां मैं आपको दो प्रकार के Stylish Related पोस्ट विजेट कोड देता हूं, अपने ब्लॉगर ब्लॉग के लिए सबसे उपयुक्त स्टाइल कोड चुनें।

Code 1 : Start : 

<!-- coding start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>

.related-post-title{font-size: 1em;padding: 0px 0px 15px;margin: 5px 0px;border-bottom: 1px dotted #000;} #related-posts {margin: 0px 0px 15px 0px;border-bottom: 1px dotted #000;padding-bottom: 10px; } #related-posts a { font-size: 1.2em; color: #525252; text-transform: capitalize; text-decoration: none; line-height: 20px;} #related-posts a:hover { text-decoration: none; color: #06c; } #related-posts ul { list-style-type: none; color: #000000; } #related-posts li { padding: 8px 2px; border-bottom: 1px solid #E2E2E2; clear: both; font-family: Helvetica; font-size: 12px; overflow: auto; border: 1px solid #CCC; margin: 5px 5px 8px 5px; border-radius: 4px; box-shadow: 0px 0px 5px #B6B6B6;background:#FAFAFA;} .image_left{ float: left; margin: 0px 10px 10px 2px; border: 1px solid #fff; padding: 0px; width: 80px; height: 56px; box-shadow: 0px 0px 4px #777; } #related_here{ float:left; width: 49%; padding: 0px; margin:0px; } #related_here2{ float:right; width: 49%; padding: 0px; margin:0px; } .related_all_ul{overflow: auto;}</style>

<script type='text/javascript'>//<![CDATA[

function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace("/s72-c/","/s100/");else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];else var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7XHFjIDjJt0ib1mZ5kM1b04-aIAfvtGh0zZdl-QhkC-tYco3Vq9jTvuipP_oAC-6teZjapALZMdR-6Wx6wdhAGoTaZW_YI-2YLcgP_WmITZPgwBZsgeO4kBGFTW7JyvrzAr5e2CHCluU/s250-Ic42/no-thumbnail.png";relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if("alternate"==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById("related_here2").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>":document.getElementById("related_here").innerHTML+="<li><img class='image_left' src=\""+relatedImage[t]+'"><a href="'+relatedUrls[t]+'">'+relatedTitles[t]+"</a></li>",t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;//]]></script>

<div id='related-posts'>

<h4 class='related-post-title'>You may also like:</h4>

<div class='related_all_ul'><ul id='related_here'/>

<ul id='related_here2'/></div>

<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&amp;max-results=7&quot;' type='text/javascript'/>

</b:loop><script type='text/javascript'> var maxposts=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>

</div><small><a href='Your blog url paste here' rel='nofollow' target='blank'>Related Post Widget</a></small><div style='clear: both;'/></b:if>

<!-- coding end -->

Code 2 : Start : 

<!-- coding Start here -->

<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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbkuZgqG_eVCTGRYTwKFe7Q8ssByBT2PkuCVtSasKr8jk58JY4Hk1hb-j2Bscbo2utywTcCFUm48-chwuF9Ix7edEhNx6KM1LLB6q9V0edVhtgrj5ND0ExPjxYyeI_qdb1zv3Y9NgOKuUw/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('<b>'+relatedpoststitle+'</b>');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>

<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; You may also like...&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=' Your blog url paste here' rel='nofollow' >Related Post Widget</a></div></b:if>

<!-- coding Close here -->

स्टेप 3 :

अब रिजल्ट चेक करने के लिए ब्लॉगर ब्लॉग खोलें।

स्टेप 5 :

अब रिजल्ट चेक करने के लिए ब्लॉगर ब्लॉग खोलें और रिजल्ट / परिणाम देखने के लिए अपने ब्लॉग पर जाएं।

दोस्तों ! आशा है कि आप को हमारा यह पोस्ट "VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi, ब्लॉगर ब्लॉग में स्टाइलिश संबंधित पोस्ट विजेट कैसे जोड़े ?" जरुर पसंद आया होगा | 

दोस्तों ! इसी प्रकार अन्य और भी जरुरी पोस्ट पढने के लिए हमारे ब्लॉग को फॉलो जरुर करे | धन्यवाद् | कोई समस्या हो तो कमेंट जरुर करें।

इस पोस्ट में आपने जाना :

VIP Trick || Stylish Related Post Widget for Blogger || How to Add Related Post Widget on Any blog or Website || Full Informations In Hindi, ब्लॉगर ब्लॉग में स्टाइलिश संबंधित पोस्ट विजेट कैसे जोड़े ?