Blogger Home Page में Read More कैसे जोड़े।

Blogger पर हम जब Blog बनाते है तो अक्सर ऐसा होता है हमारा Post Home Page पर पूरा दिखाई देता है। जो हमारे पूरे Blog का Look खराब कर देता है। आज हम इस Post में इसी के बारे में जानेंगे की कैसे Blogger Home Page में Read More जोड़ कर Blog का Look बेहतर किया जा सकता है।

वैसे तो Post Editor में जहां पर हम अपना Post लिखते है वहाँ पर Jump Break लगाने का Option आता है जिस से वो Home Page पर Read More जोड़ा जा सकता है। लेकिन अगर आपके Post की संख्या ज्यादा हो तो आप परेशान हो जाओगे हर एक Post में Jump Break लगाते-लगाते। लेकिन एक ऐसा भी रास्ता है जिस से की आप बिना ज्यादा मेहनत किए Sirf Code Add कर के सारे Post में Read More का Option लगा सकते है। चलिये जानते है इसके क्या-क्या फायदे हमें हो सकते है।

Automatic Read More जोड़ने के फायदे –

जब हम Default Template Use कर रहे होते है, तो हमारे सारे Post Home Page पर पूरे दिखाई देते है। जिन्हे हम चाहे तो Simple सी Coding Add कर के Home Page पर छोटा दिखा सकते है। इसका फाइदा यही है की इस को Add करने से Home Page पर ज्यादा से ज्यादा Post दिखा सकते है कम-कम जगह पे। इसको Add करने के बाद कुछ इस तरह से दिखेगा आपका Home Page.

जैसे की –

1. सुरू में Post का Title होगा।


2. नीचे Post में डाला हुवा छोटा सा Image भी दिखेगा।


3. Post के सुरू में लिखे हुवे 400 Words भी दिखेंगे।


4. नीचे छोटा से Read More का Option आएगा।

आप चाहे तो अपनी मर्जी से Image का size और कितने Words Show करना है Home Page पर ये Set कर सकते है।

Automatic Read More Option को Blogger में कैसे जोड़े।

Step 1 :

 

सबसे पहले अपने Blogger Dashboard में Template पर जाएँ और Edit Template पर क्लिक करे।

[stextbox id="info"]Note : - Template को Edit करने से पहले Template का Backup जरूर Download कर के रख लें।[/stextbox]

Step 2 :

 

अब Ctrl+F दबा कर Search Box में </head> लिख के Enter दबा कर Search करें। और नीचे दिया हुवा Code </head> के ऊपर Copy-Paste करें।

[stextbox id="grey"]<script type='text/javascript'>

posts_no_thumb_sum = 490; //Agar Image nahi hai post me to kitne sabd dikhana hai

posts_thumb_sum = 400;    //Image hai to kitne sand dikhana hai

img_thumb_height = 160;   //Thumbnail ki hight kya rakhni hai

img_thumb_width = 180;    //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 != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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>

[/stextbox]

इस Code के सुरू में जो Numbers दिये गए है उसको आप अपने हिसाब से रख सकते हैं। जैसे की –

posts_no_thumb_sum = 490; //Post में Image ना रहने पर कितने Words Show करना है।

posts_thumb_sum = 400;    // Post में Image रहने पर कितने Words Show करना है।

img_thumb_height = 160;   //Thumbnail की height कितनी हो।

img_thumb_width = 180;    //Thumnail की width कितनी हो।

Step 3 :

 

अब फिर से Ctrl+F दबा कर <data:post.body/> Search करें। ये Code आपको दो-तीन जगह पर दिख सकता है। पर आपको Last में जो Code आए उसको हटा कर नीचे दिया हुवा Code डालना है।

 [stextbox id="grey"]<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&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='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</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>

[/stextbox]

अब ये सही से काम कर रहा है या नहीं ये देखने के लिए Preview Template पर क्लिक कर के देखे। अगर सही से काम ना कर रहा हो तो इस Code को पहले वाले <data:post.body/> Code की जगह पर डाल कर देखें।

Last में Save Template जरूर करें।

Blogger से Related ये पोस्ट भी पढ़ें।

• Blog में Address, Title और Description कैसे बदले।


• Favicon क्या होता है और इसे Blogger में कैसे सेट करें।

आशा है की ये Trick आपके लिए काफी Helpful होगा। अगर आपको कहीं पर दिक्कत आ रही हो तो Comments के माध्यम से पुछे। और इस Post को दूसरे लोंगों तक Share जरूर करे।

भारत की शान के साथ जुड़े रहिए...धन्यवाद!