Zombi Berjalan Pada Blog

Cara Membuat Zombie Berjalan Di Blog - Blogger semakin banyak dukungan penuh untuk mendapatkan pernak-pernik ataupun widget untuk menambah kesan menarik, keren ataupun bagus agar blog anda terlihat sedemikian menariknya, tapi ingat gunakan widget yang anda butuhkan agar tidak terlalu berat blog anda saat dibuka.

Nah kali ini saya mau share gimana agar zombie berjalan pada blog kita.
Langkahnya :
1. Login akun blogger anda.
2. Klik Template » Edit HTML » Lanjutkan » Centang  Expand Template Widget

3. Cari kode </body>, lalu pastekan kode zombie dibawah ini yang kalian suka diatas kode yang telah dicari tadi.

Zombie 1

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4mwSKK9h1JN7xfjq5GQfw6H6ZRGYymWPHOKILXKIT6eED30RabiaaXpc-qQdK5Hyhxa4oNw3XxLrmM2vRYnugICKtCLmqlRgjKP92uThVey3zbb66OJkzyk_M7E1LblmDYCrbth2_MQ/s120/zombie-1.gif' tyle="border:0; background:none; padding:0; box-shadow: none;"/></marquee>

Zombie 2

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqZEjhWPzKz-aZMHYvgv7QNu5bTxTVlbrSdJ9Sh6EyrmFtmzct1Lbkpbyz_Ej8dpBRhlUp4b-G3MyBVfw26Nt6faCFXEvXkcE10jf7LE0a0SNpJ6MXRPni9kBPM8BD-LKuMD5FmItgerg/s100/zombie-2.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

Zombie 3

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcwG3dqBSvPuPyrFmS_m88vXqSztOkGb7MRJL7m8lvlF59C0kY8XZjj8kVBj16CvrRaZSy2_3owhcv96AUjvRterZmeUV6Z4aagbAm4vvrU7btB-R2_Zxtv_ENUlJDAwb6L3fXiWVYHcY/s117/zombie-3.gif' style='border:0; background:none; padding:0; box-shadow: none;'/></marquee>

Zombie 4

<marquee direction='right' scrolldelay='160' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwQIT4ULJWZJQQJzxYU1s4OhF0kKbZcO3vISthhw2UUmGv3rgVZIAllR25ThesxL4mQCRy5pMQlp9suTotCfWVqhrONc8dQzWW_C1Jq1JaSM8Cpmxjx76Qsimdxg5IpJSW1n1TlCu0ThE/s138/zombie-4.gif' style='border:0; background:none; padding:0; box-shadow: none; width:80px;'/></marquee>

Zombie 5

<marquee direction='right' scrolldelay='260' style='position:fixed; bottom:10px; left:0; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbUg-y4PKpnmvr_B5aFzXyyMgQ6PFkaKI41-gDEDKnr8paPIBtRVAQD1VhxMpmjZLsLdef-Lu6-PiYydlwjxkhvcafx4DITUmuoeuO26VsQ8PqDE9Lk9M5evVG1pO2M94uhRGA6cTmZGQ/s148/zombie-5.gif' style='border:0; background:none; padding:0; box-shadow: none; width:70px;'/></marquee>

Keterangan :
direction='right' : untuk arah zombie berjalan dari kiri ke kanan.
scrolldelay='260' : kecepatan berjalan zombie
bottom:10px; left:0; width:100%; : letak zombie pada layar monitor

Animasi Kusor 3 Warna

Cara Membuat Kursor Blog Di Kelilingi Tiga Bintang Berekor , Sambil Mencari informasi dan sedikit waktu untuk membuka blog oktri ingin berbagi tutorial blog yang Mungkin sobat udah pada tahu tentang artiukel ini ,Cara membuat kursor Blog di kelilingi 3 bintang warna wani berekor, tapi Mazz Puji ingin berbagi dengan yang belum tau, kali aja ingin menghiasi tampilan kursor pada blognya, bagi yang ingin mencobanya silahkan ikuti tutorial berikut ini.

- Langkah pertama login ke blog sobat

- Kedua masuk dashboar>>tata letak >> Add gadget >> pilih HTML/javascript

- Copy paste code script di bawah ini

<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"></div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"></div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"></div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{

if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}

}
function winsize()

{
var oh,sy,ow,sx,rh,rw;

if (domWw)

{

if (d.documentElement && d.defaultView &&

typeof d.defaultView.scrollMaxY == "number")

{

oh = d.documentElement.offsetHeight;

sy = d.defaultView.scrollMaxY;

ow = d.documentElement.offsetWidth;

sx = d.defaultView.scrollMaxX;

rh = oh-sy;

rw = ow-sx;

}

else

{

rh = r.innerHeight;

rw = r.innerWidth;

}

h = rh;

w = rw;

}

else

{

h = r.clientHeight;

w = r.clientWidth;

}

}

function scrl(yx)

{

var y,x;

if (domSy)

{

y = r.pageYOffset;

x = r.pageXOffset;

}

else

{

y = r.scrollTop;

x = r.scrollLeft;

}

return (yx == 0)?y:x;

}

function mouse(e)

{

var msy = (domSy)?window.pageYOffset:0;

if (!e) e = window.event;

if (typeof e.pageY == 'number')

{

my = e.pageY - msy + 16;

mx = e.pageX + 6;

}

else

{

my = e.clientY - msy + 16;

mx = e.clientX + 6;

}

if (my > h-65) my = h-65;

if (mx > w-50) mx = w-50;

}

function assgn()

{

for (j = 0; j < 3; j++)

{

dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;

dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;

}

stp+=s;

for (i = 0; i < n; i++)

{

if (i < n-1)

{

vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;

vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;

vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;

}

else

{

vx[i].top = dy[0]; vx[i].left = dx[0];

vy[i].top = dy[1]; vy[i].left = dx[1];

vz[i].top = dy[2]; vz[i].left = dx[2];

}

}

setTimeout(assgn,t);

}

function init()

{

for (i = 0; i < n; i++)

{

vx[i] = document.getElementById("x"+(idx+i)).style;

vy[i] = document.getElementById("y"+(idx+i)).style;

vz[i] = document.getElementById("z"+(idx+i)).style;

}

winsize();

assgn();

}

if (window.addEventListener)

{
window.addEventListener("resize",winsize,false);

window.addEventListener("load",init,false);

document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);

document.attachEvent("onmousemove",mouse);

window.attachEvent("onresize",winsize);

}

</script>

 - Teraakhir save template

Keterangan : ganti script yang berwarna orange dengan warna favorit warna sobat

Semoga Membantu dan bermanfaat

Cara Membuat Kotak Komentar Blog Keren

Kronolologi Komentar ini Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga.
Ini Priview nya

• Login ke akun blogger dan masuk ke Edit HTML

• Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga

• Centang "Expand Widget HTML" ( bila perlu ) Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 

/* CSS Komentar */ #form-wrapper {margin-top:20px;} #comments{overflow:hidden;} .comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34); border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;} #comments h4{display:block;padding:5px;line-height:30px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;} #comments h4,.comments .user a{font-size:14px} #comments h4{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid; border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0} h4#comment-post-message {display:none} #comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;} .comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px} .comments .comments-content .comment:first-child {padding-top: 0px;} .comments .thread-toggle { display: none;} .comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;} .comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;} .comment-thread{color:rgb(230, 230, 230); font-size:13px;} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a, .comments .user a, .comments .comment-thread.inline-thread .user a {color: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);} .comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px; max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px} .comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative; transition: all 1s ease-out 0s;} .comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; } .comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; } .comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .comment-thread {margin: 20px 0px;} .comments .comments-content .icon.blog-author{display:block; width:0; height:0; border:13px solid transparent; border-right-color:rgba(255, 0, 0, 0.1); position:absolute; right:-1px; bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; } .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left: 1px solid rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40); font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black; text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);} .comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;} .comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);} .comments .comments-content .loadmore {margin-top:0px;} .comment .continue{display:none} #comment-editor{width:103%!important;} .comment-form{width:100%;max-width:100%;margin-top:20px;}

Kemudian simpan dan lihat hasilnya….!Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe

Selamat mencoba dan semoga bermanfaat..