Cara Membuat Gambar Berpindah Mengikuti Gerakan Mouse Thn 2017

Bagi para blogger tampilan yang menawan pada blog merupakan kepuasan tersindiri, terutama bagi pemula yang ingin menaikan jumlah view, follower setiap hari.

Mungkin trik ini tidak terlalu penting untuk ditampilkan pada blog. Tapi tidak ada salahnya kalau dicoba untuk tampil pada blog anda, sekedar variasi dari tampilan gambar yang mungkin dapat menarik mnat tamu blog anda untu memindahkan gambar tersebut.




LANGKAH PERTAMA

1.      Masuk ke Blogger dengan ID anda

2.      Masuk Rancangan

3.      Pilih Edit HTML

4.      Cari kode </head> pada template anda

5.      Copy kode dibawah ini, kemudian paste tepat diatas kode tadi

<style type="text/css"> .drag{ position:relative; cursor:hand; z-index: 100; } </style> <script type="text/javascript"> var dragobject={ z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0, initialize:function(){ document.onmousedown=this.drag document.onmouseup=function(){this.dragapproved=0} }, drag:function(e){ var evtobj=window.event? window.event : e this.targetobj=window.event? event.srcElement : e.target if (this.targetobj.className=="drag"){ this.dragapproved=1 if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0} if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0} this.offsetx=parseInt(this.targetobj.style.left) this.offsety=parseInt(this.targetobj.style.top) this.x=evtobj.clientX this.y=evtobj.clientY if (evtobj.preventDefault) evtobj.preventDefault() document.onmousemove=dragobject.moveit } }, moveit:function(e){ var evtobj=window.event? window.event : e if (this.dragapproved==1){ this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px" this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px" return false } } } dragobject.initialize() </script>;

6.      Klik Simpan Template

LANGKAH KEDUA

1.      Langkah kedua ini bisa anda terapkan pada postingan maupun pada elemen halaman

2.      Tambahkan kode class="drag" pada alamat gambar

Perhatikan contoh dibawah ini (perhatikan yang berwarna merah).

<img src="http://img52.imageshack.us/img52/3915/36261.gif" <b><span style="color: red;">class="drag</span></b>"/></div> </form> <br /> /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:"Yu Mincho"; panose-1:2 2 4 0 0 0 0 0 0 0; mso-font-charset:128; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:-2147482905 717749503 18 0 131231 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:-536870145 1073786111 1 0 415 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:Calibri; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Yu Mincho"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-family:Calibri; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Yu Mincho"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} /* List Definitions */ @list l0 {mso-list-id:1; mso-list-type:hybrid; mso-list-template-ids:1 1 -1 -1 -1 -1 -1 -1 -1 -1;} @list l0:level1 {mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt;} @list l0:level2 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level3 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level4 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level5 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level6 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level7 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level8 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l0:level9 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1 {mso-list-id:2; mso-list-type:hybrid; mso-list-template-ids:2123264492 67698703 -1 -1 -1 -1 -1 -1 -1 -1;} @list l1:level1 {mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt;} @list l1:level2 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1:level3 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1:level4 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1:level5 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1:level6 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1:level7 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1:level8 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} @list l1:level9 {mso-level-start-at:0; mso-level-text:""; mso-level-tab-stop:none; mso-level-number-position:left; margin-left:0cm; text-indent:0cm;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> </style>