Cara Membuat Redmore Otomatis Di Homepage blog

Cara Membuat Redmore Otomatis di Blog-  Bagi sobat yang suka ubek-ubek internet tentu sering mengunjungi dengan sebuah blog yang memiliki read more di halaman homepage nya. Read more atau juga sering di identikkan dengan excerp blog adalah cara agar blog terlihat lebih ringkas dan simple.

Readmore adalah salah satu upaya untuk membuat template kelihatan bagus dan keren readmore atau juga sering di buat dengan tulisan "baca selengkapnya", atau lanjut membaca, atau next read, dan lain sebagainya adalah kode untuk merubah tampilan artikel blog di hompage sehingga artikel lebih ringkas dan lebih pendek.

Seperti ada di blog saya ini menggunakan script readmore dan sebenarnya banyak sekali blogger yang memasang readmore di blog mereka dan mereka pada umumnya memiliki readmore yang berbeda-beda dan ini adalah salah satunya berikut adalah cara membuat nya jika sobat ingin melihat hasilnya.

Baca juga :
Cara Membuat / Daftar Blog Baru di Blogger Fresh Update 2021
Cara Mudah Membuat Blog Gratis di Wordpress Terbaru

Cara Membuat Readmore / Baca Selengkapnya di halaman depan blog

1. Pertama adalah masuk ke blogger milik sobat
2. Pilih TEMPLATE dan "EDIT TEMPLATE" lalu cari kode </head> gunakan tombol CTRL + F pada keyboard  untuk mencari kode </head>  nya, lalu copy kode warna biru di awah ini pastekan di atas kode </head>  
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style>
   .post-body{text-align:justify;}
   .post-body img{max-width:none;width:auto;}
   .read-more{float:left; padding-top: 10px;}
   .read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
   .read-more a:hover{text-decoration:none;background:#666;}
   .pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
   .grow img{height:165px;width:250px;transition: all 2s ease;}
   .grow img:hover{width:300px;height:250px;}
   </style>
   <script type='text/javascript'>
   var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
   summary_noimg = 200; //banyaknya huruf jika tidak ada gambar
   summary_img = 190; //banyaknya huruf jika ada gambar
   img_thumb_height = 165;
   img_thumb_width = 250;
   </script>
   <script type='text/javascript'>//<![CDATA[
   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 = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
   //]]></script>
   </b:if>
   </b:if>
   Keterangan : Silahkan ganti kode yang berwarna merah dengan mengatur sesuai keinginan sobat.





3. Lalu berikut adalah dengan mencari kode <data:post.body/> (cara mencarinya sama dengan cara pada nomer 2 dengan menekan tombol pada keyboard CTRL + F ) jika sudah ketemu silahkan ganti kode  <data:post.body/> dengan kode warna biru di bawah ini. note : karena setiap template berbeda karena kode  <data:post.body/> ini ada lebih dari satu maka sobat bisa mencoba dari mulai yang paling bawah
    <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'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
   </script>
    <div class='read-more'>
    <a expr:href='data:post.url'>Read More.. &#187;</a>
    </div>
   </b:if>
   </b:if>
   silahkan ganti kata readmore dengan kata sesuka sobat
4. Jangan lupa untuk menyimpan template nya. . 

Terima kasih selamat memasang kode read more nya di blog semoga blognya tambah keren dan tambah