Membuat Read More Otomatis dengan CSS Animation
Hai Sobat blogger,kali ini saya akan share Cara Membuat Read More Otomatis Dengan CSS Animation.Okay langsung saja 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 != "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/>
- 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>
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,Semoga bermanfaat :D
0 Response to "Membuat Read More Otomatis dengan CSS Animation"
BACA DULU SEBULUM BERKOMENTAR PERATURAN BERKOMENTAR DI BLOG INI :
- Di Wajibkan Berkomentar Dengan OpenID,supaya mimin bisa berkunjung balik
- Berkomentarlah sesuai artikel diatas,Jika diluar artikel gunakanlah tag [ OOT ].
- Berkomentar Disaran kan Sesuai Artikel
- Untuk Menyisipkan Kode Gunakan <i rel="code">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan pre Gunakan <i rel="pre">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan Catatan/Blockquote Gunakan <b rel="quote">Tulis catatan di sini</b>
- Untuk Menyisipkan Link Gunakan <i rel="anchor">URL DISINI</i>
- Untuk Menyisipkan Gambar Langsung Saja Tulis URL Imagenya
- Untuk Menyisipkan Video Youtube Langsung Saja Tulis URL Videonya
Konversi KodeEmoticon