Cara Buat Teks Melingkari Kursor

Teks Melingkari Kursor – Khusus untuk blog dengan topik pribadi, pernak-pernik blog berupa teks yang melingkari kursor cukup bagus untuk diterapkan dalam blog kita. Pemasangan teks melingkari kursor ini dapat mempercantik tampilan. Selain itu, teks yang dituliskan juga dapat menjadi sapaan kita sebagai pemilik blog kepada para pembaca agar kesan awal terhadap blog kita menjadi lebih baik.


Teks melingkari kursor atau Circling text trail ini merupakan pernak-pernik blog yang cukup unik dan menarik. Unik karena jarang blog yang menggunakan cara ini di dalam blog mereka dan menarik karena pemasangan aksesoris ini akan menjadi perhatian para pembaca dalam menyimak postingan blog kita. Hal ini terjadi karena gerakan teks yang melingkari kursor ini akan selalu mengikuti ke manapun kursor tersebut di arahkan.

Karena sifatnya yang hanya sebagai pelengkap dan pemanis tampilan, pemasangan pernak-pernik blog ini tidak dianjurkan untuk dipasang pada blog yang bertemakan berita atau yang lebih menonjolkan isi bacaan postingan blognya. Hal ini dikarenakan pemasangan teks yang melingkari kursor ini akan menggangu fokus pengunjung dalam membaca setiap kalimat dalam postingan blog. Selain itu, pemasangan teks melingkari kursor yang terkesan girly ini juga tidak sejalan dengan konsep blog yang diusung oleh blog bertemakan berita.

Adapun cara membuat teks melingkari kursor ini adalah sebagai berikut:

Masuk ke dalam akun blogger kita masing-masing.

Klik rancangan.

Klik add gadget atau tambah gadget.

Pilih HTML/JavaScript.

Masukan kode berikut di dalamnya.

<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 = "Selamat Datang";

/* 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>

Klik simpan dan selesai.

Keterangan:

  • Ganti kalimat Selamat Datang dengan kalimat sapaan atau kalimat lain sesuai keinginan kita.


Meskipun kode yang digunakan cukup panjang, tetapi pemasangan aksesoris ini tidak terlalu memberatkan blog. Sehingga, kecepatan loading blog kita pun relatif stabil.

36 komentar:

  1. Satu masukan lagi nih mengenai pernak-pernik blog..Entar dicoba deh

    BalasHapus
  2. masukan yang keren....!!! abang yang satu ini emang hebat battt baaaattt , xi xi xi

    BalasHapus
  3. kalau dipasang bisa jadi lebih asik ya sob,, hehe,, thx sharenya,, :)

    BalasHapus
  4. nice~
    pernah coba tapi bikin berat :D

    BalasHapus
  5. Udah dicoba. Mantap. Tapi warnanya bisa diganti gak?
    Visit my blog ya, mampir di buku tamu atau komentar kalo komentar ini udah dibalas.. Makasih.. ^^

    BalasHapus
  6. Postingan yang inspiratif, menambah pengetahuan tentang ngeblog, teman. Terima kasih.

    BalasHapus
  7. wuihh :) mantap
    terus berkarya :)

    BalasHapus
  8. Scriptnya terlalu panjang gan! Ane ga bisa copy paste! (pake hp)

    BalasHapus
  9. wach,ni dia tips agar blog jadi lebih keren,,,

    BalasHapus
  10. well done.

    saya bookmark dulu.
    sapa tahu ke depannya perlu buat kaya ginian.

    thanks for share

    BalasHapus
  11. @Obrolan Blogger.com:

    trims untuk apresiasinya. :)

    BalasHapus
  12. @Rama88:

    pemasangan aksesoris ini memang menjadikan tampilan blog terkesan seolah lebih hidup, tetapi diperhatikan juga dengan tema blog kita. :)

    BalasHapus
  13. @jiah al jafara:

    tidak terlalu berat. :)

    BalasHapus
  14. @Uc Herawati:

    seharusnya bisa. tapi saya sendiri belum menemukan cara mengganti warnanya.
    ada yang bisa membantu? :)

    BalasHapus
  15. @Sungkowoastro:

    trims kembali bro. :)

    BalasHapus
  16. @Nurmayanti Zain:

    trims untuk apresiasinya. :)

    BalasHapus
  17. @Mas Sugeng:

    nanti dicoba dulu menggunakan komputer bro. :D

    BalasHapus
  18. @Kevin's Journey:

    silakan dibookmark bro, semoga bermanfaat. :)

    BalasHapus
  19. kunjungan akhir pekan di sini sob :)
    nice share ni,,, buat pemanis blog

    BalasHapus
  20. nice info bro....
    warna teks bisa diganti, silahkan dicari tulisan color...seperti dibawah ganti kode warna (#000) sesuai keinginan anda...misalnya #01DF01 untuk mendapatkan warna hijau seperti di blog saya....
    font-family: 'comic sans ms', verdana, arial;
    color: #000;
    /* End Optional */

    BalasHapus
  21. tambahan yang sangat berguna nih bro. :D
    trims ya masukannya.

    BalasHapus
  22. Kayaknya sedikit memperberat loading blognya deh ?

    BalasHapus
  23. semua pemasangan widget memang memperlambat, karena ukuran blog semakin besar. tetapi tidak begitu signifikan bro. :)

    BalasHapus
  24. Mwt Mlm Sob....
    NumpanG Nanya nih,...
    Kalau Buat Komputer Bisa Gak Biar Mouse'y Kaya Gini,..???

    BalasHapus
  25. kalo yang biasa ada ok ok nya pas muncul blognya gimana gan?

    BalasHapus
  26. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  27. :) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

    BalasHapus
  28. sob boleh mengcopy artikel sob

    BalasHapus
  29. waktu nambahin gadget dari dashboard gue gak ada pilihan HMTL/Javascript. Kok bisa beda gitu gan? Gue buka nya pake komputer. yang ada tambahkan milik anda..

    BalasHapus
  30. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    Silahkan berkunjung di intanqq

    BalasHapus