How to add Read More Button on Blogger in Hindi
दोस्तों Blogger मे हम जब भी कोई पोस्ट करते है तो हमारी जो पोस्ट है बो Home पेज पर पूरी दिखती है ओर उससे हमारे जो ब्लॉग का लुक है बो अच्छा नही दिखता, उसी को सही करने के लिए हम Read More की लिंक add करेगे अपने ब्लॉग की हर पोस्ट मे. आपने ये बात ज़रूर नोटीस करी होगी की ब्लॉगगेर के होम पेज पर सभी पोस्ट्स पूरी पूरी आती है. इससे ये प्राब्लम है की अगर हम कोई लगभग 900-1000 वर्ड्स की पोस्ट लिखते है तो बाकी सारी पोस्ट बहोत नीचे चली जाती है. तो इसका तरीका ये है की हम थोड़ा बहोत पोस्ट का सारांश और बाकी की पोस्ट उसके अलग पेज कर दिखाए. इसे ये फ़ायदा होगा की लोग आपके ब्लॉग पर बाकी भी आर्टिकल्स आसानी से देख सकेगे.
अगर हम चाहे तो हम अपने ब्लॉग के हर पोस्ट मे एक से ज्यादा Read More ऑप्शन का यूज़ कर सकते है. इसके लिए आपको अपने ब्लॉग के एडिटर भाग मे जाना होगा और वहा पे आप Insert Jump Break टूल्स की सहायता से कर सकते है. ऐसा करने से आपको उतनी ही पोस्ट होमे पेज पर दिखेगी जितनी कॉंटेंट के नीचे आप Read More ऑप्शन का यूज़ किए है. लेकिन दोस्तो ऐसा बार बार करना और हर पोस्ट मे Insert Jump Break टूल्स का यूज़ करना ये हमारे लिए एक सिर-दर्द के बराबर है तो इस पोस्ट मे हम ये सीखेगे की अपने ब्लॉग के home page पर आप कैसे पूरी पोस्ट ना दिखा कर उसका थोडा सा शुरू का हिस्सा दिखा सकते है, और सारांश के बाद एक Read More का बटन लगा सकते है. इस Read more के बटन से आपकी वेबसाइट का विज़िटर नये पेज पर पूरी पोस्ट पढ़ सकता है. तो चलिए जानते है की कैसे इस बटन का फायदा क्या है और इसे होम पेज पर add कैसे करे.
Read More का फायदा क्या है (Blogger Me Read More Ka Fayda Kya Hai)
दोस्तो Read More के ऑप्शनसे हमारे ब्लॉग को बहुत से फायदे है, सबसे पहले तो हम जो भी अपने ब्लॉग मे पोस्ट करते है वो हमारे ब्लॉग के होम पेज पर पूरी पोस्ट दिखती थी, लेकिन जब हम अपने Read More की script को अपने पोस्ट मे add करते है तो हमारा पोस्ट ब्लॉग के होम पेज पर छोटा दिखने लगता है और साथ ही पोस्ट की जो पहली इमेज होती है वो भी दिखती है. जैसे ही कोई हमारे ब्लॉग के होम पेज पर जाता है और वो पोस्ट को देखता है तो उसे पता चल जाता है की एस पोस्ट मे क्या है. अगर किसी को वो पोस्ट पड़नी है तो Read More के ऑप्शन पर क्लिक करके हम अपने पूरी पोस्ट को पढ़ सकते है और सबसे बड़ा फ़ायदा ये है की हमारे पोस्ट पे कोई विज़िटर्स आता है तो हमारे ब्लॉग का पेजव्यू भी बढ़ते है.
1- पोस्ट टाइटल.
2- पोस्ट की पहली इमेज.
3- पोस्ट की डिस्क्रिप्शन.
4- पूरी पोस्ट पढने के लिए Read More बटन.
दोस्तों आप इमेज का साइज़ ओर कितने शब्द दिखाना है उसको भी बदल सकते हो, उसके बारे मे में आपको निचे के टॉपिक में बताने जा रहा हु.
ब्लॉग मे Read More को कैसे ऐड करे (Blog Me Read More Ko Kaise Add Kare)
Step 1: पहले आप Blogger > Template > Edit HTML की बटन पर क्लिक करे.
Step 2: अब आप टेम्पलेट एडिटर में </head> सर्च करे.
Step 3: अब आपको ये कोड को कॉपी करके </head> के उपर पेस्ट करना है.
<script type='text/javascript'>
posts_no_thumb_sum = 500; //Agar Image nahi hai post me to kitne shabd dikhana hai
posts_thumb_sum = 380; //Image hai to kitne shabd dikhana hai
img_thumb_height = 140; //Thumbnail ki hight kya rakhni hai
img_thumb_width = 160; //Thumnail ki width kya rakhni hai
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
Step 4: दोस्तों इस कोड के सुरू मे कुछ नंबर है आप चाहे तो उसको अपने हिसाब से बदल सकते हो.
posts_no_thumb_sum = 500; //पोस्ट मे इमेज नही है तो कितने शब्द दिखना हैposts_thumb_sum = 380; //इमेज है तो कितने शब्द दिखाना हैimg_thumb_height = 140; //इमेज की हाइट क्या रखनी हैimg_thumb_width = 160; //इमेज की विड्थ क्या रखनी है
Step 5: अब Ctrl+F दबा कर इस कोड को सर्च करे.
<data:post.body/>
* हो सकता है ये कोड 2 या 3 बार आपके टेंपलेट मे हो. आप जितनी बार Enter की बटन दबाएगे आपको कोड का पता चल जाएगा. लास्ट वाले कोड को हटा कर ये कोड पेस्ट करना है.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
Step 6: दोस्तों अगर काम नही कर रहा है तो आप ये जो कोड है वो दूसरे कोड की जगह बदल कर देखे.
Step 7: अब Save Template करे.
दोस्तों मैंने इस आर्टिकल में आपको Read More बटन आसानी से लगाना सिखाया, अगर आपको इस आर्टिकल से संबंधित कोई भी प्राब्लम है तो नीचे दिए गए कॉमेंट बॉक्स में कॉमेंट करे. में आपकी जल्द से जल्द मदद करूँगा.
0 comments:
Post a Comment