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

Description: Zombi Berjalan Pada Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Zombi Berjalan Pada Blog

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

Description: Animasi Kusor 3 Warna Rating: 4.5 Reviewer: Unknown - ItemReviewed: Animasi Kusor 3 Warna

Animasi Meteor Jatuh

Kali Ini MAzz Puji Akan Memberikan Tips Buat Shobat Blog , Untuk Membuat Animasi Yang Sangat Unik Yaitu Animasi Meteor JAtuh Pada Blog

Cara Membuat_Nya Cukup Simpel
Sebelum Mazz Puji Kasih Tau Cara Membuat_Nya, MAzz Puji Cuma Pesan Kalau Sampean Sudah Memasang Animasi Meteor Jatuh Ini Jangan Sampai Sampean Kejatuhan Meteor Yang Anda Buat Sendiri .. Wkkwkwkwkwk ... Sayang Kan Broww Kl Gosong.... Ha ha ha ha.....

Oce Dach Jangan Basa Basi Lagi Ikuti LAngkah Dibawah Ini :

Pertamax Anda MAsuk Di Menu  Edit HTML
Setelah Itu Anda Cari Menu  </head>
Letakkan Kode Javascript dibawah Ini Tepat Di atas Kode </head>

<script language="javascript">
nd_mode="meteor";
nd_control="on";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="1";
nd_hMargin="1";
</script>
<script language="javascript" src="http://chika88.wen.ru/js/mazzpuji.js"></script>

Oce Sob Begitulah Cara Membuat Animasi Meteor JAtuh, Oh Ya Sob Jangan Lupa Klik Simpan Template YA .. Good Lock Salam Happy BloggerDescription: Animasi Meteor Jatuh Rating: 4.5 Reviewer: Unknown - ItemReviewed: Animasi Meteor Jatuh

Animasi Matric Background Blog

Sebelum saya mengasih tahu caranya, saya cuma mau kasih saran. tolong berhati-hati ya dalam mengotak-atik code scrip pada html. Karena jika kita salah naruh code scripnya akan mengakibatkan kerusakan pada tampilan blog anda. maka jangan salahkan saya bila terjadi kerusakan pada blog anda. Ada baiknya kita copy dulu code sebelumnya kenotepad untuk menghindari kesalahan dalam menaruh kode scrip.berikut adalah koleksi-koleksi efek animasi cara mengubah tampilan background pada blog agar terlihat menarik.

Background Dengan Efek  ( Matrik )
Cara Membuat_Nya

• Masuk Menu Edit HTML
• Cari Kode ]]></b:skin>
• Letakan Kode Css Ini Diatas Kode ]]></b:skin>

.nackvision.com {Background code} body {background-image: url(http://i560.photobucket.com/albums/ss44/erge32/dot.gif);}

Jika Anda Mau Mengganti Gambar_nya Dengan Foto Atau Animasi Background Anda Sendiri Anda Bisa Mengganti Alamat image  http://i560.photobucket.com/albums/ss44/erge32/dot.gif  Dengan Alamat Foto Atau Animasi Anda Sendiri .
Atau Anda Bisa Menggunakan Gambar Di Bawah Ini :

(http://s690.photobucket.com/albums/vv270/alwi/alwi07bg.png)

(http://i690.photobucket.com/albums/vv270/alwi/bggaris-1.gif)

(http://i690.photobucket.com/albums/vv270/alwi/bggaris.gif)

Oce Sob .. SilahKan Mencoba Sob Jangan Lupa Lihat Menu MAzz Puji Yang Lain Sob... !!! Thank Happy BloggerDescription: Animasi Matric Background Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Animasi Matric Background Blog

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

 <style>#mazzpuji img{float:right;
background:#2b2b2b;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
border:2px solid #2b2b2b;
box-shadow:1px 1px 20px #000;
-moz-box-shadow:1px 1px 20px #000;
-webkit-box-shadow:1px 1px 20px #000;
margin:0px;
-o-transition:margin-left 1.5s ease-in 2s,margin-top 1.5s 2.5s,
-o-transform 1.5s ease-out 1s,opacity 2s ease-in;
-moz-transition:margin 1.5s ease-in 2s,
-moz-transform 1.5s ease-out 1s,opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s,
-webkit-transform 1.5s ease-out 1s,opacity 2s ease-in}
#mazzpuji img:hover{
opacity:0.6;
-o-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-moz-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-webkit-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-o-transition:margin-left 0.5s ease-in 0.4s,margin-top 0.5s,
-o-transform 0.5s ease-out 1.4s,opacity 3s ease-in 4s;
-moz-transition:margin 1.5s ease-in 0.4s,
-moz-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
-webkit-transition:margin 1.5s ease-in 2.4s,
-webkit-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
box-shadow:1px 1px 15px #33F;
-moz-box-shadow:1px 1px 15px #33F;
-webkit-box-shadow:1px 1px 15px #33F;
}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="mazzpuji"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="mazzpuji">
<a href="http://http://mazzpuji.blogspot.com/2013/04/cara-membuat-gambar-berputar-dan.html/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbAz-qZ-2A1ZbwYcOFr-eSwvkPG0ROIiBmyr_2lsmmHv2dF8KWXyiQnrD5mrlHnRRgITpSaXjfr864Dpvj1XH98hLRqHvwZEfIN-hvVufd_JSswB4Jo6nkJ7d16nTxL6806nMZ2ojikMP_/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Semoga bermanfaat Sobat.

Description: Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Widget Slide Panel With CSS & jQuery Effect

Tutorial Belajar Blog -Membuat Widget Slide Panel With CSS and jQuery Effect Inspirasi ini didapat dari tetangga blogger kita ut2a-4down blogmates. Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.

Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.

Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<style type="text/css">
/*
Visit: http://mazzpuji.blogspot.com/
*/
#paneloktri {display:block;}
#panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
.tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
.tombolpanel:hover {color:#ccc;}
.tombolpanel:after {content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('.tombolpanel').click(function() {
          $('#panel').slideToggle('slow');
          $('.tombolpanel span.in').toggle();
     });
});
</script>
<div id="paneloktri">
<div id="panel">

... ISI KONTEN DI SINI ...

</div>
<div class="tombolpanel">
<span class="in">Open Panel</span>
<span class="in" style="display:none;">Close Panel</span>
</div>
</div>

5. Klik Simpan, dan lihat hasilnya. :D

KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.

Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.Description: Widget Slide Panel With CSS & jQuery Effect Rating: 4.5 Reviewer: Unknown - ItemReviewed: Widget Slide Panel With CSS & jQuery Effect

Animasi Loading Page Blog dengan jQuery

Cara Membuat Animasi Loading Page Blog dengan jQuery, Merupakan Tutorial edit blog tidak beda jauh dari tips sebelum nya Cara Membuat Animasi Loading Page di Blog dan  , Untuk membedakan coba sendiri ataupun liat dari gambar yang sudah ada.

Sekilas Tentang  Animasi loading page memberikan tampilan yang penuh dan sesuai, artinya setelah loading page selesai, maka animasi loading juga selesai. Waktu loading page bisa diukur dengan adanya animasi ini, karena animasi ini menggunakan hitungan persen.

Script animasi loading page ini saya dapat dari om Google yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog Anda, langsung saja ikuti tutorial/panduan di bawah.

1. masuk ke Design > Edit HTML lalu cari kode ]]></b:skin> dan letakan kode berikut ini diatas ]]></b:skin>.

.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}




2. kemudian cari kode </head> dan letakan kode berikut ini di atasnya.



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sektim-project.googlecode.com/files/loadingpage.js' type='text/javascript'/>



3. Untuk kode yang diberi warna merah (jQuery), tidak usah dipasang lagi jika sudah terdapat di template Anda (cukup 1 saja).
4. Selanjutnya cari kode </body> dan letakankode berikut ini di atasnya.



<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>



5. Save template Anda dan coba buka blog Anda untuk melihat hasilnya.
6. Bila script tidak berfungsi silakan cek ulang apakah Anda sudah mengukuti langkah di atas dengan benar. Jika Anda sudah mengikuti semua langkah dengan benar namun scriptnya tidak berfungsi juga, berarti script tersebut bentrok dengan script yang lain.

Description: Animasi Loading Page Blog dengan jQuery Rating: 4.5 Reviewer: Unknown - ItemReviewed: Animasi Loading Page Blog dengan jQuery

Merubah Tanpilan Populer Post

Cara Merubah Tampilan Popular Post menjadi keren,

Widget Popular Post ini akan lebih manis lagi jika dipasang di sidebar blog. Supaya pengunjung mengetahui keberadaannya, dan supaya tampilan blog lebih cantik lagi. Daripada penasaran, mending dicek aja langsung widget popular post nya.

Berikut ScrenShotnya.

Yang dibawah ini adalah SSnya ketika salah satu popular post di sorot mouse

Berikut Ini Langkah Langkah Untuk Membuat Nya :

1. Login akun blogger sobat.
2. Menuju Ke menu Tata Letak
3. Sebelumnya Tambahkan Widget Popular Post Terlebih Dahulu pada blog sobat dengan cara Klik Menu Tata letak, Tambah Gadget, Popular post / Entri Popular, Pilih 7 Hari Terakhir, Centang Thumbnail gambar Dan Jangan Centang Cuplikan ! Jika sudah, simpan
4. Kemudian, Tambah gadget kembali, Pilih Html Javascript.
5. Masukan Semua kode dibawah ini.
<script language='Javascript'>document.write(unescape('%3C%73%74%79%6C%65%3E%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%2E%69%74%65%6D%2D%74%69%74%6C%65%7B%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%7B%62%61%63%6B%67%72%6F%75%6E%64%3A%20%6E%6F%6E%65%20%72%65%70%65%61%74%20%73%63%72%6F%6C%6C%20%30%20%30%20%74%72%61%6E%73%70%61%72%65%6E%74%3B%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%6C%69%73%74%2D%73%74%79%6C%65%3A%20%6E%6F%6E%65%20%6F%75%74%73%69%64%65%20%6E%6F%6E%65%3B%6D%61%72%67%69%6E%3A%20%33%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%20%30%20%21%69%6D%70%6F%72%74%61%6E%74%3B%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%69%6D%67%20%7B%70%61%64%64%69%6E%67%3A%33%70%78%3B%62%61%63%6B%67%72%6F%75%6E%64%3A%23%66%65%66%65%66%65%3B%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%66%6C%6F%61%74%3A%6C%65%66%74%3B%6D%61%72%67%69%6E%3A%30%20%36%70%78%20%30%20%30%3B%70%6F%73%69%74%69%6F%6E%3A%72%65%6C%61%74%69%76%65%3B%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%2D%77%65%62%6B%69%74%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%2D%6D%6F%7A%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%20%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%69%6D%67%3A%68%6F%76%65%72%20%7B%70%61%64%64%69%6E%67%3A%33%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%35%70%78%3B%2D%6F%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%20%20%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%7D%0A%3C%2F%73%74%79%6C%65%3E%0A%3C%64%69%76%20%73%74%79%6C%65%3D%22%70%6F%73%69%74%69%6F%6E%3A%20%66%69%78%65%64%3B%20%62%6F%74%74%6F%6D%3A%20%30%70%78%3B%20%72%69%67%68%74%3A%20%30%70%78%3B%22%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%68%65%72%6D%61%6E%62%61%67%75%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%72%65%6C%3D%22%64%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%32%35%70%78%22%3E%2E%3C%2F%61%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%68%65%72%6D%61%6E%62%61%67%75%7A%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%72%65%6C%3D%22%64%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%32%35%70%78%22%3E%2E%3C%2F%61%3E%0A%3C%2F%64%69%76%3E'));</script>
6. Dan kemudian simpan, dan lihat hasilnya, Semoga Membuat tampilan blog sobat menjadil lebih keren dan semoga bermanfaat :)

Description: Merubah Tanpilan Populer Post Rating: 4.5 Reviewer: Unknown - ItemReviewed: Merubah Tanpilan Populer Post

Animasi Loading Blog

1. Login ke akun blogger anda

2. Klik Template » Edit HTML » Lanjutkan »  Klik  Expand Template Widget

3. Tambahkan kode CSS berikut ini diatas ]]></b:skin>

.circlewrapper { width: 98px; height: 98px; float: right; font-size: 14px; text-align: center; text-shadow: 0 1px 1px black; } .circle { background-color: rgba(0,0,0,0); border:5px solid rgba(255,0,0,0.9); 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 #ff0000; 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 rgba(255,0,0,0.9); 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 #ff0000; 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 rgba(255, 0, 0, 0.9); opacity: .9; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 50px; box-shadow: 0 0 15px #ff0000; 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 #ff0000;} 50% { -moz-transform:rotate(145deg); opacity:1;} 100% { -moz-transform:rotate(-320deg); opacity:0;} } @-moz-keyframes spin2Pulse { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);} } @-webkit-keyframes spin1Pulse { 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0;} } @-webkit-keyframes spin2Pulse { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg);} } .circlebg { width: 53px; height: 53px; position: relative; border-radius: 50px; -moz-animation: spin3Pulse 3s infinite ease-in-out; -webkit-animation: spin3Pulse 3s infinite linear; } .circlewrapper2 { width: 53px; height: 53px; text-align: center; border-radius: 50px; border: 3px solid rgba(0, 0, 0, 0.9); padding: 8px; background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%); background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%); } .circlewrapper3 {float:right;} .circlewrapper3 a { width: 78px; height: 78px; float: right; font-size: 14px; text-align: center; border-radius: 50px; text-shadow: 0 1px 1px black; margin-top: -50px; position: absolute; line-height: 20px; } .circle4 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); } .circle5 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -51.5px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); } .circle6 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -103.5px; } .circle7 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -155px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); } @-moz-keyframes spin3Pulse { 0% { -moz-transform:rotate(360deg); } 100% { -moz-transform:rotate(0deg);} } @-webkit-keyframes spin3Pulse { 0% { -webkit-transform:rotate(360deg);} 100% { -webkit-transform:rotate(0deg); } } span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/ height: 4px; width: 4px; background: #fff; display: inline-block; margin: 2px 2px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -webkit-animation: loader 4s infinite; -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -webkit-animation-fill-mode: both; -moz-animation: loader 4s infinite; -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -moz-animation-fill-mode: both; animation: loader 4s infinite; animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/ span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;} span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;} span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;} span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;} span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;} span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;} @-webkit-keyframes loader { 0% {-webkit-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/ 50% {-webkit-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}} @-moz-keyframes loader { 0% {-moz-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;} 50% {-moz-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}} @-keyframes loader { 0% {-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;} 50% {-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/ .tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;} .loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);} .loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black; border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/ background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar

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

Dan langkah yang terakhir, pasang kode berikut dibawah  <div id='header-wrapper'>

<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'/>
</div>

Demikian tutorial yang saya buat mengenai Membuat Animasi Loading Di Header Blog,apabila anda sudah menggunakan script css pada tutorial membuat animasi loading blog, tinggal perlu lagi menambahkan css diatas , tinggal langsung saja pasangDescription: Animasi Loading Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Animasi Loading Blog

Mematikan fungsi Drag

Cara Mematikan Fungsi Drag Artikel Blog Guna mengantisipasipara pencuri konten banyak sekali setiap blog atau website menanggulangi hal ini dengan berbagai cara contoh dengan mematikan fungsi drag pada artikel blog. 

Pada kesempatan kali ini aku ingin berbagi Tips tentang bagaimana caranya mematikan fungsi drag tanpa javascript. sudah tentu dengan tidak menambahkan javascript tak akan mempengaruhi loading blog. untuk caranya cukup simple dan sangat mudah, berikut ini tipsnya :

1. silahkan login dulu ke blog kalian.

2. langsung saja menuju edit tamplate.

3. silahkan cari kode <body> pakai Control+F biar cepat

4. kalau sudah kalian temukan kodenya silahkan kalian ganti dengan kode dibawah ini.

<body ondragstart='return false' onselectstart='return false' style='-moz-user-select: none; cursor: default;'>

5. kalau sudah kalian taruh kodenya silahkan kalian simpan. dan coba drag artikel kalian.

Namun tips ini tidak mematikan fungsi klik kanan, selamat mencoba semoga Tips kali ini bermanfaat buat kalian semoga sukses dan happy blogging.

Description: Mematikan fungsi Drag Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mematikan fungsi Drag

Membuat Loading Blog Lebih Cepat

Hai sobat blogger, pada tutorial kali ini kita akan membahas bagaimana membuat loading blog lebih cepat hanya dengan meminimalisir load pada gambar yang ada. Ini juga akan memberikan efek pada gambar yang dinamis jika Anda scroll kebawah. Jadi ini akan sangat baik jika Anda membuat beberapa script dibawah ini, script? Yah sobat script, tetapi tenang saja ini mala memang membuat load gambar akan semakin cepat.

Cara Membuat_Nya ==>  Buka akun blogger Anda
Masuk ke menu edit HTML,
centang expand template ,
Cari kode dibawah ini :
</head>
Pastekan kode Javascript dibawah ini, diatas pada kode </head>

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-l2BVPQyRLLcjhwjo2H9MTH3IawmrS283UtyADbt333nPZxwgbBtdM1GIHH0iFj80SZVHbPByAyM3FLNbMAYw50BRFD_UsTu3U-Nhpkgv_as_ifiKDyP9z0PUr73ZaFtw7pQnUMaVZuo/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script> 

</head>

Simpan Template Anda... !!!
Semoga Berhasil Happy BloggerDescription: Membuat Loading Blog Lebih Cepat Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Loading Blog Lebih Cepat