Membuat Read More Otomatis dengan CSS Animation

Udah lama Andi-Techno gak share Trik Blog, makanya kali ini saya mau share trik read more otomatis dengan css animation buatan saya sob. Sesuai namanya, ini bukan read more biasa sob, tapi saya memberikan sedikit sentuhan CSS Animation Rotate didalamnya :D.  oke, langsung ke tutorial yuk, check this on:

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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; 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 != &quot;item&quot;'>
<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><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><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 == &quot;item&quot;'><data:post.body/>
</b:if>

kata-kata yang berwarna hijau bisa kamu ganti dengan yang kamu mau sob


5. Klik Pratinjau lalu lihat, jika berhasil silahkan simpan template kamu sob 


sekian trik Membuat Read More Otomatis dengan CSS Animation, baca juga: Membuat Navigasi Angka di Bawah Posting

keyword: trik membuat read more otomatis di blog, membuat baca selengkapnya 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