Tampilkan postingan dengan label Javascript. Tampilkan semua postingan
Tweet Share Share Share Share Share

06.02
Pada Postingan sy yang lalu pernah membahas cara 'Disable Right Click (Mematikan Klik Kanan) With Sliding Effect Bag.2', Nah kali ini saya akan membuat berbeda yaitu dengan menggunakan Gambar. Baiklah untuk contoh sobat bs lihat langsung diblog saya ini, silahkan klik kanan pada mouse anda, dan apa yang terjadi.hehee,..


OKe, Jika sobat tertarik mencobanya silahkan ikuti tahap-tahap berikut :




    Seperti biasa terlebih dahulu :
  1. Login blogger.
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Letakkan kode berikut diatasnya :

/*Disable right click images aka*/
#akaUTclickrc{z-index:1000000;width:100%; height:100%;display:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR78Gpn_QR0UtwT4WXdANdxG90tnLTFgJFqXhlU8gQFh9S90NxFmkwbLXC1SHl7po_YkNn3SXE7yJKGTBzx2VlksOsay5MgWyL6UT0KYDiXroLMruuvLhAjLD4ZRXV-vOF82FfyHwHKKY/s1600/no-right-click-akaUt.jpg) no-repeat left center fixed rgba(0,0,0,0.99); position:fixed; top:0px; left:0px; right:0px; bottom:0px}

- Silahkan sobat rubah tulisan yang saya beri warna merah adalah (Gambar) diatas, sesuai keinginan masing-masing!

4. Selanjutnya cari kode </head> , lalu letakkan script berikut tepat diatasnya :

<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/clickakaUTta.js' type='text/javascript'></script>

5. NEXT,.. sobat cari lagi kode <body> , jika sudah ketemu, sobat ganti dengan kode berikut :

<body oncontextmenu='akaUTclickclick("akaUTclickrc");return false;'>

6. Langkah terakhir Priview dlu, jika tidak terjadi kesalahan, baru deh sobat save template.

Jika ada yang ingin ditanyakan mengenai trik ini, silahkan berkomentar pada forum dibawah :D


Semoga Tutorial kali ini bermanfaat bagi sobat, dan selamat mencoba!;)
Baca selengkapnya »
Tweet Share Share Share Share Share

20.29
MET Pagi All menjelang Siang, btw gmn tdi sholat iednya (bagi yang melaksanakan) nih?? kenyang yah habis siara dirmah tetangga.!!hehe,..

http://0.s3.envato.com/files/2370180/butterfly-flight-pr.jpg

Oke langsung saja deh, kali ini saya ingin memberikan tips yaitu cara 'Pasang Script Gambar Beterbangan Di Blog ala akaUTta' , maksudnya dsini jadi kita bisa membuat gambar beterbangan kesana-kesini di blog kita dan bagusnya lagi bisa memasang lebih dari 1 gambar, lumayan kan untuk menghiasi blog anda dengan gambar kesukaan.hehee,..

Jika sobat penasaran sperti apa contohnya silahkan lihat demonya langsug deh disini.

Gimana gang??? keren gak.hehee jika sobat tertarik untuk membuatnya silahkan ikuti langkah berikut:
1. Login dahulu ke Blogger
2. Kemudian Klik Tata Letak » Edit HTML
3. Jangan lupa Centang Expand Template Widget
4. Lalu cari kode berikut </head> Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. Kemudian letakkan kode berikut diatasnya.

<script type='text/javascript'>
//<![CDATA[
var Ymax=8; //MAX # OF PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

//FLOATING IMAGE UNTUK SETIAP URL GAMBAR. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH "0" !!

var floatimages=new Array();
floatimages[0]='http://img.photobucket.com/albums/v519/eijeisan/GLITTERS/pocong.gif';
floatimages[1]='http://lh6.ggpht.com/_ILzML2joCeU/TMKlVQquNOI/AAAAAAAAAEM/UPNbo8zomYo/uuuuuuu.gif';
floatimages[2]='http://lh3.ggpht.com/_ILzML2joCeU/TMKkuG4EARI/AAAAAAAAAD4/Cw2r04R3k4g/15184.gif';
floatimages[3]='http://lh4.ggpht.com/_ILzML2joCeU/TMKkuGGpiBI/AAAAAAAAAD0/yV-ieFQT2GU/15034.gif';
floatimages[4]='http://califia.us/Folklore/hood4.gif';
floatimages[5]='http://r18.imgfast.net/users/1813/21/61/48/smiles/404641.gif';
floatimages[6]='http://img.photobucket.com/albums/v519/eijeisan/GLITTERS/pocong.gif';


//*********JANGAN EDIT KODE DIBAWAH INI***********
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='', IDs=new Array();
for(i=0; i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="60" height="60"><a href="javascript&#058;hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:60px; height:60px"><a href="javascript&#058;hidebutterfly()">';
t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';
t+=(NS4)? '</a></layer>':'</a></div>';
}
document.write(t);

function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep : -IDs[num].Xstep , (IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}

function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));
}

function getscrollx(){
if(NS4 || NS6)return window.pageXOffset;
if(IE4)return document.body.scrollLeft;
}

function getscrolly(){
if(NS4 || NS6)return window.pageYOffset;
if(IE4)return document.body.scrollTop;
}

function getid(name){
if(NS4)return document.layers[name];
if(IE4)return document.all[name];
if(NS6)return document.getElementById(name);
}

function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}

function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return parseInt(IDs[num].style.left);
}

function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return parseInt(IDs[num].style.top);
}

function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}

function getwindowwidth(){
if(NS4 || NS6)return window.innerWidth;
if(IE4)return document.body.clientWidth;
}

function getwindowheight(){
if(NS4 || NS6)return window.innerHeight;
if(IE4)return document.body.clientHeight;
}

function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0; i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility = "show";
if(IE4 || NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}

function hidebutterfly(){
for(i=0; i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}

if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}

//]]>
</script>

NB::
- Teks yang berwarna Merah adlah URL gambar, silahkan diganti dengan url gambar masing-masing. oke :D

5. Selanjutnya save template.dan selesai.

Jangan lupa kasih komentarnya yah gang.hehe selamat mencooba!!
Baca selengkapnya »
Tweet Share Share Share Share Share

04.39
Akhirnya kali ini saya akan menshare 'Author Box Admin Ver Getar' ini, dan sebenarnya trik ver getar ini lbh awal saya buat dr pada postingan saya yg sebelumnya 'Author Box Admin Keren diblog Bag.3' :D.http://picturestack.com/667/845/IOKauthoradmiM9P.jpg
karena saya rasa, lebih baik saya membuat efek getar dan non getar, tp tampilan tetap sma, dgn bgt kan tmn2 akautta bs memilih mau ver. mana..hehee,..
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGiuerc4Af76OPQM1zRHD9FEWE8fF3cq8LzMXnliorxJeowQM_GMx_haOVmppvTQn3_TUGep79FjoCVG8saa6oDnt79hpWEJvChk9MbvPdBZinElTgZ89Hk48T1jtSYV76RcHDpk_E4I/s1600/demo-button.png
Saya tidak akan panjang lebar tuk penjlasan tutorial ini, jika sobat tertrik mencobanya silahkan ikuti langkh2 brikut:

1. Login ke blogger
2. Tata Letak.
3. Edit HTML.
4. Carilah kode ]]></b:skin> ,lalu letakkan Kode CSS berikut tepat diatasnya.
/*Author Admin Getar
====================*/
#authorboxakaUTta {
background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;
width:auto;overflow:hidden;color:#fff;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;
margin:5px auto;padding:40px 10px 10px 20px;}
.author_getar{position:relative}
#authorboxakaUTta:hover {-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 20px  rgba(0, 0, 0, .3);}
#authorboxakaUTta h6 {font-size:17px;clear:none;text-shadow:0px 0px 0 rgb(10,11,12), -1px -1px 0 rgb(4,5,6),-2px -2px 1px rgba(0,0,0,0.25),-2px -2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);
margin:0;font-family:Arial;padding:10px 10px 5px;}
#authorboxakaUTta .author_small {font-style:italic;}
#authorboxakaUTta img {-webkit-transition:-webkit-transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);-moz-transform: rotate(+2deg);float:left;border:4px solid #04a5d1;margin:10px;padding:0;}
#authorboxakaUTta img:hover {-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);}
#authorboxakaUTta p {color:#F9EAD4;text-shadow:0px -1px 1px rgb(3,3,3);margin:0;font:normal 14px bedizen;padding:0 10px 10px;}
#authorboxakaUTta a {color:#089fc9;}
4. Langkah Selanjutnya cari lagi Kode <data:post.body/> , Setelah ketemu, letakkan kode berikut tepat dibawahnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="authorboxakaUTta" class="author_getar" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()">
<img alt='' src='http://1.bp.blogspot.com/-lu9dL_yq7hk/TvsFsoW5UAI/AAAAAAAACCs/e4r09grJSdM/s1600/Untitled-1+copy.jpg' height='100' width='100'/>
<h6><a href="http://www.ngawicybers.blogspot.com/" title="Posts by Admin" rel="author">Posts by akaUTta'</a></h6>
 <p>Hi`i'm aka UTta ,from Makassar,i love to blogging, Desing Blogger template, Web Developing and Designing.i like to learn and share technical hacking/security tips
with you,i love my friends.</p> <p>Follow Me On <a href="https://twitter.com/uttakracker15">Twitter</a> Or <a href="https://www.facebook.com/uttamelanikz">Facebook</a> !!</p></div>
</b:if>
-Bisa juga dibawah kode : <div class='post-footer-line post-footer-line-1'> atau diatas kode : <div class='post-footer'>

5. Selanjutnya letakkan script berikut diatas kode </head>
<script src="http://ut2a-4down-blogspot-com.googlecode.com/files/akaUTta_Getar.js" type="text/javascript"></script>
6. Priview dulu, jika tidak terjadi masalah pada templatenya, maka baru Klik SIMPAN TEMPLATE.

NB :>> Diatas terdapat tulisan yang saya beri warna, sobat tinggal merubahnya saja sesuai keinginan masing-masing.

Semoga tutorial ini berguna bagi anda, jangan lupa komentarnya yach.hehee,.. ^^
Baca selengkapnya »
Tweet Share Share Share Share Share

13.54


akaUTta
akaUTta
akaUTta
akaUTta
Baca selengkapnya »
Tweet Share Share Share Share Share

13.35
Teknik Memperbesarkan Gambar Dengan Magnify Script ini. atau saya sebut dengan Gambar akan membesar pada saat kita klik. Biasanya saat pengunjung ingin melihat detail gambar maka mereka akan mengklik gambar, namun apa yang terjadi? mereka marah di arahkan ke halaman baru dan saat ingin kembali ke blog harus menunggu loading lagi, masih mending jika loading blog tersebut cepat kurang dari 5 detik, namun apabila loading blog tersebut berat??? saya rasa blog anda akan di tinggalkan pengunjung saat itu juga.sperti blog saya ini.hehee..
Jika anda mengalami hal yang saya ilustrasikan di atas maka anda berada di tempat yang benar, saat ini karena posting hari ini saya akan membahas permainan animasi pada gambar, yang mana dengan trik ini saat gambar di klik maka akan membesar secara otomatis tanpa harus beralih ke halaman baru.
untuk demonya silahkan klik gambar dibawah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGiuerc4Af76OPQM1zRHD9FEWE8fF3cq8LzMXnliorxJeowQM_GMx_haOVmppvTQn3_TUGep79FjoCVG8saa6oDnt79hpWEJvChk9MbvPdBZinElTgZ89Hk48T1jtSYV76RcHDpk_E4I/s1600/demo-button.png
Bagaimana sobb?? keren gk, aplgi sy ksh bonus gambar cewek.wkwkkwkk
OKE langsung saja ke TKP, berikut cara membuatnya :
1. Login dahulu ke Blogger
2. Kemudian Klik Tata Letak » Edit HTML
3. Jangan lupa Centang Expand Template Widget
4. Lalu cari kode berikut </head> Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. Kemudian letakkan kode berikut diatasnya.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ut2a-4down-blogspot-com.googlecode.com/files/Gambar%20Magnify2.js"></script>
NB:: teks yang berwarna biru adlah script pendukung, jika sobat sudah memasangnya ditemplate sobat, maka kode diatas tdk perlu lagi. :D

5. Selanjutnya save template..
6. Berikut ini adalah format kode yang akan kita gunakan untuk menjalankan fungsi image diatas.

  • <img border="0" height="93" width="93" src="http://i2.hunantv.com/p1/20120711/0833268779.jpg" class="magnify" data-magnifyto="700" data-magnifyduration="850" />

KET::
class="magnify" >> Ini adalah eksekusi scriptnya.
data-magnifyto="700" >> Ini untuk Mengatur lebar dengan pixel, atau
data-magnifyby="2.5" >> Ini untuk mengatur lebar.
data-magnifyduration="850" >> Durasi waktu saat pembesaran gambar.

Semoga bermanfaat gan. :D
Baca selengkapnya »
Langganan: Postingan (Atom)

Formulir Kontak

Nama

Email *

Pesan *

Ngawi Cyber © 2016. All Rights Reserved.
Powered by Jasa Blog

Ngawi Cyber

Diberdayakan oleh Blogger.