Pada postingan kali ini saya akan share tips bagaimana cara membuat Auto readmore (otomatis) di blog dengan tanpa menggunakan kode javascript, dimana untuik membuat readmore secara otomatis sebenarnya sudah dibahas pada postingan sebelumnya yang berjudul Cara Membuat Readmore Otomatis di setiap postingan Blog namun cara tersebut menggunakan kode javascript
Penggunaan javascript dalam sebuah template blog memang sangat diperlukan untuk mendapatkan suatu efek / fungsi atau bahkan fitur tertentu pada suatu blog, namun demikian keberadaan javascript sedikit banyak akan mengurangi kecepatan loading suatu blog tergantung dari besarnya data/file javascript nya, hal ini secara tidak langsung akan memberikan efek yang kurang baik terhadap SERP suatu blog, oleh karena itu sebagian master blog akan memperhitungkan dengan seksama untung ruginya pemasangan javascript pada blognya.
Pada saat saya blogwalking (berkunjung ke berbagai blog) saya mendapatkan sesuatu yang baru dan sedikit berbeda dengan potingan saya sebelumnya dan akan saya share disini, yakni tips bagaimana cara membuat read more otomatis tanpa menggunakan kode javascript, dan berikut cara untuk membuat readmore otomatis tanpa kode javascript:
- Langkah pertama masuk ke akun blogger.
- Masuk ke menu "Template" dan jangan lupa backup template Anda.
- Pilih Menu "Edit HTML" kemudian centang expland template widget.
- Cari kode <data:post.body/>
- Kemudian ganti kode tersebut dengan kode berikut;
<b:if cond='data:blog.pageType != "item"'>
Jika ada lebih dari 1 (satu) kode <data:post.body/> , pilih yang pertama.
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if> - Untuk tampilan di blognya silakan masukkan kode css di bawah ini, tepat diatas kode ]]></b:skin>
thumb img {float: left; margin: 0 10px 5px 0;}
- Simpan Template dan silahkan lihat hasilnya.
Demikian postingan kai ini mengenai cara membuat Auto readmore (otomatis) di blog dengan tanpa menggunakan javascript, semoga bermanfaat dan silahkan mencobanya
Tutorial Blogspot
- Cara Kompres CSS, HTML, JavaScript Template Blog
- Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog
- Cara Membuat Gambar Animasi GIF Online
- Cara Membuat Readmore Otomatis di setiap postingan Blog
- Cara Membuat Share Button FB, Twitter, Google+1 Di Atas Posting/Artikel Blog.
- Cara Menampilkan Kode HTML dalam Postingan Blog
- Cara Mengganti Tampilan Kursor Mouse dengan Gambar Kustom pada Blog
- Cara Mengganti/Mengubah Default Icon Bullet/list di Blog
- Membuat Pesan Otomatis di Akhir Postingan Blog
- Membuat Tabel di Blog dan Atribut HTML
- Membuat Tabel di Blog dengan Kode HTML
- Menampilkan Widget di Halaman Tertentu pada Blog
- Mengenal Kode Tag HTML Dasar pada Web / Blog
- cara mengupload javascript hostingan sendiri dengan google code