Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar

Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar - kali ini saya akan update bagaimana cara membuat readmore ( baca selengkapnya ) di blogger dengan efek gambar ( image ) . Mungkin sudah banyak sahabat blogger lain yang membuat postingan ini , tapi tidak ada salahnya kalau saya membuat artikel Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar ini

Berikut Panduan Langkah-langkah Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar :

1. Login atau masuk terlebih dahulu ke akun Blogger anda
2. Pilih menu " Template " => EDIT HTML
3. Cari kode </head>  ( Gunakan CTRL+F untuk mempermudah pencarian )
4. Letakan kode di bawah ini tepat di atas kode </head>

<!--Mulai ahmadsuyadi.blogspot.com-->

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

<!--Akhir ahmadsuyadi.blogspot.com-->

5 . Setelah itu cari kode <data:post.body/>  ( biasanya banyak sekali kode tersebut , pilih saja yang terakhir ) . Letakan kode di bawah ini tepat di atas kode <data:post.body/>

<!--Mulai ahmadsuyadi.blogspot.com-->

<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/AVvXsEhZw48aVb4WufnvXmentqcFd-ICDXaynaTSJzUI6-N3itDVi4VPcETOmN0zPcUJAbc7YtHAlk1ALm1jA9wpc9dJzy13g9KDavGYh4u1_U-CZORn_QS4XW5sbexMnusCcMh_jIMQ6km4IPA/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>

<!--Akhir ahmadsuyadi.blogspot.com-->

Keterangan :Anda juga dapat mengganti kata   "Baca Selengkapnya"  sesuai dengan keinginan anda6. Setelah itu Simpan Template dan lihat hasilnya . Jika anda berhasil melakukanya maka hasilnya akan seperti dibwah ini

DEMONYA SEPERTI DI ATAS
Itulah langkah-langkah Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar semoga Cara Membuat Read More Otomatis di Blog Dengan Efek Gambar ini dapat membantu anda. apabila anda kurang paham , silahkan beratanya .** SELAMAT MENCOBA **