Nah, dalam posting kali ini saya akan kembali membahas perihal blogger. sesudah cukup usang tidak membahasnya dalam beberapa posting belakangan.
Disini yang akan saya bahas yaitu cara menciptakan goresan pena bergerak berputar mengelilingi kursor di blogger. Untuk melihat misalnya silakan buka pada halaman demo berikut atau silakan kau coba memasang kodenya sendiri.
Kreasi animasi di halaman blog yaitu hal yang masuk akal dan bebas sesuai harapan pemiliknya. Hal tersebut biasanya dilakukan untuk menarik minat pengunjung serta memberi kesan animasi yang menarik semoga pengunjung tidak bosan.
Berbagai animasi mulai bermunculan dan dipasang di halaman blog. Baik itu animasi yang sanggup dikontrol oleh pengguna maupun animasi statis. Salah satu pola animasi yang sanggup dikontrol yaitu dengan memasang animasi teks berputar di kursor. Seperti pola di halaman demo di atas.
Baiklah untuk mulai memasangnya, pertama-tama silakan kau buka dasboard blogger kamu, lalu pilih Tata Letak lalu tambahkan sebuah widget dengan tipe HTML/JavaScript . Setelah itu salin dan tempel arahan dibawah ini pada widget tersebut.
Silakan atur bab yang ditandai sesuai dengan keterangannya. Setelah itu coba lihat jadinya pada blog/web kamu.
Itulah salah satu cara yang sanggup kau lakukan untuk menciptakan animasi teks berputar pada kursor di Blogger. Dengan animasi tersebut kau sanggup menciptakan pengunjung blog kau bermain dengan kursor mereka.
Mungkin cukup sekian dari saya perihal cara memasang animasi teks berputar pada kursor di Blogger. Semoga artikel ini sanggup bermanfaat untuk kamu. Silakan sampaikan komentar terbaik kau di bab bawah, baik itu berupa pertanyaan mau pernyataan. Terima kasih dan hingga jumpa!
Sumber http://www.maringngerrang.com/
<style type='text/css'> /* Circle Text Styles */ #outerCircleText { font-style:italic; font-weight:bold; font-family:'comic sans ms',verdana,arial; color:#4679BD; position:absolute; top:0; left:0; z-index:3000; cursor:default } #outerCircleText div{position:relative} #outerCircleText div div{position:absolute;top:0;left:0;text-align:center} </style> <script type='text/j4vascript'>//<![CDATA[ /* Circling text trail- Tim Tilton - Website: http://www.tempermedia.com/ - Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts. Modified Here for more flexibility and modern browser support Modifications as first seen in http://www.dynamicdrive.com/forums/ username:jscheuer1 - This notice must remain for legal use */ ;(function(){ // GANTI NILAI VARIABEL-VARIABEL DIBAWAH INI SESUAI DENGAN KEINGINAN KAMU var msg = " Blog"; var size = 24; var circleY = 0.75; var circleX = 2; var letter_spacing = 5; var diameter = 10; var rotation = 0.4; var speed = 0.3; ////////////////////// Stop Editing ////////////////////// if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px'; d.appendChild(document.createTextNode(msg[i])); oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })(); //]]></script>Silakan atur bab yang ditandai sesuai dengan keterangannya. Setelah itu coba lihat jadinya pada blog/web kamu.
Itulah salah satu cara yang sanggup kau lakukan untuk menciptakan animasi teks berputar pada kursor di Blogger. Dengan animasi tersebut kau sanggup menciptakan pengunjung blog kau bermain dengan kursor mereka.
Mungkin cukup sekian dari saya perihal cara memasang animasi teks berputar pada kursor di Blogger. Semoga artikel ini sanggup bermanfaat untuk kamu. Silakan sampaikan komentar terbaik kau di bab bawah, baik itu berupa pertanyaan mau pernyataan. Terima kasih dan hingga jumpa!
Sumber http://www.maringngerrang.com/
Buat lebih berguna, kongsi:
