Cara membuat tulisan mengikuti kursor

Bagi para BLOGGER yang pingin banget membuat tulisan mengikuti kursor, nie gue beri tipsnya supaya kalian semua pada bisa buat kursor nie seperti gw punya...

Nie langkah-langkahnya :

1. Pertama kalian login dulu ke BLOGGER
2. Setelah itu masuk ke Tab Rancangan, kemudian pilih elemen-elemen ataw kalian yg UPDATE BLOGGER terbaru klik Lay out...
3. Kemudian pilih Tambah Gadget, n cari HTML/Java Scribt...
4. Kalau mw tampilan BLOG kalian bagus, g usah buat JUDUL pada halaman yang muncul berikutnya.!!!
5. Kemudian COPY nie kode HTML di bawah ini.. :

<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: #888888;
/* 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">

/* 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 = " YG INI UBAH JADI BACA'AN YG KAU SUKA ";

/* 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>

Setelah selesai di COPY/PASTE, kalian pilih SAVE.

Dan lihat Dech Hasilnya Seperti pada BLOG saya ini...

Ket : 

• Untuk mengganti nama sesuai dengan nama kesukaan kamu, cari tulisan merah yang bacaannya                      " YG INI UBAH JADI BACA'AN YG KAU SUKA ", kemudian kalian ubah dengan kata-kata kamu sendiri.
• Untuk mengganti warna tulisan, kalian cari tulisan color: #888888, dan ubah kode angka tersebut sesuka hati kamu asalkan tepat dia 6 angka.

READ MORE - Cara membuat tulisan mengikuti kursor Read More..

Tutorial Cara Membuat Menu Navigasi Horisontal di Blog

Cara membuat menu kolom home, about, contact membentuk horizontal. Beberapa hari yang lalu ada seorang sahabat menanyakan bagaimana cara menambah kolom untuk membuat menu navigasi home, about, contact seperti yang ada di blog Saya.Dulu, ketika awal-awal Saya ngeblog, Saya juga kesulitan dalam membuat menu seperti itu yang biasanya dikenal dengan Static Page atau Horizontal Menu sampai akhirnya Saya menemukan situs yang menyediakan css dan html untuk membuat menu navigasi horizontal pada home, about, contact, dll di cssportal.com. Pada saat itu Saya langsung bisa membuatnya dan tutorialnya pun sudah Saya buat seketika itu, yaitu dihalaman Membuat Tab Menu Horizontal. Dan pada halaman ini hanya versi updatenya saja.
Cara Membuat Menu Kolom Home, About, Contact Horizontal:

1. Login ke blogger.com, pada dashboard klik design.
2. Klik Edit HTML, download full template untuk jaga2 kalau nanti ada kesalahan jadi bisa di restore seperti semula templatenya.
3. Centang kotak expand template widget pada template Anda, dan cari kode: </b:skin>
4. Hapus kode tersebut dan ganti dengan kode:

   </b:skin><style type='text/css'>.pagemenu-container #pagemenu{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:#000 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase}.pagemenu-container #pagemenu ul{margin:0;5px;0px;5px;padding:0;border:1px solid $bordercolor;list-style-type:none;width:860px}.pagemenu-container #pagemenu ul li{display:block;float:left;margin:0 1px 0 0}.pagemenu-container #pagemenu ul li a{display:block;float:left;color:#fbdafa;text-decoration:none;padding:10px 18px 0 18px;height:28px}.pageme nu-container #pagemenu ul li a:hover,.pagemenu-container #pagemenu ul li a.current{color:#fff;background:#306 no-repeat top center}</style>

5. Kemudian cari kode:

   <div id='content-wrapper'>

6. Hapus dan ganti dengan:

   <div class='pagemenu-container'> <div id='pagemenu'> <ul> <li class='page_item home'><a href='http://diarykudiblog.blogspot.com' title='Home'>Home</a></li> <li class='page_item page-item-2'><a href='http://diarykudiblog.blogspot.com/2010/11/about-this-blog.html' title='About'>About</a></li> <li class='page_item page-item-3'><a href='http://diarykudiblog.blogspot.com/2010/11/contact-us.html' title='Contact Us'>Contact</a></li><li class='page_item page-item-4'><a href='http://diarykudiblog.blogspot.com/2010/10/daftar-isi-blogger-guide-seo-guide.html' title='Daftar Isi'>Daftar Isi</a></li><li class='page_item page-item-5'><a href='http://diarykudiblog.blogspot.com/2011/01/panduan-seo-blogspot-gratis-seo-guide.html' title='SEO Guide'>SEO</a></li></ul></div> </div> <div id='content-wrapper'>

   Kode tersebut akan menampilkan menu horizontal dibawah judul/deskripsi blog
7. Jika ingin menu horizontalnya berada dibagian paling atas judul seperti navbar, silakan gunakan kode berikut:

   <div id='header-wrapper'>

   Hapus kode tersebut dan ganti dengan kode:

   <div id='header-wrapper'> <div class='pagemenu-container'> <div id='pagemenu'> <ul> <li class='page_item home'><a href='http://diarykudiblog.blogspot.com' title='Home'>Home</a></li> <li class='page_item page-item-2'><a href='http://diarykudiblog.blogspot.com/2010/11/about-this-blog.html' title='About'>About</a></li> <li class='page_item page-item-3'><a href='http://diarykudiblog.blogspot.com/2010/11/contact-us.html' title='Contact Us'>Contact</a></li><li class='page_item page-item-4'><a href='http://diarykudiblog.blogspot.com/2010/10/daftar-isi-blogger-guide-seo-guide.html' title='Daftar Isi'>Daftar Isi</a></li><li class='page_item page-item-5'><a href='http://diarykudiblog.blogspot.com/2011/01/panduan-seo-blogspot-gratis-seo-guide.html' title='SEO Guide'>SEO</a></li></ul></div> </div>

Keterangan:

• Kode background:#000 adalah warna latar menu horizontal, #000 = warna hitam, silakan ubah warna latar sesuai keinginan.
• Kode width:860px adalah panjang horizontal menu nya, silakan samakan dengan panjang pada kode #header-wrapper atau panjang #outer-wrapper blog Anda.
• Kode {color:#fff;background:#306 no-repeat top center} adalah warna text dan hover/warna background pada saat disorot dengan pointer mouse, silakan ubah warnanya sesuai keinginan.
• Ganti url/link dan title blog saya dengan url dan title blog Anda sesuai keinginan.
• Jika sudah selesai, save template Anda dan lihat hasilnya.

NB: Jika posisinya tidak sesuai dengan yang Anda inginkan, silakan ubah nilai margin dan padding yang ada pada kode berikut dalam satuan pixel (px) hingga letaknya sesuai yang Anda inginkan:

.pagemenu-container #pagemenu ul{margin:0;5px;0px;5px;padding:0;border:1px solid $bordercolor;list-style-type:none;width:860px}

dan kode:

.pagemenu-container #pagemenu ul li a{display:block;float:left;color:#fbdafa;text-decoration:none;padding:10px 18px 0 18px;height:28px}

Cara diatas adalah cara yang Saya gunakan pada template blog ini, selamat mencoba dan semoga membantu.

READ MORE - Tutorial Cara Membuat Menu Navigasi Horisontal di Blog Read More..

Mengganti Cursor Mouse di blogger

Untuk para BLOGGER terbaru yang pingin x mngubah bentuk mouse pada BLOG-nya, ikuti nie cara gw. Di jamin WORK dechh.....!!!

Caranya adalah :
1. Login ke blogger anda

2. Pilih menu tata letak, kemudian edit html

3. Kemudian klik Expand Template Widget

4. Tekan ctrl+F pada browser, cari baris body {

5. Perhatikan CSS dari body, ini adalah contoh CSS body punya saya, isinya setiap template akan berbeda-beda

body {
background:#A9C2DA;
margin:0;
padding:0;
font:80% Arial, Sans-serif;
text-align: center;
color:#000;
}

6. Tambahkan baris di bawah ini pada blog kalian

cursor: url("http://baykun.byethost15.com/cursorbiru.ico"),default;
Jika ingin cursor biru

cursor: url("http://baykun.byethost15.com/cursorkuning.ico"),default;
Jika ingin cursor kuning

cursor: url("http://baykun.byethost15.com/cursorpanah.ico"),default;
Jika ingin cursor panah

cursor: url("http://baykun.byethost15.com/cursorpensil.ico"),default;
Jika ingin cursor pensil

Pastikan menambahkan barisnya sebelum tanda } pada bagian body {  }

7. Simpan templatenya

8. Contoh hasilnya ada pada blog saya

Note : disarankan backup template anda sebelum merubahnya.
cara ini tidak bisa digunakan jika menggunakan browser OPERA

UPDATE

cursor: url("http://baykun.byethost15.com/tangan.ico"),default;
Jika ingin cursor bentuk tangan


cursor: url("http://baykun.byethost15.com/roket.ico"),default;
Jika ingin cursor bentuk roket


cursor: url("http://baykun.byethost15.com/orang.ico"),default;
Jika ingin cursor bentuk orang

*referensi berbagai cursor unik http://www.cursors-4u.com

_Selamat Mencoba Semoga sukses_

Dan Jangan lupa Comment'a

READ MORE - Mengganti Cursor Mouse di blogger Read More..