10 September, 2009

अब ब्लगरको आफ्नै “Read More”

                          

अक्टोबर महिनाको २३ देखि ब्लगर दस बर्षमा प्रवेश गरेको छ र ब्लगरले आफ् दस बर्ष पुगेको अबसरमा केहि नयाँ कुराहरु थप्ने जानाकरी दिएको थियो र केही भने प्रयोगमा आईसकेका पनि छन । यस बारेमा मैले पहिला यो पोष्टमा पनि केही लेखी सकेको छु। मैले सो पोष्टमा अनुमान गरे जस्तै आज ब्लगरले ‘रिड मोर’ वा ब्लगको मुख्‍य पृष्ठमा केही वाक्यहरु देखाएर बाँकी पेज भने ‘रिड मोर’ मा क्लिक गरेपछि खुल्‍ने अनुप्रयोगको सुरुवात गरेको छ ।

हुन त यसभन्दा अघि पनि हामीमध्य धेरैले गुगल वा ब्लगर बाहेकका अन्य प्रदायकका कोड वा ग्याजेट प्रयोग गरेर वा आफ्ना कोडहरुलाई ‘छेड-छाड’ गरेर आफ्नो पोष्टमा ‘रिड मोर’ अप्सन हालेका छौं । तर अब तपाई चाहनुहुन्छ भने गुगलकै आफ्नै ‘रिड मोर’ अप्सन प्रयोग गर्न सक्नुहुन्छ। यसको तरिका यस प्रकार छ:

१. पहिलो कुरा त हाल यो रिड मोर अप्सन ब्लगरको “Updated editor” मा मात्रै उपलब्ध भएकोले सबैभन्दा पहिला आफ्नो Dashboard मा जानुहोस अनि Settings >> Basic हुँदै Global Settings भन्दा मुनि हेर्नुहोस । त्यहाँ "Select post editor" को पछाडी "Updated editor" मा चेक मार्क लगाएर "SAVE SETTINGS" मा क्लिक गर्नुहोस । (यसको बिस्तृत तरिका यो पोष्टमा दिईएको छ)

२. अब तपाई अब तपाई आफ्नो post editor पेजमा जानु भयो भने तपाईले मेनुबारको अन्ततिर तलको चित्रमा जस्तै “Insert Jump Break” लेखेको एउटा नयाँ आईकोन देख्‍नु हुनेछ।

Read More
३. अब आफुले लेख्‍ने कुराहरु आफ्नो post editor बक्समा लेख्‍नुहोस र कति वाक्य मुख्य पेजमा देखाउने निर्धारण गर्नुहोस । अब माथिको चित्रमा जस्तै मुख्‍य पेजमा देखाउन चाहेका वाक्यहरुभन्दा पछाडि आफ्नो माउसको क्रसर राखेर “Insert Jump Break” मा क्लिक गर्नुहोस ।

४. बस, अब चित्रमा जस्तै तपाईको post editor बक्समा माउस क्रसर राखेको ठाउँ भन्दा मुनि एउटा लाईन देखिने छ । अब तपाईले आफ्नो पोष्ट पब्लिस गर्नु भयो भने सो लाईन भन्दा माथिका वाक्यहरु मुख्य पेजमा आउने छन र लाईन भन्दा मुनिका कुराहरु “Read more” मा क्लिक गरेपछि मात्रै देखिनेछन।
Edit Posts अब केहि रंग-रोगनका कुरा। यदि तपाई मुख्य पेजमा देखिने “Read more” को सट्टामा आफ्नै कुनै शब्दहरु राख्‍न चाहनुहुन्छ भने के गर्ने त ? । यो पनि सजिलो छ । यसको लगि आफ्नो Dashboard बाट Layout मा जानुहोस वाँया पट्टीको चित्रमा जस्तै “Blog Posts” भन्दा मुनि रहेको “Edit” दबाउनुहोस ।
अब खुल्ने नयाँ पेजमा तलको चित्रमा जस्तै “Post page link text:” भन्दा पछाडिको बक्समा “Read more>>” को सट्टा “पुरै पढनुस”, “बाँकी यता” वा आफुलाई मन पर्ने कुनै शब्द हाल्नुस र सेभ गर्नुहोस ।

Edit Posts after changeयो भन्दा पहिला हामीले प्रयोग गर्दै आएका थर्ड पा्र्टी ग्याजेट र यसमा अझै पनि केहि भिन्नताहरु छन । हुन त गुगलले यसमा पनि सुधार गर्ला तर हाल रहेका केहि फाईदा र बेफाईदाहरु:

फाईदाहरु

  • गुगलको आफ्नै कोड भएकोले छिटो लोड हुने ।
  • ईनेबल र डिसेबल गर्न सजिलो ।
बेफाईदाहरु:

  • पुराना टाँसोहरु पहिला जे जस्तो हालतमा थिए त्यस्तै देखिने ।
  • पुराना पूर्ण टाँसोको मुनि पनि “Read more>>” देखिने ।
  • पोष्टमा फोटो भएको अबस्थामा मुख्य पेजमा जत्ति कम शब्द वा वाक्य राखे पनि फोटोले ओगटने जत्ती भाग (खाली भएपनि) मुख्य पेजमा देखिने ।
  • हरेक पटक मुख्य पेजमा कति देखाउने र बाँकी भाग कति राख्‍ने मिलाउनु पर्ने ।

-------------------------------------------------------------------------
यो त भयो  गुगलको आफ्नो अप्सन। तर यदि तपाई आफ्ना पुराना र नयाँ पोष्टहरु हरेक पल्ट छापिँदा आफै केहि भाग मुख्य पेजमा र बाँकी “Read more>>” क्लिक गरेपछि देखाउन चाहनु हुन्छ भने म त्यसको कोड पनि यहाँ राख्दै छु। यो कोड राख्‍ने तरिका भन्दा पहिला यसका केहि फाईदा र बेफाईदाहरु:

फाईदाहरु

  • एकचोटी टेम्प्लेटमा कोडहरु मिलाएपछि यो कोड राख्‍नु भन्दा पहिला लेखिएका पुराना पोष्टहरु पनि आफैं मुख्य पेजमा केही भाग र बाँकी “Read more>>” क्लिक गरेपछि देखिने भएर बस्नेछन।
  • पोष्टमा फोटो वा फोटोहरु छन भने पोष्टको पहिलो फोटो ‘थम्बनेल’ बनेर आफै मुख्य पृष्टमा सानो आकारमा देखिन्छ ।
  • मुख्य पेजमा कति देखाउने र बाँकि कति देखाउने सम्पादन गर्न मिल्ने ।
  • मुख्य पेजमा देखिने फोटोको साईज आफैले निर्धारण गर्न मिल्ने ।
बेफाईदाहरु:
  • यो थर्ड पार्टी कोड भएकोले यसले पेज लोड हुने समयलाई केहि लम्बाउन सक्ने छ।
  • हाल्न र झीक्न अलिकता झन्झटिलो ।

यो कोड थर्ड पार्टी कोड भएपनि एक पटक राखेपछि माथि भनेजस्तै हालसम्मका जम्मै पुराना पोष्टहरुमा पनि आफैं लागु हुने भएकोले यसलाई धेरैले रुचाएका छन। यसको उदाहरण यो ब्लगमा देख्‍न सक्नुहुन्छ। यदि तपाई पनि आफ्ना पोष्टहरु छापिने बेलामा आफै केहि भाग मुख्य पृष्ठ र बाँकी “Read more>>” क्लिक गरेपछि देखिने बनाउन चाहनुहुन्छ भने यसो गर्नुस:

१. आफ्नो Dashboard मा जानुहोस अनि Layout हुँदैं Edit HTML मा। अब त्यहाँ “Expand widget templates” मा चेक मार्क लगाएर निम्न कोडहरु खोज्नुहोस (कोड खोज्न CTRL+F key थीचेर search गर्नु भयो भने छिटो र सजिलै भेटिनेछन):

 <data:post.body/>  (कुनै कुनै टेम्प्लेटमा <data:post.body>  पनि हुन सक्छ)

२. अब माथिको कोडको सट्टा ( अर्थात माथिको कोड डिलिट गरेर सो को ठाउँमा) तलको कोड कपि पेष्ट गर्नुहोस:

<b:if cond='data:blog.pageType == &quot;item&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 style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more &gt;&gt;</b></a></span>
</b:if>

३. अब फेरि </head> खोज्नुहोस (याद गर्नुहोस यो “<head>”  हैन “</head>” हो ) ।

४. अब सो </head> भन्दा ठ्याकै माथि तलको कोडहरु कपि पेष्ट गर्नुहोस:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 630;
summary_img = 440;
img_thumb_height = 170;
img_thumb_width = 200;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>

अब “SAVE TEMPLATE” दबाउनुहोस । बस तयार भयो तपाईको ‘स्वचालित रिड मोर ग्याजेट” । अब तपाईका नयाँ पुराना सबै पोष्टहरु आफै केहि भाग मुख्य पेजमा र बाँकी भने “Read more>>” क्लिक गरेपछि देखिने छ।

माथिको कोडमा रहेको
summary_noimg = 630; ले पोष्टमा तस्बिर नभएको बेलामा मुख्य पेजमा देखिने शब्द संख्या,
summary_img = 440; ले पोष्टमा तस्बिर भएको बेलामा मुख्य पेजमा देखिने शब्द संख्या
img_thumb_height = 170;  ले मुख्य पेजमा देखिने तस्बिरको उचाई (height) र
img_thumb_width = 200; ले मुख्य पेजमा देखिने तस्बिरको चौडाई (width) निर्धारण गर्छ
अत: सो संख्याहरुलाई आफ्नो ईच्छा र टेम्प्लेटको नाप नक्शा अनुसार सम्पादन गर्न सक्नुहुन्छ । 

अपडेट:

केही साथीहरुले गुगगलको “रिड मोर” ट्याग प्रयोग गरेपछि आफ्नो साईडबार तल झरेको बताउनु भएको छ ।

यो ब्लगरको नयाँ फिचर भएकोले यसमा यस्तै केही समस्या देखीएका छन र गुगलले सो सुधार पनि गर्दै छ रे (तर गुगलले कहिले सुधार गर्छ त्यो बेलासम्म कुर्ने कुरा पनि भएन Open-mouthed)

साईडबार तल झर्ने समस्या भने यसमा प्रयोग गरीएको “div” ट्याग र <!-- more --> ट्यागका कारणले हुन्छ । सजिलो भाषामा भन्ने हो भने, धेरै फर्म्याटीङ भएको र कहीलेकाही भने वेब बेस्ड कन्भर्टरबाट कन्भर्ट गरी हालिएका टेक्स्टका कारण पनि यो समस्या आउन सक्छ । यसको समाधानको लागि केवल एउटा क्लोजिङ “div” ट्यागलाई <!-- more --> भन्दा अगाडि राख्‍दा यो समस्या समाधान हुन्छ ।

त्यसको लागि आफ्नो Dashboard>>Edit Posts>> हुँदै यो रिड मोर प्रयोग गरिएको कुनै पोष्टको अगाडि रहेको “Edit” मा क्लिक गर्नुहोस ।

त्यहा क्लिक गरेपछि, उदाहरणको लागि मेरो यही पोष्टलाई लिने हो भने पोष्ट ईटिटरको "Compose" mode मा यो पोष्टको छुट्टयाईएको भाग करिव करिव यस्तो देखीन्छ:

Read more  div tag problem

अब तपाईले "Edit HTML" मा क्लिक गर्नु भयो भने त्यहा यो पोष्ट करिव करिव यसरी बसेको हुन्छ:

<div style="text-align: justify"> हुन त यसभन्दा अघि पनि हामीमध्य धेरैले गुगल वा ब्लगर बाहेकका अन्य प्रदायकका कोड वा ग्याजेट प्रयोग गरेर वा आफ्ना कोडहरुलाई ‘छेड-छाड’ गरेर आफ्नो पोष्टमा ‘रिड मोर’ अप्सन हालेका छौं । तर अब तपाई चाहनुहुन्छ भने गुगलकै आफ्नै ‘रिड मोर’ अप्सन प्रयोग गर्न सक्नुहुन्छ। यसको तरिका यस प्रकार छ: <!-- more --></span></div>

<div style="text-align: justify"> १. पहिलो कुरा त हाल यो रिड मोर अप्सन ब्लगरको “Updated editor” मा मात्रै उपलब्ध भएकोले सबैभन्दा पहिला आफ्नो Dashboard मा जानुहोस अनि Settings >> Basic हुँदै Global Settings भन्दा मुनि हेर्नुहोस ।</div>

अब माथी भएको <!-- more --></span></div> लाई </div><!-- more --></span> बनाउनुहोस र पोष्ट पब्लिस गर्नुहोस । (त्यहाँ अरु कोडहरु पनि हुनसक्छन तर ती कुनै कोड चलाउनु आवश्यक छैन, केवल </div> लाइ <!-- more --> भन्दा अगाडि तान्ने मात्रै हो)

सुरुमा अन्तिम (लेटेष्ट) पोष्टमा मात्रै यो ट्याग सारेर पब्लीस गरी हेर्नुहोस, नभएमा यो रिड मोर ट्याग हालेका सबै पोष्टमा यो </div> ट्याग लाई <!-- more --> भन्दा अगाडि राख्‍नु पर्ने हुन सक्छ ।

यस्ता सबै कोडिङका समस्याबाट बच्न म सबैलाई Windows Live Writer प्रयोग गर्न पनि सल्लाह दिन्छु ।

Happy Blogging !

15 Comments:

दूर्जेय चेतना said...▼

lau yo pani ramri ho. thanks for excellent information. Really happy!!!!

Keshab Ghimire said...▼

पुरानै कोड राम्रो छ प्रयोग गर्न पनि सजिलै छ ।

शब्दतरङ्ग said...▼

So nice.
Happy Blogging !

Prajwol said...▼

लौ राम्रो भएछ, त्यही "Read More" राख्न नआएर कति झन्झत खेप्नु परेको थियो पहिले !!

nkm said...▼

I also noticed it, I had tried it this morning, and it did not work for my blog.
:(

The part after "read more" disappeared!

कृष्णपक्ष उज्यालोको खोजिमा said...▼

मलाई त ब्लगरको आफ्नै भन्दा यो म्यानुअल कोड पो मन पर्यो
जे होस् ब्लगरले यो बिकल्प निकालेकोमा बधाई
साथै वर्डप्रेसको जस्तै स्ट्याटिक पेज राख्न निल्ने पनि छिटै बनाओस!

Dilip Acharya said...▼

Nabin Ji!

As we enjoy 'playing' with the original sets of code and are editing each and every possible sets of codes to customize our templates, some of the features designed and meant for those original templates may refuse to work for us.

But, as they say if you you place:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >


before


<data:post.body/>

it will work.

You can give a try !

Jotare Dhaiba said...▼

निकै उपयोगी र सरल रहेछ ब्लगरको 'read more' ट्याग । तर अटोमेटिक सेटिङ भने कत्ती मन परेन । कविता पनि सोलोढोलो प्यारामा घुलेर बस्ने रहेछन् । एकचोटि कोड खेलाएर फेरि पुरानै रिस्टोर गरेँ । लेखहरू मात्रै हुने ब्लगको लागि भने अटोमेटिक read more ठीक हुने लाग्यो ।
जानकारीको लागि धेरै आभार दाइलाई ।

DEEPENDRA said...▼

I agree with Dhaiba ji. 'Read More' option is not good for contents like poems.

Anyway, thanks for yet another informative post.

Umesh Gajurel said...▼

यो कोड राखे पछी पेज अलिक डिलो खुले पनि पेज अाकर्सक देखिन्छ,

nkm said...▼

Dilip Jee, Thank You!

I have tried many things; none worked.
My template is hacked so much and so many times that it is the weirdest thing in the world (the other camel!).

Moreover, Since it is not SEO friendly, I am planning to have a change...

Thank You anyway!

सूर्य/सिकारु said...▼

मलाई पनि यो भन्दा पुरानै राम्रो लाग्यो । पेज छिटो खुले पनि सानो पोस्टको लागी अलि नसुहाउने जस्तो ।
जानकारीको लागी धन्यबाद दिलीप दाजु । अवस्य नयाँ केहि आएमा फेरी पढ्न पाइने नै छ ।

Nepali Music Videos, Nepali song said...▼

wow its a great information. i will try to play in my blogs. i am new with bloggers so let's see if i can implement them.
Video tutorial for read more code for blogger
May be some of you could make the video on this topic and we are ready to host. check the site for compatibility.

Durga Adhikari said...▼

dai ramro cha mailey pani www.thenepalbhutan.blogspot.com bhanne blog kholeko chu dai k-hi paryo bhane help garnush hai. thanks
Durga Adhikari

GANGA said...▼

Ramrai Chai ta mero blog ma ta read more bhaine ta ho dai. yo ka bhako ne....

Post a Comment

आफ्नो अमूल्य राय, सुझाव तथा टिप्पणीहरु यहाँ लेख्‍नुहोला...▼
Please leave your Comments here...▼