Thursday, September 5, 2019

Belajar Membuat Pointer Mouse Blog Blogger

Thursday, September 5, 2019

Membuat Pointer Blog Blogger

Bagi sahabat blogger yang mau merubah tampilan pointer atau cursor mouse pada blog blogger nya, artikel inilah tempatnya dan lengkap. Agar tampilan pointer yang ada pada blog nya bisa anda ubah dengan tampilan yang baru maka dari itu saya akan tunjukan beberapa langkah untuk belajar membuat pointer di blog blogger menjadi menarik dan indah di pandang.

Bagaimanakah cara merubahnya? dan seperti apakah tampilan nya? cara mengubah pointer di blog blogger sangatlah mudah salah satu cara terbaik adalah menambahkan kode HTML javascript pada template blog, mengenai tampilan nya sebenarnya tidak merubah tampilan default pointer.

Jika anda masih penasaran dengan apa yang sudah saya jelaskan diatas atau tentang hal ini nanti anda buktikan sendiri setelah mengikuti tutorialnya dan di terapkan ke blognya, jangan berlama-lama menuju ke Tkp sajalah simak berikut di bawah ini;

Cara Membuat Pointer Blog Blogger Dengan Mudah

1. Masuk di Dasbor Blogger atau buka halaman Template
2. Kemudian pilih menu Tata Letak
3. Lalu pilih dan Tambahkan Gadget
4. Jika sudah muncul tab halamam baru pilih widget yang ada tulisan HTML/JavaScript
5. Setelah itu salin kode HTML/JavaScript dibawah kemudian tempelkan kode nya ke dalam kolom widget dan untuk nama judul widget biarkan saja kosong ini kodenya;
<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);}elseif (window.attachEvent){window.attachEvent("onload",init);document.attachEvent("onmousemove",mouse);window.attachEvent("onresize",winsize);}</script>

Berikut contoh penerapan kode HTML/JavaScript pada kolom widget blog blogger nya seperti gambar screenshot di bawah;


kode html java script pointer

6. Lalu Simpan
Keterangan:
Untuk warna nya ganti sesuai selera anda, yang bisa anda rubah adalah kode yang sudah di beri tanda berwarna merah seperti ini "#FF0000" "#FFFF00" "#0000FF" atau lebih jelasnya anda cek pada sumber dari kode HTML nya ini di situs blog bloggertutorial blogblogspot com


Nah... Selesai sudah Belajar Membuat Pointer Blog Blogger baca dan pahami dan berikan kritiknya di kolom komentar semoga dengan ada kritik dari anda semua blog ini bisa bermanfaat bagi semua yang beraktifitas lewat internet salam blogger.

Show comments
Hide comments