CARA MEMPERCANTIK BLOG Bag.2

 Cara Membuat Teks Bergerak Mengikuti Arah Kursor

Kali ini akan kita bahas mengenai cara membuat teks mengikuti arah kursor, menanggapi sebuah komentar dari salah seorang teman di blog ini,Tanpa basa basi lagi, ayo kita coba bersama-sama khususnya bagi para bloger....

1. Login akun Blogger

2. Masuk menu Rancangan

3. Pilih Eleman Laman kemudian tambahkan gadget

4. Pilih HTML/JavaScript

5. Masukkan kode script di bawah ini

<style type="text/css"></style>

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

    color: #000000;

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

   

    <script type="text/javascript"></script>

    /* 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 = "Tutorial Blog";

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

    };

    })();

   

6. Simpan

Selesai, sekarang kursor akan diikuti dengan teks,

*     Yang berwarna KUNING, berturut-turut adalah kode warna dan teks yang diinginkan.

**   Untuk memilih Kode Warna yang qm inginkan KLIK DISINI...OK!!!

*** Yang berwarna MERAH ukuran huruf, jarak spasi, besar lingkaran yang dibentuk, kecepatan berputar, dan kecepatan mengikuti gerak mouse

--------------------------------------------------------------------------------------
Script Jail hmmm .
Script ne cuma buat yg jail doank .

1. Login Blogger .
2. Pilih rancangan .
3. Trus Edit HTML .
4. Trus Cari code
5. .kemudian ganti dengan

<script language=javascript></script>

       6. Kemudian save .

oh ya , dari tadi blum di kasih tau ya gmn efek nya ?
ntar qm sign out trus buka blog qm tanpa log in truss cba qm close....
---------------------------------------------------------------------------------------
BLOG Muter Muter

Ingin membuat Blog anda Muter-mutur ketika di buka oleh pengunjung, caranya Anda cukup men-copy secript di bawah ini, dan pastekan tepat di atas kode <Head>

Caranya :

1. Login ke Blogger Masing-masing

2. Pilih Rancangan

3. Klik Kode HTML,

4. Centang Expand Template Widget

5. Taruh kode di bawah ini sebelum, atau diatas kode <head>

<script>
//<![CDATA[
window.scrollBy(0,0)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",10);
setTimeout("move()", 1);
var mxm=100000
var mym=100000
var mx=100000
var my=100000
var sv=70
var status=1
var szx=0
var szy=0
var c=25
var n=0
var sm=10
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.01
mym=mym/1.01
mx=mx+mxm
my=my-mym
mxm=mxm+(500-mx)/5
mym=mym-(400-my)/5
window.moveTo(mx,my)
rmxm=Math.round(mxm/1)
rmym=Math.round(mym/2)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
document.fgColor=0xffffFF
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
document.title = "Cljck"
alert("Cljck")
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0)
}
//]]>
</script>

6.Simpan Template

setelah Save Template, silahkan refres webblog anda, dan lihat hasilnya. Mudah bukan. Oke, selamat mencoba semoga berhasil..

---------------------------------------------------------------------------------------

Cara Memberi hiasan jam dan tanggal pada blog

1.  Silahkan klik link berikut –> http://www.clocklink.com
2. Jika sudah berada pada situs tersebut, pilih menu Gallery pada sebelah kiri homepage clocklink (atau klik  world clock untuk hiasan jam dengan tampilan peta dunia).
3. Pada menu Gallery silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
5. Klik tombol yang bertuliskan Accept
6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
7. Set ukuran jam yang anda sukai di samping tulisan size
8. Copy kode HTML yang di berikan pada notepad
9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
10. Selesai

Eitt.... Jangan Lupa Coment...!!!