Cara Mengganti Pointer Mouse pada Blog

Cara Mengganti Pointer Mouse pada Blog

Kali ini saya akan membahas tentang cara mengubah tampilan kursor yang ada di blog kita. Jika sobat Bosan dengan Kursor yang SNI ??? Pengen mengganti kursor yang lucu ??? tepat sekali kalo sobat nyasar kemari,,Disini saya akan sedikit share tentang Bagaimana caranya merubah atau mengganti kursor di blog yang standar menjadi elegan. 

Nah, di atas itu adalah contoh kursor blog . Bagi sobat yang ingin mengubah kursor yang ada di blog sobat, maka sobat bisa mengubahnya melalui langkah-langkah berikut:

1. Login lah ke akun blogger sobat terlebih dahulu

2. Lalu klik "Layout"

 3. Pilih "Add a gadget" lalu pilih "HTML/Java Script" dan paste-kan kode berikut untuk mulai mengubah tampilan kursor yang ada di blog sobat:

a. Kode 1: Mengubah kursor tapi tidak mengubah kursor ketika menyorot link

<style type="text/css">
body{cursor: url("http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png"), auto;}
</style>

b. Kode 2: Mengubah kursor serta tetap berubah walau disorot ke arah link

<style type="text/css">
body{cursor: url("http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png"), auto;}
body a:hover{cursor: url("http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png"), auto;}
</style>

SILAHKAN PILIH SALAH SATU KODE YANG SOBAT INGINKAN

4. Jika sudah, maka silahkan untuk tekan tombol "SAVE" atau "SIMPAN"

PENTING:

Sobat bisa mengganti link gambar yang telah saya tandai warna biru dengan link gambar kursor sesuai keinginan sobat.
Ada beberapa situs penyedia cursor yang lucu dan keren, sobat bisa mengunjungi situsnya untuk memilih2 kursor mana yang menurut sobat pas di hati..situsnya antara lain: 

• CURSOR-4U
• Totally Free Cursors
• Open Cursor Library

Atau link gambar yang tersedia di bawah ini :

URL : http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif 

 

http://i1200.photobucket.com/albums/bb321/aNyA_zdej28/FBML%20Vocaloid/C-GUMI.png

http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png

http://i44.photobucket.com/albums/f13/LONG65/Element2.gif

http://i1013.photobucket.com/albums/af252/oneuglycoffin/PhotoshopEdits/cuppycakecursor.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjsDH6hb0RtL7dpOr1zb4okknOOOzzq5-hIGx-xSWATgkTrzXwMMPVrkiIbXFi0sCeBcBR_0KOJqeMX4FCq6QqPY-2IxCMcDTSYH2hiEvRQoJ7PHwFu4m829Ax_8jkdPpdph7gn7ZzKfD9/s1600/cur283.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjohJY4AdW0goBvLhaAg8KQC08K5CtJq2p_Z3CWsdFzKMyj_YvMHJwKlmSf_SgBTmZhuEmAFbNwfbyYQ-_GF-arAuLjEAwwI0P9LA4F5QGi_JAm6ejlj4BIei8WqvrW96lBY3qrDbzBe6q0/s1600/cur740.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHrDbDBylAKMEgkDHoyhalvHQc1lqIR6sfTuMz3aFjI5wtGhmvGpg22WDWq7pETyV9lD_XBGC3EBwq_ow7qoRAaJyTXVNvAozjJLr_C_qfZfOD3jtQh_YXL3QL4KeVEbUg5yfA0YOhrQTE/s1600/cur815.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqOZpRc0GTbs-88AkRL7IXUe4DiEG6VB7w9xRNJ0t4viLn7Th6tBlAc2jnzNJXZXETiJvaRsO4TLfHNa_OWvCmUymZAJrVKKed4HhfmEscwZgAW9bIj3mBtHJJowocsQQchVdCSlCL4mY/s1600/oth617.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjag-ud1uc3dgaDgEvEm195QJ25TysPgwoKFBuehyB-K2fMdhEi4z-6IMc3l4mAcYll9jmCywGBEgDBMw3RuBEZzCb2th4qBCY4C5vprCndWpSK0LcfGdpzRL_JeHKrtWszvRjM97_VGIJH/s1600/cur1054.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFBV1o76OylH8r5qc_7BnYlItfnN0y-A9Trmn2VdussyAqkXa0TYyLmlIlf7VkjPN8LrOCEv8AmSd2pRdKo9nYsQsAqFuJQB5lhFvyh6KnYQUH0THuBy6JYsNVGTxK8nlaCtAmJf3ttuxO/s1600/cur1031.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP3SoOhxnLAUuyCmH6TQHTr3-Jh1QlUduBgUhIG7JK7w_yQZy8kvQc8ZEkHWrwFPlpvm0LxU0a4SllR8ak-0cnIsBsXI_BZgqraYGOT2eQ3qjlzGSpTk4IGD8HnaG5zhyaZf-n8DO09P3l/s1600/cur951.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCEgT9XSt3CiIOvuh3fWO1Pf4MYioheWbGZZ_8CbfGndjM0fKuL0qah7KnJuj77K9F38ba_N8nxLNLwpPf7wLTdbC78HL9HzqhYeEBwqak3sgu3BEUOxr0ffwc_bDHZhq2CHrnkRDd1jyG/s1600/oth591.gif

 

                                                                     

Option #1 - Universal CSS/HTML Code

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-12/ani1131.ani), url(http://cur.cursors-4u.net/anime/ani-12/ani1131.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/01/vertical-resize-hello-kitty.html" target="_blank" title="Vertical Resize - Hello Kitty"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Vertical Resize - Hello Kitty" style="position:absolute; top: 0px; right: 0px;" /></a>

Option #2 - CSS Style Sheet Only Code

/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-12/ani1131.ani), url(http://cur.cursors-4u.net/anime/ani-12/ani1131.png), progress !important;} /* End http://www.cursors-4u.com */

Option #1 - Universal CSS/HTML Code

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use160.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/06/harry-potter-magical-wand.html" target="_blank" title="Harry Potter Magical Wand"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Harry Potter Magical Wand" style="position:absolute; top: 0px; right: 0px;" /></a>

Option #2 - CSS Style Sheet Only Code

/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use160.cur), progress !important;} /* End http://www.cursors-4u.com */

Option #1 - Universal CSS/HTML Code

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-3/spe232.ani), url(http://cur.cursors-4u.net/special/spe-3/spe232.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/08/pink-arrow-bow-tie-hearts-blinking-letter-j.html" target="_blank" title="Pink Arrow, Bow Tie Hearts Blinking, Letter J"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Pink Arrow, Bow Tie Hearts Blinking, Letter J" style="position:absolute; top: 0px; right: 0px;" /></a>

Option #2 - CSS Style Sheet Only Code

/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/special/spe-3/spe232.ani), url(http://cur.cursors-4u.net/special/spe-3/spe232.png), progress !important;} /* End http://www.cursors-4u.com */

Option #1 - Universal CSS/HTML Code

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-9/gam847.ani), url(http://cur.cursors-4u.net/games/gam-9/gam847.png), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2009/02/27/wing-kirby-walking.html" target="_blank" title="Wing Kirby Walking"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Wing Kirby Walking" style="position:absolute; top: 0px; right: 0px;" /></a>

Option #2 - CSS Style Sheet Only Code

 /* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-9/gam847.ani), url(http://cur.cursors-4u.net/games/gam-9/gam847.png), progress !important;} /* End http://www.cursors-4u.com */

Cara Membuat Tulisan Berkedip-kedip di Blogger (Blink)

 

Tulisan yang berkelip pada blog banyak digunakan bagi menarik minat pengunjung untuk melihat dan klik link pada tulisan tersebut.Caranya amat mudah cuma letakkan kod blink pada depan dan belakang teks yang hendak

contohnya:

Jika hendak melatak blink pada teks cuma tambahkan kod blink didepan dan belakang seperti contoh dibawah:

Caranya cukup mudah! intinya tambahakan/sisipkan kode script kode  <blink>tulisan yang akan berkedip</blink>
Ganti tulisan yang akan berkedip dengan tulisan anda!

Misal :  <blink>I LOVE BLOG UNTUK SAHABAT</blink>

hasilnya :  I LOVE BLOG UNTUK SAHABAT


Atau Kalian ingin memvariasikan Tulisan berkedip kalian dengan Warna dan tulisan Tebal??

Ini kodenya :<blink><b><span style="color: Blue;">I LOVE BLOG UNTUK SAHABAT</span></b></blink>

Hasilnya :  I LOVE BLOG UNTUK SAHABAT 

NB : Ganti Tulisan Blue dengan warna sesuka kalian!

Sangat mudah Bukan ?? :)

Penempatan tulisan berkedip !
Biasananya webmaster menempatkan tulisan kedip ini di bagian bagian blog atau website yang memang disengaja untuk menarik perhatian pengunjung seperti juga fungsi tulisan berjalan yang tujuan menarik perhatian pengunjung yang tujuannya agar pengunjung melirik kearah objek bergerak tersebut.Untuk cara membuat tulisan berjalan , silahkan lihat kesini : Cara membuat tulisan berjalan diblog yang saya buat dengan 6 Efek tulisan berjalan!
Demikian Artikel yang Mazinu posting, semoga artikel Cara membuat tulisan berkedip ini bermanfaat buat kalian! Sukses Sob.

Cara pasang shoutbox melayang

Dalam artikel sebelum ini saya ada menerangkan cara bagaimana cara memasang shout box secara tersembunyi pada tepi paparan blog.Untuk kali ini pula agak berlainan kerana shoutbox yang diklik akan muncul dibahagian tengah  paparan blog dengan kesan gelap dan muncul secara perlahan lahan.Cara membuatnya juga agak mudah kerana  cuma perlu masukkan pada widget sahaja. Cara memasangnya:

1.Masuk ke dashboard-klik pada Layout dan pilih add a gadget

2.Pilih HTML/Javascript

Dan masukkan kod ini:

<!-- Start flying Shoutbox  by ybl -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {

//select all the a tag with name equal to ybl

$('a[name=ybl]').click(function(e) {

//Cancel the link behavior

e.preventDefault();

//Get the A tag

var id = $(this).attr('href');

//Get the screen height and width

var tbbHeight = $(document).height();

var tbbWidth = $(window).width();

//Set heigth and width to tbb to fill up the whole screen

$('#tbb').css({'width':tbbWidth,'height':tbbHeight});

//transition effect

$('#tbb').fadeIn(1000);

$('#tbb').fadeTo("slow",0.8);

//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();

//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);

//transition effect

$(id).fadeIn(2000);

});

//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();

$('#tbb').hide();

$('.window').hide();

});

//if tbb is clicked

$('#tbb').click(function () {

$(this).hide();

$('.window').hide();

});

});

</script>

<style>a {color:#ffffff; text-decoration:none}

img { border: none; }

#tbb {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

#ddt .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}

#ddt #yblshoutbox {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4GWsw2hsEwElRKUlwtKnvr7tNizf9r8mOgUGfLEeIkU8Rc3eSksRoTfXKKMqtQXEHBNtRPqftZU7bX9KJQO1KAqmxtEekYZxkUXSQCxvSqFoIV2aHv48CivGQLwARlbcJ2V_nl9fCjY/s1600/shout.gif) no-repeat 0 0 transparent;

width:272px;

height:460px;

padding:60px 0 20px 15px;

}

#ttp {

padding:2px 0 0 0;

}

</style>

<ul><center> <a href="#yblshoutbox" name="ybl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4N3FrS8p-MZ-Nsui-7X9H6iecPcDgZTO4-gax8kE35HmajUIZ5mX8-hmrAtbKKAJYq7dw60SbLlMFTronJbxotj4whGeDukbqSokR7990smW5gUTECUbOMxJQRDQcYHcZWZXej6jjJY/s512/button.gif" border="0" width="128" height="58" /></a> </center> </ul>

<div id="ddt">

<!-- Start Shoutbox -->

<div id="yblshoutbox" class="window">

LETAKKAN KOD SHOUTBOX DISINI

<div id="ttp"><input type="button" value="Close" class="close" style="background: #0066FF; color: #ffffff;"/><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-shoutbox-melayang.html"><font size="1">get this</font>

</a></div></div><!-- End Shoutbox -->

<div id="tbb"></div></div>

<!-- End of flying Shoutbox  by ybl -->

 Kemudian klik save
#Jangan lupa masukkan kod shoutmix pada ruangan diatas.Ubahkan kod shoutmix/Cbox contoh width="240" height="380" supaya memenuhi ruang bingkai.

Cara membuat tulisan berjalan mengikuti Cursor

Cara membuat tulisan berjalan mengikuti Cursor
Untuk mempercantik tampilan halaman blog dan menarik pengunjung Agan-agan bisa membuat sebuah tulisan yang berjalan mengikuti kemana gerakan Cursor dari mouse berjalan sehingga P kelihatan hidup halaman blog Agan semua. Untuk lebih jelanya saya ajak ke TKP dibawah ini.

Login ke Blogger

Klik Rancangan ( Yang dulunya Tata Letak )

Klik tab Edit HTML

Klik tulisan Download Template Lengkap.

Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget ,
Kemudian cari kode </head>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).
Kalau sudah ketemu, Copy Paste kode berikut dan letakkan diatas kode </head> tersebut.
Berikut kode : Cara membuat tulisan berjalan mengikuti Cursor

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000ff;
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'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Welcome To My Blog";
/* 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 =20;
// 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>

Tulisan yang berwarna biru bisa agan2 ganti sesuai selera
Simpan dan lihat hasilnya. Sumber
Sekian mengenai : Cara membuat tulisan berjalan mengikuti Cursor
Semoga bermanfaat.

Read more: http://cintapriawanita.blogspot.com/2012/07/cara-membuat-tulisan-berjalan-mengikuti.html#ixzz33kblKEQx