Cara Buat Teks Melingkari Kursor Mouse Di Blogger
Di Posting
on 4/04/2016 09:56:00 AM
Teks Melingkari Kursor Mouse Di Blogger – 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.
Klik simpan dan selesai.
Keterangan:
Meskipun kode yang digunakan cukup panjang, tetapi pemasangan aksesoris ini tidak terlalu memberatkan blog. Sehingga, kecepatan loading blog kita pun relatif stabil.
Website : indoblogseo
Credit : Dhie Valt Mhorsyl
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://indoblogseo/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>
/* 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://indoblogseo/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.
Website : indoblogseo
Credit : Dhie Valt Mhorsyl
Terimakasih telah membaca : Artikel Dari Kami. Silahkan masukan email anda dibawah ini! dan anda akan otomatis mendapatkan kiriman artikel terbaru dari MudahTrick. Terimakasih.
0 Komentar untuk : Cara Buat Teks Melingkari Kursor Mouse Di Blogger
Entri Populer
Arsip Blog
-
▼
2016
(103)
-
▼
April
(91)
- Cheat Diamond Dan Gold Line Lets GetRich Terbaru 2...
- 6 Langkah Cara Mempercepat Loading Di Blogger
- Mempercepat Loading Blogger Dengan Tanda Garis Miring
- Trick Cara Membuat Daftar Isi Blog Berdasarkan Label
- Trick Cara Membuat Daftar Isi Blogger Bag II
- Cara Menyembunyikan Tanggal Pada Komentar Blogger SEO
- Cara Menghilangkan Navbar Pada Blogger SEO
- Cara Membuat Auto Hide Navbar Pada Blogger
- Tips Renewal Domain CO CC
- Cara Menampilkan Judul Postingan Pada Halaman Utam...
- Cara Buat Random Post Di Blog Versi 3
- Widget Total Posts dan Total Comments Blogger
- Cara Menghilangkan Klik Kanan Pada Mouse Blogger
- Charles Debugging Proxy All Windows Terbaru 2016
- Download Cheat Engine Versi Terbaru 2016
- Download Aplikasi Gamekiller apk Android Gratis
- Fiddler Debugging Proxy All Windows Terbaru 2016 Work
- Kumpulan Cheat Game Android Tanpa ROOT Lengkap Ter...
- Cara Buat Address Bar Berjalan Di Blogger
- Cara Membuat Label Blog Menjadi Dua Kolom
- Cara Merubah Bentuk Kursor Mouse Pada Blogger
- Cara Mempromosikan Blog Dengan Situs Jejaring Sosial
- Widget Animasi Abowman Untuk Blogger SEO
- Cara Pasang Musik Di Blog Dengan Mudah
- Untung Dan Rugi Pasang Musik Di Blogger SEO Friendly
- Cara Membuat Warna Komentar Admin Di Blog Menjadi ...
- Trick Cara Melihat Harga Sebuah Blog
- Cara Buat Tombol Print Pada Blogger SEO
- Trick And Tips Cara Menyembunyikan Footer Pada Blo...
- Rahasia Trik Mendapatkan Email dan Password Blogsp...
- Trik Rahasia Melindungi Gambar Pada Postingan Blog
- Cara Pasang Screen Saver Pada Blogger SEO
- Trik Cara Upload JavaScript Di Google Code
- Cara Membuat Dan Pasang Status Loading Di Blog
- Trik Untuk Mengatasi Kotak Kode Verifikasi Komenta...
- Trik Cara Menampilkan Avatar Pada Komentar Blogger
- Cara Membuat Banner Pasang Iklan Di Blogger SEO
- Trik Cara Daftar dan Submit Blog Di Google
- Cara Mendaftarkan Blog Ke Yahoo Bing Webmaster
- Cara Pasang Random Posts SEO Friendly Di Blogger
- Tips Cara Menghapus Atribusi Blogger
- 6 Kelebihan Blogspot SEO Friendly
- Cara Buat Teks Melingkari Kursor Mouse Di Blogger
- Cara Pasang Script Alert Selamat Datang Konfirmasi...
- Cara Tambah Scroll Di Komentar Blogger
- Menambah Efek Salju Di Blogger SEO
- Cara Membuat Javascript Di Blogger
- Cara Menghilangkan Atribut Tulisan LinkWithin Di B...
- 4 Manfaat Utama Update Konten Di Blogger
- Cara Menghilangkan Tombol Tang dan Obeng Di Blogger
- Cara Membuat Read More Otomatis Di Blog
- 4 Kerugian Mengganti Template Blogger SEO Friendly
- Pengertian Sitelink Google SEO Friendly
- 3 Manfaat Sitelink Google
- Cara Ubah Jenis dan Ukuran Font Di Postingan Blogg...
- 8 Tanda Blogger Yang Baik SEO Friendly
- Cara Mengetahui Malware Atau Virus Pada Blog
- Trik Cara Menambah Efek Gelembung Di Blogger
- 5 Tips Penting Memilih File Hosting Dengan Benar
- Tutorial Kolaborasi Nama Blog dan SEO
- 4 Situs SEO Analysis Untuk Blogger SEO Friendly
- Pentingnya Referensi Terpercaya Saat Menulis Posti...
- Pengaruh Mood Ketika Menulis Di Bloggers
- Perbedaan Halaman Post dan Page Pada Blogspot SEO
- Manfaat Search Box Atau Pencarian Pada Blog
- Cara Membuat Twitter Follower Box Di Blogger SEO F...
- Tutorial Cara Mengetahui Hosting Sebuah Blog
- Tutorial Mengenal Splog Lebih Dekat
- Tutorial Perbandingan Splog dan Blog Spam
- ini lah Perbedaan Blog dan Website
- Trik Cara Daftar Feedburner
- Cara Cepat Membuat Tabel Pada Blogger
- Cara Buat Ruang Iklan 125x125 Pada Blogger
- Apakah Google Penguin Itu?
- Cara Pasang Widget Google+ Di Blogger Simple Denga...
- 5 Ciri Backlink Berkualitas SEO Friendly
- 4 Kesalahan Utama Saat Menulis di Blogger SEO Frie...
- Inilah 6 Trik SEO Yang Saya Lakukan Saat Publikasi...
- Tips Optimalisasi SEO Pada Gambar
- Cara membuat Breadcrumb Seo Friendly di Blogger
- Cara Mengetahui Blog Dofollow/Nofollow Dengan Add-...
- Google PageRank Update 4 April 2016 - 2018
- Cara Buat Tombol Share Dengan Efek jQuery Nudging ...
- 5 Tips/Cara Menulis Artikel Blog Post SEO Friendly...
- Cara Buat/Pasang Burung Twitter Terbang Bergerak D...
- Alexa | Cara Cepat Meningkatkan Alexa Rank Di Blogger
- Evo Magz: Template Blogger Keren Responsive & SEO ...
- Cara Agar Blog Cepat Terindex Google - Yahoo - Bin...
- Trik Seo Long Tail Keyword Blogger
- Cara Setting Pengaturan Internet Di Android - IOS
- Meta Tag Seo Friendly 2016-2017
-
▼
April
(91)
