Lazy Page Loading Effect

Fitur yang dimiliki Lazy Page Loading Effect :

Ini adalah membuat search engine yang ramah sehingga tidak akan mempengaruhi kecepatan situs apapun. Hal ini kompatibel dengan browser hampir setiap yaitu Chrome, Firefox, Internet Explorer, dan lain-lain Ini memiliki efek memuat yang beragam, sehingga Anda dapat memilih sesuai dengan kebutuhan keinginan Anda. Hal ini fleksibel coding sehingga Anda dapat menyesuaikannya tanpa keraguan apapun. Ini juga akan membantu blog mereka yang mengambil sedikit waktu untuk memuat karena fitur pemuatan akan menjaga pengunjung Anda tertarik pada blog Anda.

Cara Membuatnya:

Buka akun Blogger Anda.
Masuk ke menu Template >> Edit HTML >> Proceed
Sekarang dalam cari kode dibawah ini :
]></b:skin> 
Pastekan kode dibawah ini diatas pada kode di atas:

#mbl-lazyloading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(Loading-GIF-Here) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#mbl-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#mbl-loader {
    height: 100%;
    display: none;
}

Cari kode dibawah ini :
</head>
Pastekan kode dibawah ini, diatas pada kode </head>

<script>
(function($){
$("html").removeClass("MD");

$("#header").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#mbl-progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
    $("#mbl-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#mbl-lazyloading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

Cari lagi kode </body> dan pastekan kode dibawah ini diatasnya :

• Kode ini ditampilkan jika Anda ingin menunjukkan ini efek pemuatan yang hanya ada di Home Page. (Recommended)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://putradoi.blogspot.com">Mazz Puji</a></div></div></b:if>

• Paste code berikut jika Anda ingin melihat efek loading pada setiap halaman dari blog Anda.

<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://putradoi.blogspot.com">Mazz Puji</a></div></div>

TIP:

Anda harus memilih apakah Anda ingin menampilkan efek pemuatan hanya pada homepage atau website masing-masing dan setiap yang ada di blog Anda. Menurut kami, Anda harus menjaga efek pemuatan di situs Anda karena efek beban berulang dapat mengganggu pengunjung Anda.

Sekarang dari coding CSS di atas Ganti  Loading-GIF-Here dengan salah satu efek pemuatan berikut animasi yang paling Anda sukai.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujeIiOe4pPanQIyawq2bdUq3ccbuU3N4IglGtKe5DeCALo5fPorEZsYyPM09kYM2dYOEOXyvJVoNrhLLTlxipZ95CJVnHd1WpqgtIaTqcR6bAn9PyJoK4nP2F0DKTSBj8E-0dO8zb7s0/s1600/MBL-Loading-1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1tjf9tCUa4Lv9Nou4bMK9_GC-e6InwTHEXFjW1NZIt27jSoq9V3dEafJWsedKtZLiReuLwr6ckpOMDOmm2nrw4JhcZkwan1N-7KHsfDXBQypaWIL5gfA20Rj8RSt8_kYZcuZSgNocjbM/s1600/MBL-Loading-2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJjTwLBqv4Oef4KBVshX1JXi68l_bfYYmpO2zNEdxUjRWSjFY-mJsWpzbI69St6JG2j3upW5aRGTW7FyrRSOrA8L_QO53TCLZYCNp1xH_6JIawncG_f0gboGlZxnASkQ2wPRPk5nAooo/s1600/MBL-Loading-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1oFJsGkasUkH_7sAY8VUvrimWzpFyecmya8yvoiRQNEBDFa0r-kl7q1Dg8hGituh7E97Fv2rMMSsq8P1TlrMfvuPoGmx0CPAoZNUNBNbX2b5v-ZYczcA2tqTRgoKCPYi6tmneUeeaIo/s1600/MBL-loading-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyvOp-8sYo72nL3FAQyAs1TwjEWShHln4tvQe9wJujp_axs3n_ZdObVfjexa7cdAADMg5EBSxE-hUO4TNp63pOTuRhYdu8xFFWLVUNc-mGwACRai7kpI6LXa2NM9QSUsmMaXsn6-7uBQ/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXxhkqx50jLQwCJ7ZzfQXukDrz2fCO8_SJD9GypHTmaSPnfIk9bGI3swPpbRhO7o2Fo9IH80AtdQthyphenhyphenL_wa74OxDNU_yDrPfAe5L0k3FrwUj-Q8SwA_D74oMGztO-CdB4BPh8X1YdJQc/s1600/MBL-loading-6.gif

Oh Za Sob Yang Terakhir Jangan Lupa Simpan Tamplate_Nya Za... Good Luck Sob Happy Blogger

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'>//<;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/AVvXsEiv5Vkc9tTRkDJECGqM-fHu67yCJ6FrYnrNmYaPP81UiczzC3RxSKSKZ58jnJtLbOi0aHCMdUqGM0T6Ah9jNY4or2vyC8zMet7p2usRQLTxeDq997KBTTw6bOuYFmGCiT1XKDYlKQq9-bI/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script> 

Simpan Template Anda... !!!
Semoga Berhasil Happy Blogger

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.

Animasi CSS 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-"] {/*putradoi.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;}/*putradoi.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;}}/*putradoi.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 pasang

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 :)

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.

Widget Slide Panel With CSS & jQuery Effect

Cara 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 transparent;}
</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.

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/AVvXsEhi5cKtyfg4jH9y0-l7WuO5hAX8Kvigtm_uzu-nUxwGG5UNGaVcH-J3lE3_PNsufngC0V-2_I8e6K5hkBmhDFHPW0PFP3CCa6WHknqT8DgDgSmAziRMHVMbaHnDVLYT97nI2KkD5vcF1AiF/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.

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 Blogger

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
Good Lock Salam Happy Blogger

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

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/AVvXsEittI6jq7FaaDUEumAdl3Rd_VLCgS8mxhLNcj7Ee5h_5FhOum7pjUn0IoWsC9gRXeWovzQFEu_NSgKu6vtCf0UuDhkyJdu8aoM-pnskdjyCooOOAURwwmgngneOEU0Wops6R5eP4oae2MQ/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/AVvXsEiZOMYNa_Ab-M7Qsv9rnDP7S9SWY6qCaCk8LcKMKZWq7UF5gsQ5iKm-lsL_DwwZh1WDaSAbFVFHEJeUvAbCeaVnpBU2UVTWT0e5bHf9ar8Kuh7zY5jBM3zgvpGYKQ9CBZW75jjgufxYpFI/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/AVvXsEiUfIKryX5QzgwUyTabFxnKVYzofC8PC5QvaKL1SMFuZb03wSbxqtzvYpe5MHTf8JGSi_zoVDFuXsBYrAox99ADGfHyxoAGdOYW8CbU5PYdV_ZsGZKfbn7nsjEnEi-nBpLbyZ_rJgLOnm8/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/AVvXsEgnfaD2PhQXyVPCot3SKfeRzwJJwjOU_nG1TW7Bcav6MdUsOY9hVq4V1fkQr5IemxKv8PFeT37CSzYvRxXYNTjoyTpJEaS7f-BrBUPFt2VpluyibhevHVFesLzlQIVT_7RFInJt4FJsfok/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/AVvXsEj57x-PyHHG4uFR_Ve0Te0E1Hye1DFKDRnq5ASlfnrs4Kd91ehMXW5w3l5lNvoNNAxPip4EQ2cJ-wB01xP8pf7wjWRnspneTV-PcTe_CrDqGPcQ3yhhzKaksYmfS1EHaOnNbLK_c8Ctdus/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

Jet Li The Master

Movie : Jet Li The Master
Release Date : 26 May 1989
Genre : Box Office
Cast : Jet Li,Yuen Wah,Crystal Kwok,Jerry Trimble,Anne Rickets 
Quality : DVDRip
Subtitle : English (muxed : you can turn em off)
Trailer : Mazz Puji Putra Doi 
Sinopsis  :

The story begins in Los Angeles, with a fight between Uncle Tak (Yuen Wah) and Johnny (Jerry Trimble), destroying Tak's store in the process. Tak loses and tries to escape, but Anna (Anne Rickets) miraculously comes to save him. Jet (Jet Li) arrives by bus. He takes a taxi driven by a friendly Jamaican man. Three thieves take his rucksack, and he chases them through the streets on foot while they drive. He catches them and they see his fighting skills, and they subsequently beg him to be his master. They take Jet to their home but they meet with a dangerous gang. Jet steps in and defends the buddies, but their home is set on fire. Meanwhile, Johnny and his gang are closing down kung fu schools and making a name for themselves. Jet meets May (Crystal Kwok), and also meets Johnny in a carpark, quickly learning what Johnny's goal is. Unfortunately, Anna and Jet's friends get beaten up, so Jet trains his friends to defend themselves. Jet and his friends go to Tak's store and prepares to deal with Johnny's gang. The three friends put their newly found skills into practice whilst Jet fights the gang. Jet and Johnny fight outside the store until the police step in. Jet and Tak have a final strain on their relationship. Downbeat, Jet decides to take a bus to the airport, intending on returning to Hong Kong. On his way, he is attacked by a dreadlocked man armed with a shotgun out. The man fires, killing the bus driver, as May follows the bus with her car. In the meantime, Tak and the three friends make their way to a rooftop for a final duel with Johnny's gang. After the bus incident, Jet and May go to Tak's store to find a note and a will. They quickly make their way to the rooftop, and Jet makes a surprise attack on Johnny's gang. He again fights with Johnny, while Tak and his friends save Anna from danger. During the fight, Jet and Johnny drop down, smashing a gas pipe. Just as Jet thinks the fight is over, Johnny kicks a switch that, causing them to move to the building edge. Jet grabs a rope and just as he is about to fall to his death, Tak, Anna, May and his three friends save him as the rope breaks.

Watch Trailer

Jet Li Hero

Movie : Jet Li Hero
Release Date : November 30, 2004
Genre : Box Office
Cast : Jet Li, Tony Leung Chiu Wai, Maggie Cheung, Ziyi Zhang, Donnie Yen 
Quality : DVDRip
Subtitle : English (muxed : you can turn em off)
Trailer : Mazz Puji Putra Doi 
Sinopsis  :

Director Zhang Yimou brings the sumptuous visual style of his previous films (Raise the Red Lantern, Shanghai Triad) to the high-kicking kung fu genre. A nameless warrior (Jet Li, Romeo Must Die, Once Upon a Time in China) arrives at an emperor's palace with three weapons, each belonging to a famous assassin who had sworn to kill the emperor. As the nameless man spins out his story--and the emperor presents his own interpretation of what might really have happened--each episode is drenched in red, blue, white or another dominant color. Hero combines sweeping cinematography and superb performances from the cream of the Hong Kong cinema (Maggie Cheung, Irma Vep, Comrades: Almost a Love Story; Tony Leung Chiu-Wai, In the Mood for Love, Hard Boiled; and Zhang Ziyi, Crouching Tiger, Hidden Dragon). The result is stunning, a dazzling action movie with an emotional richness that deepens with every step.

Watch Trailer