Home > Blogger, Internet, Tips dan Trik > Text mengikuti Cursor

Text mengikuti Cursor

 

Ketika saya blogwalking ke beberapa site para sobat, saya banyak menemukan cursor yang selalu diikuti oleh text. Saya berfikir bagaimana cara membuatnya. Akhirnya saya menemukan jawaban tersebut di salah satu site SMU negeri di Pekanbaru [ di sini ].
visit n learn
Tetapi setelah saya perhatikan ternyata kita hanya bisa memilih salah satu dari script yang telah diciptakan yang mempunyai text berbeda. Adapun text-text tersebut adalah “Selamat Menikmati Blog Ini”, “Welcome”, “Selamat Datang Di Blog Ini”, “Selamat Datang” dan “Enjoy Stay Here”.

Kemudian saya berfikir lagi, bagaimana misalnya saya tidak ingin menggunakan text yang telah diciptkan tersebut..? Dan bagaimana caranya agar saya bisa menciptakan text yang akan saya ciptakan sendiri..? Dan akhirnya terbuka juga rahasianya, dan sayapun sekarang bisa membuat cursor yang diikuti text yang saya inginkan.

Jika sobat tertarik untuk menciptakan cursor dengan text sendiri, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg=’pingin belajar’.split(”).reverse().join(”);

var font=’Verdana,Arial’;
var size=3; // up to seven
var color=’#ff0000′;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//—————————————————

var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split(”);
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props=”<font face=”+font+” size=”+size+” color=”+color+”>”;

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write(‘<layer name=”nsmsg’+i+'” top=0 left=0 height=’+a+’ width=’+a+’><center>’+props+msg[i]+'</font></center></layer>’);
}
else if (ie||dom){
document.write(‘<div id=”outer” style=”position:absolute;top:0px;left:0px;z-index:30000;”><div style=”position:relative”>’);
for (i=0; i < n; i++)
document.write(‘<div id=”iemsg’+(dom&&!ie? i:”)+'” style=”position:absolute;top:0px;left:0;height:’+a+’px;width:’+a+’px;text-align:center;font-weight:normal;cursor:default”>’+props+msg[i]+'</font></div>’);
document.write(‘</div></div>’);
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+’px’;
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers[‘nsmsg’+i]:ie? iemsg[i].style:document.getElementById(‘iemsg’+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? ‘px’ : ”);
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? ‘px’ : ”); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != “undefined” )
window.addEventListener( “load”, drag, false );
else if ( typeof window.attachEvent != “undefined” )
window.attachEvent( “onload”, drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

7. Silahkan ganti tulisan berwarna merah dengan tulisan pilihan anda
8. Klik Simpan
9. Selesai

Diposkan oleh qubal’s di 00.15

Reaksi:
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • rss

Link ke posting ini

Cara Mengganti Cursor di Blog

Posted in
Langsung saja, begini caranya:

1. Pilih tab “Tata Letak”.
2. Klik “tambah gadget” baik itu berada di bawah, atas atau samping.
3. Pilih “HTML/JavaScript”
4. Copy kode di bawah ini pada tempat pengetikan:

<em><style type=”text/css”>body {cursor:url(“http://www.123cursors.com/freecursors/7676.gif&#8221;),default}</style>.</em>

5. Nah, ganti alamat cursor http://www.123cursors.com/freecursors/7676.gif tersebut dengan alamat cursor yang lain. Untuk mengetahui alamat cursor yang lain, kunjungilah http://www.123cursors.com dan pilih cursor yang Anda inginkan. Supaya lebih mudah, cari berdasarkan kategori. Bila Anda sudah menemukan, copy alamat cursornya dengan cara klik kanan pada gambar cursor tersebut, lalu pilih “copy image location”.
Mudah kan?

Diposkan oleh qubal’s di 00.10

Reaksi:
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • rss

Link ke posting ini

cara masukin logo!!

Posted in
Rabu, 08 September 2010
Banyak para netter pemula (newbie) atau mungkin para netter lain yang mungkin bingung gimana cara buat favicon atau icon yang bisa muncul di address bar yang bisa menunjukkan identitas si pemilik blog atau website.
Akan saya beberkan sedikit cara untuk membuatnya, tapi ini khusus untuk di BLOGGER bukan di WORDPRESS sebab di BLOGGER ada format untuk edit HTML.
Ada 2 caranya:

1. Cari format yang bertuliskan:
]]></b:skin>

Lalu paste kode HTML ini:
<link href=’http://i465.photobucket.com/albums/rr20/jakabanda/JBGIF-1.gif&#8217; rel=’SHORTCUT ICON’/>

Tepat dibawah ]]></b:skin> jadi formatnya:

]]></b:skin>
<link href=’http://i465.photobucket.com/albums/rr20/jakabanda/JBGIF-1.gif&#8217; rel=’SHORTCUT ICON’/>

Kode HTML yang berwarna merah Anda ganti dengan kode HTML icon milik Anda. Ukuran icon saya sarankan berukuran 16 x 16 pixel, bisa format apa saja: GIF (gambar animasi) atau PNG (gambar icon non animasi) atau bisa dengan format lain. Anda bisa upload icon atau gambar Anda di photobucket.com lalu edit image saja di sana, daftar gratis.

2. Cari format yang bertuliskan:

]]></b:skin>

Lalu paste kode HTML ini:

<!– iconj.com dynamic favicon code –>
<link href=’/favicon.ico’ rel=’shortcut icon’/>
<link href=’http://www.iconj.com/ico/6/t/6tu57idfpu.ico&#8217; rel=’shortcut icon’/>
<!– end of iconj.com dynamic favicon code –>

Tepat dibawah ]]></b:skin> jadi formatnya:
]]></b:skin>
<!– iconj.com dynamic favicon code –>
<link href=’/favicon.ico’ rel=’shortcut icon’/>
<link href=’http://www.iconj.com/ico/6/t/6tu57idfpu.ico&#8217; rel=’shortcut icon’/>
<!– end of iconj.com dynamic favicon code –>

Kode HTML yang berwarna merah Anda ganti dengan kode HTML icon milik Anda. Ukuran icon sama dengan keterangan di atas. Hanya saja Anda upload icon-nya di iconj.com, tinggal upload di icon generator lalu Anda akan diberi kode Direct Link dan HTML Code (copy dan paste sesuai dengan format di atas). Untuk upload icon di iconj.com tanpa daftar, gratis dan langsung jadi.

Diposkan oleh qubal’s di 10.48

Reaksi:
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • rss

Link ke posting ini

Cara Bikin Tag Cloud Melayang

Posted in
TAG CLOUD MELAYANG
Kemarin pas lagi jalan-jalan didunia maya aku ngelihat web dengan tampilan Tag/Label dengan tulisan yang melayang, bukan yang cuman diem aja.., tapi bergerak bebas saat cursor mouse didekatkan, karena penasaran akhirnya ngorek informasi dari mbah ‘Google’,
alhasil aku nemuin caranya, ternyata nama tagnya “Cumulus”,dengan tampilan flashnya, dan bisa diterapkan tuk blogspot, tapi yang template baru ya..
Susah nggak…?, tentu saja tidak Maria….( kayak telenovela aja..),
Gini nih caranya..

* Pertama masuk ke account Blogger.
* Kedua kalau belum ada widget Labels, Add dulu Widgetnya, judulnya terserah, disini saya pake TAG CLOUD.
* Ketiga kebagian Layout, pilih Edit HTML, jangan lupa tuk ceklist di Expand Widget Template ( tuk jaga-jaga mendingan backup pake Download Full Template )
* Kempat cari kode ini

<em><b:section class=’sidebar-box’ id=’sidebar2′ preferred=’yes’>.</em>

Kalo mo cepet pake Ctrl+F dan Copy Paste code diatas
* Kelima Copy Paste code dibawah ini

<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
<script src=’http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js&#8217; type=’text/javascript’/>
<div id=’flashcontent’>Blogumulus by <a href=’http://www.roytanck.com/’>Roy Tanck</a> and <a href=’http://www.bloggerbuster.com’>Amanda Fazani</a></div>
<script type=’text/javascript’>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values=’data:labels’ var=’label’><a expr:href=’data:label.url’ style=’12’><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

tepat dibawah kode
<b:section class=’sidebar-box’ id=’sidebar2′ preferred=’yes’>

&quot;240&quot;, &quot;300&quot
Klo mo rubah warna backgroundnya cari kode ini

“#ffffff”

Diposkan oleh qubal’s di 10.43

Reaksi:
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • rss

Link ke posting ini

cara masukin html ke blogger

Posted in
Senin, 01 Maret 2010
nih kawan2 ku sekalian aku mau bantu kalian yg bingung mengenail cara ,asukin html ke posting blogger kalian cara bukan copy trus paste klo cara seperti itu html yg kalian copy dan paste tidak akan muncul di postingan saaat di terbitkan………….nah…..karena itu saya mau bantu kalian caranya mudah dansimpel lagi….. cukup kalian klik di bawah ini :

masukin html ke posting

trus masukin htmlnya encode beresdeh
selamat mencoba okeh……… ^_^

Diposkan oleh qubal’s di 03.17

Reaksi:
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • rss

Link ke posting ini

Menambahkan Read more, atau Baca Selengkapnya

Posted in
Menambahkan Read more, atau Baca Selengkapnya, atau Baca selanjutnya di Blogspot / Blogger.com
Menambahkan read more, baca selengkapnya, atau baca selanjutnya pada blog, ndak tau juga sih, bahasa kerennya apah, kalau dalam bahasa inggris mah ada, expandable post summaries istilahnya. Ini adalah sebuah metoda agar setiap posting blog berisi sebuah paragraf pendek, yang merupakan perkenalan dari materi yang diposting yang diikuti dengan link “Read more”, a.k.a baca selengkapnya a.k.a baca selanjutnya

karena panjang jadi aku bikin baca selengkapnya jadi kalian klik baca selengkapnya aja yah!!!

Diposkan oleh qubal’s di 03.06

Reaksi:
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • rss

Link ke posting ini

membuat tulisan bergerak dengan cara simple

Senin, 04 Januari 2010
CARA BIKIN TULISAN BERGERAK!!
1. Membuat teks bergerak secara horizontal dari kiri ke kanan

Misalnya kalimat “WELCOME TO MY BLOG” ingin diberikan efek marque yang membuatnya bergerak dari kanan ke kiri, maka perintahnya seperti ini :

<em><marquee>WELCOME TO MY BLOG</marquee></em>

Untuk membuat teks bergerak bolak balik dari kiri ke kanan atau sebaliknya, maka perintahnya adalah sebagai berikut :
<marquee behavior=”alternate”>WELCOME TO MY BLOG</marquee>

2. Membuat teks bergerak secara vertikal dari bawah ke atas

Perintah marquee untuk membuat teks bergerak dari bawah ke atas adalah sebagai berikut :
<marquee direction=”up”>WELCOME TO MY BLOG</marquee>

Untuk mebuat teks tersebut bergerak bolak balik secara vertikal, maka perintahnya seperti ini :
<marquee direction=”down” behavior=”alternate”>WELCOME TO MY BLOG</marquee>

3. Membuat kalimat berkedip-kedip

Untuk membuat teks, baik itu kata atau kalimat berkedip kedip, perintahnya seperti ini :

<blink>teks yang akan dibuat berkedip</blink>

hasilnya akan menjadi seperti ini :

WELCOME TO MY BLOG

mudah bukan dan selamat mencoba kalo gak bisa silakan coment ja ^_^

Categories: Blogger, Internet, Tips dan Trik Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: