Cara Cepat Membuat Read More Di Blog

read more
Cara Cepat Membuat Read More Di Blog, Ya kali ini kita akan membahas bagai mana cara membuat Read More di blog.
Membuat Read More tujuanya Supaya tulisan kita yang panjang di blog menjadi rapi.
sehingga pembaca gampang mencari apa yang mereka Butuhkan di blog kita.

Read more bisa juga kita ganti dengan Kata-kata yang kita suka,
contohnya Baca selengkapnya, Lanjut membaca dan sebagainya.
Tergantung selera Agan.

Nah jika agan Mau membuat read more, silahkan ikuti langkah-langkah dibawah ini:


  • masuk ke akun blogger 
  • Pilih Template
  • Edit HTML (Gunakan CTRL+ F untuk mempermudah Pencarian.
  • Kemudian cari kode </head>,
  • Apabila sudah ketemu, kode paste Kode dibawah ini tepat diatasnya

klik buka


<!--ReadMore http://hahorason.blogspot.com-->

<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: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 = 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>

<!--Auto Read More Akhir-->

Langkah selanjutnya adalah:

  • cari kode <data:post.body/>
  • Biasanya kode ini ada 3, Fokus pada Kode yang kedua saja.
  • Setelah ketemu, Hapus kode tersebut, dan ganti dengan kode dibawah:

klik buka


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

Untuk yang saya centang Yang Berwarna merah, silahkan ganti dengan Kata-kata sesuai selera agan.



 Demikian mengenai Cara Cepat Membuat Read More Di Blog, Jika Bermanfaat, jangan Lupa Di share ya.
Terimakasih,
Happy blogging


Batak Punya Updated at: 7:53 PM

0 komentar:

Post a Comment

Mau Berkomentar???

Berkomentarlah Yang Sopan Dan Relevan
Dilarang Nyepam Disini, Termasuk Link hidup
Dan Berkomentarlah sesui judul.
Terimakasih!