Cara Mengganti Cursor di Blog

Memang banyak sekali orang yang mengganti dan memodifikasi cursor di blog-nya. Jika di antara kalian tidak ada yang ahli dalam mengganti dan memodifikasi cursor, kali ini saya akan beritahu caranya. lihat cara - cara di bawah ini :

1. Login ke blogger
2. Dasbor
3. Klik template
4. Edit HTML
5. Jangan lupa centang Expand Template Widget
6. Cari kode </head>
7. Copy kode script di bawah ini dan letakkan tepat di atas kode </head> :

Kode untuk mengubah cursor tetapi tidak mengubah cursor saat menyorot link
<style type="text/css">
body{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/tail2.gif "), auto;}
</style>

Kode untuk mengubah cursor serta tetap berubah walau di sorot ke arah link
<style type="text/css">
body{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/tail2.gif "), auto;}
body a:hover{cursor: url("http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png"), auto;}
</style>

NB :
Kode yang berwarna merah adalah URL gambar yang akan di jadikan cursor, bisa di ganti sesuai selera kalian
Kode warna biru adalah URL gambar alternatif, (muncul saat cursor di arahkan ke link)

Kalau ingin, saya beri nih gambar cursor + URL-nya :

URL : http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

 URL : http://downloads.totallyfreecursors.com/thumbnails/dogani.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/hearttailup.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/fireblue.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/hellokitty2.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/bluemultiglit.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/rainbow-ani3.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/1pointer73.gif

  URL : http://downloads.totallyfreecursors.com/thumbnails/angel6.gif

URL : http://i44.photobucket.com/albums/f13/LONG65/Element2.gif

 URL : http://downloads.totallyfreecursors.com/thumbnails/apple-tmani.gif

URL : http://downloads.totallyfreecursors.com/details.cfm/id/4998/Laptop.htm

URL : http://downloads.totallyfreecursors.com/details.cfm/id/4155/Blooming_Red_Rose.htm

 

URL : http://i1200.photobucket.com/albums/bb321/aNyA_zdej28/FBML%20Vocaloid/C-GUMI.png

 

URL : http://i186.photobucket.com/albums/x100/amoebios_4m/nexuiz_default_cursor_1c.png

 

URL : http://i1013.photobucket.com/albums/af252/oneuglycoffin/PhotoshopEdits/cuppycakecursor.png

Semoga Bermanfaat... :-)

READ MORE »

Cara Membuat Cursor Bertaburan Bintang di Blog

Ada banyak sekali untuk memodifikasi atau membuat pernak-pernaik tentang cursor, yang sudah kita bahas saja ada mengubah cursor dengan gambar, membuat teks yang berputar mengelilingi cursor. Dan kali ini belajar membuat cursor yang bertaburan bintang. jadi saat cursor kita bergerak akan turun bintang - bintang dari cursor. Ada beberapa warna bintang yang bisa kita pilih untuk ditampilkan di blog kita.
Cara membuat cursor bertaburan bintang :

1. Login ke blogger.com
2. Dasbor
3. Klik Tata Letak
4. Tambahkan gadget
5. Pilih HTML/JavaScript
6. Copy kode script di bawah ini :

<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>  

NB : Kode biru adalah warna bintang, bisa di ganti dengan hijau, merah, ungu, silver, kuning, hitam

Semoga Bermanfaat... :-)

READ MORE »

Cara Membuat Tulisan Bergerak Mengikuti Cursor

Cara membuat tulisan bergerak mengikuti cursor memang mudah cara membuatnya dengan menambah gadget pada tata letak, mau tahu caranya??? langsung saja ini dia caranya :

1. Login ke blogger.com
2. Dasbor
3. Klik Tata Letak
4. Tambahkan Gadget
5. Pilih HTML/JavaScript
6. Copy kode script di bawah ini :

 <style type="text/css">
        /* Oval Text Styles */
        #outerCircleText {
        /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
        font-style: italic;
        font-weight: bold;
        font-family: 'GPL_Outline_Free';
        color: #0000FF;
        /* 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 Oval 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 = "Assalamualaikum Wr. Wb.";
        /* 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>

Ket :
Kode yang berwarna merah bisa diganti sesuai selera kalian.
Simpan dan lihat hasilnya, selamat mencoba...

Semoga Bermanfaat... :-)

READ MORE »

Cara Membuat Spoiler di Postingan Blog

Cara membuat spoiler di postingan blog memang tidak semudah jika kita membuat spoiler di forum-forum karena pada dasarnya blogger tidak memfasilitasi tombol spoiler oleh karena itu kita harus mengetikan kode-kode HTML yang cukup rumit, tetapi kalian disini tidak perlu risau atau pun cemas karena sesaat lagi saya akan berbagi kode HTML-nya dan kalian hanya perlu copy & paste, mudah kan ? langsung aja ya, ini saya kasih tahu caranya :

1. Login ke blogger.com
2. Pilih entri baru atau edit salah satu postingan yang mau kalian beri spoiler
3. Masuk ke halaman HTML yang sudah disediakan di tool box

Copy & paste kode script di bawah ini (dengan mengisi spoiler)
     <div id="spoiler">
    <div><input type="button" value="Buka" style="margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }">
    </div>
    <div style="background: #FD0303; margin: 10px auto;
    border: 0px solid #000;
    padding: 5px;">
    <div style="display: none;">
    isi spoiler
    </div>
Hasil nya akan seperti ini :

isi spoiler

NB :
Kode yang berwarna merah bisa diganti dengan kata-kata sesuai selera kalian
Kode warna biru adalah kode warna background, juga bisa kalian ganti kodenya
Kode warna hijau adalah kode untuk mengisi spoiler, bisa diganti dengan konten tulisan, gambar ataupun video

Copy & paste kode script di bawah ini (tanpa mengisi spoiler)
     <div id="spoiler">
    <div><input type="button" value="Buka" style="margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }">
    </div>
Hasil nya akan seperti ini :

NB : Kode yang berwarna merah bisa diganti dengan kata-kata sesuai selera kalian

Copy & paste kode script di bawah ini (dengan memberi link)
<a href="http://generasi-ilmu.blogspot.com/"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }" style="margin: 0px; padding: 0px;" type="button" value="Buka" />
Hasilnya akan seperti ini :

NB : Kode yang berwarna merah bisa diganti dengan kata-kata sesuai selera kalian dan kode berwarna oranye adalah URL spoiler

Semoga Bermanfaat... :-)

READ MORE »