12/21/16

Auto Readmore Simpel Di Blogger/Blogspot Dengan Gambar Dan Cuplikan

Setelah pada postingan kemarin saya membagikan cara membuat Auto Readmore di Blogger/Blogspot dengan gambar berada di atas cuplikan tanpa kode Javascript, Nah untuk kali ini saya akan membagikan Auto Readmore simpel menggunakan kode Javascript.

Auto Readmore Simpel Di Blogger/Blogspot Dengan Gambar  Dan Cuplikan

Lalu apa sih kelebihan dan kekurangan menggunakan Auto readmore dengan kode Javascript ?

Kelebihan  menggunakan Auto readmore dengan kode Javascript :

Auto Read more mennggunakan javascrip yaitu Anda dapat mengatur ukuran gambar dan cuplikannya sendiri, misalkan Anda ingin ukuran gambar 200 x 250 atau 100 x 100, untuk cuplikannya sendiri Anda juga bisa mengaturnya misalkan Anda ingin menampilkan ringkasannya hanya 30 huruf atau 500 hurup atau sama sekali tidak menampilkannya.

Kekurangan menggunakan Auto readmore dengan kode Javascript  :

Menurut saya bisa di bilang menggunakan Auto Readmore dengan kode Javascrip tidak ada kekurangannya. Tapi Ada yang bilang  menggunakan Auto Readmore dengan Javascript membuat loading blog menjadi berat. Tapi kalau menurut saya sendiri sih, menggunakan Auto Readmore dengan kode Javascript tidak akan membuat blog kita  menjadi berat. Dengan sarat saat penyimpanan kodenya benar.

Yang membuat blog kita menjadi berat adalah saat kita terlalu banyak menggunakan kode Javascript dan saat penyimpanan kodenya salah. Ini juga berlaku saat kita terlalu banyak menggunakan kode CSS.

Kenapa saya bilang Auto Readmore ini simpel ? Simpel maksud saya disini adalah saat kita menyimpan kode Javascrip-nya. Anda cukup satu langkah untuk menyimpan kodenya, dan selanjutnya Anda tinggal mengatur gambar dan cuplikan yang ingin Anda tampilkan.

Baca Juga : Cara Membuat Related Post Simpel di Blogger

Masih kuat membacanya sampai selesai ?

Baiklah saya gak akan banyak basa-basi lagi takutnya Anda menjadi bosan karena pendahuluannya terlalu kepanjangan. hehehe Mari kita simak cara pemasangan kodenya di bawah ini.

1. Langkah pertama Anda login terlebih dahulu ke akun blogger Anda.
2. Pastikan Anda untuk memback-up terlebih dahulu template Anda.
3. Masuk kebagian edit HTML, caranya klik Template dan klik edit HTML.
4. Cari kode  <data:post.body/> yang ada di  <b:includable id='post' var='post'>. Setelah menemukannya hapus kode  <data:post.body/> tersebut dan kemudian anda copy pastekan kode di bawah ini dan simpan di tempat tadi Anda menghapus.

  <b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<div expr:id='&quot;summary&quot; + data:post.id'>

<data:post.body/>

</div>

<script type='text/javascript'>

/*<![CDATA[*/

//Auto read more

var thumbnail_mode = "yes";; //yes -dengan gambar, no -tanpa gambar

summary_noimg = 530; //untuk mengatur jumlah hurup saat tidak ada gambar

summary_img = 120; //untuk mengatur jumlah hurup saat ada gambar

img_thumb_height = 220; //untuk mengatu ketinggian gambar

img_thumb_width = 220; // untuk mengatur lebar gambar

function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}

function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(thumbnail_mode=="yes"){if(img.length>=1){imgtag='<span style="position: relative; float:left; margin: 5px 15px 10px 0;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';summ=summary_img}}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}

/*]]>*/</script>

<script type='text/javascript'>

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

</b:if>

</b:if>

Maka hasil penyimpanan kodenya akan seperti screenshot gambar dibawah ini.

Cara Membuat Auto Readmore Simpel Di Blogger/Blogspot

5. Terakhir klik Simpan/Save dan lihat perubahan.
Saya telah memberi keterangan di dalamnya silahkan anda atur sendiri lebar dan tinggi gambar, plus juga jumlah hurup yang akan di tampilkan.
Hasil akhir tampilannya akan seperti berikut.



Gimana mudah bukan cara di atas ? Atau masih mengalami kesulitan saat memasangnya ? Silahkan ceritakan pendapat Anda di kolom komentar di bawah ini.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai