Membuat Readmore Nakal

Written by RA_Syihan on Tuesday, December 28, 2010 | Category: Networking, Trick, Tutorial

Hallo sobat semua ...
Setelah sekian lama saya tidak posting tutorial lagi karena saya sibuk posting yang aneh-aneh di Blog ini. Nah, sekarang saya akan sharing tentang cara membuat Auto Readmore.
Tetapi Auto Readmore ini berbeda dengan yang lainnya, pasti bingung deh. Bedanya dari mananya sih..
Perbedaan dari Auto Redmore ini yaitu pada Readmore Contentnya, Auto readmore ini di beri efek Hover yang menurut saya 'nakal'. Kok aneh nakal? Ya yang saya maksudkan nakal itu karena Readmore contentnya tidak bisa diam saat mouse berada diatasnya, Readmore Content ini malah bergerak menjauh dari Cursor ketika kita hendak mengkliknya ..
Sebenarnya sama saja dengan Readmore Content yang saya gunakan, akan tetapi saya hanya menggunakan efek bounce mendatar.
Sungguh-sungguh nakal menurut saya ....
HHha

Ya sudah lah, mari kita langsung saja ke tahap-tahap pembuatannya .

Seperti biasa, login ke Blogger
Pilih Rancangan > edit HTML
Lalu, Expand Template Widget (saya sarankan untuk Download Template Lengkap terlebih dahulu)
Cari kode seperti ini <div class='post-body entry-content'>
Lalu Taruh Script dibawah ini dibawahnya

<p><script type='text/javascript'>
summary_noimg = 650;
summary_img = 500;
img_thumb_height = 125;
img_thumb_width = 240;
</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>

6. Setelah itu, cari kode ini <data:post.body/>, lalu ganti kode itu dengan script dibawah 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>
<div class='readmorecontent'><a expr:href='data:post.url'>Read more »</a></div>
</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

7. Belum selesai lho, sekarang kita mulai setting Readmore content nakalnya.
cari ]]></b:skin> dan masukan Kode CSS ini di atasnya

.readmorecontent{text-align:right;height:15px;width:140px;position:relative;bottom:13px;left:35px;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;}
.readmorecontent a{padding:4px 15px;background:#3366CC;
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;color:#fff;text-decoration:none;}
.readmorecontent:hover{-webkit-transform: translate(540px,-350px);}
.readmorecontent a:hover{color:#fff;background:#3366CC;text-decoration:none;
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}

8. Selesai ....Nikmati kenakalan Readmorenya yang sungguh mengerikan.

Keterangan:

summary_noimg = 650; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 125; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 240; (Thumbnail 'lebar dalam piksel).

imgtag = '<span style="float:left; ....., (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

intinya, Sobat-sobat harus bisa mengeditnya lagi ...
semoga bermanfaat

happy blogging ..

UnoZoneu™