Cara Menciptakan Goresan Pena Berputar Di Kursor Blogger
Nah, dalam posting kali ini aku akan kembali membahas perihal blogger, sehabis cukup usang tidak membahasnya dalam beberapa posting belakangan. Disini yang akan aku bahas ialah cara menciptakan goresan pena bergerak berputar mengelilingi kursor di blogger. Untuk melihat misalnya silakan buka pada halaman demo berikut atau silakan teman coba memasang kodenya sendiri.
Baiklah untuk mulai memasangnya, pertama-tama silakan teman buka dasboard blogger sobat, kemudian pilih Tata Letak kemudian tambahkan sebuah widget dengan tipe HTML/JavaScript . Setelah itu salin dan tempel arahan dibawah ini pada widget tersebut.
<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/javascript'>//<![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 SOBAT 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 karenanya pada blog/web sobat. Mungkin cukup sekian dari saya, agar dapat bermanfaat, bila ada yang ingin teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau dapat juga melalui halaman contact blog ini. Terima kasih
![Cara Lengkap Menciptakan Template Blogger Sendiri [Bagian 1]](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbHzaRJW0Yt87-bkaJ6I1ce4Tktky2v0z3lNZEexXy1EEOOwXBL0MIsKQVCXc1qdGcckXI7n2LAeOugISwx5lWNjvBg5jSCGxTZ0XmKek9FsStRNQhO7LGNGWzF9wWYmkum4KzOAMoGBR5/w192-h108-c/book+photography.jpg)
