![Subscribe to Fajarseraya [dot] com](http://fajarseraya.com/wp-content/themes/white_lucas/white_lucas/images/rss.png)
Mempercantik Blog Dengan Javascript
Mempercantik Blog Dengan Javascript
Yupss, nih dia artikel saya yang kedua mencoba untuk meramaikan kontesnya saudara Fajar sebelumnya saya ucapin makasih kepada yang punya hajat atas dimuatnya artikel saya ini, sesuai dengan judul diatas artikel saya kali bertujuan untuk menjadikan blog kita baik blogspot atau wordpress selangkah lebih cantik dengan fungsi-fungsi javascript yang kita tanam dan bagi yang awam dengan apa yang namanya javascript untuk lebih lengkapnya silahkan baca disini (http://id.wikipedia.org/wiki/JavaScript) teknik ini sudah saya coba di kedua engine yang berbeda yaitu blogspot dan wordpress versi 2.7 bagi yang menggunakan wordpress versi dibawah itu silahkan dicoba insya Allah trik ini masih bisa dipakai dan saya sangat menyarankan pakailah mozilla firefox untuk browsernya.
1. Memasukan Welcome alert dan goodbye alert
Trik yang pertama ini menjadikan blog kita ketika dibuka atau di tutup akan muncul pop up berisi komen. Caranya sangat gampang sekali untuk di WordPress silahkan masuk “Dashboard” kemudian pilih “widget”, buat “text” baru atau bisa juga digabung dengan “text” yang sudah ada dikarenakan trik ini berbentuk script sehinggan nantinya tidak akan ada penambahan di widget kita. Bagi yang menggunakan blogspot sebagai enginenya silahkan masuk ke “Dashboard” pilih “Layout” terus pilih “page element” untuk diblogspot saya juga sarankan trik ini di gabung aja dengan “gadget” yang lain, Nah script yang kita masukan untuk di “text” (wordpress) dan “gadget” untuk di blogspot adalah ini :
<script type=”text/javascript”>
<!– created : nyubi | Welcome Alert –>
alert(“Selamat datang diblognya nyubi, moga bermanfaat”)
<!– created : nyubi | Goodbye Alert –>
function goodBye(){
alert(“Terima kasih sudah mau mampir, take care”)
}
window.onunload=goodBye
</script>
Untuk kalimat ini “Selamat datang diblognya nyubi, moga bermanfaat” dan “Terima kasih sudah mau mampir, take care” silahkan di ganti sesuka hati tapi awas double kutipnya jangan sampai hilang karena hilang salah satu variabel aja maka script diatas tidak akan berjalan.
2. Mengganti Fav Icon
Fav icon itu lambang atau simbol yang ada di adress bar dengan trik ini kita bisa merubah icon blogspot dan wordpress dengan icon yang berbeda sesuai dengan keinginan kita. Penempatan script ini sama dengan script welcome dan goodbye alert diatas :
<script type=”text/javascript”>
<!– created : nyubi | Change Fav Icon –>
var shortc = document.createElement(“link”);
shortc.rel = “SHORTCUT ICON”;
shortc.href = “http://www.fileden.com/files/2008/3/15/1816525/MerahPutih.gif”;
document.getElementsByTagName(“head”)[0].appendChild(shortc);
</script>
Untuk url icon-nya yaitu yang ini http://www.fileden.com/files/2008/3/15/1816525/MerahPutih.gif, silahkan diganti sesuka hati atau kalau mau pakai icon bendara merah putih punya saya juga boleh koq, biar lebih nasionalis. Mungkin bagi sebagian blogger masih kebingungan bagaimana mengganti URL icon diatas dengan icon pilihan sendiri cara paling termudah icon pilihan kita di upload aza di site ini (http://www.tinypic.com) tidak perlu register dan kita langsung bisa mengambil URL-nya.
3. Memasukan Efek Title Bar
Nah untuk trik yang kedua ini menjadikan title bar kita jadi lebih kreatif, kita bisa memberikan teks dan sedikit animasi sebagai penghiasnya, bagi yang belum tau apa itu title bar coba deh liat judul atas browser kita, biasanya disitu tertulis site apa yang sedang kita buka. Penempatan script ini sama dengan trik welcome dan goodbye alert dan fav icon diatas, nah ini dia script-nya :
<script type=”text/javascript”>
<!– created : nyubi | Title Bar –>
var message = new Array()
//customize your message below
message[0] = “nyubi blog”;
message[1] = “Welcome to my blog”;
message[2] = “Enjoy my blog”;
message[3] = “Thanks for visiting”;
message[4] = “Have a nice day”;
var reps = 2;
var speed = 200;
var p=message.length;
var T=”";
var C=0;
var mC=0;
var s=0;
var sT=null;
if(reps<1)reps=1;
function doTheThing(){
T=message[mC];
A();}
function A(){
s++
if(s>8){s=1}
if(s==1){document.title=’||||||====||| ‘+T+’ —–’}
if(s==2){document.title=’|||=|||===||| ‘+T+’ —–’}
if(s==3){document.title=’|||==|||==||| ‘+T+’ —–’}
if(s==4){document.title=’|||===|||=||| ‘+T+’ —–’}
if(s==5){document.title=’|||====|||||| ‘+T+’ —–’}
if(s==6){document.title=’|||===|||=||| ‘+T+’ —–’}
if(s==7){document.title=’|||==|||==||| ‘+T+’ —–’}
if(s==8){document.title=’|||=|||===||| ‘+T+’ —–’}
if(C<(8*reps)){
sT=setTimeout(“A()”,speed);
C++
}else{
C=0;
s=0;
mC++
if(mC>p-1)mC=0;
sT=null;
doTheThing();}}
doTheThing();
</script>
Perhatikan kalimat ini silahkan diganti sesuka hati :
message[0] = “nybi blog”;
message[1] = “Welcome to my blog”;
message[2] = “Enjoy my blog”;
message[3] = “Thanks for visiting”;
message[4] = “Have a nice day”;
seandainya kalimatnya masih mau ditambah silahkan diganti seperti ini :
message[0] = “nybi blog”;
message[1] = “Welcome to my blog”;
message[2] = “Enjoy my blog”;
message[3] = “Thanks for visiting”;
message[4] = “Have a nice day”;
message[5] = “kalimatnya terserah”;
message[6] = “kalimatnya terserah”;
(message[6] angka 6 nya diganti dengan angka 7 dan seterusnya)
4. Roaming Windows Expander
Dan ini adalah trik yang paling extrem, kenapa? karena dengan trik ini menjadikan blog kita pertama kali dibuka akan muncul animasi layar dengan efek gerak, untuk scriptnya silahkan sedot disini :
<script type=”text/javascript”>
<!– created : nyubi | Roaming Windows Expander –>
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)
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>
Gimana seru kan!! Oh yah seandainya semua trik tersebut ingin dipakai sekaligus dalam satu blog maka untuk penyusunannya bisa seperti ini (http://h1.ripway.com/barista/kontes/kontes%20Fajar.txt) atau sebagai backup bisa dilihat disini (http://www.geocities.com/dwi_nurse86/kontes/kontesFajar.txt)sebenarnya masih banyak trik-trik lain seperti animasi page dan animasi mouse yang jauh lebih inovatif tapi lain waktu saya share lagi, dan semua trik diatas 100% berjalan di kedua blog yaitu blogspot dan wordpress tetapi dengan satu syarat mesti menggunakan mozilla firefox sebagai browsernya, sebagai contoh silahkan kunjungi blog saya yang ini (http://babamz.blogspot.com/) dan lihat semua triknya, akhir kata ditunggu komentarnya.
Diposting untuk Kompetisi Blog Fajar Seraya
Penulis : Bamz
Url : www.bamznyubi.co.cc
Comments
42 Responses to “Mempercantik Blog Dengan Javascript”
Leave a Reply
Advertise
[Reply]
HamDi Reply:
March 6th, 2011 at 01:36
[Reply]
tap!!!!!!!!!!!!!!!!!!!
aku lum ngerti ne langkah2 tempat masukkan sintaknya ntu.
lo bisa di jelasin dikit langkah2x mulainya dari mana n masukx lewat mana gitu….coz kita ru belajar ne.
tankz sebelumnya
[Reply]
[Reply]
[Reply]
[Reply]
aku blm terlalu ngerti…
[Reply]
irya Reply:
July 23rd, 2011 at 22:56
gmn buat komentar
seperti ini
[Reply]
salm kenal….
[Reply]
[Reply]
di kasih donx….
[Reply]
ga ngerti nich mas
http://ficknerd.blogspot.com/
[Reply]
[Reply]
ada yang koment mantap berarti sudah mengerti, lah kalo yang sampe expresinya nangis2 apa gak ada solusi dari adminnya??
maswek´s last blog ..Trik – Screen Saver Bisa Menjadi Background Desktop Windows Vista – 7
[Reply]
[Reply]
fatra´s last blog ..ANGKET ANAK JALANAN
[Reply]
[Reply]
[Reply]
miko saputra´s last blog ..Top 10 Countries That Censor The Internet
[Reply]
di tunggu kunjungan balik ny
ary dirgantara´s last blog ..terbaru antivirus 2010 symbian s60 v2
[Reply]
Aku mo nanya kalo sudah jadi blog kita, trus cara nyetingnya ga bisa. maklum aku awan terhadap blog.
Baru kali ini aku buat blog terus aku pengen bisa membuat blog aku menjadi lebih menarik, gimana caranya ini alamat blog saya
http://caramenghilangkanjerawat.net/
Mohon direview ya….
Makasih sebelumnya.
[Reply]
[Reply]
[Reply]
[Reply]
jinkinjeng´s last blog ..Ini Hari Apa?
[Reply]
xera-n´s last blog ..Komentar Blog Pakai XL
[Reply]
kunjungi blog amatiranku ku yaaa… http://memedrasta.blogspot.com makasihh..
[Reply]
[Reply]
[Reply]
[Reply]
javascript:blacySmiliesAppendSmiley(‘
rayhanhaizar.blogspot.com
[Reply]
[Reply]
mbahyar´s last blog ..Ramalan Kiamat Tahun 2012 Karena Badai Matahari?
[Reply]
terimakasih banyak!!
[Reply]
[Reply]
pusinggg
[Reply]
aridonesafety´s last blog ..Safety Talk / Meeting
[Reply]
[Reply]
kasih tau cara’nya buat mempercantik blog’Q donx….
nich blog’Q blogrhacetho.blogspot.com
[Reply]
[Reply]
[Reply]
[Reply]