Related Posts Widget Thumbnails ke sath blogger Summary kaise add kare

 

मित्रो आज हम आप लोगो को ब्लागर ब्लाग में  रिलेटेड पोस्ट विजेट यानि की ब्लाग में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी कैसे ऐड करे ? के बारे में विस्तार पूर्वक जानकारी उपलब्ध करायेगें। दरअसल मित्रो होता क्या है ब्लागर ब्लाग का जो टेम्पलेट होता है वह बिल्कुल सिम्पल होता है। परन्तु ब्लागर ने एक सबसे बडी खास सुविधा हमें मुहैया करा रखा है कि यदि हम चाहे तो अपने हिसाब से ब्लागर टेम्पलेट को एडिट करके उसको स्टाइलिश रंग रूप देकर आकर्षक बना सकते है। ब्लाग के टेम्पलेट को स्टाइलिश बनाने के लिए सबसे महत्वपूर्ण यह होता है कि आपको HTML कोड एवं CSS कोड का ज्ञान होना आवश्यक है। यदि आपके पास HTML एवं CSS कोड का ज्ञान नही है तो आप अपने ब्लागर के टेम्पलेट को स्टाइलिश रंग रूप नही दे सकते है। फिर ऐसे में आपके पास दूसरा उपाय यह होता है कि आप किसी थर्ड पार्टी से अपने मनपसन्द के टेम्पलेट को खरीद कर एड कर सकते है। जिससे आपका ब्लागर ब्लाग देखने में आकर्षक हो सकता है। परन्तु यदि आपने भूल से भी थर्ड पार्टी के टेम्पलेट का फ्री वर्जन डाउनलोड कर लिया है तो वह आपको कभी भी धोखा दे सकता है। परन्तु अब आपको परेशान होने की आवश्यकता नही ! हां यदि आप थोडा बहुत भी धैर्य पूवर्क स्वंय मेंहनत कर सकते है तो ऐसे में आप ब्लागर को स्टाइलिश रंग रूप आसानी से दे सकते है। और आज हम आपको ब्लागर ब्लाग में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी कैसे ऐड करे ?  के बारे में जानकारी उपलब्ध कराने जा रहे है। जिससे आपके ब्लाग का लुक  बदल जायेगा और साथ में स्टाइलिश भी नजर  आयेगा।

ब्लागर में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी कैसे ऐड करे  ?

मित्रो ब्लागर ब्लाग में  रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी कैसे ऐड करना  बहुत ही आसान है। साथ ही आपको रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी ऐड करने से आपके ब्लाग का रंग रूप् बेहद आकर्षक हो जाता है । मित्रो  रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी लगाने के सबसे बडा फायदा हमे यह होता है कि जब कोई विजिटर हमारे ब्लाग पर सर्च करके पहुचता है। और वह सर्च किये गये पोस्ट को पढने के बाद तुरन्त वापस चला जाता है। जिससे आपके ब्लाग के ट्रैफिक में इजाफा नही हो पाता जिससे आपका ब्लाग एलेक्सा रैंक में बहुत नीचे रहता है। परन्तु  रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी इस समस्या को दूर कर देता है। आपके ब्लाग मेंरिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी लगाने के बाद। यदि कोई विजिटर आपके ब्लाग पर सर्च के माध्यम से या शेयर किये गये पोस्ट के माध्यम से पहुचता है। तो ऐसे में उसे अपने मनपसन्द पोस्ट को पढने के अलावा और भी आफ्शन उपलब्ध हो जाता है। क्योकि आपका रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी के माध्यम से ब्लाग पोस्ट के नीचे ब्लाग से रिलेटेड कम से कम 04 पोस्ट और प्रदर्शित करता है। यदि विजिटर उनमें से किसी भी पोस्ट पर क्लिक करता है तो वह आटोमेटिक रूप से दूसरे पोस्ट विजेट पर चला जाता है। परन्तु विजिटर जैसे ही किसी दूसरे रिलेटेड पोस्ट पर जाता है। तो ऐसे में उस पोस्ट पर प्रदर्शित होने वाला रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी  बदल जाता है। इसी तरह विजिटर जितने भी रिलेटेड पोस्ट पर क्लिक करेगा। अन्य पोस्ट पर प्रदर्शित होने वाला रिलेटड पोस्ट भिन्न-भिन्न तरीके से प्रदर्शित होगा।  ऐसे में ब्लाग पर आया हुआ विजिटर न चाहते हुए भी अन्य पोस्ट को पढने के लिए क्लिक करता रहता है। इससे आपके ब्लाग के ट्रैफिक में काफी इजाफा हो जाता है। यदि आप भी चाहे तो अपने ब्लागर ब्लाग में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी  लगा सकते है। 

ब्लाग में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी कैसे लगायें ?

ब्लागर ब्लाग में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरीलगाने के लिए आपको दिये गये स्टेप का  पालन करना होगा। जिससे आपको ब्लागर  में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी लगाने  आसानी हो सके। 

स्टेप-संख्या-01

• सबसे पहले आप ब्लागर डेशबोर्ड में लागिंन करे। 
• अब आप Theme पर क्लिक करे। 
• अब आप Customize पर क्लिक करे। 
• अब आप EDIT HTML  पर क्लिक करे इसके बाद एक नया पप अप विंडो ओपन होगा । 

स्टेप-संख्या-02

01- सबसे पहले आप नीचे दिये गये  ब्लॉगर में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी के कोड को  </head> में लगाने के लिए  कापी पेस्ट कर ले । 

<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls = new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var relatedmaxnum = 75; // the number of characters of summary var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jF1TmYtd_sBQpWIgx6avfsWgjT_HbG3Q9ZFnjlol8DMcl7110OdqWRbvlmXGPV7iLLKW27uIysycs-7n36q_triOMGZvHE71nLJY4lyAuWOuvYhgoUB5hUMa8LQtFUOvPkxdBrjWIYCk/s1600/no_image.jpg"; // default picture for entries with no image function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1} //]]> </script> <style> .relatedsumposts { padding: 0px 10px; text-align: center; /* width of the related posts area */ width: 140px; float:left;margin-bottom:15px; border-right: 1px dotted #E5E5E5; display: inline-block; } .relatedsumposts h6 { margin: 5px 0; } .relatedsumposts h6 a { /* link properties */ color: #linkcolor; text-transform: uppercase; font-size:16px; } .relatedsumposts img { /* thumbnail properties */ height: 140px; width: 140px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .relatedsumposts p { /* summary properties */ border-top: 1px dotted #E5E5E5; border-bottom: 1px dotted #E5E5E5; color: #summarycolor; font-size: 16px; height: 4em; line-height: 1; margin: 5px 0 0; padding: 5px 0 15px 0; } #relatedpostssum { width: 100%; } .relatedpoststitle { font-size: 19px; margin-bottom:15px; } </style>

02- यदि आप चाहे तो नीचे दिये गये ब्लॉगर में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी के कोड  को </head> में लगाने के लिए सुरक्षित वायरस मुक्त क्लिक कर डाउनलोड भी कर सकते है।

• [[ Related Posts Widget Thumbnail Summary CODE-DOWNLOAD HERE ]]

स्टेप-संख्या-03

• अब Search Box में (CTRL + F)  दबाकर आप </head> को सर्च करें ।
• उसके बाद कॉपी किए गए कोड को </head> के ठीक ऊपर Paste दे ।

• उसके बाद Save Theme पर क्लिक कर परिवर्तनों को सहेजे और अब आपका काम हो गया!

नोट-संबंधित पोस्ट विजेट को अनुकूलित करें । 

• - विजेट क्षेत्र की चौड़ाई  को समायोजित करने के लिए  (140px) में मान को संशोधित करें । 
• - यदि आप थंबनेल का आकार बदलना चाहते हैं, तो वायलेट में चिह्नित मानों को संशोधित करें (140px)। 
• - सीमा गोलाई निर्धारित करने के लिए, नारंगी में मूल्यों को संशोधित करें (50%) । 
• - पोस्ट स्निपेट का रंग बदलने के लिए, कलर हेक्स वैल्यू के साथ #summarycolor बदलें । 

स्टेप-संख्या-03

01- इसके बाद अब आप सबसे पहले आप नीचे दिये गये  ब्लॉगर में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी के कोड को  <b:includable id='postQuickEdit' var='post'> में लगाने के लिए  कापी पेस्ट कर ले । 

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/> </b:loop> <div class='post-footer-line post-footer-line-4'> <div class='relatedpoststitle'>RELATED POSTS</div> <div id='relatedpostssum'> <script type='text/javascript'>showrelated();</script> </div> <div style='clear:both;'/> </div> </b:if> <!-- Related Posts with Thumbnails Code End-->

02- यदि आप चाहे तो नीचे दिये गये ब्लॉगर में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी के कोड  को <b:includable id='postQuickEdit' var='post'> में लगाने के लिए सुरक्षित वायरस मुक्त क्लिक कर डाउनलोड भी कर सकते है।

• [[ Related Posts Widget Thumbnail Summary CODE-02-DOWNLOAD HERE ]]

स्टेप-संख्या-03

• अगला, निम्नलिखित कोड स्निपेट के लिए आप (CTRL + F) दबाकर  <b:includable id='postQuickEdit' var='post'>  खोजे , जब आपको यह मिल जाए, तो कोड का विस्तार करने के लिए बग़ल में स्थित तीर पर क्लिक करें और जब तक आप </b:includable> शामिल नहीं करें, तब तक नीचे स्क्रॉल करें । अधिक मदद के लिए स्क्रीनशॉट देखें:
• उसके बाद कॉपी किए गए कोड को </b:includable> के ठीक ऊपर Paste दे ।

• उसके बाद Save Theme पर क्लिक कर परिवर्तनों को सहेजे और अब आपका काम हो गया!

मित्रो अब हमे उम्मीद है कि आप लोगो ने इस आर्टिकल को पढ कर सफलता पूर्वक अपने ब्लाग में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी लगाना अच्छी तरह से समझ गये होगें।  अब नई शैली को देखने के लिए अपने टेम्पलेट  एक बार जाँच अवश्य करें। हां यदि आप लोगो को किसी प्रकार कोई समस्या महसूस हो तो आप हमें कमेन्ट कर पूछ सकते है। यदि आप ब्लाग में रिलेटेड पोस्ट्स विजेट थंबनेल के साथ ब्लॉगर समरी लगाने के लिए दिए गए तकनीकों को सीखते हैं, तो कृपया नीचे टिप्पणी करें, या दूसरों की मदद करने के लिए इस लेख को साझा करें।