हेलो दोस्तों स्वागत है आपका हमारे ब्लॉग हिंदी आईडिया में आज हम आपको बताएँगे कि Website / Blog में read more कैसे लगाते हैं ?
Website / Blog में read more कैसे लगाते हैं ?
आपने यदि अपना नई ब्लॉग बनाया है और आप ब्लॉगर की दी हुई template use कर रहे है तो आपने देखा होगा की आपकी पोस्ट ब्लॉग पर पूरी दिखाई देती है,ऐसे में यदि आप चाहते है कि आपकी पोस्ट पूरी ना दिखाई देकर आधी दिखे और उसे पूरा पढ़ने के लिए read more पर क्लिक किया जाए तो आप नीचे दिए पुरे steps को करे ।
ऐसा करने से होता तो कुछ नही है पर ब्लॉग पर पूरी पोस्ट दिखती है तो कुछ खास नजर नहीं आती और जगह भी अधिक ले लेती है जिससे की हमारा ब्लॉग का design अच्छा नही लगता,इसलिए read more का option लगाना ही अच्छा विकल्प है।
Website / Blog में read more लगाने के steps :-
अपने ब्लॉग पर read more का ऑप्शन लगाने के लिए नीचे दिए steps follow करे ।
step 1
सबसे पहले नीचे दिए गए बॉक्स में पुरे code को copy करे ।
<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>
ऊपर दिए पुरे code को copy करने के बाद अपने ब्लॉग के deshaboard में जाए, अब template पर क्लिक करे ,फिर edit html पर क्लिक करे ।
dashaboard->template->edit html
Note- template को एडिट करने से पहले टेम्पलेट का बैकअप जरूर बना ले ।
Edit html में क्लिक करने के बाद आपके ब्लॉग की coding दिखती है , इस code के बीच में </head> ढूंढे और </head> के आगे/पहले उस code को paste कर दे जो ऊपर आपने copy करा था ।
step 2
अब नीचे दिए code को कॉपी करे ।
<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>
ऊपर बॉक्स में दिए पुरे कोड को कॉपी करने के बाद वापस अपने template के coding में जाए और वहाँ <data:post. body/> सर्च करे ।
अब <data:post.body/> मिलने के बाद इसे डिलीट कर दे,और उसके जगह पर ऊपर अभी आपने जो कोड copy किया था उसे paste कर दे ।
ध्यान रखे की coding में सिर्फ <data:post.body/> को ही डिलीट करना है इसके आगे पीछे किसी को डिलीट नही करना है,नही तो code काम नही करेगा ।
इतना करने के बाद html code को save कर दे इसके लिए सबसे ऊपर जाए और save पर क्लिक करे ।
अब अपने ब्लॉग को खोले और refresh करे आप देखेंगे कि आपके ब्लॉग के पोस्ट पुरे नही दीखते होंगे और पोस्ट में read more का ऑप्शन भी आ गया होगा ।
No comments:
Post a Comment