SBSEdition

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Monday, August 10, 2009

Circling text trail

Posted on 1:40 AM by Unknown
Agar blog tampak tampak menarik saya ada tips buat sobat yaitu kursor yang berbentuk text yang melingkar yangmana text tadi mengikuti kusor bergerak.Lebih jelasnya anda coba sendiri :
Pharsekan kode berikut ini di sini setelah itu ganti huruf yang berwarna biru sesuai dengan kebutuhan sobat pastekan sebelum </head>
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* 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(){

// Your message here (QUOTED STRING)
var msg = "Mutiaramail Mutiara Info";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
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>

Selamat mencoba dan semoga berhasil.
Email ThisBlogThis!Share to XShare to Facebook
Posted in Cara Pasang, Tips, Trick, Tutor | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • New blog
    I don't blog often, but when I do it's now at http://blog.semeosis.com. Here I've written about some of the things I've look...
  • Password Recovery Bundle 2011 1.70
    Password Recovery Bundle 2011 1.70 | 1.46 Mb Password Recovery Bundle 2011 is a handy toolkit to recover all your lost or forgotten passwo...
  • The Pleasures of Paradise in Brief
    God has said in the Quran: “And give good news (O Muhammad) to those who believe and do good deeds, that they will have gardens (Paradise) i...
  • Apple Releases New iPhone OS
    Today, around 1:00PM, Apple released its new operating system for the iPhone. After negotiations with IBM, iPhone OS 4.0 will be officially...
  • THE MESSAGE
    In or about the year 570 the child who would be named Muhammad and who would become the Prophet of one of the world's great religions, I...
  • Windows XP Pro SP2 – VL 64 Bit
    Windows XP Professional x64 Edition with SP2 – VL (English) File Name: en_win_xp_pro_x64_with_sp2_vl_X13-41611.iso Size: 599.07 MB Releas...
  • Mutiara mail
    Sekejam-kejamnya manusia pasti ingin memberikan kasih sayangnya kepada orang lain sebagai wujud simpati-nya, di sisi lain butuh sebuah pengh...
  • TYPES OF SADAQAH
    Sadaqah is not restricted to any special deed of righteousness. The general rule is that all good deeds are sadaqah. Some of them are as fol...
  • How to target and rank high for low competion keywords
    How to target and rank high for low competion keywords Don’t try to optimize your website with keywords that have too much competition. As ...
  • Facebook launched E-mail in San Francisco
    London- Social networking sites facebook are likely to launch its email service. Unlike usually up this new service will reportedly be launc...

Categories

  • .Net
  • .NET 3.5
  • .Net Tools
  • About Adsense
  • Agile
  • ALT.NET
  • Anti-Virus
  • Article
  • ASP.NET MVC
  • C# 3
  • Cara Pasang
  • CI Factory
  • Computer
  • Continuous Integration
  • Courseware
  • DI/IOC
  • Download Games
  • Download Karaoke
  • Download software
  • Download template
  • Download Template
  • Exchange Link
  • Google
  • Hadits Nabi
  • Hiring
  • IEEE
  • IIS 7
  • Info electronic
  • Lambda
  • Lean
  • Linux
  • MbUnit
  • Messages
  • MS Exchange 2003
  • Mutiara
  • Navigation
  • News
  • NHibernate
  • NxtGenUG
  • Other
  • Practices and Patterns
  • Qurdist
  • Resharper
  • Scrum
  • Security
  • Seo
  • Small Business Server
  • SQL Server 2008
  • Testing
  • TFS
  • Tips
  • Trick
  • Tutor
  • Ubuntu
  • UML
  • Verifying
  • Virtual Instrument
  • Virtual PC
  • Virtual Server
  • Visual Studio 2010
  • wcf
  • Web
  • Windsor

Blog Archive

  • ►  2012 (1)
    • ►  August (1)
  • ►  2011 (71)
    • ►  July (1)
    • ►  June (43)
    • ►  May (20)
    • ►  April (5)
    • ►  March (2)
  • ►  2010 (113)
    • ►  December (22)
    • ►  November (4)
    • ►  September (8)
    • ►  July (7)
    • ►  May (3)
    • ►  April (11)
    • ►  March (35)
    • ►  February (5)
    • ►  January (18)
  • ▼  2009 (143)
    • ►  December (3)
    • ►  October (3)
    • ►  September (12)
    • ▼  August (14)
      • Tips Membuat Navigasi Vertical
      • Postingan terlihat di Sidebar
      • Drop down menu button untuk Blog Anda
      • Menghilangkan Navbar (Navigation Bar)
      • 3subs-Menu
      • Slide-In Menu
      • New Navigation
      • Create a Jquery box
      • Circling text trail
      • Cara Buat Tab Menu Versi 1 Di Blogspot
      • Cara Membuat Efek Roaming Saat Blog Anda Di Buka
      • Cara Membuat Text Area Dgn Hightlight
      • Random background color
      • Verifying Your Blog Under Technorati
    • ►  July (23)
    • ►  June (1)
    • ►  May (18)
    • ►  April (23)
    • ►  March (36)
    • ►  February (5)
    • ►  January (5)
  • ►  2008 (30)
    • ►  December (1)
    • ►  November (4)
    • ►  October (2)
    • ►  September (5)
    • ►  August (5)
    • ►  July (3)
    • ►  June (6)
    • ►  May (2)
    • ►  April (1)
    • ►  March (1)
Powered by Blogger.

About Me

Unknown
View my complete profile