Read More Otomatis vs Read More Manual

Selasa, 10 Maret 2015 edit

Setiap template blogger yang ditawarkan gratis tentu ada plus-minusnya, namun bukan berarti tanpa opsi. Enak sih ngeblog di blogspot/blogger templatenya melimpah namun dapat dimodifikasi sesuka hati pemilik blog. Berikut ini pengalaman dalam menggunakan "Read more" yang semula otomatis terpotong hingga sejumlah karakter tertentu kemudian diubah menjadi sesuai kehendak pemilik blog, yah dengan membuat "jump-link atau read more" secara manual. Mengapa tidak suka menggunakan read more otomatis em... karena tidak pantas menginterupsi kalimat :)
Penulis sendiri termasuk baru dalam menggunakan blogger untuk di blogspot ini, agar tidak lupa sedikit pengalaman ditulis di sini. Dengan modal coba-coba akhirnya berhasil juga, karena dukungan tutorial yang bertebaran sana-sini. Penulis tidak memberikan garansi atas percobaan ini jika diterapkan oleh pembaca. Kerusakan template adalah mutlak tanggung jawab Anda sendiri :D

Berikut ini adalah tampilan tulisan yang menggunakan read more otomatis dan juga skrip-nya.

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<data:post.snippet/>
<div class='entry-meta'>
<span class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </span> 
<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
            </b:if>
          </b:if>
        </b:if>
</span>
<span class='home-share'>
<a class='facebook-home' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Bagikan di Facebook'><i class='icon-facebook icon-large'/></a><a class='twitter-home' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; - &quot; + data:post.url + &quot; via @herdihamzah&quot;' rel='nofollow' target='_blank' title='Bagikan di Twitter'><i class='icon-twitter icon-large'/></a><a class='gplus-home' expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url + &quot;&quot;' rel='nofollow' target='_blank' title='Bagikan di Google+'><i class='icon-google-plus icon-large'/></a><a class='linkedin-home' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank' title='Bagikan di LinkedIn'><i class='icon-linkedin icon-large'/></a>
</span>
</div>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>

Sangat tidak nyaman karena tulisan terpotong tanpa babibu :) Penginnya sih pengin menampilkan satu paragraf awal secara penuh setiap tulisan seperti di bawah ini.  Oh yah ini penulis lakukan modifikasi cara membuat read more menjadi manual untuk blog ini.


Tanpa pengetahuan skrip dan hanya try and error hingga sesuai keinginan akhirnya keturutan juga :)
Dari mana dapat tutorialnya? Dari gerbang Google tentu, akhirnya mendapatkan tutorial yang cukup manusiawi menurut penulis. Yah dari sini, http://www.premiumbloggertemplates.com/blog/how-to-remove-blogger-auto-read-more-option/ Silakan baca dan ikuti dengan saksama dan dalam tempo yang secukupnya.
Setelah mengikuti tutorialnya ternyata si "read more" benar-benar lenyap, padahal penulis tidak bermaksud melenyapkannya benar-benar, hanya ingin memunculkan jika dikehendaki dan memotong di bagian tertentu pula, tidak otomatis.
Untuk mengatasi ini akhirnya ada petunjuk untuk menambahkan skrip seperti di bawah ini.

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link' >
       <p align='right'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><button><data:post.jumpText/></button></a></p>
      </div>
    </b:if>

Dengan menambah skrip seperti di atas sudah bisa muncul readmore-nya tapi masih juga belum sesuai dengan keinginan akhirnya saya modifikasi sedikit menjadi seperti berikut (ini di template Cornermag)

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div>
<div>
<span class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </span> 
<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>       
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
            </b:if>          
        </b:if>
</span>
<span class='home-share'>
<a class='facebook-home' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Bagikan di Facebook'><i class='icon-facebook icon-large'/></a><a class='twitter-home' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; - &quot; + data:post.url + &quot; via @herdihamzah&quot;' rel='nofollow' target='_blank' title='Bagikan di Twitter'><i class='icon-twitter icon-large'/></a><a class='gplus-home' expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url + &quot;&quot;' rel='nofollow' target='_blank' title='Bagikan di Google+'><i class='icon-google-plus icon-large'/></a><a class='linkedin-home' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank' title='Bagikan di LinkedIn'><i class='icon-linkedin icon-large'/></a>
</span>
</div>
</div>     
    </b:if>
<b:else/>
<data:post.body/>
Demikian sekilas info, tapi sekali lagi penulis tidak bertanggung jawab jika pembaca mencoba kemudian hasilnya tidak sesuai kehendak. Silakan menggunakan intuisi, perasaan dalam mengutak-atik kode pada template blogger yang dipakai.
Bagikan di

Tidak ada komentar:

Posting Komentar

 
Copyright © 2015-2024 Urip dot Info | Disain Template oleh Herdiansyah Dimodivikasi Urip.Info