selamat malam brother and sisther bloger mania. Capek bener abis kerja mengajar anak-anak terus ....tapi demi menyukseskan blog aku harus tetep postingan walopun udah tengah malam (menjelang pagi yak? :D ). Apalagi ada permintaan dari salah satu temen aku, si Men :-) . Malam ini aku pengen ngebahas gimana caranya meng-upload widget berformat html ke dalam blog kita. Widget yang disediakan oleh blogger emang udah keren, namun pasti kita masih merasa ada yang kurang jreeng dari blog kesayangan. Sayangnya beberapa widget keren yang disediakan oleh sumber lain masih banyak yang belum didukung oleh blogger sehingga masih harus di-upload menggunakan cara tradisional. Meskipun masih tergolong pemula untuk bahasa berbasis html, namun aku pengen coba sharing cara meng-upload widget tersebut. Aku ambil salah satu contoh yaitu memasang kursor ular-ularan (tiap membuka blog, nama kamu bakalan terbang mirip ular menuju arah kursor). Ini bukan tergolong widget sih, ntar laen waktu aja aku posting lagi hehehe....
Caranya gimana??? Gampang gampang susah kok
1. Login ke account blogger kamu.
2. Pada navigasi bar (paling atas) pilih
"Rancangan" lalu masuk ke "Edit HTML".
Tips : Sebelum melakukan edit template, sebaiknya simpan
dulu template kamu yang ada dengan meng-klik tulisan "Download Template
Lengkap". Kemudian simpan dalam harddisk atau media penyimpanan lainnya,
sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up
untuk mengembalikannya seperti semula.
3. Cari kode </head>. Kalo bingung nyarinya, teken aja
Ctrl+F lalu di kolom find (ada di bawah) ketik </head> lalu tekan Enter.
4. Kalo sudah ketemu copas aja kode di bawah ini (g perlu
dipelajarin kok, tenang aja :D ) dan letakkan tepat di atas kode </head>
tadi.
<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'>
//<![CDATA[
/* 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://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg =
"Masukkan teks kamu 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 = 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>
zzzzzzzzzzz....capek banget nulisnya =.="
Catatan :
Ganti kode yang berwarna merah berturut-turut dengan gaya
teks, tebal tidaknya teks (bold atau normal), jenis font (arial, times new
roman, verdana, georgia, de-el-el), dan warna teks
Ganti tulisan yang berwarna merah dan berkedap-kedip dengan
teks yang akan kamu tampilkan (mengikuti kursor).
Ganti kode yang berwarna hijau, apabila kamu ingin merubah
ukuran teks.
5. Terakhir, klik "Simpan Template"
Selamat maen ular-ularan!
;-)
0 komentar:
Posting Komentar