Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Buat Text Melingkari Kursor dengan Kode HTML

Cara Buat Text Melingkari Kursor

patahsemangat.web.id -  apakah kamu bosan dengan widget blog yang hanya itu-itu saja? pernahkah kamu melihat ada ada kursor yang diikuti tulisan atau widget lain?

Pada kesempatan ini saya akan membagikan tutorial tentang cara membuat text yang melingkari kursor. Cara ini bertujuan membuat tampilan blog lebih menarik dan tidak membosankan. Kamu bisa menuliskan kata apa saja yang akan mengikuti kursor.

Istilah text melingkari kursor yaitu circling text trail. Widget ini untuk sekarang memang jarang digunakan blogger. Namun tidak ada salahnya jika kamu mencoba memasangnya. 

Perlu diperhatikan ada kelebihan dan kekurangan sebelum memasang widget ini. Kelebihannya yaitu lebih menarik dan orang lebih fokus. Namun, kekurangannya yaitu kadang tulisan yang terus bergerak tersebut menutupi text yang ada di blog. Sehingga perlu dipertimbangkan lagi kalau misalnya blog lebih dominan berisi dengan tulisan. Blog-blog seperti berita mungkin kurang cocok dengan widget semacam ini. Bagi blog yang banyak gambarnya seperti tidak masalah dengan hal demikian

Cara Membuat Text Melingkari Kursor

Berikut ini adalah langkah-langkah yang harus kamu ikuti untuk membuat text melingkari kursor di blog.

1. Silahkan masuk ke akun blogger.

2. Pilih menu Tata Letak atau di menu Setting juga bisa. Namun lebih mudah di menu Tata Letak.

3. Klik add gadget atau tambah gadget.

4. Pilih opsi HTML/JavaScript.

5. Masukan kode html dibawah ini.

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

6. Klik simpan dan selesai. Lalu kamu bisa melihat langsung hasilnya dengan membuka blog tersebut.

Note:
Kamu bisa mengganti kata "Selamat Datang" dengan kata apapun yang kamu inginkan. Sehingga bisa lebih menarik dan sesuai selera.

Baca juga: Solusi Pengunjung Blog Tak Kunjung Naik

Itulah tadi trik rahasia menambahkan text yang melingkari kursor di blog. Memang kodenya lumayan panjang. Tapi kamu tidak perlu mengeluh karena bisa dengan mudah di copy dan paste. Sekarang kamu sudah berhasil merubah dan menambahkan widget yang membuat blog lebih unik dan menarik.