Cara Membuat Read more Otomatis Di Blog



Cara Membuat Read More Otomatis Di Blog - ada kalanya Blog kita sangat berat ketika di Akses, Mungkin saja di hom page Blog anda tidak di atur dengan Baik, salah satu mungkin saja setiap artikel yang tampil tidak di persingkat dengan Kata Read more, karena itu juga bisa mempengaruhi Loading Blog anda, selain itu Blog anda akan sedikit sekali page view nya, karena Artikel anda sudah terlihat langsung keseluruhannya di halaman Home page Blog anda.

Maka dari itu Bagi anda yang blog nya belum menggunakan Auto Read more, Anda bisa simak tutorial Lengkap nya Di bawah ini

CARA CARA


1. Silahkan anda masuk ke halaman Utama Blog anda

2. kemudian silahkan Klik menu Tema Pada halaman utama Blog anda
3. lalu klik lagi Edit HTML pada pengaturan editor Tema anda,
4. Namun sebelum melakukan pengeditan ada baik nya untuk Backup dulu Tema Blog anda, untuk antisipasi kesalahan dalam mengedit.
5. setelah terbuka editor Template nya silahkan tempel kan kode di bawah ini tepat di atas kode </head>

<!--Auto Read More Mulai-->

<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:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</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>

<!--Auto Read More Akhir-->

CATATAN

  1. untuk tulisan yang berwarna Biru berfungsi untuk mengatur jumlah kata yang tampil di auto read more
  2. dan tulisan yang berwarna Hijau untuk mengatur tinggi dan lebar images
6.  Langkah selanjutnya silahkan anda cari kode <data:post.body/>
     Namun kode tersebut terkadang di temukan lebih dari satu, tapi jika tidak salah kode nya yang ke      dua
7. jika sudah ke temu kode <data:post.body/> yang ke dua, silahkan anda hapus kode tersebut lalu ganti dengan kode di bawah ini 

<!-- Auto read more Mulai --> <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'>Baca Selengkapnya &#187;</a> </div> </b:if> </b:if> <!-- Auto read more Akhir -->

8. jika sudah silahkan simpan template anda, kemudian Lihat hasil nya. pasti akan keren.

Namun yang perlu harus di ingat adalah jika Blog anda sebelum nya sudah memakai auto read more, maka saya sarankan untuk menghapus dulu kode yang sebelumnya ada, karena nantinya bisa tumpang tindih dan menyebabkan error tidak berfungsi. 
atau jika masih tidak berfungsi, mungkin saja anda salah menempatkan kode di atas, silahkan anda cek kembali kode nya.

Nah itulah sedikit Tutorial tentang Cara Membuat Read More Otomatis di Blog, semoga bermanfaat ya, dan jika ada pertanyaan jangan sungkan untuk bertanya di halaman komentar ya.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Read more Otomatis Di Blog"

Post a Comment

Iklan Tengah Artikel 2