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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSB0urngnAyTy9SSRi1Lp-pPudhF_Os3tw-ttXxXHEbPCT6qDse612p8wW8vCakkq8Xr6UJWSyj32YoEVRNWLfC3CW_zD1srsZgOibJazrI-utLgUU-iJPvxCFlt-_Dr3w0JXrr6EwIr8/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-->
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.