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'>
<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 = "float" ;
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-->
<!--Mulai ahmadsuyadi.blogspot.com-->
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='cutter'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(e,d){var c=200;var a=true;var b="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>
</a>
</div>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<table border='0'><tbody><tr><td>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</td></tr></tbody></table>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
</b:if>
<!--Akhir ahmadsuyadi.blogspot.com-->
