ब्लॉग टेम्पलेट में रिलेटेड पोस्ट विजेट(Relatd Post Widget) कैसे बनाएं
किसी भी ब्लॉग में संबंधित पोस्ट विजेट(Relatd Post Widget) एक बहुत ही महत्वपूर्ण एवं बहुत ही उपयोगी साबित होता है तथा अतिरिक्त पाठकों को आकर्षित करने में बहुत योगदान देता है। यह एक ही लेबल के तहत आपके द्वारा लिखी गई अन्य समान पोस्टों का शीर्षक, थंबनेल और संक्षिप्त विवरण प्रदर्शित करता है। अब आप सोचते होंगे कि थंबनेल कहां से आएगी तो यहां आपको यह बता दें कि आपकी पोस्ट में जो पोस्ट की इमेज है उसी को छोटा करके आपका सिस्टम ऑटोमेटिकली थंबनेल के रूप में प्रदर्शित करेगा. यह आपके पाठकों का ध्यान आकर्षित करेगा और इस प्रकार ट्रैफ़िक को बढ़ाएगा। यह एक सरल प्रक्रिया है। आपको अपने ब्लॉग के HTML दस्तावेज़ में बस कुछ छोटी-छोटी स्क्रिप्ट जोड़ने की आवश्यकता होगी। विस्तृत प्रक्रिया निम्नानुसार है-
 |
| Blog related post widget |
यहां आपको ब्लॉक में लॉगिन करने की प्रक्रिया बताने की जरूरत नहीं है क्योंकि वह तो आप सब लोग जानते ही हैं इसलिए सीधा ही लॉगइन के बाद से ही शुरु करते हैं.
अपने ब्लॉग में लॉगिन करें और सबसे पहले अपने ब्लॉग और टेंप्लेट का बैकअप ले ले
अब थीम पर क्लिक करें और एडिट एचटीएमएल पर क्लिक करें अब आपके सामने आपके ब्लॉक की HTML फ़ाइल खुल जाएगी.
अब आपको अपने टेंपलेट के एचटीएमएल डॉक्यूमेंट में तीन छोटी-छोटी एचटीएमएल स्क्रिप्ट जोड़नी है. ब्लॉगर टेंप्लेट की html फाइल में दो सेक्शन होते हैं. एक हेड सेक्शन दूसरा बॉडी सेक्शन. यह सेक्शन ओपनिंग टैग और क्लोजिंग टैग से विभाजित होते हैं.
विस्तार
से जानने के लिए यह वीडियो देखें। Watch this small video to learn the step by step process
हमारी पहली स्क्रिप्ट html फाइल के हेड सेक्शन में जाएगी. हम चाहे तो इसे ओपनिंग हेड टैग के ठीक नीचे या क्लोजिंग हेड टैग के ठीक ऊपर, दोनों जगह में से किसी भी जगह पेस्ट कर सकते हैं. टेंपलेट के हेड सेक्शन में ओपनिंग हेड टैग के ठीक नीचे कुछ इंपोर्टेंट स्क्रिप्ट होती है इसलिए हम इसे क्लोजिंग हेड टैग के ठीक ऊपर पेस्ट करेंगे.अतः हमें एचटीएमएल डॉक्यूमेंट में क्लोजिंग हेड टैग ढूंढना पड़ेगा. आपको यह बताते हैं कि एचटीएमएल डॉक्यूमेंट में सर्च करने की बहुत सरल व्यवस्था है जो सिर्फ पर्टिकुलर खुले हुए डॉक्यूमेंट में ही सर्च करती है.
एचटीएमएल का सर्च बॉक्स खोलने के लिए आप खुली हुई एचटीएमएल HTML फ़ाइल में कहीं भीखाली जगह
पर
क्लिक करें।
डेमो वीडियो
अब ’CTRL’ की(Key) दबा कर रखें और F ’दबाएं (अब HTML सर्च बॉक्स HTML दस्तावेज़ के ऊपरी दाएँ हाथ के कोने में खुलेगा।
Related पोस्ट की स्क्रिप्ट्स को डॉक्यूमेंट के हेड सेक्शन में जोड़ा जाना है यानी <head> और </head> टैग्स के बीच। इसलिए हमें
"</head>" खोजने की आवश्यकता है।
इसलिए HTML दस्तावेज़ के दाएँ हाथ के ऊपरी कोने में HTML सर्च बॉक्स में </head>
लिखें और एंटर दबाएं।
अब </head> टैग हाईलाइट हो जाएगा और हमें स्क्रिप्ट को
</head> के ऊपर पेस्ट करना होगा।
इस प्रक्रिया के दौरान अथवा बाद में किसी भी समय आपको स्क्रिप्ट को एडिट करने कहीं कुछ बदलने या स्थानांतरित करने की आवश्यकता पड सकती है इसलिए इस स्क्रिप्ट के शुरू में और अंत में एक एक कमेंट टैग(Comment Tag) जोड़ना अच्छा रहता है ताकि बाद में किसी भी समय इस स्क्रिप्ट को लोकेट करने में आसानी रहे।
अब निम्न स्क्रिप्ट को कमेंट टैग(Comment Tag) सहित
कॉपी करें और सावधानीपूर्वक </head> टैग के ठीक ऊपर
और पेस्ट करें।
<!-- Related Posts script Starts
here-->
<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 = 5; //
var relatedmaxnum = 70; //
var relatednoimage = "https://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/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>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 5; //
var relatedmaxnum = 70; //
var relatednoimage = "https://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/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>
<!-- Related Posts script Ends
here-->
उपरोक्त कोड आपकी प्रत्येक पोस्ट के नीचे 5 आइटम को संबंधित पोस्ट(Related Post) के रूप में दिखाने के लिए डिज़ाइन किया गया है. परंतु यदि आप अपनी पोस्ट के नीचे 5 से कम या 5 से ज्यादा आइटम को संबंधित पोस्ट(Related
Post) के रूप में दिखाना चाहे तो इसमें दिखाए गए अंक 5 के स्थान पर दूसरा अंक कर दें. उदाहरण के लिए यदि आप अपने प्रत्येक पोस्ट के नीचे चार आइटम संबंधित पोस्ट(Related Post) के रूप में दिखाना चाहते हैं तो अंक 5 को मिटा दें और वहां अंक 4 लिख दें. अगर आप अपनी प्रत्येक पोस्ट के नीचे 8 आइटम दिखाना चाहते हैं तो अंक 5 को मिटा दें और वहां 8 लिख दे.
यह स्क्रिप्ट 70 अक्षरों का एक पोस्ट सारांश(Post Description) प्रदर्शित (डिस्प्ले) करने
के लिए डिजाइन की गई है। अगर आप पोस्ट सारांश में वर्णों(Characters) की संख्या को कम करना या बढ़ाना चाहते हैं तो इसके लिए कृपया अंक 70 को बदलें. उदाहरण के लिए अगर आप पोस्ट सारांश(Post
Description) 60 अंकों का ही रखना चाहते हैं तो अंक 70 को मिटा दें और वहां 60 लिख दे अगर आप पोस्ट सारांश(Post
Description) 100 अंकों का रखना चाहते हैं तो अंक 70 को मिटा दें और वहां 100 लिख दें
अब आपने रिलेटेड पोस्ट विजेट(Related Post Widget)
तो क्रिएट कर दिया है अब आप अपने विजेट में स्टाइल जोड़ना चाहते हैं तो स्टाइल जोड़ने के लिए निम्नलिखित सीएसएस कोड जोड़ें।
यह सीएसएस कोड भी हेड सेक्शन में ही जाएगा और जैसा कि आप हेड सेक्शन में पहले भी एक स्क्रिप्ट को पेस्ट कर चुके हैं इसलिए कृपया निम्न स्क्रिप्ट को भी वही </head> टैग के ठीक ऊपर पेस्ट करें।
<style>
.relatedsumposts {
padding: 0px 10px;
text-align: center;
/* width of the related posts area */
width: 120px;
.relatedsumposts {
padding: 0px 10px;
text-align: center;
/* width of the related posts area */
width: 120px;
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;
}
.relatedsumposts h6 {
margin: 5px 0;
}
.relatedsumposts h6 a {
/* link properties */
color: #linkcolor;
text-transform: uppercase;
font-size:12px;
}
.relatedsumposts img {
/* thumbnail properties */
height: 82px;
font-size:12px;
}
.relatedsumposts img {
/* thumbnail properties */
height: 82px;
width: 82px;
-webkit-border-radius:
50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px dotted #E5E5E5;
-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: 10px;
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>
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>
इस स्क्रिप्ट में हरे रंग में दिए गए कोड को सावधानीपूर्वक संपादित(Edit) करके अपनी अपनी पोस्ट के नीचे प्रदर्शित रिलेटेड पोस्ट विजेट(Related Post Widget) को अपनी पसंद के अनुसार मनचाहा आकार दे सकते हैं ।
उपरोक्त स्क्रिप्ट में हरे रंग में दिखाए गए कोड को सावधानीपूर्वक जांचें-
-webkit-border-radius:
50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
उपरोक्त तीन लाइन के कोड में तीनों लाइन में 50% लिखा गया है. यदि आप इसे एडिट नहीं करते हैं और 50% ही रहने देते हैं, तो थंबनेल यानी रिलेटेड पोस्ट विजेट(Related Post Widget) की इमेज बिल्कुल गोल दिखाई देगी। परंतु जैसे-जैसे आप 50 की संख्या को छोटी करते जाएंगे यानी 45 40 30 आदि यह एक आयताकार आकार में परिवर्तित होती जाएगी. इसलिए कृपया सावधानीपूर्वक संपादित करके थंबनेल यानी रिलेटेड पोस्ट विजेट(Related
Post Widget) की इमेज को अपना मनचाहा आकार दें।
समरी कलर - summarycolor;,
E5E5E5, और लिंक कलर
linkcolor को अपनी पसंद के सीएसएस रंगों के कोड से बदलें
विजेट क्षेत्र के आकार को बदलने के लिए 120px को बदलें। आकार बढ़ाने के लिए 120 से बड़ी संख्या से बदले आकार घटाने के लिए 120 से छोटी संख्या से बदले
थंबनेल की ऊंचाई घटाने ने के लिए 82
को बदलें. छोटे अंक से ऊंचाई घटेगी बड़े अंक से ऊंचाई बढ़ेगी /
थंबनेल के चौड़ाई को बदलने के लिए 82
बदलें। छोटे अंक से चौड़ाई घटेगी तथा बड़े अंक से चौड़ाई बढ़ेगी.
नीचे दी हुई स्क्रिप्ट <b:includable> टैग के जस्ट ऊपर पेस्ट करनी है. “<b:includable> टैग टेंपलेट के एचटीएमएल डॉक्यूमेंट में बहुत जगह होता है. अगर हम “<b:includable> लिखकर सर्च करेंगे तो एक के बाद एक कई टैग खुलते जाएंगे इसलिए भ्रम की स्थिति बनना स्वभाविक है इसलिए पहचान के लिए आपको बता देते हैं कि आपको यह स्क्रिप्ट उस“<b:includable> टैग के जस्ट ऊपर पेस्ट करनी है जो <b:includable
id='postQuickEdit' var='post'> टैग के ऊपर वाली लाइन में हो जैसा कि इमेज में दिखाया गया है.
इसलिए आपको <b:includable id='postQuickEdit' var='post'> टैग के ऊपर वाला <b:includable> टैग ढूंढना है इसलिए सर्च बॉक्स में
<b:includable id='postQuickEdit' var='post'> लिखें और एंटर दबाएं, अब आपके सामने टैग
<b:includable id='postQuickEdit' var='post'> के ऊपरवाला टैग इमेज में जैसा दिखाया है वैसा दिखाई देगा आपको नीचे दी गई स्क्रिप्ट <b:includable> टैग के ठीक ऊपर पेस्ट करनी है
 |
| Finding a tag |
अब नीचे दिया गया कोड “<b:includable>” टैग के जस्ट ऊपर पेस्ट कर दे.
|
<!-- Related Posts Code Starts
here-->
<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 Code Ends
here-->
आप ऊपर हरे रंग में
दिए गए टेक्स्ट को बदल सकते हैं जैसे RELATED POSTS के स्थान पर “You MAY ALSO
LIKE TO READ” या “YOU MAY BE INTERESTED IN” आदि। यहां जो टेक्स्ट ऑफ लिखेंगे वही
आपके ब्लॉग पर रिलेटेड पोस्ट के ऊपर दिखाई देगा.
तो यह था रिलेटेड पोस्ट विजिट क्रिएट करना तथा उसकी स्टाइल अपनी
पसंद के अनुसार सेट करने का तरीका जो आपने सीख लिया है.
अब कृपया अपनी एचटीएमएल फाइल और टेंपलेट को सावधानीपूर्वक सेव कर
ले.
नोट - संबंधित पोस्ट आपके लेबल के आधार पर प्रदर्शित की जाती हैं।
जैसे कि आज आपने एक पोस्ट क्रिएट की और उसी लेबल में 10 पोस्ट और भी है तो आपका सिस्टम
आखरी वाली 8 पोस्ट या चार पोस्ट जितनी भी आपने सेट की है वह दिखा देगा लेकिन अगर आपके
उस लेबल में जिसमें आपने आज पोस्ट क्रिएट की है उसमें आज से पहले की दो ही पोस्ट है
तो आपका सिस्टम रिलेटेड पोस्ट में दो ही पोस्ट खाएगा. इसलिए यदि आपने अपने लेबल को
ठीक से परिभाषित नहीं किया है या एक लेबल में केवल एक ही पोस्ट है, तो विजेट दिखाई
नहीं दे सकता है या आपको एक त्रुटि संदेश मिल सकता है।
विशेष निवेदन - हमारा प्रयास कैसा रहा इस विषय में कृपया कमेंट करे। विपरीत राय देने में कतई संकोच न करें अपनी राय निष्पक्ष दे। कृपया हमारे ब्लॉग के सदस्य बने तथा हमारा फेसबुक पेज लाइक करें।
हमारे यूट्यूब चैनल स्टार्ट विथ
विकिग्रीन को सब्सक्राइब करें।Please subscribe our youtube channel “Start With
Wikigreen”
संदेश
2 टिप्पणियाँ:
A very good article.
A very good article
एक टिप्पणी भेजें