Membuat Auto Readmore Dengan Gambar Diatas Teks
Senin, 14 April 2014
Edit
Blogger bersama-sama sudah mempunyai fungsi readmore (baca selengkapnya) sendiri. Hal ini juga telah pernah kita ulas panjang lebar di bloGoooblok (Baca Cara Membuat 'Baca Selanjutnya' di Postingan Blogspot). Hanya saja readmore bawaan dari blogger mengharuskan kita memasangnya setiap kali menciptakan postingan.
Jika dinilai dari segi efesiensi, mungkin cara diatas sedikit merepotkan. Namun bagi sebagian orang hal itu bukanlah duduk kasus besar. Tapi bagi sebagian lagi mengatakan, perlu ada terobosan gres biar fungsi readmore ini tidak melulu disematkan ketika menciptakan postingan. Itulah lahir istilah auto readmore.
Ada banyak pilihan untuk menciptakan auto readmore ini. Ada yang memakai javascript murni dan ada pula yang tidak. Bahkan ada beberapa pula yang memakai jQuery dan aplikasi lain, dimana setiap varian itu punya efek bagi kecepatan loading blog.
Kali ini kita akan mempelajari Cara Membuat Auto Readmore dengan Gambar Diatas Teks Tanpa Javascript.
Ini teladan auto readmore yang akan kita buat :
Membuat Auto Readmore Tanpa Javascript
Seperti yang aku katakan diatas, auto readmore ini sama sekali tidak memakai javascript sehingga loading blog Anda tetap akan cepat ibarat biasa. Ini alasannya yaitu kita hanya memakai perintah internal blogger, dengan memanggilnya sesuai peruntukannya. Dengan memakai metode ini pula, kesalahan sanggup diminimalisir.
Cara membuatnya ikuti langkah-langkah berikut ini :
Kini blog Anda mempunyai auto readmore yang sama sekali tidak memakai javascript. Mengapa demikian, alasannya yaitu banyak blogger menilai penggunaan terlalu banyak javascript memang mempercantik tampilan tapi memperlambat loading.
Masih banyak lagi script auto readmore yang sanggup kita gunakan untuk blog kita. Silahkan dipilih metode mana yang akan dipakai dan paling sesuai dengan gaya Anda. Cieeee...
Sumber https://www.blogooblok.com/
Jika dinilai dari segi efesiensi, mungkin cara diatas sedikit merepotkan. Namun bagi sebagian orang hal itu bukanlah duduk kasus besar. Tapi bagi sebagian lagi mengatakan, perlu ada terobosan gres biar fungsi readmore ini tidak melulu disematkan ketika menciptakan postingan. Itulah lahir istilah auto readmore.
Ada banyak pilihan untuk menciptakan auto readmore ini. Ada yang memakai javascript murni dan ada pula yang tidak. Bahkan ada beberapa pula yang memakai jQuery dan aplikasi lain, dimana setiap varian itu punya efek bagi kecepatan loading blog.
Kali ini kita akan mempelajari Cara Membuat Auto Readmore dengan Gambar Diatas Teks Tanpa Javascript.
Ini teladan auto readmore yang akan kita buat :
Membuat Auto Readmore Tanpa Javascript
Seperti yang aku katakan diatas, auto readmore ini sama sekali tidak memakai javascript sehingga loading blog Anda tetap akan cepat ibarat biasa. Ini alasannya yaitu kita hanya memakai perintah internal blogger, dengan memanggilnya sesuai peruntukannya. Dengan memakai metode ini pula, kesalahan sanggup diminimalisir.
Cara membuatnya ikuti langkah-langkah berikut ini :
- Pastikan Anda sudah login ke dashboard blogspot. Pilih Template kemudian Edit HTML.
- Ada dua script yang akan kita tanam ke mode HTML. Pertama merupakan perintah CSS. Copy script dibawah ini sempurna diatas ]]></b:skin> (cari dengan gunakan tombol Ctrl F)
.dp-thumbnail{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}
- Lalu cari isyarat <data:post.body/>. Pada tamplate gres bawaan blogger, isyarat ini terdapat tiga buat. Copy script dibawah ini dan ganti seluruh <data:post.body/> tersebut.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='dp-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<span>No thumbnail</span>
</b:if>
</b:if>
</div>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='dp-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<span>No thumbnail</span>
</b:if>
</b:if>
</div>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
- Setelah itu Simpan (namun kalau belum yakin, sanggup lihat perubahannya melalui tampilan pratinjau).
Kini blog Anda mempunyai auto readmore yang sama sekali tidak memakai javascript. Mengapa demikian, alasannya yaitu banyak blogger menilai penggunaan terlalu banyak javascript memang mempercantik tampilan tapi memperlambat loading.
Masih banyak lagi script auto readmore yang sanggup kita gunakan untuk blog kita. Silahkan dipilih metode mana yang akan dipakai dan paling sesuai dengan gaya Anda. Cieeee...
Sumber https://www.blogooblok.com/