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,..
0 komentar:
Post a Comment