Cara Membuat Kursor Nama Sendiri Blog

Aldi Andreansyah Sciences, AA Sciences - Cursor, Kursor Nama Sendiri, Cara Membuat Kursor Nama Sendiri Blog, kumpulan Kursor Nama Sendiri Blogger.

Halo sobat Aldi Andreansyah Sciences, AA Sciences kembali lagi ya terutama pada Halaman website saya ini , Alhamdulillah sebelumnya AA Sciences pun sudah membahas artikel tutorial Blogger serupa Mengenai tentang pembuatan sebuah efek² lengkap seperti meteor, bintang jatuh, bintang san efek lengkap lainnya yang di terapkan pada blogger yakni yang berjudul Cara Membuat Efek di Blog (Lengkap), tapi kembali lagi serupa AA Sciences pun Alhamdulillah di kali ini dapat membagikan kesempatan membagikan mengenai Tutorial Blogger yaitu dalam pembuatan cursor nama sendiri yang di terapkan pada blogger yang berjudul Cara Membuat Kursor Nama Sendiri Blog.

Cara Membuat Kursor Nama Sendiri Blog - Tampilan yang keren dan unik adalah salah satu dimana hal yang membuat sebuah tampilan agar menjadi lebih cantik dan menarik terutama hal tersebut di terapkan pada sebuah website maupun blog yang diinginkan baik itu website pemilik situs lain dan bahkan situs website atau blog kita sendiri sekalipun.

Dengan adanya penambahan sebuah efek pun akan terpupuki hal² yang dimana kita inginkan seperti efek animasi, efek burung twitter, Efek cursor dan efek lengkap lainnya.

Baca juga : Cara Membuat Animasi lengkap
                     Cara Membuat Efek (Lengkap)
                     Cara Membuat Burung Twitter

Nah di kali ini AA Sciences alhamdulillah membahas mengenai pembuatan sebuah efek cursor yang dimana cursor tersebut selalu mengikuti arah jalan sebuah kursor dan cursor tersebut layaknya seperti kursor pada tampilan computer atau laptop pada umumnya yang dimana kursor tersebut memiliki bentuk sudut segitiga runcing, memiliki ekor persegi panjang dan hanya memiliki warna yakni hitam putih saja.

Tetapi berbeda di kali ini AA Sciences memberikan nya efek cursor nya yakni dengan ada nya berbentuk tulisan (nama), warna, dan jenis² font sekalipun yang dimana kalian dapat mendesain nya terlebih dahulu sesuka hati. Yakni jika pada intinya AA Sciences berbagi efek yakni efek kursor nama sendiri di blog.

Seperti biasa nya sebelum kita menuju pada metode pembuatan, terutama pembuatan efek cursor nama sendiri, ada kalanya kita mengetahui apa dari kelebihan dan kekurangan jika efek kursor nama sendiri ini bila diterapkan pada website atau blog kalian tersebut.

Berikut Kelebihan nya :

• Dapat dikatakan blog maupun web tersebut agar tampil menarik dan unik dengan ada nya tampilan efek kursor buatan nama sendiri tersebut 

• para pengunjung yang mengunjungi web maupun blog tersebut akan sedikit tertarik dengan adanya efek kursor nama tersebut 

• efek kursor nama tertentu dapat memudahkan pengunjung bahwa benda yang dimaksud atau niche yang dimaksud tersebut adalah seperti layaknya pada efek yang tertuju tersebut.

Dan Berikut Kekurangan nya :

• Loading blog salah satu nya akan sedikit berkurang dengan adanya tampilan efek dengan fitur nama kursor yang sudah di pasang pada web maupun blog tersebut 

• Para pengunjung setidaknya sedikit rumit/ribet khusus nya itu para pengunjung yang tidak senang dengan tampilan yang rumit contoh nya : orang tua, remaja, dewasa. 

• Mesin Telusur agak ruwit untuk mengindex blog tersebut disebabkan tampilan blog/web loading yang sedikit lama dengan adanya efek kursor nama sendiri yang sudah di terapkan tersebut.

Nah mungkin hanya cukup sekian saja mengenai pembahasan jika efek kursor nama sendiri bila di terapkan pada website atau blog yang dapat AA Sciences sampaikan, Semoga kalian vaham mengenai kelebihan dan kekurangan nya (Amin).

Oke jika kalian sudahlah penasaran mengenai bagaimana cara membuat efek kursor pada website atau blog ini, langsung saja simak berikut metode pembuatan nya.

Cara Membuat Kursor Nama Sendiri Blog :

A . Efek Kursor Nama Sendiri (Pertama) 

1 . Pastikan sudah Login terlebih dahulu pada akun Blogger kalian.

2 . Tata Letak - > Tambah Gadget - > HTML Javascript.

3 . Masukkan script HTML di bawah ni pada bagian tepat pada mode HTML.

<style type="text/css">
/* Circle Text Styles */ 

#outerCircleText {font-style: normal;font-weight: normal;font-family: 'ARIAL';color: #374760;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;}</style>

<script type="text/javascript">;(function(){var msg = "Aldi Andreansyah";var size = 24;var circleY = 0.75; var circleX = 2;var letter_spacing = 5;var diameter = 10;var rotation = 0.4;var speed = 0.2;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-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position},makecircle = function(){ // rotation/positioningif(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 circled = 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 resistancey[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 arraysif(!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>

4 . Terakhir, Pilih menu Simpan.

Keterangan :

• Teks Warna Merah : Jenis Font
• Teks Berwarna Hijau : Warna Efek
• Teks Berwarna Biru : Tuliskan Nama kalian.

B . Efek Kursor nama sendiri (Kedua) :

1 . Pastikan sudah Login terlebih dahulu pada akun Blogger kalian.

2 . Tata Letak - > Tambah Gadget - > HTML Javascript.

3 . Masukkan script HTML di bawah ini tepat pada bagian mode HTML.

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - */
font-style:italic;font-weight:bold;font-family: 'comic sans ms',verdana,arial;color: #374760;
/* End Optional */
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">;(function(){
// Your message here (QUOTED STRING)
var msg = "Aldi Andreansyah";
// 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 spacesbetween 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;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-positionxmouse = !isNaN(e.pageX)? e.pageX : e.clientX;
// x-position},makecircle = function(){ // rotation/positioningif(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 circled = 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 resistancey[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 arraysif(!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>

4 . Terakhir, Pilih menu Simpan.

Keterangan :

• Teks Warna Merah : Jenis Font
• Teks Berwarna Hijau : Warna Efek
• Teks Berwarna Biru : Tuliskan Nama kalian.

Nah mungkin hanya sekian mengenai pembahasan cara membuat efek kursor nama sendiri di Blog yang dapat AA Sciences sampaikan, semoga bermanfaat dan sekaligus menambah wawasan mengenai penambahan efek kursor nama sendiri di blog ini, Amin.

Share this post