
langsung saja :
note: contoh nya blog saya
- Langkah pertama login ke akun bloger sobat
- Langkah kedua klik menu Rancangan » Edit HTML
- Langkah ketiga Download dulu template sobat biar aman dan biar kalau terjadi error ada cadangan templatenya
- Langkah keempat anda cari kode ]]></b:skin>
- Langkah kelima anda kopy kode berikut dan paste tepat dibawah kode]]></b:skin> atau diatas Tag </head>
<!-- kondisi home -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.thumb-post img {
padding: 4px;
margin-top:0;margin-right:0;margin-bottom:5px;margin-left:0;
width: 90px;
height:90px;
background: #ff0000;
border: 3px solid #00CC00;
-webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post:hover:hover .thumb-post img {
border: 3px solid #0000ff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
</b:if>
</b:if>
<!-- /kondisi home -->
- Langkah selanjutnya anda cari kode yang seperti dibawah ini, atau yang jelasnya adalah kode Readmore Otomatis yang letaknya diatas kode </head>
- Tapi kalau anda blum menggunakan ReadMore Otomatis anda bisa membaca artikel saya yang dulu tentang cara Membuat Readmore Otomatis
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 src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
- Setelah kode diatas ketemu Sisipkan kode berikut <div class="thumb-post"> didepan kode
<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>
- Jadi hasilnya akan seperti ini.
<div class="thumb-post"> <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>
- Atau anda juga bisa langsung menggunakan kode dibawah ini, dengan cara Hapus keseluruhan kode readmore otomatis anda, kemudian ganti dengan kode berikut
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 340;
summary_img = 340;
img_thumb_height =120 ;
img_thumb_width =120 ;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.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");
if(img.length<=0) {
imgtag = '<div class="thumb-post"><span style="float:left;padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6bU6dKDb4_xfcTBOX7Zf4-SDe4vkZQMNf8pXhSu7AvrS2CGn4p3JwukvmpLRi97O09MY3Gkws20Pp7D1M6BzmfcY3mpipwWu-Yn4qBQLI4FEJ_iJtWGuxNp08U4_sdOZULUXs3Loqxag_/s0/diary.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>'; var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<div class="thumb-post"><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></div>'; summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
- Kode yang berwarna merah adalah sisipan kode pada script ReadMore ( Tambahannya )
thanks sudah share artikelnya, tapi sayang LINK sumbernya hilang. COPAS boleh aja asal LINK sumbernya di ikutkan. Thanks Happy bloging
BalasHapusya bang,,sorry ye..masih newbie dunia blog
HapusSudah normal ya komentarnya?
Hapusia bang...tapi kurang pas juga sih,, tapi lumayan dari pada default,...:)
Hapusbtw aku copas artikel abang tapi ada sumber nya lhoo..
mkasih bang..tp stelah saya pasang...ternyata gk enak di liat di blog saya..tapi thx ya dah share
BalasHapussenasib dgn blog saya.ahaha
Hapushahaha...ya sudah..yg penting dah saya post(walopun copas:))
Hapusini yg saya cari makasih ya
BalasHapusdicoba dulu sob
BalasHapuskeren banget gan :)
BalasHapusthx bg infonya
BalasHapusjgn lupa berkunjung untuk saya yg masih newbie ini :D
http://idegemilang.blogspot.com/
mantap gan informasinya,,,
BalasHapussangat bermanfaat!!
kunjungi blog saya <a href="http://dhanicyx.blogspot.com'>Disini sob!!</a>
thx bnget ne info ny OM :)
BalasHapusfolback yaa OM http://dahams-skellorz.blogspot.com/
mantap gan postingan nya .... thanks ya ...
BalasHapuskunbal ya ranup-selaseh.blogspot.com
nice share
BalasHapusvisit us car portal news