Transformer Popup Window

Tentu anda sudah kenal dengan bumble-bee salah satu jagoan transformer yang bisa berubah menjadi mobil sport camaro dengan warna kuningnya yang menawan. Bumblebee merupakan salah satu letnan yang paling dipercaya sama Optimus Prime. Meskipun ia bukan yang terkuat dari Autobots, Bumblebee memiliki keteguhan hati, tekad dan keberanian. Dia dengan senang hati akan memberikan hidupnya untuk melindungi orang lain dan menghentikan Decepticons...

Nah.. sobat blogger sesuai dengan tema postingan artikel, saya coba untuk membuat widget menggunakan karakter bumble-bee untuk memikat pengunjung di blog sobat. Widget ini dibuat dengan sedikit sentuhan jquery dan javascript sederhana. Widget Transformer Popup Window saya buat untuk memfokuskan informasi yang ingin ditampilkan seperti informasi tentang browser yang digunakan pengunjung, informasi IP adress, Informasi RSS feed ataupun informasi lainnya yang ingin sobat berikan di blognya. Seperti pada contoh yang ada di postingan artikel ini... gimana kerenkan... oke dech langsung aja ke TKP dan coba di praktekin di blog sobat.

Cara Pemasangan

1. Login ke blog anda.
2. Klik Template kemudian klik edit HTML.
3. Cari potongan kode "</body>" pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian guna mempercepat pencarian).
4. Copy - Paste kode berikut ini tepat di atas kode "</body>" atau bisa juga dipasang pada kotak gadget blog.

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

<div id="beeCar2" onclick="tranform()" title="Autobot Rollout..." style="cursor:pointer;z-index:+9;position:fixed;bottom:0px;left:-200px;"><img id="beeCar1" src=""/></div>
<div id="transData" style="display:none;">
<div style="padding:4px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi13iZAz-JQwpzLn9vw_5gDt3t47Cwv7_wCIQWBpM_QqLQQQwDhOUPPHjxknpC2ICPH0GJs7FjWiXbMnB7haJfysqnZUZ6yWCPn7_WySwNsU_VKwG-LkzC2inHAX2JPj3ic3A74nVGAkCN8/s1600/Autobot_Icon.png" style="vertical-align:middle;"/> <span id="transText">Incoming Info...</span></div>
<div id="transInfo" align="center" style="background-color:white;padding:10px;display:none;">
<!-- Start Kode Script Anda -->
<!-- Hapus kode dibawah ini dan taruh kode anda -->

Taruh Kode Script pada baris ini

<!-- Hapus kode diatas ini dan taruh kode anda -->
<!-- End Batas Kode Script Anda -->
</div>
<div align="center" id="transCredit"></div>
</div>
<script>
var imgBumblebee = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDN1Kv3fGfytc6Dag0JsSmj92LFhzhbBihla7wMIlO-2tsqRHriQvCSUb43m23fN2G682BMoZ34nWM-sKluY7sLLlwyG_10UpxbsemhqEWmY3tzyo57KrvyEB0KWDriFguMuHur4Aw-s2/s1600/bumblebee.png";
var imgBumblebeeCar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg10qToPgSZhuFYVV_YB7a9cCgJZ6AF0dqQSfplfyxdXhJifGe0rmps2sCsBU6EeKCGwEzm3A5sBlP4dbmNzhAEgpo5fave6OspMqSeVW0IMi1Ob5XcYC7yU5UBQc8GuSxwlcgeYngaZCkw/s1600/bumblebee_car_1a.png";
var imgOptimus = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy8Ng5DhkQKsU5a3_roJcVJygruOtbAWIA7x-4okBSr-GmL1wZEEJ5pKS-xVJGwKwDbbdGywh1SyhXzuo_XHyS0jvm9k8LW_yVIRxy3saGvRvhBkNyM84CSeV7DDDchBsl_HRbt1ciI_42/s1600/Optimus_Prime_1.png";
var imgOptimusTruck = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQZUorI-OBQ9AEtliBQVF0al4-5KEkA6jIyLF9cMvetFYFmgjirCrZgX2T62cZiABCp9Xn6XSXZ1wcRz-yMahZHK24PlzSBkVeI_dIaWdHDny1P06ve_LZt_sV1B-u5YW-HcoTDTD_G5i/s1600/optimus_prime_truck.png";

$("#beeCar1").attr("src",imgBumblebeeCar);

document.write("<style>#transData{z-index:+9999;position:fixed;top:-500px;left:5px;width:300px;border-radius:4px;background-color:gold;}</style>");
var transCr='<a href="http://monozcore.blogspot.com/2015/08/transformer-popup-window.html" target="blank" style="font-family:Arial;font-size:10px;text-decoration:none;color:#000;">Powered by MonozCore</a>';
var xTrans=0;
var xTransSlc=0;
var transRobot = imgBumblebee;
var transCar = imgBumblebeeCar;

$("#beeCar2").animate({left: "+=500"}, 300);
$("#beeCar2").animate({left: "-=100"}, 100);
$("#beeCar2").animate({left: "+=30"}, 50);
$("#beeCar2").animate({left: "-=220"}, 400);
$("#transCredit").html(transCr);

function loadTrans(){
$("#beeCar2").animate({left: "+=500"}, 300);
$("#beeCar2").animate({left: "-=100"}, 100);
$("#beeCar2").animate({left: "+=30"}, 50);
$("#beeCar2").animate({left: "-=420"}, 400);
}

function tranform(){
if(xTransSlc==0){$("#transData").css("background-color", "gold");}else{$("#transData").css("background-color", "#0080FF");}
if(xTrans==0){
$("#transData").show();
$("#transText").css("color", "black");
$("#beeCar2").animate({left: "+=50"}, 100);
$("#beeCar2").animate({left: "-=50"}, 100);
if(xTransSlc==0){
transRobot=imgBumblebee;
}else{
transRobot=imgOptimus;
}
$("#beeCar1").attr("src",transRobot).stop(true,true).hide().fadeIn();
$("#transData").animate({top: "+=600"}, 100);
$("#transData").animate({top: "-=60"}, 50);
$("#transData").animate({top: "+=40"}, 100);
$("#transData").animate({top: "-=75"}, 400);
$("#transInfo").delay(800).fadeIn("slow");
$("#transText").html("Open Connection...");
xTrans=1;
}else{
$("#transText").html("Close Connection...");
$("#transText").css("color", "red");
$("#beeCar2").animate({left: "+=50"}, 100);
$("#beeCar2").animate({left: "-=50"}, 100);
var widthTrack=$(window).width();
$("#beeCar2").animate({'left':widthTrack}, 800, function(){$(this).css({'left':'0'});
if(xTransSlc==0){xTransSlc=1;}else{xTransSlc=0;}
if(xTransSlc==0){transCar=imgBumblebeeCar;}else{transCar=imgOptimusTruck;}
$("#beeCar1").attr("src",transCar);
});
$("#beeCar1").attr("src",transCar).stop(true,true).hide().fadeIn(600)
$("#transInfo").fadeOut();
$("#transData").delay(800).animate({top: "-=505"}, 400).queue(function(n) {$(this).hide(); n();});
xTrans=0;
loadTrans();
}}
</script>



5. Keterangan :
   
   Silakan sobat taruh kode html atau javascript yang sobat inginkan diantara batas kode seperti yang ada dibawah ini. Terlebih dahulu sobat hapus kode yang ada diantara batas kode.
   <!-- Start Kode Script Anda -->
   <!-- Hapus kode dibawah ini dan taruh kode anda -->
                   Kode HTML atau Javascript
   <!-- Hapus kode diatas ini dan taruh kode anda -->
   <!-- End Batas Kode Script Anda -->
   
   
   Apabila sobat membutuhkan tampilan dengan lebar lebih dari 300px silakan sobat sesuaikan kode inline style CSS width pada kode HTML diatas.


6. Klik "Save" dan lihat hasilnya.

Apabila masih ada kesulitan dalam menerapkan widget ini silakan anda tuliskan permasalahan anda di kotak komentar...

Article last update : 31-08-2015

Semoga artikel ini bisa bermanfaat. Terima Kasih....

Incoming Info...