Cara Membuat Readmore Ver. 1 + Keren + Otomatis di Blog

Cara Membuat Readmore Ver. 1 + Keren + Otomatis di Blog

Membuat readmore atau baca selanjutnya pada postingan blog maka tampilan blog bisa terlihat rapi suatu kepuasan bagi setiap orang yang melihatnya, oia sob, kenapa saya disini kasih judul 'Ver.1', karena sebenarnya masih ada lagi readmore animasi yang lain yg belum saya post, makanya saya sengaja kasih ver.1, dan mungkin lain kali baru saya post. ditunggu ajj yah all.heheee...

dan jika sobat masih penasaran seperti apa sih readmore animasi yg saya maksud?? maka silahkan sobat lihat contohnya Screenshot diblog KERINGAT yang dibawah ini. jgn lpa singgah comment yah :D .
Gimana??,. gimana???? pendapat sobat keren gk??

Baiklah langsung saja Jika Sobat Tertarik ingin mencobanya, silahkan ikuti langkah berikut :

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

/* Readmore Animasi akaUTta */
.UTreadmore a {
font-family:monospace, sans-serif !important;
color:#CFDBEC !important;text-shadow:1px -1px 1px #000;
font-size:14px;
text-decoration:none;
}
.UTreadmore a:hover {
font-size:19px;color:#fff;text-shadow:0px 0px 2px rgb(0,86,224);}
.circlewrapper {
width:98px;
height:98px;
float:right;
text-align:center;
}
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgb(0,86,224);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px rgb(0,86,224);
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgb(0,86,224);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px rgb(0,86,224);
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}
.circle2 {
background-color: transparent;
border: 5px solid rgb(0,86,224);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px rgb(0,86,224);
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(0,86,224);}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(0,86,224); }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}

4. Selanjutnya cari kode </head> , Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. Kemudian letakkan kode berikut diatasnya.

<script type='text/javascript'>
var summary_noimg = 300,
summary_img = 300,
img_thumb_height = 80,
img_thumb_width = 90;
</script>
<script type='text/javascript'>
//<![CDATA[
/**
* ========================================================================
* Auto-readmore link script, version 2.0 (for blogspot) (C)2012 by akaUTta
* visit http://ut2a-4down.blogspot.com/ to get more cool hacks
* ========================================================================
*/
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 alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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>

5. Selanjutnya cari kode <data:post.body/> , jika sudah ketemu. silahkan ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'>
<span class='UTreadmore'><a expr:href='data:post.url'>More√</a></span>
</div></div>
</b:if>
</b:if>


6. Langkah Terakhir Simpan Template, dan lihat hasilnya. ;)


NB::>>>
- Teks : More√, silahkan Sobat rubah sesuka hati, dan selain dari Teks More√ harap tidak mengutak atiknya, karna bisa berantakan,hehee,..

MAKA HASIL >>>>>(DIBAWAH INI)
More√
SELAMAT MENCOBA GAN!!..SALAM KERINGAT.
BERI TANGGAPAN SOBAT MENGENAI INI. OKEEEE.