Header Ads Widget

Responsive Advertisement

Kumpulan Widget Animasi Spiderman

Monoz 9:00 PM
SPIDERMAN...Salah satu superhero yang banyak disukai orang termasuk saya. Nah pada postingan artikel kali ini saya akan membahas beberapa widget yang bertemakan Spiderman. Ide untuk membuat kumpulan widget dengan karakter Spiderman saya dapatkan dari beberapa kali blogwalking ke blog tetangga kemudian timbul ide untuk membuat satu postingan tentang kumpulan widget bertemakan spiderman... Buat yang tertarik monggo langsung dipilih saja.

Anda mau pasang widget SPIDERMAN super keren ???
Nah, ikuti tutorialnya di bawah ini :

1. Climbing Spiderman for Blog
  • Login ke blog anda...
  • Klik "Option" kemudian klik "Template" Setelah itu klik "Edit HTML".
  • Cari kode <Body> kemudian letakan kode berikut ini tepat di bawah kode <Body> atau letakan di bagian gadget/widget.
    <script>
if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
</script>
<script>
var spideyImg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9wsyU6Mp5BAWBj3z5xiVJSPP16TPDIBw9zBvLzQoVnxq9_7bhIPQ6FEt2OhQuQsz5ULW8yPmPdDF8CzpBtTpXJaVObhxzy8HFBToGa1CliaeRuvGDMa-fffQ7vTvkUGX8KMmTqHkXks/s1600/MonozCore_Spiderman_Climb.gif";
var spideyImgW = 100;
var spideyImgH = 100;

var dynamicEl = "<img id='spiderman' src="+spideyImg+" border='0'/>";
$("body").append(dynamicEl);
var spideyW = (screen.width)-spideyImgW;
var spideyH = screen.height;
document.getElementById("spiderman").style.position = "fixed";
document.getElementById("spiderman").style.top = spideyH;
spideyImgH = 100*(-1);

function spidermanClimb(){
$("#spiderman").css({"left" : (Math.floor(Math.random() * spideyW))});
$("#spiderman").animate({top: (spideyImgH)}, 10000,function(){$(this).css({'top':spideyH});spidermanClimb();});
}
spidermanClimb();
</script>
  • Klik "Save Template" dan lihat hasilnya...
2. Spiderman Clock
Loading...
  • :
  • :

  • Login ke blog anda...
  • Klik "Option" kemudian klik "Layout" Setelah itu klik "Add Widget" dan pilih "HTML / Javascript".
  • Letakan kode berikut ini di gadget/widget. 
    <script>
if (typeof(jQuery) == 'undefined') {
document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");
}
</script>
<script>
$(document).ready(function() {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
var newDate = new Date();
newDate.setDate(newDate.getDate());
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval(function() {
var seconds = new Date().getSeconds();
$("#sec").html((seconds < 10 ? "0" : "") + seconds);
}, 1000);
setInterval(function() {
var minutes = new Date().getMinutes();
$("#min").html((minutes < 10 ? "0" : "") + minutes);
}, 1000);
setInterval(function() {
var hours = new Date().getHours();
$("#hours").html((hours < 10 ? "0" : "") + hours);
}, 1000);
});
</script>

<style>
#SpideyClock {padding-top:15px;width:250px;height:250px;display:block;box-sizing: border-box;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_SNioH-aUmpRfE1bUlX1Pra3bNUS8CFvFMdQwoxEXRNxtJviM283EjGxJItbJAIbCpPXzFsA9K7K-uQ0Irxpg-V_Z2ovSfqagqXoUdcVPCNWQLhN8MD-SvRVfNVktTO8akjGj-tIHns/s1600/SLogo.jpg);border:2px solid grey;border-radius:8px;text-align: center;}
#Date{padding-top:5px;color: #fff; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-shadow: 0 0 5px #FF0000;}
.clock ul{margin: 0px; padding: 0px; list-style: none;}
.clock ul li{color: #fff; display: inline; font-size: 20px;font-weight: bold; font-family: Rationale,Arial, Helvetica, sans-serif; text-shadow: 0 0 5px #FF0000;}
#point{position: relative; -moz-animation: mymove 1s ease infinite; -webkit-animation: mymove 1s ease infinite; padding-left: 10px; padding-right: 10px;}
@-webkit-keyframes mymove{0%{opacity: 1.0; text-shadow: 0 0 20px #FF0000;}50%{opacity: 0; text-shadow: none;}100%{opacity: 1.0; text-shadow: 0 0 20px #00c6ff;}}
@-moz-keyframes mymove{0%{opacity: 1.0; text-shadow: 0 0 20px #FF0000;}50%{opacity: 0; text-shadow: none;}100%{opacity: 1.0; text-shadow: 0 0 20px #FF0000;}}
@-webkit-keyframes hue
{
0%, 100%  { -webkit-filter: hue-rotate(0deg); margin-top:0px;margin-left:-5px;margin-bottom:0px;}
50% { -webkit-filter: hue-rotate(350deg); margin-top:10px;margin-bottom:-10px;margin-left:5px;}
}
.hue {-webkit-animation: hue 2s infinite;}
</style>
<div id="SpideyClock" class="clock">
<img class="hue" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBf5twSdjOSiaQr8_QncnLd505bmj3VDvNLe97xZd8uVVrpgukXWaa7StmNqQJeEXVmzUk3MN71fw2uEBbz43j-dK80RyJZrSTYq3YuZPAaui-c756DBlKIOUam4mBst6hTtBKwaFvUig/s1600/SpidermanJump128.png" border="0"/>
<div id="Date">Loading...</div>
<ul>
<li id="hours"> </li>
<li id="point">:</li>
<li id="min"> </li>
<li id="point">:</li>
<li id="sec"> </li>
</ul>
</div>
  • Klik "Save" dan lihat hasilnya...
3. Spiderman Welcome
  • Login ke blog anda...
  • Klik "Option" kemudian klik "Layout" Setelah itu klik "Add Widget" dan pilih "HTML / Javascript".
  • Letakan kode berikut ini di gadget/widget.

    A. Spiderman Welcome 1


    <div style="bottom:0px;left:0px;position:fixed;z-index:999999;">
    <embed src="http://sites.google.com/site/monozcore/home/Spiderman_Welcome.swf" wmode="transparent"></embed>
    </div>

    B. Spiderman Welcome 2


    <div style="bottom:0px;left:0px;position:fixed;z-index:999999;">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhijppFFausk4ZUKFb3UEY4_Ru3XWk9FZ1RIH1CVTsSfwl4XxVlgCoeyL5VZhAx8cupMZz4OjJhtsDKXSQMfp60lmqfJQ4EecRz_77lAhylImnyKvMvUoKb-qMCM-1c7cRbTlzEea8ybHs/s1600/Spiderman+Punch.gif"/>
    </div>
  • Klik "Save" dan lihat hasilnya...
4. Spiderman Bergantung
  • Login ke blog anda...
  • Klik "Option" kemudian klik "Layout" Setelah itu klik "Add Widget" dan pilih "HTML / Javascript".

    • A. Spiderman Bergantung Biru
  • Letakan kode berikut ini di gadget/widget.
    <div style="top:0px;left:0px;position:fixed;z-index:999999;">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Cu9nxWPoZXJ_YGHuuBYnMjAg-_hqFV9xwyIQ-LftvQpZbOllj7dboXujXaHSdUxIjpuYmLHVIZfgBy7pK-lXDCi_15lzc5k_IgDLsVa_m0FDWMKdxpTN50KKtqG_ARSC6t5nkUI_VfQ/s1600/Spiderman_Hanging_Blue.gif"/>
    </div>

    • B. Spiderman Bergantung Biru Gelap

  • Letakan kode berikut ini di gadget/widget.
    <div style="top:0px;left:0px;position:fixed;z-index:999999;">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62m_G_c9BvgU-nQTWziUEd8W-LlA2VG0jgEAnl3SzY0T9PPUYOoQBJdrHu8WbQTSdCTkPZu5MtMGuRDIrg1gofBTDPP6sqzQvxyDdrAlx432US842agH3k9WsWOKL-qCnahkik54X48c/s1600/Spiderman_Hanging_Dark.gif"/>
    </div>
  • Klik "Save" dan lihat hasilnya...
5. Spiderman Drop Off
  • Login ke blog anda...
  • Klik "Option" kemudian klik "Layout" Setelah itu klik "Add Widget" dan pilih "HTML / Javascript".
  • Letakan kode berikut ini di gadget/widget.
    <div style="bottom:0px;right:0px;position:fixed;z-index:999999;">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEges9C6kUaeo65Chz2mEBrWFWwPsGf2d2SNgbIFMeAU3oX_-qjyRgRLMZhIGX9nPwb1GMQtY7Gt_TRjgxD_SYHrE1bOnXPbISnh7NNM6JbcreGBO20pUEuoQm2oPX40L0CEFpkVIDA-vPw/s1600/Spiderman_DropOff.gif"/>
    </div>
  • Klik "Save" dan lihat hasilnya...
6. Spiderman Glide
  • Login ke blog anda...
  • Klik "Option" kemudian klik "Layout" Setelah itu klik "Add Widget" dan pilih "HTML / Javascript".
  • Letakan kode berikut ini di gadget/widget.
    <script>
    var ImageURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh5CqS-zfbO4LtB0psHP-cWLmDknvJb9keGDRoM8NKy3pa9wmwhl9yOG8lVT3FwUqBDCp_Ln3kdckjRvCCdsy4u7pDbKSOoLnCcljZKxibSZtQ8R6ZEC4xRAwcqi-k6llwmUXX4RtlOPo/s1600/Spiderman_Glide.gif";
    </script>
    <script src="http://sites.google.com/site/monozcore/home/MonozCore_WatchingGirl.js"></script>
  • Klik "Save" dan lihat hasilnya...
7. Spiderman Background for Blog
  • Login ke blog anda...
  • Klik "Option" kemudian klik "Layout" Setelah itu klik "Add Widget" dan pilih "HTML / Javascript".
  • Letakan kode berikut ini di gadget/widget.
    <style>body{background: #333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaDDoHgVVz5ttVfj98EkTRITysAJScghw4ndHJs-du3psXCmukLY4ZvP2bT8w-ZxGKbnWYd8aMhnLtY7QRKHA5Z3ckjYhSpNA3SbfK_FrYaeITSK_SHQySGYJFbR9YZaKB9SbFY13e_n0/s1600/Spiderman_Background.gif") fixed no-repeat center;}</style>
  • Klik "Save" dan lihat hasilnya...
.:Semoga Bermanfaat:.
Tags:
Monoz

Posted by: Monoz

Post a Comment

0 Comments