Archive for Agustus 2012
Cara Membuat efek BINTANG pada Kursor
Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor – Pastinya sobat blogger sudah sering melihat tampilan kursor di
blog lain dengan efek bintang yang bertaburan (sprinkle) dan
berwarna-warni bukan ? Memang efek bintang
bertaburan (sprinkle) pada kursor bisa mempercantik penampilan blog sobat,
namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog
akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo
memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.
Cara membuat efek bintang bertaburan pada kursor
cukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :
1.
Login ke dashboard blogger sobat.
2.
Pilih Rancangan > Elemen Halaman > Add
Gadget (HTML/JavaScript).
3.
Copy dan paste script dibawah ini pada gadget
baru tadi.
4.
Simpan dan lihat hasilnya.
NB : Silahkan ganti warna “red”
dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.
Efek bintang bertaburan pada kursor ini akan terlihat
jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja
yang sabar ya. Selamat mencoba sobat.
Cara Membuat efek Daun Jatuh
Cara Membuat Efek Daun Berjatuhan Di Blog – Efek daun berjatuhan di blog sepertinya
juga banyak diminati oleh sobat blogger, dan menurut saya efek daun
berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek
bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun
berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut
dibawah ini.
Cara Membuat
Efek Daun Berjatuhan :
1.
Seperti biasa login dulu ke dashboard blogger
anda.
2.
Pilih Rancangan > Edit HTML, centang Expand
widget template.
3.
Cari kode </head>
pada template dengan menggunakan Ctrl+F.
4.
Copy kode javascript dibawah ini dan letakkan
tepat diatas kode </head> .
<script
src='http://arti.master.irhamna.googlepages.com/daun.js'/>
5.
Save / simpan template anda dan lihat hasilnya
muantaaap bro !!
Cara Membuat Efek hujan Salju
Cara Membuat Efek Hujan Salju di Blog Anda - Efek
hujan salju yang saya posting ini sangat bagus ditampilkan jika blog sobat
mempunyai background/latar belakang berwarna gelap atau hitam. Karena kalo efek hujan salju ini dipasang di blog
yang background pada bagian posting warna terang atau putih seperti blog saya
ini, maka pemasangan efek hujan saljunya jadi sia-sia karena tidak akan
terlihat. Apalagi kalo hujan saljunya kecil-kecil kayak hujan gerimis gitu wah
tambah ngga keliatan jadinya. Kalau efek hujan daun berjatuhan
yang saya posting sebelum ini karena daunnya berwarna hijau malah lebih
terlihat jika backgroundnya putih. Langsung aja nih sobat ikuti langkah
pembuatannya
disini ya.
Cara membuat/memasang
efek hujan salju di blog :
1.
Login ke dashboard blogger anda.
2.
Pilih Rancangan > Elemen Halaman > Add
gadget (HTML/JavaScript).
3.
Letakkan script efek hujan salju dibawah ini
pada gadget.
<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>
4.
Simpan dan lihat hasilnya.
Nah hujan saljunya sudah terlihat turun kan he he..,
kapan ya kita bisa merasakan musim dingin beneran kayak di Amrik sono ? OK
sobat sekian dulu aja tips/trik cara membuat/pasang efek hujan salju pada blog
ini. Semoga bermanfaat dan salam blogger.
Cara membuat link menjadi warna-warni
Cara membuat link
berwarna-warni :
1.
Login ke dashboard blogger anda.
2.
Pilih Rancangan > Elemen Laman > Add
gadget (HTML/JavaScript).
3.
Copy kode javascript dibawah ini dan paste pada
gadget.
<script src='http://hbhost.googlecode.com/files/rainbow-link.js'/>
4.
Selesai dan silahkan diliat hasilnya.
5.
Cara lainnya adalah sobat bisa meletakkan script
tadi pada template tepatnya diatas kode <body>
, masuk ke menu Edit HTML, letakkan scriptnya dan save template anda.
Cara Membuat teks pada kursor
Cara Membuat Teks Pada Kursor :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3. Copy script dibawah ini dan paste pada gadget.
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
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 = "Tulis teks anda disini";
/* 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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>
4. Save/Simpan dan lihat hasilnya.
5. Sobat dapat mengganti jenis dan warna font pada bagian yang ditandai dengan warna biru.
6. Tulis teks yang anda inginkan pada “Tulis teks disini” yang berwarna merah.
7. Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.
Selamat mencoba Cara Membuat Teks Pada Kursor ini dan Selamat Tahun Baru 2012 buat sahabat blogger semuanya !!
Cara Mengganti efek kursor
Cara Mengganti Gambar Kursor di Blog -
Gara-gara kepingin sekali mengganti gambar kursor di blog ini, akhirnya
setelah googling kesana kemari nemu juga sebuah situs yang menyediakan banyak
gambar-gambar kursor pilihan. Gambar kursor yang disediakan situs penyedia gambar ini http://www.totallyfreecursors.com/ banyak sekali, jadi
kita tinggal memilih sesuai selera aja. Untuk cara memasang gambar kursor ini
di blog, kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada
template. Dibawah ini ada beberapa sample gambar untuk kursor yang saya ambil
berikut URL alamat kursor tersebut.
URL
:
http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif
URL
:
http://downloads.totallyfreecursors.com/thumbnails/aliendance.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
Cara mengganti gambar kursor di blog :
1.
Login ke dashboard blogger anda.
2.
Pilih Rancangan > Edit HTML, centang Expand
widget template.
3.
Carilah kode </head>
pada template anda dengan menggunakan Ctrl F.
4.
Copy kode CSS dibawah ini dan letakkan tepat
diatas kode </head> .
<style type='text/css'> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/sweden.gif"), auto;} </style>
5.
Simpan template anda dan lihat perubahan pada
gambar kursor
6.
Jika sobat ingin mengganti gambar kursor dengan
gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL
gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP di http://www.totallyfreecursors.com/ .
Nah ternyata mengganti gambar kursor di blog memang bisa
jadi solusi mempercantik tampilan blog juga ya apalagi kalo ditambahin lagi dengan efek bintang siip dah. Tinggal giliran sobat blogger nih, selamat
mencoba ya !
