RESVANS56

Hay Sobat RESVANS56
Apa kabarnya nihh . . ? Baik" aja ya :)
Ok kali ini Admin mau mengajarkan Cara Membuat Spin Sharingan With CSS . .
sebenernya sama , namun yang 1 ini dengan sedikit variasi nya :)
Dengan variasi sharingan  , ada macam" sharingan juga lhoo . .
Tertarik ? langsung aja berikut tutorialnya :

1.Buka Blogger
2.Klik Template > Edit HTML > centang Expand Template Widget
( Saya sarankan backup dulu template kamu )
3.Cari code ]]></b:skin> , ( Pake CTRL+F biar lebih cepet )
4.Copy code dibawah ini , dan pastekan tepat di atas code ]]></b:skin>

/* EXSharingan */
.EXsharingan1 { -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear;margin-top:-60px; margin-left:800px;position:absolute;z-index:999;height: 200px; line-height: 46px;border-radius:500px;border-left:10px solid black;border-right:10px solid black;width: 200px;; -moz-animation:EXspin 1s infinite linear; -webkit-animation:EXspin 1s infinite linear;animation:EXspin 1s infinite linear}
.EXsharingan {margin-top:-60px; margin-left:800px;position:absolute;z-index:999;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfeuzWCTwPKwBiXzA4xG5wufeM0v_ASKMS9sJh0XMmQdWkHRGL2tmFmTCMBuEslOdlwoDcw5SQg7th4xxO1KJna9be59dIGOD7JPdKgunglaxH8KYa8O3v90KH_8RlrGlk17eFPSv6e-x/s185/supers.png) no-repeat;height: 185px; line-height: 46px;border-left:20px solid black;border-radius:500px;border-right:20px solid black;width: 185px; -moz-animation:EXspin 1s infinite linear; -webkit-animation:EXspin 1s infinite linear;animation:EXspin 1s infinite linear}
@-moz-keyframes EXspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes EXspin {0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }
@keyframes EXspin {0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }

5.Cari code <div id='header-wrapper'> , lalu copy code di bawah ini dan pastekan tepat di atas
code <div id='header-wrapper'> :
( sebener nya bebas sih taro dimana  . .asalkan tidak error aja , disini saya taro nya di  atas kode <div id='header-wrapper'>)

<div id='EXsharingan1'><div class='EXsharingan'/></div>

6.Save / Simpan Template

Catatan :
-Teks berwarna kuning bisa kamu edit sendiri margin nya jika penempatan kurang tepat
-Teks berwarna biru bisa kamu ganti dengan URL gambar sharingan . .
Tenang sharingannya udah saya siapkan , Berikut Sharingannya :

1.Madara Eternal

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO5zGsj8w5MklzCiM0b_GXLS9SSVzZbis429tRiJvBUC-OWGA6MN2rnQjQU3DzOst56Svc2Bl54tPGUGFM4Mkg4OVyN_dOQyu-kaXgFZCVhTgzPX5AFQ2op1MmcNxrZ4EHrq0SdF00lik/s1600/sharingan6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTB18Jf1xV4PehjOyKP5ONuWDDawn6Z8jxuOgx8oVcnRhe5DybyhilhazXzjOSwdFAdR9mvHkf_3m1RDWWqXQvronU0ItfMjygL38F4sNz2ZOoI_YsJSFUjOaXiRXPIZ083nBPkZM5AK8/s1600/rinnegan1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNFEYz2sF9Tuut4o4x2Q624APzKCLuOPMqfY8uM7LP-_c3-3nQYbZn9EcadxqDvLWL6lknJZ3V4d8fNNPtGZzmG5kzTY7UMRypegdxQTUWgJP5bQYZXcwYyHYpIydy87Chiz2Ng-1_GsM/s1600/sharingan3.png

3.Mangekyou Sharingan Itachi

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6PkNl1vI1VkmVeesTk6o3ekSqier1ZbJ3m-mYeu5EXx_lGCq3SUdiApGPgDBdiRArgfm02L0Yu7ay6vSku5paO8rml2U3tKaZL0Z4qoVkmY40F-IPIEg39d5OAYpGvQH2QIwG9l1M7f0/s1600/sharingan8.png

 4.Mangekyou Sharingan Sasuke

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_79ozXIP7ks3AvonHpnxeBDBCREPmZdz76liWduFn3cbUVoDdizRjnbsBMjRQ-GKxqPyg5SBpzR5YjGCkwQnL6ilnYn5NjqlRUzwF1TNTSXqiKJLtUtP7DyMyRHRWf8_bhjMXEl2LKg/s1600/sharingan2.png

5.Sharingan Triple Stange ( Sasuke )

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybS5ue6zIPlfqvEV-XLy90FE90Q9qzPIJpM-ziPP5kft5rP2wmIBWjE0VpTyoM3HnZQ0EpWWVvPWe0WnARASsCa5iLLq__imHOM4MeUIeUkHjX4c-8NarmOk2AP18SjVOjvTtPK10a1E/s1600/sharingan7.png

6.Mangekyou Sharingan Uchiha Shusui

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWb3RsVhB2Nq4V9Yza-C4yHs9beQomIFX1nnzhEf4tgyVNF06NOY4zwLaLcDbkmUJV-qpzGntB1KMSMhqnJzQq_ZoMmQEDAZLvxkijmxoD8rsaxtnhfEL5l3Gd_hNfjQn8bEIxOmm-CLI/s1600/sharingan4.png

7.Mangekyousharingan Uchiha Izuna

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVv6OMpS5QNkNG5kuZUWmJ9fpZIlCBOF1bb5DPFnK9ZkaIhguUKZU5gGCPUDG_EJMoTsbcpTa5zRnzuHneLrWsXnYVaZymdpa-U8lubcOALDkT7QcA6Yhyphenhyphen_hk-uiOFnzTy4Z_xA54GNVk/s1600/sharingan5.png

8.Byakugan Eyes

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xyn9EEKtJdBcmNBr8pyoumj34L1o8wySaAvFhmhbY0VQG28DxEfsN-9CHb4nMnux1TNuCfzt8fRX1m0bb89hmGKPNcDCrs-ArefLwamZeMlzLG51VozCfgWJVfYxi_4HvFmRthiu-Wc/s1600/byakugan.png

9.Kyuubi Eyes

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjq6b_sQOLvgmblvr4GPeBQCRYQB6mypJmdr2k3QsxWg7lr0E5SyR5XJxHTCqafAql74tPIrusboRENbYKeDi1Oq12owccom5ew2hkTOUv4RDCqC-MKNGeDeQZlJMEKf1lvUD_j_0zUs/s1600/kyuubi.png

10.Senjutsu Eyes

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicjLAMQJhYJPZ2JZu60NX4zIvS3gLvUjj0vKcV1NjNwN4QsxDrbxW6lY8utVzNSLiUZExKfcDslOYRJZUlCGtkeONjVEVjV21dbeysZa2LYrLqxy69V-PfdXwEZ3L2mEjaiXiuYys7_j4/s1600/senjutsu.png

Gimana ? keren kann xDD , Kalo mau sharingan yang lain , bisa cari sendiri yaa :P
Size nya 185 , Background transparent < harus , kalo ngga jelek nanti wkwk
sekian dulu yaa , semoga bermanfaat . 

Hay Sobat Resvans56
Kali Ini Saya akan shere
Cara membuat Animasi Error 404 PAge Not Found
Tau gak Ini Untuk Apa Fungsi nya ,ni widger fungsi nya untuk,meng mantainkan template kita
jadi kala kamu pengen template mentaince,tinggal pake widget ini,mau coba, yuk coba

1.Masuk Blogger
2.Klik Template > Edit HTML , Jangan lupa Centang Expand Template Widget
( Saya sarankan backup dulu template kamu )




3.Cari kode </body> , ( Pake CTRL+F biar lebih cepet )
4.Copy kode dibawah ini , Dan pastekan tepat di atas kode </body> :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
/* CSS reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
html,body{margin:0;padding:0;overflow:hidden;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:&#39;&#39;}
abbr,acronym{border:0}
#error-not-found{background:#310404 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0n7V52S2CHugo9lu-k_Otl_X4fc9AL4vuLrRIAATbkSysTcgENlRgjAcGZGbJ_sLTzRfVBboHSRHAqwf6sgVJze5e8bV2hF5kdMErPcgXrm77H1AKuJMfWS1Sx2oQGZMWgaCpczFAXeE/s1600/overlay.png) repeat;font-family:&#39;BebasNeueRegular&#39;;z-index:999999;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999999;overflow:hidden;}
.eror-page{background:-webkit-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-moz-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-ms-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));position:absolute;width:100%;height:100%;left:0px;top:0px;z-index:1000}
#error-not-found h2{position:absolute;top:50%;line-height:100px;height:100px;margin-top:-50px;font-size:100px;width:100%;text-align:center;color:transparent;-webkit-animation:blurFadeInOut 3s ease-in backwards;-moz-animation:blurFadeInOut 3s ease-in backwards;-ms-animation:blurFadeInOut 3s ease-in backwards;animation:blurFadeInOut 3s ease-in backwards}
#error-not-found h2.frame-1{-webkit-animation-delay:0s;-moz-animation-delay:0s;-ms-animation-delay:0s;animation-delay:0s}
#error-not-found h2.frame-2{-webkit-animation-delay:3s;-moz-animation-delay:3s;-ms-animation-delay:3s;animation-delay:3s}
#error-not-found h2.frame-3{-webkit-animation-delay:6s;-moz-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s}
#error-not-found h2.frame-4{font-size:200px;-webkit-animation-delay:9s;-moz-animation-delay:9s;-ms-animation-delay:9s;animation-delay:9s}
#error-not-found h2.frame-5{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span{-webkit-animation:blurFadeIn 3s ease-in 12s backwards;-moz-animation:blurFadeIn 1s ease-in 12s backwards;-ms-animation:blurFadeIn 3s ease-in 12s backwards;animation:blurFadeIn 3s ease-in 12s backwards;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span:nth-child(2){-webkit-animation-delay:13s;-moz-animation-delay:13s;-ms-animation-delay:13s;animation-delay:13s}
#error-not-found h2.frame-5 span:nth-child(3){-webkit-animation-delay:14s;-moz-animation-delay:14s;-ms-animation-delay:14s;animation-delay:14s}
.sp-backg{position:absolute;width:470px;height:239px;left:50%;top:50%;margin:-137px 0 0 -141px;background:transparent url(http://www.naturalhealthencyclopedia.com/skin/img/404.png) no-repeat top left;-webkit-animation:fadeInBack 3.6s linear 14s backwards;-moz-animation:fadeInBack 3.6s linear 14s backwards;-ms-animation:fadeInBack 3.6s linear 14s backwards;animation:fadeInBack 3.6s linear 14s backwards;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=30)&quot;;filter:alpha(opacity=30);opacity:0.3;-webkit-transform:scale(2);-moz-transform:scale(2);transform:scale(2)}
.sp-circle-link{position:absolute;left:50%;bottom:5%;margin-left:-50px;text-align:center;line-height:100px;width:100px;height:100px;background:#fff;color:#3f1616;font-size:25px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:fadeInRotate 1s linear 16s backwards;-moz-animation:fadeInRotate 1s linear 16s backwards;-ms-animation:fadeInRotate 1s linear 16s backwards;animation:fadeInRotate 1s linear 16s backwards;-webkit-transform:scale(0.8) rotate(0deg);-moz-transform:scale(0.8) rotate(0deg);transform:scale(0.8) rotate(0deg)}
.sp-circle-link:hover{background:#85373b;color:#fff}
/**/@-webkit-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-webkit-transform:scale(0)}
}
@-webkit-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;-webkit-transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
}
@-webkit-keyframes fadeInBack{0%{opacity:0;-webkit-transform:scale(0)}
50%{opacity:0.4;-webkit-transform:scale(1)}
100%{opacity:0.2;-webkit-transform:scale(2)}
}
@-webkit-keyframes fadeInRotate{0%{opacity:0;-webkit-transform:scale(0) rotate(360deg)}
100%{opacity:1;-webkit-transform:scale(1) rotate(0deg)}
}
/**/@-moz-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-moz-transform:scale(0)}
}
@-moz-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
}
@-moz-keyframes fadeInBack{0%{opacity:0;-moz-transform:scale(0)}
50%{opacity:0.4;-moz-transform:scale(1)}
100%{opacity:0.2;-moz-transform:scale(2)}
}
@-moz-keyframes fadeInRotate{0%{opacity:0;-moz-transform:scale(0) rotate(360deg)}
100%{opacity:1;-moz-transform:scale(1) rotate(0deg)}
}
/**/@keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;transform:scale(0)}
}
@keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
}
@keyframes fadeInBack{0%{opacity:0;transform:scale(0)}
50%{opacity:0.4;transform:scale(1)}
100%{opacity:0.2;transform:scale(2)}
}
@keyframes fadeInRotate{0%{opacity:0;transform:scale(0) rotate(360deg)}
100%{opacity:1;transform:scale(1) rotate(0deg)}
}
</style>
<div class='container'>
<div id='error-not-found'>
<div class='eror-page'>
<div class='sp-backg'/>
<h2 class='frame-1'>Sorry . .</h2>
<h2 class='frame-2'>The Page Not Found. .</h2>
<h2 class='frame-3'>Please Go To Homepage</h2>
<h2 class='frame-4'>Now !</h2>
<h2 class='frame-5'><span>Error 404 !</span> <span>Page Not</span> <span>Found.</span></h2>
<a class='sp-circle-link' expr:href='data:blog.homepageUrl' title='Home page'>Home</a>
</div>
</div></div> <!-- end-->
</b:if>

5.Simpan / Save Template.

Catatan :
Ganti teks berwarna Biru dengan kata" yang kamu inginkan

Sekian Teman teman,Semoga bermafaat bagi kita semua

Cara membuat nya:

CSS:


<form action="http://www.mediafire.com/download/h6k3qle64kelu4r/RESVANS56_App_PC.rar" method="get" target="_blank">
<input name="q" type="submit" value="Download" />
</form> 

Selesai.

Keterangan:
Yang Tulisan merah (MERAH) ganti link ,sesuka kamu
Yang Tuslisan Biru (BIRU) Ganti Tulisan, sesuka kamu

Hallo semuanyaaa
Udah lama ya ga share template , kemaren" lagi banyak dapet award jadi post award aja :3

Ok langsung aja mau liat SS nya ?

Halloo halooo. .
Wah gimana nih tampilan baru blog ini ? bagus ga ._.
jelek juga gpp , maklum masih newbie :3


CSS :
CSS dibawah ini di pasang tepat di atas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid rgb(240 ,0 , 0);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px rgb(240 ,0 , 0);
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid rgb(240 ,0 , 0);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px rgb(240 ,0 , 0);
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(240 ,0 , 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(240 ,0 , 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Script Animasi :
Pasang Script Animasi dibawah ini tepat di atas code </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.click(function() {
        $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
    });
    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script> 

Jquery :
Pasang JQuery ini di atas code </head> ( Pasang kalo belom ada JQuery di template kamu )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Keterangan :
Pada code CSS , Kamu ganti code yang berwarna merah dengan code warna mu sendiri.
Tapi kalo ga di ganti juga gpp , cuman hasil nya ntar warna merah persis kaya contoh nya.

Gimana Bagus Gak ,Baguslah ,Saya Berterima Kasih ,yang telah mengunjung blog saya saja

<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 300;
summary_img = 255;
img_thumb_height = 100;
img_thumb_width = 125;
</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(thumbnail_mode == "yes") {
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>

Keterangan: 

• 300 = jumlah karakter read more artikel tanpa gambar.
• 255 = jumlah karakter read more artikel dengan gambar.
• 100 = tinggi gambar artikel yang ingin ditampilkan pada read more.
• 125 = lebar gambar artikel yang ingin ditampilkan pada read more.

7. Masih di Edit HTML, cari kode <data:post.body/>, jika ada 2 pilihlah kode yang ke-2.

8. Ganti kode <data:post.body/> yang ke-2 dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Sumber: http://www.tuliskan.com/2013/03/cara-membuat-read-more-otomatis-di-blog.html#ixzz2UP1qdeio