Pasang Script Kursor Ular-Ularan
Sebenarnya banyak
sekali rupa serta bentuk animasi kursor yang mungkin kamu dapatkan, baik
melalui website penyedia layanan javascript atau saat kamu blog
walking. Ceritanya pas jalan-jalan ke Optimasi Blog dan menggerakkan
kursor, tiba-tiba muncul serangkaian kata atau kalimat yang selalu
mengikuti kursor tersebut. Bentuknya seperti ular-ularan meliuk dan
melingkar, tapi anehnya tidak mematuk. Ia cuma mengikuti saja atau
istilah kerennya "follow". Eh.. ngomong-ngomong follow, kamu sudah ikut
mem-follow OB apa belum?
Kembali ke trik blogger kursor ular-ularan...
Nah, kamu pasti penasaran tentang cara membuatnya. Ngga, tuh!!! Ha.. ha.. gitu aja manyun. OK, ini dia triknya.
Nah, kamu pasti penasaran tentang cara membuatnya. Ngga, tuh!!! Ha.. ha.. gitu aja manyun. OK, ini dia triknya.
- Login ke account blogger kamu.
- Pilih Tata Letak --> 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.
- Cari kode </head>
Tips : Kalau susah mencarinya,
coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar
pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan
kata yang ingin dicari.
- Kalau sudah ketemu, copas kode berikut diatasnya.
<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>
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.
- Jangan lupa disimpan.
Selamat main ular-ularan...
Memasang RSS Feed Model Lipatan Halaman (page peel banner) disudut kanan atas Blog
Pernahkah anda melihat tampilan
RSS Feed atau link halaman lainnya yang dikemas menarik dengan
dimasukkan kedalam Page Peel Banner atau Lipatan Halaman di pojok kanan
blog? Untuk lebih jelasnya lihat dipojok kanan atas blog wahyu winoto ini atau lihat gambar berikut:
 |
| RSS Feed model Page Peel Banner |
Menurut beberapa
blogger efek lekukan kertas disudut atas halaman blog ini katanya sangat
bermanfaat untuk meletakkan link penting anda, dan juga tampilannya
sangat menarik dari sisi estetika blog.
Pada posting kali ini saya akan share cara memasang link RSS Feed kedalam lipatan halaman blog (page peel banner):
1. Silahkan Login ke akun blogger anda.
2. Lalu masuk ke design, klik Edit HTML3. Kemudian cari kode </head>
4. Setelah ketemu silahkan anda copy-kan kode berikut ini dan paste-kan tepat di atas kode </head>
<script type='text/javascript'>var tujuan ='http://www.wahyu-winoto.com/feeds/posts/default'</script><script
src='http://wahyuwinoto.googlecode.com/files/script%20pojok%20kanan%20atas.txt'
type='text/javascript'/>
5. Silahkan Anda ganti tulisan yang berwarna merah
dengan alamat link URL anda. Dalam contoh diatas saya masukkan URL
link ke Feed atau daftar artikel saya. Nantinya anda bisa saja
menggantinya dengan link menuju RSS Feed anda.
6. Kemudian simpan template dan refresh blog anda.
Lihat hasilnya, bagus bukan.
Jika anda cukup trampil maka link maupun gambar dalam page peel banner dipojok kanan atas
blog tersebut dapat anda ganti dengan yang lainnya sesuai keinginan
anda. Misalkan anda ganti dengan gambar serta link ke akun Facebook atau
halaman Twitter anda.
Silahkan anda berkreasi sendiri,
jika masih ada kesulitan silahkan berikan pertanyaan melalui kolom
komentar dibawah ini, saya akan dengan senang hati membantu anda.
1. Buka http://www.mp3-codes.com
2. Klik salah satu lagu yang mau dipasang di blog. Kamu juga bisa search lagu pilihanmu di kotak pencarian.
3. Kopi embed code-nya, lalu paste di sidebar blog.
2. Klik salah satu lagu yang mau dipasang di blog. Kamu juga bisa search lagu pilihanmu di kotak pencarian.
3. Kopi embed code-nya, lalu paste di sidebar blog.
Caranya: Login ke blog kamu, masuk dashboard-design/tata letak-add gadget-pilih HTML/javasript, pastekan embed kode tadi, lalu simpan.
selamat mencoba
Tidak ada komentar:
Posting Komentar