Cara Membuat Read More Otomatis Dengan Gambar Di Blog

Cara Membuat Read More Otomatis Dengan Gambar Di Blog...Fungsi read more adalah agar supaya pengunjung lebuh mudah untuk menelusuri blog sobat,,karena halaman depan sobat artikelnya sudah dipersingkat...fungsi lainnya juga agar supaya blog sobat tertata rapi dan kelihatan makin sexi..hehehehe (becanda dikit)...ok kita langsung saja menuju TKP.

Cara Pembuatan read more dengan menggunakan gambar....

1. login ke akun blog kesayangan sobat

2. pilih template - edit html

3. kemudian cari kode </head> biar lebih mudah gunakan F3

4. Pastekan kode berikut tepat diatas kode </head>

<!--Auto Read More MULAI-->

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style>

.post-body {width:auto; height: 170px; float:left; margin:0 auto; padding:0 auto; }

.post-outer {height: 220px; background:#fff;}

.post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out; }

.post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}

.cutter{width:220px;height:140px;overflow:hidden;border:none; float:left; padding:0px 0px 0px 0px; margin-bottom:20px;}

.post-footer{display:none!important}

.post { float:left; margin:0px ; padding-left:0px; padding-right:0px; text-align:justify; }

.post h2 a, .post h2 a:visited, .post h2 strong {height:auto;padding-left:0px;font-size:17px;width:auto;text-align:left;}

.read-more{float:left; padding-top: 10px;}

.read-more a{ color: #fff;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;}

</style>

  

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 210;summary_img =210;img_thumb_width = 50;img_thumb_height = 50;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(e,f){if(e.indexOf("<")!=-1){var g=e.split("<");for(var h=0;h<g.length;h++){if(g[h].indexOf(">")!=-1){g[h]=g[h].substring(g[h].indexOf(">")+1,g[h].length)}}e=g.join("")}f=(f<e.length-1)?f:e.length-2;while(e.charAt(f-1)!=" "&&e.indexOf(" ",f)!=-1){f++}e=e.substring(0,f-1);return e+"..."}function createSummaryAndThumb(k){var i=document.getElementById(k);var h="";var g=i.getElementsByTagName("img");var j=summary_noimg;if(g.length>=1){h='<span style="display:none;float:left;margin:0px 10px 5px 0px;"><img src="'+g[0].src+'"

width="'+img_thumb_width+'px" /></span>';j=summary_img}var l=h+"<div>"+removeHtmlTag(i.innerHTML,j)+"</div>";i.innerHTML=l};

//]]>

</script>

</b:if>

<!--Auto Read More AKHIR-->

5. Jika sudah, kemudian cari kode <data:post.body/> jika kode ada 3,, hapus kode yang ke 2  dan ganti dengan kode berikut

<!--Auto Read More MULAI-->

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

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

<div class='cutter'>

   <script type='text/javascript'>

//<![CDATA[

function bp_thumbnail_resize(e,d){var c=200;var a=true;var b="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXCfQZWa2kf6MAMCNnQU5yXdqX38aDikNO7i-IDCWdjhi_PWXjadXMQIbMxZlAuqbXH7ioT9QPubWzBUY6UGGe60wfv4CyGD0TmbjGCh2_oi0ImM27vv45ZKW0rmkijJi9-ge-T1FKhA/s1600/no+image.jpg";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="'+d+'"/>';if(e!=""){return image_tag}else{return""}};

//]]>

   </script>

      <a expr:href='data:post.url'>

         <script type='text/javascript'>

document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));

         </script>

      </a>

</div> 

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

   <table border='0'><tbody><tr><td>

      <div class='read-more'>

      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>

      </div>

   </td></tr></tbody></table>

</b:if>

</b:if>

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

</b:if> 

<!--Auto Read More AKHIR--> 

6. Silahkan klik pratinjau dulu, jika sudah berhasil silahkan simpan template sobat...

Ket : yang warna merah dapat sobat ganti sesuai keinginan, dan warna hijau url gambar read more.

semoga artikel ini bermanfaat buat sobat, dan jangan lupa tinggalkan komentar sobat...terima kasih