CARA MEMBUAT ANIMASI READ MORE

Huft,… sudah lama juga saya ga berbagi seputar blog.

Nah sobat blogger, kali ini kelana ingin berbagi trik tentang cara membuat Animasi Read more secara otomatis .

Demo/Contoh: Klik Disini

Pengin ga sobat blogger…?

Nah langsung aza kalau sobat blogger ingin menerapkannya di blogger sobat semua….

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 pink
- 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 pink bisa sobat ganti dengan yang sobat blogger inginkan


5. Klik Pratinjau lalu lihat, jika berhasil silahkan simpan template sobat bloger.
Semoga postingan ini bermanfaat buat sobat blogger semua.