Blog ke post me Read more button kaise lagaye Add kare ?

Hello friends,आज हम बात करेंगे कि Blog ke post me read more button kaise lagaye Add kare.जब हम अपने blog पर कोई post content शेयर करते है तो वह post blog के होमपेज पर पूरा दिखता है जिससे और बाकी सारे Post छिप जाते है ।



जिससे ब्लॉग को नुकसान तो होता ही और हमारा ब्लॉग look भी अच्छा नही लगता है इसलिए ब्लॉग के पोस्ट में read more का option होना बहुत जरूरी होता है। Read more का ऑप्शन होने से आप अपने blog के Homepage पर जितनी पोस्ट चाहे उतनी show करवा सकते है।जिससे visitor जब आपके blog पर आएंगे तो वो अपने जरूरत के हिसाब से पोस्ट को Read more पर क्लिक करके पढ़ सकते है।और आपके ब्लॉग का look भी अच्छा लगने लगता है।

ये भी पढ़ें:
● free me website blog kaise banaye aur paise kamaye hindi me ?
● blogger ke post me dusri post ka link kaise add kare hindi me?

 Read More button Kya Hai ?

Read more button का काम आपके ब्लॉग के होमपेज पर पोस्ट को short करके दिखाता है।जिससे आपके ब्लॉग के होमपेज पर कई सारे पोस्ट show करवा सकते है।जिससे जब कोई आपके ब्लॉग पर visit करेगा तो होमपेज पर पोस्ट show होगी और उसे उस पोस्ट को पढ़ना है तो Read more button पर क्लिक करके पूरी पोस्ट content पढ़ सकता है।और ब्लॉग का लुक भी अच्छा लगता है।

Read More Button ka Use post me Kyun Kare?


अगर आपको अपने blog का look professional करना है तो आप Read more button का प्रयोग करे।Read more button का प्रयोग से ब्लॉग के Homepage का design अच्छा लगता है।जिससे visitor आपके ब्लॉग को पसंद करने लगते है।

Blog Me Auto Read More Button kaise Add Kare?


Blog में Read more button लगाने से पहले अपने blog theme का बैकअप जरूर बना ले जिससे अगर Read more button Add करने में कोई problem होती है। तो आप फिर से वही बैकअप वाली theme use कर सकें।Read more button लगाने से पहले हमारे बताये गये पूरी जानकारी को ध्यानपूर्वक पढ़ ले जिससे आपको Code ऐड करने में कोई परेशानी न हो।जैसा-जैसा मैं आपको इस पोस्ट में बता रहा हूँ।उसे आपको follow करना है।तो आइए कुछ स्टेप है जिसको फॉलो करके आप blog post में read more बटन लगा सकते है।

ये भी पढ़ें:
● Blogger Blog Ki Theme or Template Kaise Change Upload Kare?

Step :1

सबसे पहले आप Blogger.com वेबसाइट पर जाकर login करिये और dashboard में जाये।अब Backup/restore पर क्लिक करके Theme का बैकअप download कर ले।Theme बैकअप के बाद Edit HTML पर क्लिक करे।

Step:2

1. अब इसमें आपको </head> को ढूंढना है ctrl+f से भी इस tag को खोज सकते है।

2. अब आपको </head> tag के ऊपर जो हम नीचे code दे रहे है उसको paste करके theme save कर देना है।

<!-- Auto Read More in workmehindi -->
<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 != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'>
<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:3 
1. अब आपको ये <data:post.body/> कोड ढूढ़ना है। ctrl+f button दबाकर search bar में ये कोड find करें आसानी से मिल जाएगा।पीले कलर से highlight हो जाएगा।
2. ये Code आपको 3 या 4 जगह मिलेगा Last वाले कोड को डिलीट करके उसकी जगह ये नीचे वाले code paste कर दे।




<!-- Auto Read More Body Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</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 == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End -->
Step:4 

अब एक काम और है Read more button की सुंदरता बढाने के लिए css कोड add करना चाहते है तो ये css कोड को ]]></b:skin> के ऊपर Paste कर दे अगर नही करना चाहते तो रहने दे।

.jump-link {
display: block; font-size: 12px; font-weight: bold; text-align:right; }.jump-link a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient(top, #42aaff 0%, #003366); background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); }

अब इस css कोड को ]]></b:skin> के ऊपर Paste करने के बाद Save Theme पर क्लिक करके save कर दे।

Finally अब आपके blog के Homepage पर show होने वाले पोस्ट में Read more button add हो चुका है।अपना ब्लॉग open करके चेक कर सकते है।

मुझे उम्मीद है कि ये पोस्ट आपको पसंद आई होगी तो इस post को like और social media पर शेयर करना न भूले।अगर Read more बटन ऐड करने में कोई परेशानी होती हैं तो आप हमसे comment के द्वारा पूछ सकते है।