Cara Buat Text Melingkari Kursor dengan Kode HTML
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.
/* 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.
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.