हमारे blog के home page पर हमको पूरी post नहीं दिखाना चाहिए इससे blog का design अच्छा नहीं होता है. So हम आपको अभी इसी के बारे में बताने वाले है की Blog post के निचे read more button add कैसे करें।
हमे अपने ब्लॉग की design उस तरह करना चाहिए जिससे visitors को post read करने में या खोजने में परेशानी नहीं हो। अगर हमारा post homepage पर पूरा show होगा तो उसमे 2-3 post show होगा और loading speed भी बहुत slow होगी. तो इसके लिए हमे अपने post पर read more बटन add करना पड़ता है।
Read more button क्या है
हमारे blog के homepage पर जो थोड़ा post show होता है .read more बटन में उस post का link होता है. इस पर click करके आप पूरी post को पढ़ सकते है।
Read more बटन क्यों add करें
जैसे की में ऊपर में आपको read more क्या है इसके बारे में बताया. इससे आप अंदाजा तो लगा ही लिए होंगे की इसके क्या फायदे हैं. में आपको निचे में इसके कुछ फायदे बता रहा हूँ।
इससे blog का design अच्छा होता है
- आपको ज्यादा pageviews मिलेंगे।
- Visitors अपने हिसाब से जो post पढ़ना चाहे वो पढ़ सकते है
- Visitors आसानी से subject के बारे में जान जाते है
Read more button सभी post के निचे add कैसे करे
अब में आपको step by step read more button add करने के बारे में बताने जा रहा हूँ। में आशा करता हूँ की इस पोस्ट से आप आसानी से read more button add कर सकते हो।
Step 1: सबसे पहले blogger में login करके blog Dashboard में जाइये।
Step 2:अब template>>Edit HTML पर जाइये।
Step 3: ctrl+f अब
Step 4: अब निचे दिए हुए code को copy कीजिए और इसे </head> के पहले past कर दीजिए।
<!-- Auto Read More in BloggingHindi -->
<script type='text/javascript'>
no_thumb_sum = 300;
thumb_sum = 200;
thumb_h = 220;
thumb_w = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+thumb_w+'px" height="'+thumb_h+'px" /></a></span>',s=thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>
<!-- Auto Read More Body Script End -->
Step 5: अब फिर से Ctrl+f दबा के <data:post.body/> को find कीजिए।
Note: यहाँ आपको बहुत बार <data:post.body/> मिलेंगे लेकिन आपको सबसे निचे (last) वाले <data:post.body/> के स्थान पर निचे दिए गए code past करना है।
Step 6: आपको निचे दिए गए code को copy करके <data:post.body/> के जगह past करना है।
<!-- Auto Read More Body Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "index"'>
<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='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></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>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End -->
अब आप template को save कर दीजिए। अब blog में जाकर देखिये की post के निचे read more button show हो रहे हैं या नहीं। अगर कही परेशानी हो तो हमें comment में बताये।
Thanks Bro