Coding : How to Add Related Posts Widget In The Blogger Blog | ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | full knowledge in hindi :
Coding : How to Add Related Posts Widget In The Blogger Blog | ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | full knowledge in hindi :
Doston! Welcome to Our Blog/website "Gyan ka phoo" In hindi" Aaj ka hamara topic Hai. " How to Add Related Posts Widget with Thumbnails to Blogger / Blogspot"
Doston!
Blogger blog me Yadi aap Related post windget lagana chahte hai to apko apne blog me kuchh extra coding add karne honge. is coding ko aap apne blog ke theme ya tamplate me add karke badi aasani se apne blog yaa website me related post windget ko laga sakte hai. aur visiter ko apne kisi post se Related any post ko bade aasani se dikha sakte hai .All Steps For "Related Post Widget" for any Blog Or Website | किसी ब्लॉग या वेबसाइट में "related post widget" कैसे लगाएं :
 |
Coding : How to Add Related Posts Widget In The Blogger Blog | ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | full knowledge in hindi : |
STEP : 1 -
सबसे पहले आपको अपने ब्लॉग टेम्पलेट / blog template से अपने थीम / theme के सभी कोडिंग / Coding को ओपन करना होगा. इसके लिए जो स्टेप/ Steps है वो निचे दिया गया है .Go to Blogger Dashboard > Template > Edit HTML
 |
| 1. Coding : How to Add Related Posts Widget In The Blogger Blog | ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | full knowledge in hindi : |
ii. Agla Step -
 |
| 2. Coding : How to Add Related Posts Widget In The Blogger Blog | ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | full knowledge in hindi : |
STEP : 2 -
CTRL + F to enable search box and search for the <head> tag.
 |
| Coding : How to Add Related Posts Widget In The Blogger Blog | ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | full knowledge in hindi : |
STEP : 3 -
Copy and Paste below code just Bellow of </head> tag.
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
महत्वपूर्ण :
1. विजेट/ Widget की ऊंचाई या चौड़ाई बदलने के लिए आप उपरोक्त कोड "100px" में Red Color / लाल रंग के मान को संपादित कर सकते हैं।
2. संबंधित पोस्ट के शीर्षक का रंग और आकार बदलने के लिए, आप Blue Color / नीले रंग के मान को संपादित कर सकते हैं।
3. यदि आप चाहते हैं कि संबंधित पोस्ट होमपेज पर भी प्रदर्शित हों, तो हरे रंग की रेखाएं हटा दें।
STEP : 4 -
CTRL + F का उपयोग करके अपने ब्लॉग के HTML में निम्न कोड खोजें, |
| Coding : How to Add Related Posts Widget In The Blogger Blog | ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | full knowledge in hindi : |
STEP : 5 -
अब, "<div class='post-footer'>" code के ठीक ऊपर, नीचे दिए गए कोड को कॉपी और पेस्ट कर दें |
|
| Coding : How to Add Related Posts Widget In The Blogger Blog | ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | full knowledge in hindi : |
अब, "<div class='post-footer'>" code के ठीक ऊपर, नीचे दिए गए कोड को कॉपी और पेस्ट कर दें |
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwc-str9BOTYXhlBtXzPPeKLLZtiCeKixJ79crtQRDO000oXCEVP-KKvl8aO6Ex1eRP_YEYpFV5s67ketblcweo_pjKkbVXdUSxbDN_iJ_jOA5JI160p337ydHxaleVEhipBuuj2xTUTC/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
महत्वपूर्ण :
१. यहाँ पर आप जितने पोस्ट प्रदर्शित करना चाहते हैं, उनकी संख्या के साथ maxresults=5 में मान 5 को बदल सकते है ।
2. यदि आप संबंधित पोस्ट को होमपेज पर भी प्रदर्शित करना चाहते हैं तो हरे रंग की रेखा को भी हटा सकते है ।
Step 6 :
टेम्पलेट को "Save " कर दें |
हो गया दोस्तों अब आप अपने ब्लॉग पर जाकर देख सकते है आपके ब्लॉग या वेबसाइट में Related पोस्ट प्रदर्शित करने वाला विजेट / Widget ऐड / लग चूका होगा.
फिर भी यदि आपको अपने ब्लॉग या वेबसाइट में रिलेटेड पोस्ट / Related Post Widget add करने मे कोई परेशानी का सामना करना पड़ रहा है तो हमे इस पोस्ट मे कमेंट करके जरुर बताइए . हम आपको आपके समस्या को solve करने की पूरी कोशिश करेंगे .
इस पोस्ट मे आपने जाना :
Coding : How to Add Related Posts Widget In The Blogger Blog | with Thumbnails to Blogspot or any other Websiter | full knowledge in hindi :
अर्थात , ब्लॉगर ब्लॉग में संबंधित पोस्ट विजेट कैसे जोड़ें | की पूरी जानकारी हिंदी मे |
COMMENTS