थंबनेल के साथ Auto Read More विजेट लगाएँ

मनोज जैसवाल : नमस्ते दोस्तों मेरे इस ब्लॉग पर आपका स्वागत है.आज मैं आप से एक आकर्षक विजेट साझा कर रहा हूँ,ब्लॉग में थंबनेल के साथ Auto Read More विजेट लगाएँ.हांलाकि ब्लॉगर पर यह विजेट उपलब्ध है लेकिन उसके लिए आपको जम्प ब्रेक का इस्तेमाल करना होता है,यह विजेट आपकी पोस्ट को स्वतः ही पोस्ट का जितना भाग आप दिखाना चाहते हैं दिखाएगा.आप बस एक बार इसे सेट करे,आप इस विजेट से अपनी पोस्ट में इस्तेमाल चित्र का आकार भी नियंत्रित कर सकते हैं.इसका सीधा असर आपके ब्लॉग का लोड होने का समय पर पड़ता है,आप अपने ब्लॉग के मुख्य पेज पर जितनी चाहें पोस्ट प्रदर्शित करें आपके ब्लॉग के लोड होने की स्पीड भी तेज हो जाएगी.फिर इसे लगाने में देर ना करें.यह विजेट बेहद आसानी से लगाया जा सकता है,इसका लाइव डेमो आप मेरे इसी ब्लॉग के होम पेज पर देख सकते हैं.नीचे दिए आसान चरणों को अपना कर विजेट अपने ब्लॉग लगाएँ.

विशेषताएं और लाभ.

• जंप ब्रेक जोड़ने की कोई ज़रूरत नहीं है.

• आपकी पोस्ट संक्षिप्त सारांश के रूप में प्रदर्शित किया जाएगा with a Read more link.

• आप चुन सकते हैं कि कितना पाठ सारांश में प्रदर्शित किया जाता है.

• पोस्ट से एक छवि थंबनेल के रूप में बदल दिया जाएगा और सारांश के साथ डिस्प्ले होगा .

• आप थंबनेल के आकार का चयन कर सकते हैं.

DEMO.

 डेमो के रूप में आप मेरे ब्लॉग के मुख पृष्ठ देख सकते हैं.

TIME TO ADD THIS IN BLOGGER.

• ब्लॉगर डैशबोर्ड पर जाएँ -> डिजाइन -> HTML संपादित करें

• अपने ब्लॉग के लिए कोई भी बदलाव करने से पहले अपनी टेम्पलेट का बैकअप ज़रुर रखें.

• अब विजेट टेम्पलेट का विस्तार पर टिक करें  

• Press Ctrl + F अब इस कोड को खोजें.

</head>

• अब नीचे दिया कोड इसके ठीक ऊपर चिपकाएँ  </head>.

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.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)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f}
//]]>
</script>
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200;
</script>

• अब नीचे दिखाया कोड खोजें  .

<data:post.body/>

• अब नीचे दिखाए गए कोड को ऊपर दिखाए  कोड से  बदलें.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span>
</b:if>
</b:if>

• अब अपने टेम्पलेट  सहेजें. 

यहाँ आप नीचे दिए परिवर्तन कर सकते हैं .

summary_ noimg= 550; >> सारांश की लंबाई अगर पोस्ट में थंबनेल नहीं है.

summary_img = 450; >> पोस्ट के सारांश की लंबाई  थंबनेल के साथ.

null_thumb_height = 150; >> थंबनेल के पिक्सल की ऊंचाई.

null_thumb_width = 200; >>थंबनेल के पिक्सल की  चौड़ाई.

बस हो गया.

क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए !!

मेरे सामाजिक व् अन्य आलेख यहाँ देखें.