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

  • Spiderman Shattered Dimensions - RELOADED
    Spiderman Shattered Dimensions - RELOADED | 8.17 Gb Genre: Action Game Type : ISO Release Date: Q4 2010 Here we have a new action,adventu...
  • How and Why verify your site?
    Privacy is important to Google, which is why Google Webmaster Tools asks you to prove you own a site before showing you stats and data abou...
  • 5 Reasons to Blog Anonymously (and 5 Reasons Not To)
    This guest post is by Phil (not his real name) of somehighschoolblog . It used to be impossible to run a business anonymously. Sure, some au...
  • Would Google Adsense Ever Ban You?
    Adsense publishing is such a lucrative business for so many webmasters. It is a business with a simple strategical approach; you make money ...
  • Free Hosting under Google and free failed
    Do you want to host your external java script files in unlimited bandwidth? If you host your files on google code you can do for free. This ...
  • Free download TeamViewer Manager 5.1.904
    TeamViewer Manager 5.1.904 | 17 MB An optional database tool that stores your partner details in a database that can also be shared over ...
  • 8 Tips To Decrease Your Blog’s Bounce Rate
    Bounce rate is a term used by Google Analytics ; it refers to visitors who land on your blog and leave without going to any other page. The ...
  • Fasting (Saum)
    Every year in the month of Ramadan, all Muslims fast from first light until sundown, abstaining from food, drink, and sexual relations. Thos...
  • Hands on, Swipe finger on the Nokia N9 screen
    Nokia recently introduced the N9 at Nokia Connection 2011 event. Here it is Nokia's first smartphone with MeeGo operating system . What...
  • Expert Hard Drive Recovery After Reformatting
    Computers are equipment that also can suffer crashes from wear and tear. Over long-term use, computers can crash on their own. In fact, 44% ...

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