Membuat Readmore Animation Terbaru

Posted by Unknown at 1/23/2013 Read our previous post

Membuat Read More Otomatis dengan CSS Animation -

x-gen read more, trik membuat read more otomatis di blog, membuat auto read more, cara mudah membuat read more di blog, membuat read more unik, membuat read more dengan css animation, memodifikasi readmore dengan css, read more otomatis di blog

Name: X-Gen Read More with CSS Animation
Demo/Contoh: Klik Disini

1. Masuk ke Dashboard Blogger>Rancangan>Edit HTML>centang Expand Template Widget
2. Cari kode </head> dengan bantuan CTRL+F agar mudah, lalu letakkan kode berikut diatas kode </head>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'><script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
</b:if></b:if>

keterangan: perhatikan kode yang saya beri warna hijau dan biru
- summary_noimg = 430; angka 430 adalah jumlah karakter yang muncul jika posting tidak ada gambar, atur sesukamu
- summary_img = 340; angka 340 adalah jumlah karakter yang muncul jika posting ada gambar atur sesukamu

3. Cari kode ]]></b:skin> lalu letakkan kode berikut diatas kode ]]></b:skin>

.x-genmores { float:right;z-index:2000;position:absolute; margin-left:370px; margin-top:24px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; background:#01D2FF; width: 80px; height: 80px; line-height: auto; text-align: center; border: 8px solid white;-webkit-background-clip: padding-box;-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.3);word-wrap: break-word;-moz-box-shadow: 0 0 8px rgba(0,0,0,0.3);box-shadow: 0 0 8px rgba(0,0,0,0.3); -webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;-webkit-transform: rotate(36deg);-moz-transform: rotate(36deg);-o-transform: rotate(36deg);writing-mode: lr-tb;}.x-genmores:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);} .x-genmores p { margin-top:28px; padding:5px }

keterangan: kode dengan warna kuning dan biru adalah letak Tombol Read More nya, atur posisinya dengan mengubah angkanya
- margin-left:320px; (semakin besar angkanya maka letak tombol akan semakin ke kanan, begitupun sebaliknya)
- margin-top:24px; (semakin besar angkanya maka letak tombol akan semakin kebawah, begitupun sebaliknya)

4. cari kode <data:post.body/>

Ganti kode <data:post.body/> dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'><div class='x-genmores'><p><span class='rmlink' style='float:right'><a expr:href='data:post.url'> <font color='#fff' size='2'><strong>Read More</strong></font><br/></a></span></p></div></b:if></b:if></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>