Membuat Readmore Keren

Sahabat ICT Club sudah pernah tahu belum cara membuat readmore atau baca selanjutnya pada postingan blog?

Baiklah langsung saja Jika kalian tertarik ingin mencobanya, silahkan ikuti langkah berikut :
1. Login Ke Akun Blog
2. Pilih Template> edit HTML  kemudian cheklist Expand Template Widget
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 yang saya beri warna biru, silahkan kalian rubah sesuka hati,

MAKA HASIL >>>>>

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com