Galau READ MORE...

Annyeong...

Biasanya posting tentang Biologi, kali ini saya akan posting sesuatu yang agak melenceng dari biologi..

JENG JENG JENG...

Sejak saya membuat blog ini, saya selalu penasaran , blog apa yang membuat senang dan nyaman pembaca blog, dan faktor2 apa saja yang mempercantik blog. Jadi saya mulai belajar dan menganalisis dari blog-blog yang pernah saya buka.

Saya akhirnya tau, ada blog dimana dia menampilkan postingan panjang lebar tanpa jeda..*lebay sehingga pembaca kurang nyaman dengan hal tersebut karena harus mencari artikel dengan men-scrool terus kebawah. Maka perlu digunakan read more atau baca selengkapnya yang dapat memotong artikel yang ditampilkan sehingga terlihat lebih singkat dan tidak memakan banyak tempat.

Tapi begitu searching, banyak blog yang menawarkan cara membuat Read More. Tapi semuanya membuat saya bingung, terutama karena saya takut jika saya salah dalam langkah, saya takut akan mengubat setting dan keseluruhan blog.

Info yang saya dapat adalah :

1. Login ke Blogger > Template > Edit HTML.
    Kemudian tempatkan kursor dibagian pengeditan template dan klik salah satu script, lalu tekan CTRL+F untuk melakukan pencarian.

2. Cari kode </head> , dan letakkan kode ini diatasnya :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 220;

img_thumb_height = 120;

img_thumb_width = 220;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; 

//]]>

</script>

3. Ganti kode <data:post.body/> ( yang pertama ) pada template anda, dengan kode berikut :

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

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

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

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>

</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>

4. Klik Pratinjau untuk melihat hasilnya. Jika sudah sesuai dan terpasang dengan benar klik Save Template.

Contoh hasil Auto Readmore :

Referensi :

http://www.mediabloger.com/2013/03/cara-membuat-auto-readmore-di-blog.html#ixzz2YhHJXRVn

Juga info dari blog lain, yaitu sebagai berikut :

► Silahkan Login di akun blogger anda
► Lalu klik Rancangan dan klik Edit HTML
► Jangan lupa untuk mencentang Expand Template Widget
► Untuk menghindari hal2 yang tidak diinginkan maka simpan/backup terlebih dahulu template saudara, untuk menghindari hal yang tidak diinginkan.
► Kemudian Cari kode </head>.  Dan untuk mempermudah pencarian kode nya anda tekan aja ( CTRL + F )
► Lalu silahkan tambahkanlah kode yang ada dibawah ini tepat diatas kode </head> tersebut.
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>
Bila anda ingin merubah ukuran pada Read More di Blogger anda tersebut, kamu tinggal merubah di bagian-bagian kode yang berwarna merah bawah ini, dan Ubahlah angkanya sesuai dengan keinginan.  
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar     summary_img = 340; adalah tinggi potongan artikel dengan gambar   img_thumb_height = 100; adalah ukuran tinggi thumbnail img_thumb_width = 120; adalah ukuran lebar thumbnail
► langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :  
 <b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span> </b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
► dan untuk tulisan " READ MORE " bisa diganti sesuai dengan selera anda.
setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Tapi ada beberapa kendala seperi mencari kode, tidak dapat menemukan  Expand Template Widget.Akhirnya saya menemukan cara yang lebih mudah.

Cara Membuat Read More/Baca Selengkapnya tanpa edit template :

Silakan tulis artikel seperti biasanya (tulis saja dulu sampai selesai)
Letakkan kursor pada tulisan (sesudah kalimat) yang ingin di masukkan Read More.
Klik Icon Insert jum break.

Terbitkan/Publish artikel tersebut dan silakan lihat hasilnya.
Nah itu lah cara mudah membuat read more/baca selengkapnya di blogger tanpa harus pusing dan ribet memasukkan script read more lagi.

Selamat Mencoba