Membuat Auto Readmore Valid Tanpa Javascript + Gambar Thumbnail di Blog
Cara Membuat Auto Readmore Valid Tanpa Javascript di Blog - Auto readmore atau disebut juga dengan istilah baca selengkapnya sering kita jumpai di blogspot/blogger. Pada tutorial blog sekarang ini saya akan bagikan kode auto readmore tanpa javascript valid html dengan thumbnail yang ringan loadingnya. Memasang auto readmore di homepage blog seperti yang anda lihat di blog halaman depan blog tentu saja akan membuat artikel blog makin rapi dan memudahkan pembaca blog untuk melihat hompage blog tanpa harus scroll ke bawah karena artikel di halaman depan sudah dipendekkan dengan memasang auto readmore.
Cara memasang auto readmore ringan tanpa Javascript di blog disertai gambar/thumbnail ini sangat mudah. Biasanya auto readmore yang menggunakan JS (javascript) akan berpengaruh ke loading blog semakin berat, untuk itulah auto readmore yang disarankan adalah auto readmore yang ringan untuk blog anda.
Baca juga : Memasang Widget Berlangganan FeedBurner di Bawah Postingan Blog
Nah sekarang simak bagaimana cara membuat auto readmore valid tanpa javascript di blog disertai gambar dan loading ringan.
1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
.thumbnail-post {
width:160px;
height:120px;
float:left;
margin:0px 10px 0px 0px;
}
4. Selanjutnya silahkan cari kode <data:post.body/> yang ke 2 atau 3 lalu ganti kode tersebut dengan kode di bawah ini.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMMuH1SJ5By_b-AOSKQpzVmdvCs9bq9_nH6kyQ7TQX7aRJ9J5h0U7_K4Yby3gYU_oR8F4mCcs7EguA9t6kN0RhSvdMRRRVuSkkDf5-Sl41toNNG1S22OpD8LKrzuy1fbDW44soYosdpGb/s1600/picture_not_available.png'/></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
5. Selesai dan simpan
Demikianlah tips membuat auto readmore valid tanpa menggunakan Javascript, silahkan copas kodenya dan semoga tutorial ini bermanfaat.
Sumber http://tips-erma.blogspot.com/
Belum ada Komentar untuk "Membuat Auto Readmore Valid Tanpa Javascript + Gambar Thumbnail di Blog"
Posting Komentar