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:
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>
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
28 comments
Sip ... :) mantaaap share nya sobat .....
contohnya mana bang :O
apa tidak memberat kan yach :o
Eka@ thanks sob
Burinik.com@ link demo nya udah saya sertakan diatas sob, tenang gak akan memberatkan kok, ini cuma hasil modifikasi dari read more standar
ko misalnya buka laman chat, ada readmorenya trus ga bisa kebuka chatnya
cek http://ramadhandarkness.com/p/chat.html
OneDark@ gunakan tag conditional di antara script read more kamu sob, contoh script conditional bisa diliat diatas yang diberi warna merah
wihhh kpn" mw coba ahh XD. follow blog.ku sob XD
hmmm lagi mikir mau bikin read more atau gak ya,btw makasuh karena telah berbagi,selamat malam :D
hueee
dapet ide dr trik ini
wkwkwkwk
The Masked Man@ silahkan sob
loveheaven07@ yupz, night too :D
Caesar@ wow ide apa itu? beri tahu aku, atau kau kupecat dari pasukkan perang sparta
cakep nih gan. makasih ya info nya :D
Helmi Arif@ oke, sama-sama sob ,, di praktekkan ya :D
huaaaa :'O
aku lupa idenya... :'0
kata mutiara hari ini:
“Kenalilah musuhmu, kenalilah diri sendiri. Maka kau bisa berjuang dalam 100 pertempuran tanpa resiko kalah. Kenali Bumi, kenali Langit, dan kemenanganmu akan menjadi lengkap.”
nice artikel ditunggu kunjungan baliknya
http://bilogizma.blogspot.com/
Mantap sekali Gan, tapi kalau mau menyisipkan kode adsense agar iklan muncul setelah Read More diklik bagaimana, Gan? Tolong bikinin panduannya juga, Gan.
Terimakasih....
Muehammad Yuezha Andrean kapan-kapan ya sob, tapi saya gak janji, soalnya lagi banyak tugas kuliah :D
berhasil di blog saya, terimakasih sob, izin sedot ya om
blog-gareng silahkan sob, sama-sama :D
5 Kasus Dunia Kedokteran yang Super Aneh
boleh dicoba nih gan :D
i m ClouD silahkan sob :D
makasih...!!! ini termantep di dunia
Cilung Abon >>> sama-sama sob :D
gan [] susah dicari mohon pencerahannya
nyari apa ya?
data post body susah di cari
susah bukan berarti gak ada,
nyarinya pake CTRL+F trus paste
Masih gak ada udh di CTRL+F kolom teks buat nulis malah jadi warna merah artinya tidak ada
mantap
Hargai penulis dengan cara memberikan komentar di artikel ini ya sobat.
Dan berkomentarlah dengan kata-kata yang sopan.
"Jangan Menggunakan Link Aktif di Komentar" (akan dihapus)
Untuk menyisipkan gambar dalam komentar : <i rel="image">URL GAMBAR</i>