Mustofa's Blog

You can get different information from different parts of the world in this blog

Showing posts with label Blog Tutorial. Show all posts
Showing posts with label Blog Tutorial. Show all posts

Tuesday, July 9, 2013

Cara Memasang Hewan Piaraan di Blog

12:09:00 PM Posted by Unknown No comments
 Cara Memasang Hewan Piaraan Blog, hewan blog, binatang untuk blog, blog animal, aniasi hewan blog
 
Terkadang kita harus berpikir bagaimana kita harus membuat blog kita terlihat unik atau beda dari blog-blog yang sudah ada. Salah satu cara untuk membuat blog kelihatan beda dengan blog-blog yang lain adalah dengan memelihara hewan piaraan kita di dalam blog. Tidak mungkin kita bisa memelihara hewan piaraan kita dalam blog. Jangan salah, tidak ada yang tidak mungkin. Coba lihat di bawah ini, Ini adalah hewan peliaraan saya yang saya rawat semenjak kecil.
Kalau anda berminat untuk memelihara hewan peliaraan di dalam blog, anda tinggal copy paste kode yang ada di bawah ini dan tempatkan kode ini di kolom Gadget atau Widget blog anda.

Fish
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Spider
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/spider.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/spider.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Hamster
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object>

Penguin
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?" width="300" height="200"><param name="movie" value="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Turtle
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/turtle.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/turtle.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Dog
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="bgcolor" value="FFFFFF"/></object>

Frog
 
<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/treefrog.swf?" width="300" height="200"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/treefrog.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

Thursday, March 7, 2013

Menampilkan Kursor Animasi Pada Blog

12:37:00 PM Posted by Unknown 4 comments
Skrip populer kali ini mengenai cara menampilkan kursor animasi di blog. Dengan skrip ini sobat dapat mengganti kursor default menjadi kursor sendiri, yaitu berupa gambar unik atau dengan tambahan objek yang mengikuti pointer mouse. Objek di sekitar pointer mouse tersebut dapat berupa tulisan atau gambar kecil yang umumnya disimpan dalam format file .PNG, .GIF, .ANI, dan .CUR.

Jika format file adalah .GIF, .ANI, dan .CUR, maka gambar kursor dapat dibuat animasi bergerak, tetapi jika gambar kursor dalam format file .PNG atau format lain tanpa animasi gerak, maka dengan bantuan program JavaScript dapat dibuat animasi kursor yang mengikuti pointer mouse.

Di bawah ini saya share tiga cara untuk menampilkan kursor animasi pada blog berupa kursor animasi bintang berjatuhan, tulisan berputar pada kursor, gambar mengikuti pointer mouse, teks berputar mengelilingi pointer mouse, dan mengganti kursor dengan gambar sendir.
Animasi Kursor

Animasi Kursor Bintang Berjatuhan
 
Skrip ini berfungsi untuk menampilkan animasi bintang berjatuhan ketika mouse digerakan, Caranya sebagai berikut:
  1. Login ke Blogger.
  2. Masuk ke halaman "Layout" atau Tata Letak.
  3. Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.
  4. Salin kode berikut dan simpan di jendela tersebut tanpa perlu diberi judul, kemudian simpan. 
    <script type='text/javascript'> 
// <![CDATA[ 
var colour="#52D8ED"; 
var sparkles=100; 
var x=ox=400; 
var y=oy=300; 
var swide=800; 
var shigh=600; 
var sleft=sdown=0; 
var tiny=new Array(); 
var star=new Array(); 
var starv=new Array(); 
var starx=new Array(); 
var stary=new Array(); 
var tinyx=new Array(); 
var tinyy=new Array(); 
var tinyv=new Array(); 
window.onload=function() { if (document.getElementById) { 
var i, rats, rlef, rdow; 
for (var i=0; i<sparkles; i++) { 
var rats=createDiv(3, 3); 
rats.style.visibility="hidden"; 
document.body.appendChild(tiny[i]=rats); 
starv[i]=0; 
tinyv[i]=0; 
var rats=createDiv(5, 5); 
rats.style.backgroundColor="transparent"; 
rats.style.visibility="hidden"; 
var rlef=createDiv(1, 5); 
var rdow=createDiv(5, 1); 
rats.appendChild(rlef); 
rats.appendChild(rdow); 
rlef.style.top="3px"; 
rlef.style.left="0px"; 
rdow.style.top="0px"; 
rdow.style.left="3px"; 
document.body.appendChild(star[i]=rats); 
} 
set_width(); 
sparkle(); 
}} 
function sparkle() { 
var c; 
if (x!=ox || y!=oy) { 
ox=x; 
oy=y; 
for (c=0; c<sparkles; c++) if (!starv[c]) { 
star[c].style.left=(starx[c]=x)+"px"; 
star[c].style.top=(stary[c]=y)+"px"; 
star[c].style.clip="rect(0px, 5px, 5px, 0px)"; 
star[c].style.visibility="visible"; 
starv[c]=50; 
break; 
} 
} 
for (c=0; c<sparkles; c++) { 
if (starv[c]) update_star(c); 
if (tinyv[c]) update_tiny(c); 
} 
setTimeout("sparkle()", 40); 
} 
function update_star(i) { 
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; 
if (starv[i]) { 
stary[i]+=1+Math.random()*3; 
if (stary[i]<shigh+sdown) { 
star[i].style.top=stary[i]+"px"; 
starx[i]+=(i%5-2)/5; 
star[i].style.left=starx[i]+"px"; 
} 
else { 
star[i].style.visibility="hidden"; 
starv[i]=0; 
return; 
} 
} 
else { 
tinyv[i]=50; 
tiny[i].style.top=(tinyy[i]=stary[i])+"px"; 
tiny[i].style.left=(tinyx[i]=starx[i])+"px"; 
tiny[i].style.width="2px"; 
tiny[i].style.height="2px"; 
star[i].style.visibility="hidden"; 
tiny[i].style.visibility="visible" 
} 
} 
function update_tiny(i) { 
if (--tinyv[i]==25) { 
tiny[i].style.width="1px"; 
tiny[i].style.height="1px"; 
} 
if (tinyv[i]) { 
tinyy[i]+=1+Math.random()*3; 
if (tinyy[i]<shigh+sdown) { 
tiny[i].style.top=tinyy[i]+"px"; 
tinyx[i]+=(i%5-2)/5; 
tiny[i].style.left=tinyx[i]+"px"; 
} 
else { 
tiny[i].style.visibility="hidden"; 
tinyv[i]=0; 
return; 
} 
} 
else tiny[i].style.visibility="hidden"; 
} 
document.onmousemove=mouse; 
function mouse(e) { 
set_scroll(); 
y=(e)?e.pageY:event.y+sdown; 
x=(e)?e.pageX:event.x+sleft; 
} 
function set_scroll() { 
if (typeof(self.pageYOffset)=="number") { 
sdown=self.pageYOffset; 
sleft=self.pageXOffset; 
} 
else if (document.body.scrollTop || document.body.scrollLeft) { 
sdown=document.body.scrollTop; 
sleft=document.body.scrollLeft; 
} 
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { 
sleft=document.documentElement.scrollLeft; 
sdown=document.documentElement.scrollTop; 
} 
else { 
sdown=0; 
sleft=0; 
} 
} 
window.onresize=set_width; 
function set_width() { 
if (typeof(self.innerWidth)=="number") { 
swide=self.innerWidth; 
shigh=self.innerHeight; 
} 
else if (document.documentElement && document.documentElement.clientWidth) { 
swide=document.documentElement.clientWidth; 
shigh=document.documentElement.clientHeight; 
} 
else if (document.body.clientWidth) { 
swide=document.body.clientWidth; 
shigh=document.body.clientHeight; 
} 
} 
function createDiv(height, width) { 
var div=document.createElement("div"); 
div.style.position="absolute"; 
div.style.height=height+"px"; 
div.style.width=width+"px"; 
div.style.overflow="hidden"; 
div.style.backgroundColor=colour; 
return (div); 
} 
// ]]> 
</script>
Gambar Animasi Mengikuti Mouse
 
Skrip ini akan menampilkan mouse yang selalu diikuti gambar animasi seperti per bergoyang dan selalu berat ke bawah, sehingga apabila mouse diam (kursor tidak bergerak),  gambar animasi kursor pun akan diam seolah ada gravitasi ke bawah. Caranya pasangnya sebagai berikut:
  1. Login ke Blogger.
  2. Masuk ke halaman "Layout" atau Tata Letak.
  3. Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.
  4. Salin kode berikut dan simpan di jendela tersebut tanpa perlu diberi judul, kemudian simpan.
     
    <style>.dot{position:fixed; padding:0;margin:0;border:0 solid;border-radius:6px;box-shadow:0 0 0 #fff;z-index:10;}
#dot0{visibility: hidden;}</style>
<script type="text/javascript">
//<![CDATA[
function elastic_trail() {
 var f = 8;  /* Jumlah Kursor */
 var g = "http://i48.tinypic.com/s48bvd.jpg"; /* Gambar Kursor */
 var h = 0.01;
 var k = 20; /* Jarak */
 var l = 10;
 var m = 1;
 var o = 0;
 var p = 50;
 var q = 10;
 var r = 0.1;
 var s = 0.1;
 var t = 12; /* Ukuran kursor */
 var u = 0.75;
 var v = 0; 
 var w = 0;
 for (var i = f - 1; i > -1; --i) {
  with(document) {
   write('<div class="dot" id="dot' + i + '">\n');
   write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n');
   write("</div>\n")
  }
 }
 /*@cc_on@*/
 /*@if(@_jscript_version>=5)if(navigator.appVersion.replace(/^.*MSIE (\d+).*$/,'$1')<=6){var x=function(a,n){var b='scroll'+a,d=document,c='compatMode';return d[c]&&d[c]=='CSS1Compat'?d.documentElement[b]+n+'px':d.body[b]+n+'px'};document.write('<style type="text/css">.dot {position: absolute;}body {background: url(foo) fixed;}<\/style>')};@end@*/
 var y = function () {
  return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement: document.body
 };
 var z = document.layers ? "": "px";
 elastic_trail.prototype.dot = function (i) {
  this.X = v;
  this.Y = w;
  this.dx = 0;
  this.dy = 0;
  if (document.layers) {
   this.obj = document["dot" + i]
  } else {
   if (document.all) {
    this.obj = document.all["dot" + i].style
   } else {
    if (document.getElementById) {
     this.obj = document.getElementById("dot" + i).style
    } else {
     return
    }
   }
  }
 };
 var A = new Array();
 for (var i = 0; i < f; i++) {
  A[i] = new this.dot(i)
 }
 for (i = 0; i < f; i++) {
  A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
  A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
 }
 var B = this;
 setInterval(function () {
  B.animate()
 },
 20);
 function MoveHandler(e) {
  v = e.pageX - pageXOffset;
  w = e.pageY - pageYOffset;
  return true
 }
 function MoveHandlerIE() {
  v = window.event.x;
  w = window.event.y
 }
 if (document.addEventListener) {
  document.addEventListener("mousemove", MoveHandler, false)
 } else {
  if (document.attachEvent) {
   document.attachEvent("onmousemove", MoveHandlerIE)
  } else {
   if (document.captureEvents) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = MoveHandler
   }
  }
 }
 elastic_trail.prototype.vec = function (X, Y) {
  this.X = X;
  this.Y = Y
 };
 elastic_trail.prototype.springForce = function (i, j, a) {
  var b = (A[i].X - A[j].X);
  var c = (A[i].Y - A[j].Y);
  var d = Math.sqrt(b * b + c * c);
  if (d > k) {
   var e = l * (d - k);
   a.X += (b / d) * e;
   a.Y += (c / d) * e
  }
 };
 elastic_trail.prototype.animate = function () {
  var a = 0;
  A[0].X = v;
  A[0].Y = w;
  a = 1;
  for (var i = a; i < f; i++) {
   var b = new this.vec(0, 0);
   if (i > 0) {
    this.springForce(i - 1, i, b)
   }
   if (i < (f - 1)) {
    this.springForce(i + 1, i, b)
   }
   var c = new this.vec( - A[i].dx * q, -A[i].dy * q);
   var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p);
   A[i].dx += (h * d.X);
   A[i].dy += (h * d.Y);
   if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s && Math.abs(d.Y) < s) {
    A[i].dx = 0;
    A[i].dy = 0
   }
   A[i].X += A[i].dx;
   A[i].Y += A[i].dy;
   var e, width;
   if (window.innerWidth) {
    e = window.innerHeight;
    width = y().clientWidth && window.innerWidth - y().clientWidth == 17 || window.innerWidth - y().clientWidth == 15 ? y().clientWidth: window.innerWidth
   } else {
    e = y().clientHeight - Math.ceil(t / 2);
    width = y().clientWidth
   }
   if (A[i].Y >= e - t - 1) {
    if (A[i].dy > 0) {
     A[i].dy = u * -A[i].dy
    }
    A[i].Y = e - t - 1
   }
   if (A[i].X >= width - t) {
    if (A[i].dx > 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = width - t - 1
   }
   if (A[i].X < 0) {
    if (A[i].dx < 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = 0
   }
   A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
   A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
  }
 }
}
new elastic_trail();
//]]>
</script>
  5. Jika sobat ingin mengganti gambar, ganti kode berwarna merah http://i48.tinypic.com/s48bvd.jpg dengan URL gambar sendiri atau dapat dengan salah satu URL gambar kursor animasi di bawah:
    Animasi Kursor
    Gambar kursor kupu-kupu :
    http://i48.tinypic.com/s48bvd.jpg     
    Animasi Kursor
    Gambar kursor bola :
    http://i48.tinypic.com/mwbl29.jpg     
    Kursor Animasi
    Gambar kursor hati :
    http://i48.tinypic.com/25ix5rd.jpg     
    Kursor Animasi
    Gambar kursor bintang :
    http://i48.tinypic.com/eamrur.jpg     
    Kursor Animasi
    Gambar kursor bola api :
    http://i48.tinypic.com/2cf9htc.jpg     
    Kursor Animasi
    Gambar kursor matahari :
    http://i48.tinypic.com/281pi1.jpg     
    Animasi pointer mouse
    Gambar kursor burung terbang :
    http://i49.tinypic.com/347hd05.jpg     
    Animasi mouse
    Gambar kursor lonceng :
    http://i48.tinypic.com/1g0lqx.jpg     
    Gambar kursor animasi
    Gambar kursor bunga :
    http://i48.tinypic.com/9u12ya.jpg
Animasi Mouse

Tulisan Mengelelilingi Kursor | Teks Berputar Mengikuti Mouse
 
Skrip ini akan mengubah kursor menjadi kursor animasi yang dikelilingi tulisan berputar. Cara pasangnya sebagai berikut:
  1. Login ke Blogger.
  2. Masuk ke halaman "Layout" atau Tata Letak.
  3. Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.
  4. Salin kode berikut dan simpan di jendela tersebut tanpa perlu diberi judul, kemudian simpan.
     
    <style type="text/css">
#outerCircleText {
font-weight: bold;
color: #ff0000;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "www.LinkSukses.com";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
 e = e || window.event;
 ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; 
 xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; 
},
makecircle = function(){ 
 if(init.nopy){
  o.style.top = (b || document.body).scrollTop + 'px';
  o.style.left = (b || document.body).scrollLeft + 'px';
 };
 currStep -= rotation;
 for (var d, i = n; i > -1; --i){ 
  d = document.getElementById('iemsg' + i).style;
  d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
 };
},
drag = function(){ 
 y[0] = Y[0] += (ymouse - Y[0]) * speed;
 x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
 for (var i = n; i > 0; --i){
  y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  x[i] = X[i] += (x[i-1] - X[i]) * speed;
 };
 makecircle();
},
init = function(){ 
 if(!isNaN(window.pageYOffset)){
  ymouse += window.pageYOffset;
  xmouse += window.pageXOffset;
 } else init.nopy = true;
 for (var d, i = n; i > -1; --i){
  d = document.createElement('div'); d.id = 'iemsg' + i;
  d.style.height = d.style.width = a + 'px';
  d.appendChild(document.createTextNode(msg[i]));
  oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
 };
 o.appendChild(oi); document.body.appendChild(o);
 setInterval(drag, 25);
},
ascroll = function(){
 ymouse += window.pageYOffset;
 xmouse += window.pageXOffset;
 window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
 window.addEventListener('load', init, false);
 document.addEventListener('mouseover', mouse, false);
 document.addEventListener('mousemove', mouse, false);
  if (/Apple/.test(navigator.vendor))
   window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
 window.attachEvent('onload', init);
 document.attachEvent('onmousemove', mouse);
};
})();
</script>

Mengubah Gambar Kursor
 
Kode di bawah adalah kode CSS dan HTML untuk memanggil gambar kursor animasi. Dengan kode tersebut tampilan pointer mouse (gambar kursor) di blog akan seperti gambar-gambar kursor animasi di bawah. Cara mengganti kursor tersebut adalah sebagai berikut:
  1. Login ke Blogger.
  2. Masuk ke halaman "Layout" (Tata Letak).
  3. Add Gadget atau Tambah Gadget kemudian pilih HTML/JavaScript.
  4. Copy paste kode di bawah, simpan (Save) dan lihat hasilnya.
     
    <style> body, a, a:hover { cursor:url('URL Gambar Mouse'), auto }</style>
  5. Ganti kode berwarna merah URL Gambar Mouse dengan salah satu URL di bawah sesuai dengan Model yang dinginkan atau dengan gambar animasi mouse sendiri.
    Animasi Kursor
    • Animasi kursor Model-1: http://ani.cursors-4u.net/cursors/cur-11/cur1066.png
    • Animasi kursor Model-2: http://cur.cursors-4u.net/cursors/cur-11/cur1027.png
    • Animasi kursor Model-3: http://cur.cursors-4u.net/holidays/hol-6/hol512.png
    • Animasi kursor Model-4: http://cur.cursors-4u.net/cursors/cur-10/cur935.gif
    • Animasi kursor Model-5: http://cur.cursors-4u.net/symbols/sym-7/sym646.gif

Friday, November 23, 2012

Cara Membuat Address Bar Bergerak

4:16:00 PM Posted by Unknown 2 comments
Saat kita mengunjungi sebuah blog, kadang kita terpana dengan penampilan address bar yang bisa berjalan. Address bar yang berjalan ini membuat kebanyakan blogger terpaku untuk melihatnya. Selain terlihat unik dan menarik, adress bar yang berjalan juga mampu menampilkan kata atau kalimat yang panjang dalam address bar tersebut.

Cara untuk membuat address bar berjalan adalah sebagai berikut :

Pertama, masuk ke dalam akun blogger kita masing-masing.
Klik fitur rancangan.
Klik edit HTML.
Klik/contreng expand widget template.
Cari kode berikut :
</head>

Masukan kode berikut di atas kode </head>.
<SCRIPT language='JavaScript'>
var txt="Tulisan pada address bar";
var kecepatan=170;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</SCRIPT>

Klik simpan dan selesai.

Keterangan :
  1. Sebelum melakukan editing kode HTML pada template, download template blog kita terlebih dahulu sebagai langkah antisipasi jika proses editing kita mengalami kegagalan.
  2. Gunakan tombol Ctrl + F pada keyboard untuk mempercepat proses pencarian kode yang berada pada template blog kita.
  3. Ganti Tulisan pada address bar dengan tulisan yang kita inginkan.
Sekarang saat kita membuka blog kita, maka address barnya akan berjalan sendiri dengan otomatis. Menarik bukan?
Ada yang ingin menambahkan?
Jika ada yang ingin menanggapi silakan sampaikan lewat kotak komentar ya kawan.

Saturday, November 10, 2012

Cara Memperkecil atau Compress Ukuran Javascript

2:01:00 PM Posted by Unknown 5 comments
Nah, pada kecempatan kali ini saya ingin berbagi tentang cara memperkecil atau compress ukuran javascript. Cara yang digunakan untuk compress javascript ini juga tidak berbeda jauh dengan cara compress css yaitu masih menggunakan Gzip Compression. Dengan melakukan compressi javascript pada theme yang kita gunakan, dapat meningkatkan kecepatan akses pada blog kita. Tidak berbeda jauh dengan compress, yaitu dengan menggunakan fungsi Minify, Set Cache Control, eTag, Future Expiration dan Vary Encoder pada header javascript sehingga dapat memenuhi kualifikasi Pagespeed dan Yslow secara sempurna untuk javascript ini.
  • Masih sama seperti seperti posingan tentang compress css sebelum, kita buat terlebih dahulu file php pada root dimana file javascript berada  (Misal : gzip.js.php) lalu isi dengan script berikut ini :
<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) {
ob_start("ob_gzhandler");
}
else {
ob_start();
}
//header("Content-Type:text/javascript");
// Set durasi cache untuk satu minggu
$offset = 60 * 60 * 24 * 7;
$ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
// Set process cache control
header ('Cache-Control: max-age=' . $offset . ', must-revalidate');
// Set etag-header
header('ETag: "'.md5($ts).'"');
// Set expiration header format
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
// Send cache expiration header ke browser
header($ExpStr);
function compress($buffer) {
// Minify – Membuang tabs, spaces, new lines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '', '', ''), '', $buffer);
// Minify – membuang spasi yang tidak perlu
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;}

define('DS', DIRECTORY_SEPARATOR);
define('PATH_ROOT', dirname(__FILE__) . DS);

$jsPath = PATH_ROOT;

include $jsPath."ry.script.js";

?>
  • Selanjutnya ubah link javascript pada theme menjadi :
<script type="text/javascript" src="gzip.js.php"></script>
Dengan cara tersebut di atas, maka ukuran javascript dapat lebih di perkecil sampai batas maksimum.

Friday, November 9, 2012

Cara Membuat Efek Reload atau Refresh di Blog

8:16:00 PM Posted by Unknown No comments

Membuat Efek Reload atau Refresh di Blog
Salam blogger, bagaimana kabarnya? Kadang merasa jenuh atau bosan gak ngeblog? Rutinitas ngeblog jadi terasa bosan, malas untuk mengurusnya. Mungkin untuk menyulut semangat blog yang lebih membara lagi perlu penyegaran atau refresh. Sedikit berlibur, dan melupakan ngeblog ;)

Kalau orangnya (blogger) perlu juga direfresh, bagaimana dengan blognya? Bisa juga kok blog kita reload atau refresh secara otomoatis. Jadi jika blog dibuka, selang beberapa waktu akan mereload atau refresh sendiri. Konon dengan ini bisa juga meningkatkan page view blog.

Cara Membuat Efek Reload atau Refresh di Blog
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh kode berikut di atas kode </head>
<meta http-equiv="refresh" content="600"/>

6. 600 adalah lamanya reload akan terjadi dalam satuan detik, jadi kalau 600 berarti setiap 10 menit akan direload atau direfresh secara otomatis.
7. Simpan template jika sudah selesai. 

Cara Membuat Huruf Besar Pada Awal Teks Postingan

7:58:00 PM Posted by Unknown No comments
Ingin membuat blognya seperti gaya koran atau majalah? Yaitu dengan membuat huruf di awal teks postingan lebih besar dibanding setelahnya. Istilah lainnya adalah drop caps yaitu huruf besar yang ukurannya mungkin 10 kali lipat huruf biasa yang diletakkan di awal teks postingan.

Caranya cukup mudah, dengan membuat huruf pada awal teks yang ada di postingan bisa membuat halaman atau teks yang kita postingan lebih dinamis dan menarik. Kalau kamu ingin mencobanya, simak langkah-langkahnya berikut ini.

Cara Membuat Huruf Besar pada Awal Teks Postingan
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Masukkan kode css berikut di atas kode ]]></b:skin> 

/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;

5. Warna hijau adalah kode warna teks dan merah di atas kode warna background. Simpan Template jika sudah selesai.

Menampilkan Recent Post Disertai Thumbnail

7:46:00 PM Posted by Unknown No comments
Ingin rasanya terus membuat tampilan blog lebih menarik lagi, biar orang tidak bosan dengan tampilan yang kita suguhkan. Kali ini kita akan belajar untuk membuat recent post yang menarik yang berbeda dengan sebelumnya. Widget recent post ini tidak hanya menampilkan judul saja, tapi banyak kelebihannya. Kelebihan recent post yang akan kita pelajari adalah bisa menampilkan tulisan terbaru yang disertai dengan thumbnail, ringkasan, tanggal posting dan jumlah komentar.

Recent Post adalah salah satu widget yang wajib dipasang di blog kita. Biar orang tahu, apa saja yang baru saja kita tulis. Recent post yang satu ini bisa menggantikan recent post yang lama. Langsung saja, kita praktekkan :)

Cara Menampilkan Recent Post Disertai Thumbnail
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini :

<div id='bp_recent'></div><div class='bp_footer'></div>
<script style='text/javascript' src='http://blogergadgets.googlecode.com/svn/trunk/recentposts.js'></script>
<script style='text/javascript'>
var numberOfPosts = 5;
var showPostDate = true;
var showSummary = true;
var summaryLength = 200;
var titleLength = 100;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'More';
</script>
<script src='http://global-site6661.blogspot.com/feeds/posts/summary?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

5. Dari kode diatas ada yang bisa kita sesuaikan, tapi yang harus diubah adalah global-site6661 dengan nama subdomain blogmu sendiri. Simpan jika sudah. 

Cara Membuat Tulisan Arab di Blog

6:59:00 PM Posted by Unknown 1 comment

Nah, postingan kita kali ini saya akan membagikan yang tadinya tidak yakin akan berhasil, namun saya jadi penasaran dan kemudian mencobanya di blog. Eh ternyata alhasil sahabat bisa lihat tulisan Arab di blog saya ini, walau nggak ada tanda bacanya alias masih huruf gundul. Tetapi mungkin sangat penting untuk semua blogger, terutama blogger Muslim yang setiap kali ingin mengupdate artikelnya, tetapi tidak dapat menuliskan huruf Arab ke dalam postingannya.
Tidak usaha bingung sekarang udah bisa asal kita tahu caranya. Saya akan memberikan sedikit tips untuk teman-teman muslim agar dapat membuat tulisan Arab yang bermanfaat dengan memberikan sedikit sentuhan dengan menampilkan ayat-ayat Al-Qur'an atau Hadist dalam bahasa Arab tanpa harus menginstal software, mensetting atau mengedit html blog template kita atau komputer kita.
Nah, sekarang bagaimana caranya ? Mudah kok, sebab cara ini memang sangat sederhana tetapi ا ن شا ا لله memberikan manfaat untuk sahabat muslim.
Untuk menerapkan apa yang telah saya maksud diatas. Silakan kamu salin kodenya dibawah ini!
HURUF ARABKODE
ا& #1575 ;
ب& #1576 ;
ت& #1578 ;
ث& #1579 ;
ج& #1580 ;
ح& #1581 ;
خ& #1582 ;
د& #1583 ;
ذ& #1584 ;
ر& #1585 ;
ز& #1586 ;
س& #1587 ;
ش& #1588 ;
ص& #1589 ;
ض& #1590 ;
ط& #1591 ;
ظ& #1592 ;
ع& #1593 ;
غ& #1594 ;
ف& #1601 ;
ق& #1602 ;
ك& #1603;
ل& #1604;
م& #1605;
ن& #1606 ;
ه& #1607;
و& #1608;
ى& #1609;
ي& #1610;
ة& #1577;
إ& #1573;
ؤ& #1572;
أ& #1571;
آ& #1570;

 Perhatian :
Untuk menghasilkan tulisan Arab yang sempurna, jangan pisahkan dengan koma atau Spasi jika membuat huruf Arab bersambung. Contoh Khazanah Islam, maka huruf Arabnya menjadi خز ا نة ا لإ لسلا م. Jadi kalimat yang bersambung, penulisan kodenya tanpa spasi dan pisahkan huruf tersebut jika kalimat atau hurufnya berdiri sendiri. Demikianlah yang saya dapat sampaikan semoga bermanfaat dan selamat mencoba.

Wednesday, November 7, 2012

Membuat Recent Post Blog Model News Ticker

8:48:00 PM Posted by Unknown No comments
Recent post adalah tulisan-tulisan terbaru dari blog kita, untuk menampilkan recent post menggunakan RSS. Setiap blog hampir memiliki RSS yang memungkinkan orang untuk melihat atau berlangganan tulisan terbaru. Umpan URL RSS itulah bisa juga dimanfaatkan untuk widget recent post di blog kita sendiri.

Recent post yang akan kita buat adalah model headline, atau news ticker yang biasanya seperti kita lihat di tv berita (Tv One) Atau portal-portal berita. Dengan membuat recent post model seperti itu akan menarik pengunjung mengklik dan membaca post/tulisan terbaru kita. Selain itu membuat recent post dengan bergaya headline news juga bisa lebih menghemat tempat. Contohnya bisa dilihat di sini.


Untuk membuat recent post bergaya model news stiker ini sangat mudah. Caranya adalah dengan memanfaatkan website RSSpump.com yang menyediakan generate widget tersebut. Langkah-langkah membuatnya adalah sebagai berikut:
  1. Kunjungi http://www.rsspump.com/default.aspx
  2. Pada kolom pertama, masukan URL RSS Feed blog kita, pastikan itu adalah URL Feed, jika kita menggunakan blogspot, URL Feed yang seperti inihttp://global-site6661.blogspot.com/feeds/posts/defaultadalah berbentuk atom. Untuk itu kita bisa membuat RSS Feed blog kita yang baru dengan Feedburner, sehingga punya RSS Feed baru.
  3. Kita bisa menyetting tampilan dan fungsi, ada pilihan model tampilan, warna dan ukuran teks, jumlah yang ditampilkan. Lalu juga time untuk menunjukan waktu, title untuk juga menampilkan judul blog, memberi garis bawah, tebal, membuka tautan di tab baru. Tidak usah centang share widget biar tetap terlihat bagus.
  4. Lihat preview, jika sudah cocok dan dicoba diklik sesuai dengan halaman yang terbuka sesuai dengan judul link kita bisa copy paste kodenya untuk ditambahkan di blog kita.
  5. Untuk menambahkan ke blog, login ke blogger.com lalu pilih tata letak, tambahkan widget/gadget HTML/Java Script. Paste kode yang sudah dicopy tersebut di sana. Coba lihat hasilnya.
Semoga berhasil dan bermanfaat.

Cara Update (Posting) ke Blog lewat Email

8:31:00 PM Posted by Unknown No comments
Semakin hari orang yang ngeblog (blogger) tak ingin susah dalam mengelola blognya, apalagi soal cara posting. Karena untuk mengumpulkan kata menjadi sebuah tulisan saja sudah semakin sulit, (Baca : semakin malas mengupdate blog). Sehingga kini platform blog banyak memberikan tawaran yang memungkinkan banyak cara untuk posting ke blog, tidak harus login ke akun blognya.

Bisakah blog diupdate via email? Bisa. Teringat dengan posterous yang merupakan salah satu platform blog, memang tidak terlalu populer, karena kemudahan dalam posting yaitu bisa lewat email membuatnya banyak yang suka. Di blogger.com atau blogspot yang merupakan salah satu website yang masuk 10 besar di Indonesia versi alexa yang paling ramai, Blogger pun juga bisa diupdate via email.

Bagi yang sering ngubek-ngubek dasbor atau settingan blognya mungkin pernah menemukan. Tetapi yang belum tahu, Belajar Ngeblog di BLOG akan berbagi cara mengatur blognya agar bisa diupdate lewat email. Sehingga akan memiliki alamat email pribadi dan rahasia untuk memposting konten ke blognya.

Cara Update/Posting ke Blog lewat Email
1. Login ke akun blogger.com
2. Pilih Setelan lalu klik Seluler dan email
3. Di settingan Email, ketiak kata rahasia (scret word) untuk pelengkap alamat email

Cara Update (Posting) ke Blog lewat Email

4. Selanjutnya ada pilihan segera publikasikan dll, jika ingin mengaktifkan pilih saja.
5. Jangan lupa Simpan setelah jika sudah selesai.

Sekarang kita sudah punya alamat email yang apabila kita mengirim ke alamat email tersebut akan segera dipublikasikan di blog. Misalnya alamat email itu,adminblogku.update@blogger.com, jika kita benar-benar mengaktifkan fitur ini jangan sampai alamat email itu dibagikan atau diberitahukan ke khalayak ramai, untuk menghindari hal yang tidak diinginkan. Kecuali jika ingin membuat blog keroyokan yang diupdate oleh beberapa orang.

Dibalik kemudahan dari update atau posting blog lewat ini tentu ada juga kekurangannya, diantaranya : Kita tidak bisa mengatur (Setelan entri) tersebut seperti label, atau meta tag description. Semoga tutorial sederhana ini memberikan pengetahuan baru dan bermanfaat.

Membuat Gadget Daftar Link Dibuka di Tab Baru

8:02:00 PM Posted by Unknown No comments

Link atau tautan, hampir pasti sering digunakan blogger, baik itu saat menulis postingan atau menambahkannya di sidebar sebagai widget (gadget). Memang halaman blog selalu terhubung dengan halaman web atau blog lain. Baik itu link yang mengarah ke halaman-halaman blog sendiri atau link yang mengarah keluar dari blog kita.

Di blogger.com atau blogspot juga ada gadget daftar link selaindaftar blog. Kedua gadget ini hampir sama, tetapi daftar link bisa digunakan untuk menambahkan link tertentu atau halaman tertentu di sidebar blog. Sedangkan daftar link lebih seperti blogroll untuk menambahkan link blog dan bisa melihat tulisan (post) terbaru dari blog itu.

Memakai gadget Daftar Link dari blogspot tentu lebih mudah daripada membuat secara manual dengan HTML. Kita tinggal memasukan URL dan namanya. Kelemahan menggunakan gadget Daftar Link ini adalah link akan dibuka di tab yang sama, sehingga apabila ada yang mengklik link di gadget itu akan menutup blog kita dan tergantikan dengan halaman yang diklik itu.

Dengan Daftar Link yang dibuka di tab yang sama tentu membuat blog kita menjadi tidak terlihat lagi. Oleh sebab itu perlu diubah agar link di gadget Daftar Link tersebut terbuka di tab baru. Sehingga blog kita bisa tetap terbuka, dan link yang diklik akan dilihat di Tab baru. Cara membuat gadget daftar link dibuka di Tab baru cukup mudah. Jika kita sudah menambahkan gadget Daftar Link itu, selanjutnya kita edit template blog.

Cara Membuat Gadget Daftar Link Dibuka di Tab Baru
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode kode berikut ini:
<li><a expr:href='data:link.target'><data:link.name/></a></li>

5. Ganti kode di atas dengan kode berikut:
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>

6. Simpan Template jika sudah selesai.

Begitulah cara membuat link terbuka di tab baru.

Tuesday, November 6, 2012

Cara Membuat Efek Zoom dan Berputar Pada Gambar di Setiap Postingan

8:24:00 PM Posted by Unknown 2 comments

Kali ini saya posting "Cara Membuat Efek Zoom & Berputar Pada Gambar Di Setiap Postingan" Sebelumnya saya juga posting Cara Membuat Efek Zoom Pada Gambar. Trik ini cukup mudah dan simpel kok. tinggal copy lalu paste.. hhehe oke langsung aja ikuti caranya dibawah ini
  1. Login ke blogger
  2. Masuk ke Rancangan -- Edit HTML
  3. Cari kode ini ]]></b:skin>
  4. Paste kode dibawah ini diatas kode ]]></b:skin>


.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}

     5. Lalu Save. Dan Lihat Hasilnya.

Cara Menghilangkan Code Captcha (Verifikasi Kata)

4:00:00 PM Posted by Unknown No comments
Saat mau berkomentar harus menuliskan captcha memang bisa bikin jengkel, dan mengurungkan niatnya untuk berkomentar. Apa itu captcha? Captcha adalah suatu bentuk uji tantangan-tanggapan (Challange-response test) yang digunakan dalam sebelum post komentar untuk memastikan bahwa komentar itu ditulis oleh manusia bukan robot. Kode captcha biasanya kombinasi antara angka dan huruf.

Beberapa platform blog menyediakan fitur captcha, kalau di blogspot versi bahasa Indonesianya namanya Verifikasi Kata. Sering saya alamai ketika sudah menulis komentar, tetapi untuk postnya harus menuliskan kode captcha yang sulit untuk ditebak, huruf apakah itu. Untuk verifikasi kata di blogspot ini bisa di non aktifkan, sehingga pembaca blog yang mau komentar tidak kesulitan.
Cara Menghilangkan Kode Captcha (Verifikasi Kata)

Bagaimana cara menghilangkan kode captcha atau verifikasi kata di kotak komentar? Caranya sangat mudah, untuk lebih enaknya, simak langkah-langkahnya berikut ini :

1. Login ke akun blogger.com
2. Pilih Setelan kemudian klik Pos dan komentar
3. Di situ kita bisa mengatur komentar di blog, seperti gambar ini

Cara Menghilangkan Kode Captcha (Verifikasi Kata)

4. Untuk Tampilkan verifikasi kata? pilih Tidak
5. Simpan setelan jika sudah selesai

Seperti itulah pengaturan untuk komentar. Memang sih, untuk meminimalkan komentar Spam (Sampah), kita bisa memperketat aturan komentar, misalnya dengan moderasi komentar atau menampilkan verifikasi kata. Semua terserah kamu sebagai pemilik blog. Memang akhir-akhir ini banyak komentar yang hanya ingin meninggalkan link di komentar. Tetapi blogspot sendiri sudah mempunyai filter Spam, yang mendeteksi komentar SPAM dan memasukannya di kotak komentar Spam. 

Cara Membuat Widget Sexy Social Bookmarks

3:54:00 PM Posted by Unknown No comments

Menambahkan Widget Sexy Sosial Bookmarks

Blog atau tulisan kita ingin dibookmark pembaca? salah satu yang bisa kita lakukan agar tulisan kita dibookmark oleh pembaca, maka kita harus mempermudah pengunjung blog kita untuk membookmark tulisan kita. Dengan menambahkanWidget Sexy Sosial Bookmarks akan mempermudah tulisan kita menyebar ke social network atau sosial bookmark.

Setelah dulu pernah kita membahas cara menambahkan addthis untuk membagikan tulisan, dan menambahkan sosial bookmarking lokal, sekarang kita akan belajar menambahkan widget sosial bookmarking. Manfaat yang kita dapatkan dari menambahkanWidget Sexy Sosial Bookmarks akan mendatangkan traffik yang meningkat, karena tulisan kita yang menurut pembaca menarik bisa di share dengan mudah ke twitter, atau facebook.


Cara Menambahkan Widget Sexy Sosial Bookmarks
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini </head>
6. Setelah itu taruh kode berikut ini di atasnya.
    <style type='text/css'>
    div.sexy-bookmarks {
    height:54px;
    background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) no-repeat left bottom;
    position:relative;
    width:540px;
    }
    div.sexy-bookmarks span.sexy-rightside {
    width:17px;
    height:54px;
    background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) no-repeat right bottom;
    position:absolute;
    right:-17px;
    }
    div.sexy-bookmarks ul.socials {
    margin:0 !important;
    padding:0 !important;
    position:absolute;
    bottom:0;
    left:10px;
    }
    div.sexy-bookmarks ul.socials li {
    display:inline-block !important;
    float:left !important;
    list-style-type:none !important;
    margin:0 !important;
    height:29px !important;
    width:48px !important;
    cursor:pointer !important;
    padding:0 !important;
    }
    div.sexy-bookmarks ul.socials a {
    display:block !important;
    width:48px !important;
    height:29px !important;
    font-size:0 !important;
    color:transparent !important;
    }
    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
    background:url(&#39;http://i941.photobucket.com/albums/ad259/spiceupyourblog/sexybookmarksbuttons.png&#39;) no-repeat !important;
    }
    .sexy-furl {
    background-position:-300px top !important;
    }
    .sexy-furl:hover {
    background-position:-300px bottom !important;
    }
    .sexy-digg {
    background-position:-500px top !important;
    }
    .sexy-digg:hover {
    background-position:-500px bottom !important;
    }
    .sexy-reddit {
    background-position:-100px top !important;
    }
    .sexy-reddit:hover {
    background-position:-100px bottom !important;
    }
    .sexy-stumble {
    background-position:-50px top !important;
    }
    .sexy-stumble:hover {
    background-position:-50px bottom !important;
    }
    .sexy-delicious {
    background-position:left top !important;
    }
    .sexy-delicious:hover {
    background-position:left bottom !important;
    }
    .sexy-yahoo {
    background-position:-650px top !important;
    }
    .sexy-yahoo:hover {
    background-position:-650px bottom !important;
    }
    .sexy-blinklist {
    background-position:-600px top !important;
    }
    .sexy-blinklist:hover {
    background-position:-600px bottom !important;
    }
    .sexy-technorati {
    background-position:-700px top !important;
    }
    .sexy-technorati:hover {
    background-position:-700px bottom !important;
    }
    .sexy-myspace {
    background-position:-200px top !important;
    }
    .sexy-myspace:hover {
    background-position:-200px bottom !important;
    }
    .sexy-twitter {
    background-position:-350px top !important;
    }
    .sexy-twitter:hover {
    background-position:-350px bottom !important;
    }
    .sexy-facebook {
    background-position:-450px top !important;
    }
    .sexy-facebook:hover {
    background-position:-450px bottom !important;
    }
    .sexy-mixx {
    background-position:-250px top !important;
    }
    .sexy-mixx:hover {
    background-position:-250px bottom !important;
    }
    .sexy-script-style {
    background-position:-400px top !important;
    }
    .sexy-script-style:hover {
    background-position:-400px bottom !important;
    }
    .sexy-designfloat {
    background-position:-550px top !important;
    }
    .sexy-designfloat:hover {
    background-position:-550px bottom !important;
    }
    .sexy-syndicate {
    background-position:-150px top !important;
    }
    .sexy-syndicate:hover {
    background-position:-150px bottom !important;
    }
    .sexy-email {
    background-position:-753px top !important;
    }
    .sexy-email:hover {
    background-position:-753px bottom !important;
    }
    </style>

7. Cari kode <data:post.body/> dan taruh kode berikut di bawahnya
<div class='sexy-bookmarks'>
        <ul class='socials'>
        <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-syndicate'><a href='http://kurniasepta.blogspot.com/feeds/posts/default' title='Subscribe to RSS' rel='nofollow'/></li>
        <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        </ul>
        <span class='sexy-rightside'/></div>

8. Ganti FEED saya yang bertuliskan merah miring, dengan FEED kamu sendiri, dan simpan jika sudah selesai.