Blog Tutorial: Efek Blogger

Tampilkan postingan dengan label Efek Blogger. Tampilkan semua postingan

Minggu, 02 Januari 2011

Efek Javascript

Kita akan membahas efek javascript lagi , efek ini sama seperti EFEK JAVASCRIPT http://withblog.blogspot.com/2010/12/efek-javascript.html , namun ada yang berbeda. Perbedaannya yaitu efek ini jendela browser kita akan berjalan mengelilingi layar sebelum terbuka sepenuhnya. Langsung aja caranya.

1. Log in ke blogger

2. Buka Rancangan à Edit HTML

3. Lalu cari kode <head>

4. Copy-Paste kode dibawah ini di bawah kode <head>

/* By : http://withblog.blogspot.com/*/

//<![CDATA[

scrW=screen.availWidth

scrH=screen.availHeight

window.resizeTo(10,10)

window.focus()

for(a=0;a<80;a++){

window.moveTo(0,0)

window.resizeTo(0,scrH*a/80)

}

window.resizeTo(0,0)

for(b=0;b<80;b++){

window.moveTo(0,scrH/1)

window.resizeTo(scrW*b/80,0)

}

for(c=0;c<80;c++){

window.moveTo(scrW/1,scrH/1)

window.resizeTo(0,scrH*c/80)

}

for(d=0;d<80;d++){

window.moveTo(scrW/1,0)

window.resizeTo(scrW*d/80,0)

}

for(e=0;e<80;e++){

window.resizeTo(scrW*e/80,scrH*e/80)

}

window.moveTo(0,0)

window.resizeTo(scrW,scrH)

//]]>

</script>

5. Simpa Template, dan lihat lah perubahan yang muncul di BLOG anda

Selamat Mencoba, semoga sukses

Minggu, 26 Desember 2010

Kode Warna HTML

Pusing dengan kode warna HTML di blogger atau di Halaman WEB anda berikut saya memberikan kode HTML dari warna.

WithBlog | Script Kode Warna HTML

Pesan diawal

Menyapa Pengunjung yang mengunjungi blog kita dapat membuat pengunjung blog kita semakin bertambah nyaman karena mereka merasa di perhatikan. Tidak perlu pusing-pusing dalam untuk menyapa pengunjung. Dengan JAVASRCRIPT sederhana berikut ini kita dapat menyapa Pengunjung dan sekaligus menanyakan NAMANYA. Jadi pengunjung semakin bertambah nyaman karena mereka seolah-olah kita perhatikan. Baiklah begini caranya untuk menyapa Pengunjung yang akan mengunjungi blog kita.

1. Log-in ke blogger

2. Buka RANCANGAN, EDIT HTML

3. Lalu Expand TEMPLATE BLOGGER

4. Cari kode Berikut </head>

5. Lalu copy kode dibawah ini setelah kode </head>

var name = prompt("siapa nama kamu..??");

alert("apa kabar "+name)

</script>

Hasil dari script diatas yaitu akan muncul sebuah jendela kecil yang menanyakan nama dari pengunjung dan setelah itu akan ada lagi jendela kecil yang akan menampilkan pesan apa kabar + nama pengunjung.

Nb : anda dapat merubah kata-kata yang berwarna biru dengan pesan anda sendiri yang ingin anda sampaikan ke pengunjung blog ANDA

6. Klik SIMPAN TEMPLATE, lalu lihat perubahan di blog Anda

SELAMAT Mencoba, semoga SUKSES

Pesan Sebelum pergi

Sebelum pengunjung kita meninggalkan Blog kita, kita dapat memberikannya sebuah pesan. Pesan tersebut akan muncul dengan jendela message kecil dan berisi pesan yang ingin kita sampaikan pada si pengunjung sebelum dia meninggalkan blog kita. Pesan tersebut akan muncul tepat sesaat setelah pengunjung meninggalkan blog kita.Berikut adalah tipsnya untuk membuatnya.

1. Log-in ke blogger

2. Buka RANCANGAN, EDIT HTML

3. Lalu Expand TEMPLATE BLOGGER

4. Cari kode Berikut </head>

5. Lalu copy kode dibawah ini setelah kode </head>

// goodbye alert

function goodbye(){

alert('terima kasih atas kunjungannya..');

}

parent.window.onunload=goodbye;

</script>

Nb : anda dapat merubah kata-kata yang berwarna biru dengan pesan anda sendiri yang ingin anda sampaikan ke pengunjung blog ANDA

6. Klik SIMPAN TEMPLATE, lalu lihat perubahan di blog Anda

SELAMAT Mencoba, semoga SUKSES

BACK TO TOP

Satu lagi script javascript yang cukup menarik dan harus anda coba yaitu back to top. Script ini akan membantu para pembaca blog kita yang telah mengulur scrool bar anda ke bawah dan ingin kembali keatas dengan cepat. Widget ini atau efek ini sangat berguna bila kita mempunyai blog yang cukup panjang ke bawah. Dan ketika pengunjung blog kita ingin kembali ke atas lagi, pengunjung blog kita tinggal meng-klik gambar back to top tersebut, maka secara otomatis jendela aka bergulir keatas. Jadi pengunjung blog tidak perlu lagi menggulung layar untuk kembali keatas. Untuk contoh anda bisa melihat bloh saya ini. Berikut cara-cara untuk menampilkan script tersebut di blog kita.

Log-in Ke blogger
Buka RANCANGAN, lalu EDIT HTML
Klik Expand Template Blogger
Lalu cari Script <head>
Copy Script berikut setelah kode <head>

6. SIMPAN TEMPLATE dan lihat lah perubahan pada blog anda

SELAMAT MENCOBA, Semoga SUKSES

Sabtu, 25 Desember 2010

Energi Saving

Energi saving merupakan suatu efek yang dibuat dari javascript. Efek ini akan menampilkan suatu gambar yang gelap, seperti screen saver di komputer kita. Efek ini sama prinsip kerjanya dengan SCREEN SAVER dan akan muncul dengan waktu tertentu. Bila mouse kembali aktif maka website kita akan kembali seperti semula, bila ingin melihat contoh lihat pada blog saya ini, tunggu hingga 5 menit tanpa melakukan apa-apa (jangan menggerakkan mouse dan mengetik keyboard, biarkan blog saya ini terbuka saja) maka setelah itu akan otomatis nantinya muncul gambar gelap yang merupakan efek dari energi saving mode.
Saatnya kita membuat efek energi saving mode di blog kita.

1. Log-in ke blogger

2. Lalu buka RANCANGAN à EDIT HTML

3. Cari script berikut

<head>

4. Lalu diatas kode <head> letakkan kode berikut

</script>
<script language='javascript' src='https://sites.google.com/site/webblogplus/energisaving.js' type='text/javascript'></script>

5. Lalu klik SIMPAN TEMPLATE. Dan saat ini blog anda telah di lengkapi dengan ENERGI SAVING MODE

Selamat mencoba, good LUCK

Rabu, 22 Desember 2010

Kotak Chat muncul dari atas

Bagi teman-teman yang ingin mempunyai kotak chat seperti punya saya, yang muncul dari atas berikut cara-caranya.
1. Log-in terlebih dahulu ke Blogger
2. Lalu masuk ke Rancangan --> EDIT HTML
3. Buatlah Gadget baru dengan meng klik Tambah GADGET
4. Lalu akan muncul jendela tambah gadget
5. Pilih HTML / Javascript
6. Lalu Copy-Pastekan kode HTML di bawah ini, jangan lupa ganti kode yg berwarna merah dengan code shoutmix mu

</div>

</a>

</span>

#at{

position:fixed;

right:450px;

z-index:+1000;

}

* html #at{position:relative;}

.attab{

height:200px;

width:70px;

float:left;

cursor:pointer;

background:url();

}

.atcontent{

float:left;

border:2px solid #ff0000;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5axIOSeV3ZqClU_JKRIu5vv3g1qw3QoY8Hkpqplv0sVBW_9CSpwJTy4ys4of75k2Hy7dIKwO3OhMEcxDopngfHoa6s9dORyD1IhTSwDoRWruY7CE9RDLdJ7swRvmLTB72Rf_EqjWcj-PG/) #000000 repeat-y center;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

padding:10px;

}

</style>

function showHideAT(){

var at = document.getElementById("at");

var w = at.offsetWidth;

at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);

at.opened = !at.opened;

}

function moveAT(x0, xf){

var at = document.getElementById("at");

var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

at.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}

}

</script>

Ganti Script yang berwarna merah ini dengan kode SHOUTMIX anda

</div>

<br />

</left>

                       <a href="http://withblog.blogspot.com/2010/12/kotak-chat-muncul-dari-atas.html">Dapatkan seperti ini!</a>                

</right></div></div>

<br />

var at = document.getElementById("at");

at.style.top = (-200-at.offsetWidth).toString() + "px";

</script>

</div></div>

7. Setelah itu ketik simpan

8. Lihatlah perubahan pada blog mu

Selamat bekerja, semoga sukses

Efek Javascript

Efek javascript yang akan kita bahas kali ini merupakan salah satu efek javascript yang membesar dari tengah terus melebar hingga memenuhi jendela maximaze.

Untuk contoh bisa dilihat di sini

Langsung saja yah.

1. Anda harus log-in terlebih dahulu ke blogger anda

2. Lalu buka Rancangan à Edit HTML

3. Lalu cari kode <head>

4. Paste-kan kode HTML di bawah ini ke atas kode <head> Tersebut

<script>

//<![CDATA[

function expand() {

for(x = 0; x < 50; x++) {

window.moveTo(screen.availWidth * -(x - 50) / 100, screen.availHeight * -(x - 50) / 100);

window.resizeTo(screen.availWidth * x / 50, screen.availHeight * x / 50);

window.moveTo(0,0);

window.resizeTo(screen.availWidth, screen.availHeight);

expand();</script>

  <script language="JavaScript"><!--Sembunyikan dari browser yang tidak mendukung Javascript

//awal code tulisan titlebar bergerak

var kiri = "[ "; //Karakter Penutup di kiri

var kanan = " ]"; //Karakter Penutup di Kanan

//Tulisan yang akan Berjalan

var kecepatan = 300; //Kecepatan Tulisan [Makin Kecil, Makin Cepat

function th3sn0wbr4in()

document.title=kiri+pesan+kanan;

pesan=pesan.substring(1,pesan.length)+pesan.charAt(0);

setTimeout("th3sn0wbr4in()",kecepatan);

th3sn0wbr4in();

//akhir code tulisan titlebar bergerak

//]]>

</script>

5. Lalu Simpan Template

6. Catatan : Bila anda merasa kecepatan Geraknya terlalu cepat atau terlalu pelan, anda dapat mengubah variabel kecepatannya dengan cara, Lihat kode HTML diatas yang berwarna merah, lalu ubah angka tersebut dengan angka yang anda inginkan. Semakin kecil angka tersebut maka semakin cepat efek bergerak, dan begitu sebaliknya semakin besar angka semakin lama efek bergerak.

Selamat Mencoba, semoga sukses

Blog Tutorial

Minggu, 02 Januari 2011

Efek Javascript

Minggu, 26 Desember 2010

Kode Warna HTML

Pesan diawal

Pesan Sebelum pergi

BACK TO TOP

Sabtu, 25 Desember 2010

Energi Saving

Rabu, 22 Desember 2010

Kotak Chat muncul dari atas

Efek Javascript

Labels

Archivo del blog