halo :D
postingan sebelumnya membahas tentang beberapa referensi alamat tutorial blog. nah, setelah berhasil membuat blog, selanjutnya hiasi blog mu dengan berbagai macam cara...
oke, di postingan yang ini, aku mau membahas tentang "Tips Untuk Mempercantik Blog" .
berikut beberapa cara untuk mempercantik blog :
- Cara Mengganti Gambar Kursor di Blog :
1.
Login ke dashboard blogger mu.
2.
Pilih Rancangan > Edit HTML, centang Expand
widget template.
3.
Carilah kode </head>
pada template mu dengan menggunakan Ctrl F.
4.
Copy kode CSS dibawah ini dan taruh tepat
diatas kode </head> .
<style type='text/css'>
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/sweden.gif"),
auto;}
</style>
5.
Simpan template mu dan lihat perubahan pada
gambar kursor
6. Kalo mau ngganti gambar kursor dengan
gambar yang lain, kamu tinggal ngganti URL gambar yang berwarna merah
dengan URL
gambar pada sample di atas atau kamu bisa langsung browsing sendiri ke
TKP di http://www.totallyfreecursors.com/
.
-
Cara Membuat Teks Pada Kursor :
1. Login ke dashboard blogger mu.
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. Kamu bisa mengganti jenis & warna font pada bagian yang
ditandai dengan warna biru.
6. Tulis teks yang kamu inginkan pada “Tulis
teks disini” yang warnanya merah.
7. Sekedar mengingatkan, 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 kamu akan langsung dapat
melihat hasilnya pada browser.
- Cara membuat link
berwarna-warni :
1.
Login ke dashboard blogger mu.
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 dilihat hasilnya.
5.
Cara lainnya adalah kamu bisa meletakkan script
tadi pada template tepatnya diatas kode <body>
, masuk ke menu Edit HTML, letakkan scriptnya dan save template mu.
- Cara membuat/memasang
efek hujan salju di blog :
1.
Login ke dashboard blogger mu.
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 udah turun kan? hahaha..
- Cara Membuat
Efek Daun Berjatuhan :
1.
Seperti biasa login dulu ke dashboard blogger mu.
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 taruh
tepat diatas kode </head> .
<script
src='http://arti.master.irhamna.googlepages.com/daun.js'/>
5.
Save / simpan template mu dan lihat hasilnya
mantab bro :D
- Cara membuat efek bintang bertaburan pada kursor
1.
Login ke dashboard blogger mu.
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 mu...
- Cara Membuat Title Bar Berjalan
- login ke dashbord blog kamu.
- pilih ''RANCANGAN / DESIGN''
- pada halaman ''Element laman'' klik 'Tambah Gadget'
- pilih widget ''HTML/Javascript'' dan tempatkan script berikut didalamnya.
- terakhir klik SIMPAN
Script yang di copy:
<script> function tb8_makeArray(n){ this.length = n; return this.length; } tb8_messages = new tb8_makeArray(3); tb8_messages[0] = "WELCOME TO OUR WEBSITE"; tb8_messages[1] = "INFORMATION ABOUT INTERNET"; tb8_messages[2] = "AND THANKS FOR VISITING"; tb8_rptType = 'infinite'; tb8_rptNbr = 5; tb8_speed = 125; tb8_delay = 1000; var tb8_counter=1; var tb8_currMsg=0; var tb8_tekst =""; var tb8_i=0; var tb8_TID = null; function tb8_pisi(){ tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1); document.title = tb8_tekst; tb8_sp=tb8_speed; tb8_i++; if (tb8_i==tb8_messages[tb8_currMsg].length){ tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay; } if (tb8_currMsg == tb8_messages.length){ if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){ clearTimeout(tb8_TID); return; } tb8_counter++; tb8_currMsg = 0; } tb8_TID = setTimeout("tb8_pisi()", tb8_sp); } tb8_pisi() </script>
- Keterangan:
- " pada tulisan yang berwarna ungu adalah tampilan teks, ganti sesuai keinginan kamu.
- " pada tulisan yang berwarna hijau tb8_speed = 125 adalah kecepatan teks berjalan pada TITLE BAR, silahkan expresikan sesuai keinginan kamu.
hmm.. kayaknya cukup sekian dulu. ntar kalo ada tambahan aku posting lagi :)
sekian dan matur nuwun :D
