Membuat Posting Auto Readmore di Blogger.com Tanpa Java Script

Kata Readmore biasanya merupakan penyingkatan jumlah karakter artikel yang ada pada homepage, membatasi jumlah huruf dan kalimat. Bentuk penampakan yang ada di website maupun blog biasanya berupa kata "Readmore" "Continue Reading" "Baca Selengkapnya" atau yang lainnya.

Modifikasi "Jump Break" Auto Readmore ini menggunakan  Teknik yang sama dengan ada di Popular Post.

Berikut intipan kode HTML pada Popular post di blogger, ini tampilan jika ingin menampilkan snippset dan gambarnya.

<!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>

Cara membuatnya sedikit dimodikasi dengan Conditional Tags dan CSS. Baca juga, daftar Conditional Tags dan kegunaannya.

<data:post.snippet/>

Ini merupakan kode untuk meringkas artikel pada widget popular post. sedangkan

<img expr:src='data:post.thumbnailUrl'/>

Sedangkan diatas adalah kode untuk gambar yang ada di posting.

Kemudian kita padukan dan menghapus <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> , sedikit modifikasinya dengan tambahan <div><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div> untuk menambahkan kata-kata "Baca Selengkapnya" sehingga menghasilkan

  <div class='item-content'>
              <b:if cond='data:post.thumbnailUrl'>
  <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnailUrl' expr:width='data:thumbnailSize'/>
                  </a>
                </div>             
              </b:if> 
 </div>
              <div class='item-snippet'><data:post.snippet/></div>
       <div><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>
            
            <div style='clear: both;'/>

Langkah-langkah membuat Auto Readmore tanpa Java Script

Masuk ke Edit HTML, masukkan kode CSS diatas ]]></b:skin> atau </style>. Untuk memberikan perintah pada thumbnail (gambar).

.item-thumbnail {
float:left
margin-right:10px;
} 

Kemudian carilah kode <data:post.body/> biasanya ada posisinya ke3, atau diantara <b:includable id='post' var='post'>...</b:includable>
Kemudian ganti <data:post.body/> dengan kode ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <div class='item-content'>
              <b:if cond='data:post.thumbnailUrl'>
  <div class='item-thumbnail'>
                  <a expr:href='data:post.url' target='_blank'>
                    <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnailUrl' expr:width='data:thumbnailSize'/>
                  </a>
                </div>             
              </b:if> 
 </div>
              <div class='item-snippet'><data:post.snippet/></div>
       <div><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></div>
            
            <div style='clear: both;'/>
 </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>

Kemudian klik Simpan Template dan Selesai. Lihatlah hasilnya :).

Cara mengubah frase-kata Jump Break "Readmore"

Silahkan buka dasbor > tata letak > klik edit bagian Edit Posting > Ganti kata-kata "Baca Selengkapnya" sesuai dengan keinginan.

Sekian tutorial tentang  Cara Membuat Posting Auto Readmore Tanpa Java Script yang agak kepanjangan dan bertele-tele, hehehe Selamat mencoba :).

Newer Post Older Post