MEMBUAT MACAM MACAM EFEK PADA BLOG ~ My Blog

Cara Membuat Efek Daun Berjatuhan Di Blog – Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan :

1. Seperti biasa login dulu ke dashboard blogger anda.

2. Pilih Rancangan > Edit HTML, centang Expand widget template.

3. Cari kode </head> pada template dengan menggunakan Ctrl+F.

4. Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

5. Save / simpan template anda dan lihat hasilnya muantaaap bro !!

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he…

MEMBUAT TEKS PADA KURSOR

Membuat Teks Pada Kursor – Jumpa lagi sobat blogger !! Sory banget kalau saya lama ngga bikin posting karena lagi banyak kesibukan offline di akhir tahun 2011 kemarin. Mengawali tahun 2012 ini saya mau share tentang membuat teks pada kursor. Teks yang mengikuti kursor pada trik efek ini menggunakan javascript yang relatif ringan, jadi jangan khawatir akan pengaruhnya terhadap loading blog. Buat yang sudah bosan dengan trik mengganti gambar pada kursor, coba aja trik membuat teks yang mengikuti kursor ini biar ganti suasana tampilan baru. Kan udah Tahun Baru nih..he he.

Cara Membuat Teks Pada Kursor :

1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.    Copy script dibawah ini dan paste pada gadget.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
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;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Tulis teks anda 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 =20;
// 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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>

4.    Save/Simpan dan lihat hasilnya.
5.    Sobat dapat mengganti jenis dan warna font pada bagian yang ditandai dengan warna biru.
6.    Tulis teks yang anda inginkan pada “Tulis teks disini” yang berwarna merah.
7.   Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.

Cara Membuat Link Menjadi Warna-Warni di Blog - Udah pernah liat link yang berwarna-warni seperti pelangi (rainbow) ketika disorot kursor ? Ya sebenarnya itu adalah salah satu trik sederhana yang menggunakan javascript. Cara membuatnya pun sangat mudah dan GPL alias gak pake lama, asal sudah tau script yang mau dipake maka ngga sampe 5 menit proses membuat link di blog menjadi berwarna-warni seperti pelangi itu pun akan segera terwujud.

Cara membuat link berwarna-warni :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).

3. Copy kode javascript dibawah ini dan paste pada gadget.

<script src='http://hbhost.googlecode.com/files/rainbow-link.js'/>

4. Selesai dan silahkan diliat hasilnya.

5. Cara lainnya adalah sobat bisa meletakkan script tadi pada template tepatnya diatas kode <body> , masuk ke menu Edit HTML, letakkan scriptnya dan save template anda.

Cara Mengganti Gambar Kursor di Blog - Gara-gara kepingin sekali mengganti gambar kursor di blog ini, akhirnya setelah googling kesana kemari nemu juga sebuah situs yang menyediakan banyak gambar-gambar kursor pilihan. Gambar kursor yang disediakan situs penyedia gambar ini http://www.totallyfreecursors.com/ banyak sekali, jadi kita tinggal memilih sesuai selera aja. Untuk cara memasang gambar kursor ini di blog, kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada template. Dibawah ini ada beberapa sample gambar untuk kursor yang saya ambil berikut URL alamat kursor tersebut.

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

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

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

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

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

Cara mengganti gambar kursor di blog :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Edit HTML, centang Expand widget template.

3. Carilah kode </head> pada template anda dengan menggunakan Ctrl F.

4. Copy kode CSS dibawah ini dan letakkan tepat diatas kode </head> .

<style type='text/css'> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/sweden.gif"), auto;} </style>

5. Simpan template anda dan lihat perubahan pada gambar kursor

6. Jika sobat ingin mengganti gambar kursor dengan gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP di http://www.totallyfreecursors.com/ .

Nah ternyata mengganti gambar kursor di blog memang bisa jadi solusi mempercantik tampilan blog juga ya apalagi kalo ditambahin lagi dengan efek bintang siip dah. Tinggal giliran sobat blogger nih, selamat mencoba ya !

Cara Membuat Blogroll dengan Efek Marque dan Scroll - Memasang blogroll dengan efek marque ataupun blogroll dengan scroll biasanya karena alasan penghematan tempat, terutama jika sobat ingin blogroll ditampilkan pada sidebar bukan pada halaman sendiri seperti Link Sobat yang ada di blog ini. Cara membuat blogroll dengan efek marque dan scroll ini pun sangat mudah, saya akan jelaskan satu persatu biar sobat lebih jelas lagi dan bisa mempraktekkan cara membuatnya.

Cara Membuat Kotak Blogroll dengan Efek Marque :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript).

3. Copy script di bawah ini dan paste pada gadget.

::<a href="http://rayhanzhampiet.blogspot.com/">Share with Irfan</a>::<p>

::<a href="http://rayhanzhampiet.blogspot.com/"><blink>Tips Blogging</blink></a>::<p>

::<a href="http://rayhanzhampiet.blogspot.com/"><i>Info Blogging</i></a>::<p> Link....<p>

Link....<p>

Dst....<p>

</marquee>

4. Hasilnya akan terlihat seperti ini :

::Share with Irfan::
::Tips Blogging::
::Info Blogging::
Link....
Link....
Dst....

5. Edit linknya sesuai dengan link blogroll sobat kemudian Simpan (Save).

Cara Membuat Kotak Blogroll dengan Efek Scroll (Unorderlist) :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript).

3. Copy script di bawah ini dan paste pada gadget.

<ul>

<li><a href=”http://rayhanzhampiet.blogspot.com/”>Share With Irfan</a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”>Tips Blogging</a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”>Artikel Komputer</a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”><blink>Share With Irfan</blink></a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”><i>Tips Blogging<i></a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”><b>Artikel Komputer</a></li>

<li><a href=”http://rayhanzhampiet.blogspot.com/”>Link Sobat</a></li>

</ul>

4. Hasilnya akan terlihat seperti ini :

5. Edit linknya sesuai dengan link blogroll sobat kemudian Simpan (Save).

Nah dari 2 kotak blogroll diatas tinggal pilih aja sobat mau pakai blogroll dengan marque atau blogroll dengan scroll (unorderlist). Menurut saya sih dua-duanya sama bagusnya jadi pasang aja 2 macam blogroll sekaligus biar tambah rame he he. Untuk lebar dan tinggi kotak blogroll silahkan disesuaikan dengan sidebar yang ada di blog sobat.

Cara Membuat Efek Hujan Salju di Blog Anda - Efek hujan salju yang saya posting ini sangat bagus ditampilkan jika blog sobat mempunyai background/latar belakang berwarna gelap atau hitam. Karena kalo efek hujan salju ini dipasang di blog yang background pada bagian posting warna terang atau putih seperti blog saya ini, maka pemasangan efek hujan saljunya jadi sia-sia karena tidak akan terlihat. Apalagi kalo hujan saljunya kecil-kecil kayak hujan gerimis gitu wah tambah ngga keliatan jadinya. Kalau efek hujan daun berjatuhan yang saya posting sebelum ini karena daunnya berwarna hijau malah lebih terlihat jika backgroundnya putih. Langsung aja nih sobat ikuti langkah pembuatannya disini ya.

Cara membuat/memasang efek hujan salju di blog :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Halaman > Add gadget (HTML/JavaScript).

3. Letakkan script efek hujan salju dibawah ini pada gadget.

<script src='http://hbhost.googlecode.com/files/snow.js' type='text/javascript'> </script>

4. Simpan dan lihat hasilnya.

Nah hujan saljunya sudah terlihat turun kan he he.., kapan ya kita bisa merasakan musim dingin beneran kayak di Amrik sono ? OK sobat sekian dulu aja tips/trik cara membuat/pasang efek hujan salju pada blog ini. Semoga bermanfaat dan salam blogger.

MENGGANTI WARNA BACKGROUND OTOMATIS

Cara Mengganti Warna Background Blog Otomatis – Banyak cara untuk membuat variasi dan memperindah tampilan blog. Salah satunya adalah dengan menempatkan widget untuk mengganti warna background otomatis ini di sidebar blog anda, sehingga pengunjung dapat memilih warna background kesukaan mereka. Selain supaya kita juga ngga bosan dengan tampilan background yang itu-itu saja, dan pengunjung yang datang pun kita harapkan mendapatkan kenyamanan sehingga mereka betah berlama-lama membaca di blog kita. Contoh penggunaan widget pengganti warna background blog otomatis ini dapat sobat lihat langsung di sidebar blog ini.

Cara Mengganti Background Blog :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

3. Copy script yang ada dibawah ini dan paste pada gadget.

<div class="widget-content">

<center><b>Pilih Warna Kesukaan Anda</b></center>

<br/>

<script type="text/javascript">

function bgChange(bg)

{

document.body.style.background=bg;

}

</script>

<table border="1" width="100%" height="20">

<tbody><tr>

<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">

</td>

<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">

</td>

<td onclick="bgChange('#008080')" bgcolor="#008080">

</td>

<td onclick="bgChange('#808080')" bgcolor="#808080">

</td>

<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">

</td>

<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">

</td>

<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">

</td>

<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">

</td>

<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">

</td>

</tr></tbody></table>

</div>

4. Silahkan sobat edit teks tulisan yang berwarna merah dan kode pilihan warna yang berwarna biru dengan warna-warna kesukaan anda. Untuk kode warna dapat dilihat disini.

5. Save / Simpan.

Mudah dan gampang bukan ? Pada widget pengganti warna background ini hanya ada 9 pilihan warna background, jika sobat ingin menambahkannya copy saja kode yang terakhir sehingga kolom warna akan bertambah. Kalau masih bingung, baca lagi postingan sebelumnya tentang cara membuat tabel dan kolom. Semoga tips Cara Mengganti Warna Background Blog ini bermanfaat untuk anda.

Chacha BKHC

My Blog

Blogger news

About

Senin, 13 Februari 2012