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 */4. Selanjutnya cari kode </head> , Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. Kemudian letakkan kode berikut diatasnya.
.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); }
}
<script type='text/javascript'>5. Selanjutnya cari kode <data:post.body/> , jika sudah ketemu. silahkan ganti dengan kode dibawah ini :
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 arieadie
* 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>
<b:if cond='data:blog.pageType == "item"'>6. Langkah Terakhir Simpan Template, dan lihat hasilnya. ;)
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</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>
NB::>>>
- Teks yang saya beri warna biru, silahkan Sobat rubah sesuka hati, dan saya tidak warna biru harap tidak mengutak atiknya, karna bisa berantakan,hehee,..
atau seperti ini 
kemudian uploadlah image tersebut ke situs tempat penyimpanan image
seperti photobucket. Setelah proses upload selesai, copylah URL image
tersebut, seperti contoh dibawah ini : 
