Agung X-Zeg Indraguna's World

Menambahkan Efek OnMouseOver Transparan Pada Gambar

2011-03-03T01:11:00.011+07:00

Menambahkan Efek OnMouseOver Transparan Pada Gambar - Masih mau share tentang OnMouseOver nih . . .
Setelah di postingan kemaren gw share tentang cara Menambahkan Efek OnMouseOver Pada Gambar, kali ini gw mau share lagi tentang cara Menambahkan Efek OnMouseOver Transparan Pada Gambar.

Sepertinya engga perlu banyak basa-basi deh, langsung aja liat contohnya dibawah ini !!

Contoh OnMouseOver 1 ==>

Kode:

Contoh OnMouseOver 2 ==>

Kode:

Kedua kode di atas hanya berlaku apabila sobat blogger cuma pengen beberapa gambar aja yang diberi Efek OnMouseOver Transparan. Kalo sobat blogger pengen semua gambar yang ada di blog diberi Efek OnMouseOver Transparan, sobat blogger hanya perlu mengedit template dan tambahkan salah satu kode di bawah ini di atas kode ]]></b:skin>

1. Kode untuk contoh OnMouseOver 1:

.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

2. Kode untuk contoh OnMouseOver 2:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

Stylish Blogger Award From Kang Dedy

2011-03-02T21:43:00.003+07:00

Hei.. hei..
Gw dapet Award nih!! Title Awardnya "Stylish Blogger Award". hihihi.. itu artinya apa ea?? apa blog ini emang udah pantes ea buat dapet award?? apalagi kata "stylish"nya itu loh, kesannya berat banget. tapi ea udah lah enggak apa-apa. Toh ini juga sebagai penghargaan dan simbol persahabatan antar sesama blogger.

Sebenernya blog ini gw buat cuma buat iseng-iseng dan buat kesenangan aja. Tuh buktinya enggak ada satu iklanpun yang nempel. Tapi setelah dijalanin ternyata asik juga. Selain bisa bagi-bagi pengetahuan, gw juga bisa nambah sahabat. Intinya gw suka jadi blogger.

Oia.. gw belom kasih liat ea Awardnya kayak apaan?? Jadi "Stylish Blogger Award" yang gw terima itu kayak gini nih..

Layaknya artis-artis yang menerima sebuah Award pada umumnya (jiah.. emang gw artis ea??), sepertinya gw harus, kudu n perlu ngucapin banyak terima kasih sama banyak orang nih.. ok, kita mulai ea..
Yang pasti terimakasih buat Allah SWT atas segala kesehatan dan nikmat
Terimakasih buat orang tua gw yang udah ngasih "kebebasan" ama gw
Terimakasih buat adek-adek gw tercinta (Agnes & Agrie) yang enggak pernah rese
Terimakasih buat Nyonya Indraguna yang selama ini udah setia ama gw
Terimakasih buat semua sobat blogger yang selama ini udah baik banget ama gw
Terima kasih juga buat "Kang Dedy" (yang ini spesial banget) yang udah ngasih award ini ke gw.. "thx ea kang.. I Love You Full deh!!" (hehehe).

Award ini emang terasa spesial banget, jadi gw mau kasih Award ini buat beberapa sobat blogger lain yang pernah mampir ke blog ini.

Langsung aja ea, "Stylish Blogger Award" ini gw kasih buat:

1. Once Upon a Simple Life
2. EL-MIFKA
3. AC-Free
4. nizarmodo
5. Hijaukan Dunia
6. Keperawatan Indonesia
7. B.S.U
8. Coffee Break

Seperti yang dijelaskan oleh pemberi Award ini sebelumnya, buat sobat blogger yang ngambil Award ini nantinya harus ngikutin beberapa peraturan, diantaranya:

1. Ucapan Terima Kasih
Memberikan ucapan terimakasih dan menaruh link nya terhadap yang memberikan award ini

2. Tentang Sobat Blogger
Ceritakan sedikit mengenai diri/blog sobat blogger

3. Forward "Stylish Blogger Award"
Berikan award ini kepada 8 teman blogger anda yang sering berkunjung ke blog sobat blogger

Award ini merupakan simbol persahabatan antara kita sesama blogger. jadi gw harap sobat blogger mau menyediakan waktu buat nulis tentang Award ini di dalam postingan sobat, selanjutnya berikan Award ini ke 8 teman milik sobat.

Cara Pasang Energy Saving Mode dengan Gambar

2011-03-01T08:30:00.006+07:00

Cara Pasang Energy Saving Mode dengan Gambar - Sebenernya pagi ini engga ada niat buat posting.. tapi berhubung ada visitor yang nanya tentang cara pasang energy saving mode dengan gambar seperti yang gw pasang di blog ini, ea udah deh gw mutusin buat posting aja, lagian udah lama juga kan gw engga update postingan di blog ini!??

Langsung aja deh, buat pasang energy saving mode dengan gambar, sobat blogger bisa ngikutin langkah-langkah dibawah ini . . .
Langkah pertama
1. Login Ke Blogger.com
2. Pilih Menu "Design"
3. Klik "Edit HTML"
4. Cari Kode </head> (biar gampang, pake ctrl+f)
5. Copy/Paste kode dibawah ini tepat di atas kode </head>

<script language='javascript' src='http://agungxzeg.googlecode.com/files/agungxzegscreensaver11.js' type='text/javascript'></script>

6. Klik Save Template"

Langkah kedua
1. Masuk ke menu "Page Elements"
2. Klik "Add a Gadget"
3. Pilih "HTML/JavaScript"
4. Masukkan kode di bawah ini

5. Klik "Save"

Setau gw sih ada dua cara buat pasang energy saving mode dengan gambar. pertama, dengan edit JavaScript terus di pasang dengan cara biasa. kedua, dengan langkah-langkah seperti yang gw posting di atas. tapi menurut gw pribadi, cara di atas adalah cara yang paling gampang buat pasang energy saving mode dengan gambar.

Menambahkan Efek OnMouseOver Pada Gambar

2011-02-28T18:58:00.006+07:00

Menambahkan Efek OnMouseOver Pada Gambar - Apa itu OnMouseOver?? Kalo menurut gw sih OnMouseOver itu adalah suatu keadaan dimana kursor mouse berada pada suatu objek tertentu. dengan menambahkan efek ini pada gambar, maka gambar yang disorot oleh mouse akan berubah/berganti ke gambar yang lainnya.
Sebagai contoh, coba arahkan mouse pada gambar di bawah ini !!

Untuk menambahkan efek onmouseover seperti pada gambar di atas, sobat blogger hanya perlu menggunakan kode dibawah ini:

Catatan:
Silahkan ganti URL gambar 1 dan 2 dengan URL gambar milik sobat blogger

Trik Gambar Google (Google Image Trick)

2011-02-27T23:00:00.008+07:00

Trik Gambar Google (Google Image Trick) - Disamping statusnya sebagai mesin pencari (search engine) nomor satu di dunia, ternyata google juga memiliki hal menarik lain yang patut kita coba.

Mungkin enggak banyak orang yang tau kalo hasil pencarian gambar dari google bisa keliatan beda dari biasanya.
what?? beda??

beneran... coba liat screenshot dibawah ini deh !!

gimana caranya buat ngegunain trik gambar google ini?? ini dia cara-caranya:
1. Silahkan kunjungi http://www.google.com
2. Klik "Images"
3. Masukan kata kunci untuk memulai pencarian gambar
4. Setelah hasil pencarian gambar keluar, hapus URL pada adress bar
5. Copy salah satu JavaScript dibawah ini dan paste di adress bar
6. Klik "Enter" (pada keyboard)

JavaScript 1

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',50); void(0);

JavaScript 2

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*1+i*x2+x3)*x1+x2)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',50); void(0);

JavaScript 3

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.tan(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.tan(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

Ternyata google itu menarik ea ^_^)

Cara Membuat Teks Warna Pelangi (Rainbow Text)

2011-02-26T12:30:00.007+07:00

Cara Membuat Teks Warna Pelangi (Rainbow Text) - Masih pengen ngomongin tentang cara ngehias blog nih. . .
Setelah sebelumnya gw share tentang cara Membuat Efek Link Warna Pelangi, sekarang gw mau coba share tentang Cara Membuat Teks Warna Pelangi (Rainbow Teks).

Teks Warna Pelangi???
Eapz.. Ternyata bukan hanya link, tapi teks juga dapat kita modifikasi agar terlihat cantik.
Hmmmmm... Masih bingung ea??
coba liat contohnya dibawah ini deh!!

Tertarik??
Untuk membuat teks warna pelangi seperti contoh di atas, kita hanya perlu menggunakan script/kode di bawah ini . . .

<b>
<script>
var text="AGUNG X-ZEG INDRAGUNA'S WORLD"
var speed=50
if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
</b>

Sepertinya engga usah dijelasin panjang lebar lagi, gw yakin sobat blogger udah tau apa yang harus dilakuin dengan kode di atas.

Cara Pasang Navigasi Breadcumb di Blogger

2011-02-19T11:19:00.012+07:00

Cara Pasang Navigasi Breadcumb di Blogger - Wuih. . . Udah lama juga ea gak posting, jadi lumayan kangen.. hehehe
Tadi pagi waktu gw buka blog ini, ada salah satu visitor yang nanya kayak gini di shoutmix: "mas, gimana caranya buat masang navigasi yang ada di atas judul postingan kaya yang ada di blognya mas agung?"
Sebenernya gw sempet bingung sama pertanyaan itu, tapi mungkin maksud dari pertanyaan itu adalah navigasi breadcumb.

Sebenarnya apa sih kegunaan dari navigasi breadcumb tersebut?
kalo menurut gw pribadi dengan memasang navigasi breadcumb akan dapat memudahkan pengunjung dalam mengetahui posisi suatu artikel (dimana letak artikel dan termasuk ke dalam kategori apa artikel tersebut). Selain itu, menurut para ahli SEO dengan memasang navigasi breadcumb akan lebih memudahkan search engine dalam melakukan pencarian dan mengindeks artikel-atikel yang ada di blog kita.

Untuk memasang navigasi breadcumb di blogger, berikut langkah-langkahnya:
1. Login ke dulu ke blogger.com
2. Pilh menu "Design"
3. Klik "Edit HTML"
4. Untuk berjaga-jaga bila terjadi kesalahan, back up dulu template yang digunakan
5. Beri tanda centang pada "Expand Template Widget"
6. Cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

7. Cari kode <div class='post hentry uncustomized-post-template'> kemudian letakkan kode di bawah ini tepat setelah kode tersebut

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

8. Klik "Save Template"

Dikarenakan setiap template berbeda, maka mungkin aja ada template yang tidak memiliki kode <div class='post hentry uncustomized-post-template'> didalamnya. Sebagai gantinya coba cari kode <div class='post hentry'> dan ikuti langkah di nomor 7 sampai dengan selesai.

Untuk melihat navigasi breadcumb yang kita buat tadi, silahkan masuk ke halaman blog lalu klik salah satu judul postingan. Lihat dibagan atas judul, jika ada tambahan satu baris tautan seperti pada gambar di atas, maka navigasi breadcumb telah sukses dibuat.

Cara Mengganti dan Menampilkan Favicon Blog di Semua Browser

2011-02-12T08:45:00.016+07:00

Cara Mengganti dan Menampilkan Favicon Blog di Semua Browser - Apa itu favicon?? Favicon adalah icon kecil yang tampil disebelah kiri alamat suatu website atau blog. Seperti apa sih Favicon itu?? mungkin screenshot dibawah ini bisa memperjelas dan memberi gambaran buat temen-temen yang masih bingung. . .

Screenshot di atas adalah contoh tampilan favicon dengan menggunakan browser mozilla firefox.

Untuk mengganti favicon Blogger (default) sobat blogger bisa melakukan langkah-langkah sebagai berikut:
Langkah pertama
1. Buat gambar yang berukuran kecil, gw saranin pake ukuran 16x16
2. Upload gambar tersebut ke image hosting, misalkan photobucket.com
3. Ambil URL gambar tersebut dan simpan di notepad

Langkah kedua
1. Login Ke blogger.com
2. Pilih menu "Design"
3. Klik "Edit HTML"
4. Cari kode </head> dan letakkan kode di bawah ini tepat di atasnya

5. Klik "Save Template"

Dengan mengikuti langkah-langkah di atas sebenarnya favicon sudah bisa terlihat pada browser seperti mozilla, opera, dan yang lainnya. Tetapi tidak dengan browser google chrome ataupun chrome plus. Coba perhatikan screenshot dibawah ini . . .

Screenshot di atas adalah contoh tampilan favicon dengan menggunakan browser chrome plus.

Untuk mengakalinya, coba tambahkan kode type="image/vnd.microsoft.icon" pada kode di nomor 4 langkah kedua. hasilnya nanti akan seperti dibawah ini. . .

Dengan menambahkan kode tersebut, favicon yang muncul nanti akan bisa tampil di semua browser, termasuk google chrome dan chrome plus.

Menambahkan Emoticon Pada Shoutmix

2011-02-11T11:06:00.014+07:00

Menambahkan Emoticon Pada Shoutmix - Banyak blogger yang memasang shoutmix sebagai buku tamunya, termasuk blog ini. Hal ini tentu saja sebagai sarana untuk berinteraksi antara pengunjung dan si pemilik blog. untuk itu, dalam postingan kali ini, gw coba buat sharing tentang cara menambahkan emoticon pada shoutmix. apa dengan cara menambahkan emoticon pada shoutmix akan menarik banyak pengunjung?? sebenernya engga juga sih, tujuan dari penambahan emoticon ini adalah untuk membuat komentar para pengunjung di shoutmix lebih variatif dan menarik.

Sebenernya udah banyak blogger yang menulis tentang cara ini, tapi berhubung ada temen yang nanya di shoutmix, engga ada salahnya kan kalo gw bahas kembali disini, sekaligus buat ngejawab pertanyaannya.

Langsung aja..
Buat sobat blogger yang berminat buat nambahin emoticon di shoutmixnya masing-masing, sobat blogger bisa ngegunain emoticon yang gw pake di shoutmix punya gw. ini dia emoticonnya:

Buat pemasangannya pada shoutmix, silahkan ikuti langkah-langkah berikut:
1. login ke http://www.shoutmix.com
2. Pilih menu "Settings"
3. Pada kotak "Display" klik menu "Smileys"

4. Masukkan URL gambar emoticon pada tempat yang telah tersedia

5. Klik "Add" Untuk menambahkan emoticon
6. Jika sudah selesai, klik "Save settings"

Catatan: Dikarenakan kita memakai shoutmix free alias gratisan, maka kita hanya boleh menambahkan 10 emoticon aja.

Emoticon di atas adalah emoticon yang gw pake buat shoutmix di blog ini, Jika sobat blogger kurang suka, silahkan cari emoticon lain yang lebih menarik. upload emoticon tersebut di image hosting, kemudian ambil URL gambarnya aja.

Mungkin itu aja yang bisa gw sharing kali ini tentang menambahkan emoticon pada shoutmix, mudah-mudahan bermanfaat buat kita semua.

Cara Membuat Komentar Pemilik Blog Berbeda Dengan Pengunjung

2011-02-08T18:25:00.018+07:00

Cara Membuat Komentar Pemilik Blog Berbeda Dengan Pengunjung - Postingan kali ini gw tulis buat ngejawab pertanyaan salah satu temen gw yang datang ke rumah kemaren siang. Dia tanya seperti ini: "sob, komentar loe ama pengunjung blog loe ko bisa beda?? gimana cara buatnya tuh. . . ??"
dikarenakan kemaren gw engga sempet jelasin secara detail, maka gw coba buat ngejelasinnya di postingan ini aja. Bukan cuma buat temen gw aja, mudah-mudahan postingan gw yang ini bisa bermanfaat buat semua yang datang ke blog ini.
Amiinnnn. . .

Langsung aja, Cara Membuat Komentar Pemilik Blog Berbeda Dengan Pengunjung sebenernya engga sulit, yang perlu kita lakukan hanya mengikuti langkah-langkah berikut ini:
1. Login ke blogger.com
2. Pilih menu "Design"
3. Klik "Edit HTML"
4. Beri tanda centang pada "Expand Template Widget"
5. Cari kode dibawah ini (gunakan ctrl+F)

6. Tambahkan kode dibawah ini di atas kode yang ada pada poin nomor 5

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

7. Tambahkan kode </b:if> sebagai penutup kode yang ada di nomor 6. Supaya lebih jelas, coba perhatikan cara penempatan kode tersebut dibawah ini

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-admin'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>

Keterangan: Kode yang berwarna merah adalah tempat dimana kode yang ada pada nomor 6 dan 7 harus diletakkan

8. Cari Kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya

.commenttext-admin{background:#000000;border:3px dotted #00ff00;margin:.5em 0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:25px;color:#00ff00}

9. Klik "Save Template"

Catatan: Dikarenakan setiap template mempunyai struktur kode yang berbeda, mungkin dalam pencarian kode nomor 5 nanti akan mengalami kesulitan (tidak ditemukan). untuk mengakalinya coba cari bagian dari kode tersebut dalam pencarian, misalkan hanya mencari kata dd class='comment-body'

Cara Membuat Komentar Pemilik Blog Berbeda Dengan Pengunjung di atas udah gw pake buat blog ini dan hasilnya sukses.

Ampir lupa nih, cara ini hanya berlaku pada saat si pemilik blog dalam keadaan login. selain itu sobat blogger juga bisa sedikit modifikasi kode di nomor 8. misalnya dengan mengganti jenis garis (dotted, double, inset, dll), mengatur jarak (padding) dan mengganti warna.
Buat ngeliat kode warna HTML sobat blogger bisa liat di sini.

Membuat Spoiler di Blog

2011-02-06T17:07:00.008+07:00

Membuat Spoiler di Blog - Layaknya sebuah spoiler yang sering digunakan di dalam sebuah forum, spoiler blog juga sangat dibutuhkan dalam dunia blogging. Dengan membuat spoiler, pemilik blog akan lebih mudah untuk menghemat tempat/area di blog karena konten yang dibuat si pemilik blog yang bisa memakan tempat dapat disembunyikan (gambar, kode, dll). selain itu, membuat spoiler di blog juga ditujukan untuk mengurangi berat blog saat proses loading sebab konten yang ukurannya besar tidak akan ikut di load dan hanya akan tampil setelah tombol spoiler tersebut di klik.

Seperti apa sih spoiler itu???
coba liat tampilan spoiler di bawah ini:

Untuk membuat spoiler seperti di atas, maka kita cukup menggunakan kode dibawah ini:

<div>
<div style="margin-bottom: 5px;">
<div class="smallfont" style="margin: 2px;">
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 12px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 5px; padding: 1px;">
<div style="display: none;">

Isi Spoiler . . .

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

Contoh kode spoiler tersebut adalah contoh kode untuk spoiler yang berisikan teks biasa. Kalo sobat blogger mau memasukkan kode HTML, sobat blogger harus parse dulu kode HTML tersebut agar kodenya tidak langsung bekerja. Buat parse kode HTML bisa diliat di sini.
Untuk gambar, cukup ganti tulisan yang berwarna hijau dengan kode <img src="url gambar"> (kode HTML untuk memanggil gambar).

Secara umum kode untuk membuat spoiler di blog sama seperti kode di atas, tapi sobat blogger bisa sedikit modifikasi sehingga hasilnya nanti bisa sesuai keinginan.

Membuat Gambar Melayang di Blog

2011-02-05T15:54:00.008+07:00

Membuat Gambar Melayang di Blog - Hey . . Liat gambar di sisi sebelah kiri bawah blog gw ga??? Hmmmm.. keren ga???
Hahahaa
mau buat gambar melayang kaya gitu??? Nih gw kasih tau caranya …

Pertama:
Buat dulu gambar yang ukurannya 125x125 (terserah selera sih), terus simpan/upload gambar yang udah dibuat tadi ke image hosting .. misalnya photobucket.com . .
Kalo udah, ambil url gambar yang udah di upload tadi ‘n simpan di notepad atau Microsoft Word (buat sementara aja) ..

Kedua:
 Login dulu ke blogger.com
 Pilih menu Design
 Klik Edit HTML
 Cari kode ini ]]</b:skin> (supaya lebih gampang, tekan ctrl+f ‘n masukan kode yang dicari)
 Copy/paste script di bawah ini tepat sebelum/diatas kode ]]</b:skin>

#rdl_image{
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop + document.documentElement.clientHeight-this.clientHeihgt);
_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);
}

 Kalo udah, cari kode </body>
 Copy/paste script di bawah ini tepat sebelum kode </body>

 Klik Save

Gimana??? .. Gampang kan????

Catatan:
 Teks yang berwarna merah diganti dengan "url gambar yang tadi udah di simpan"
 Teks yang berwarna hijau adalah posisi letak gambar, bisa diganti dengan “up, right, left atau down”

Cara Pasang AddThis Share Button di Blog

2011-02-02T22:51:00.012+07:00

Cara Pasang AddThis Share Button di Blog - Memasang share button memang menguntungkan bagi pemilik blog. Kenapa gw bilang menguntungkan?? Sebab dengan memasang share button akan lebih memudahkan para pengunjung untuk berbagi informasi menarik yang ada di blog kita. Selain itu, memasang share button adalah salah satu cara promosi blog yang paling efektif karena kita dapat langsung berbagi informasi di berbagai media sosial seperti facebook, twitter dan berbagai media sosial lainnya.

Sebenarnya blogger.com sudah menyediakan fasilitas share button sendiri. Tapi buat gw pribadi share button bawaan blogger.com kurang memuaskan karena hanya dapat mengakses beberapa media sosial aja. maka dari itu, kali ini gw mau coba share tentang Cara Pasang AddThis Share Button Di Blog.

Kenapa AddThis share button?? Alasannya simpel sih, AddThis share button yang disediakan oleh addthis.com mempunyai nilai unik sendiri (menurut gw). Bentuknya yang kecil dan dapat mengakses ke banyak media sosial, mungkin ini yang menjadi nilai plus yang utama. Selain itu, kita dapat memilih jenis AddThis share button yang kita inginkan. Ups... ampir lupa, AddThis share button juga udah banyak dipake di banyak website/blog loh. Hal ini membuktikan AddThis share button udah diakui oleh banyak pihak.

Hmm... tertarik buat masang AddThis share button di blog???
coba ikuti langkah-langkah dibawah ini !!

Langkah pertama
1. Silahkan Masuk ke addthis.com
2. Kemudian pilih jenis tombol yang diinginkan dan Pilih "No, just give me the button"
3. Klik "Get Your Button" dan Copy Script yang diberikan

Langkah Kedua
1. Login ke blogger.com
2. Pilih menu "Design"
3. Klik "Edit HTML"
4. Buat Jaga-jaga, back up dulu template sobat blogger
5. Beri tanda centang pada "Expand Template Widget"
6. Cari kode <div class='post-header-line-1'> (untuk header) atau kode <div class='post-footer'> (untuk footer). kalo engga ada, coba cari kode yang mirip dengan kedua kode tersebut !!
7. Letakkan kode share button yang didapat dari addthis.com tadi setelah salah satu kode di atas (poin no. 6)
8. Klik "Save Template"

Bukan hanya AddThis share button yang disediakan oleh addthis.com, cara pemasangan share button yang lainnya pun akan sama dengan langkah-langkah di atas. Tapi dikarenakan sharing kali ini gw fokusin sama AddThis share button yang disediakan oleh addthis.com, maka langkah-langkahnya gw sesuaikan.

Membuat Text Area di Blog

2011-01-31T23:05:00.010+07:00

Membuat Text Area di Blog - Text area adalah suatu tempat atau area yang digunakan untuk menyimpan suatu teks atau kode HTML tertentu. dalam penggunaannya text area bisa ditempatkan di dalam suatu page(halaman) atau bisa juga diletakkan dalam suatu widget. Dengan menggunakan text area, pengunjung blog akan lebih dimudahkan dalam proses mennyalin data (copy).

Buat memudahkan kita semua dalam memahami "text area", berikut ini adalah kode dasar/standar dari text area . . .

hasilnya akan seperti ini:

Contoh diatas adalah text area yang dibuat dengan kode/script standar. Sebenernya ada beberapa jenis text area yang bisa dibuat, tapi gw coba buat sharing 4 jenis "text area" yang biasa digunain dalam proses blogging.

1. Text Area yang kolom dan barisnya bisa diatur
Kode:

<div align="center">
<textarea name="code" rows="2" cols=35">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea></div>

hasilnya:

2. Text Area dengan satu klik maka seluruh isi akan di blok
Kode:

Hasilnya:

3. Text Area dengan tambahan select all button
Kode:

<div align="center">
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div>
<div align="center">
<textarea style="width: 300px; height: 80px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Masukkan teks/kode disini !! teks/kode tersebut adalah teks/kode yang akan tampil sebagai isi dari "text area" yang dibuat</textarea>
</div>
</div>
</form>

Hasilnya:

4. Text Area yang jika disorot mouse akan di blok semua
Kode:

<div>
<form name="agungindraguna">
<div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 50px; width: 300px;">coba arahkan mouse ke teks ini !!</textarea></div>
</form>
</div>

Hasilnya:

Keempat jenis text area di atas adalah yang umum dipergunakan dalam proses blogging. Sebenernya masih ada jenis lainnya, yaitu Text Area dengan border

Kode:

<div align="center"><textarea cols="35" rows="2" style="border: 2px dotted red ;">Tulis apa aja deh.. terserah !!</textarea></div>

Hasilnya:

Text area border ini jarang gw temuin di blognya temen-temen blogger lain. Mungkin karena tampilannya rada beda, jadi engga banyak yang mau ngegunainnya.

Gw kira sharing kali ini cukup . . . Semoga bermanfaat buat kita semua !! Amiiinnn !!

Cara Pasang Kode Warna HTML (HTML Color Code) di Blog

2011-01-28T12:34:00.004+07:00

Kode Warna HTML (HTML Color Code) - Gimana sih cara nyari kode warna HTML??? gara-gara ada salah satu temen gw yang nanya kayak gitu, gw jadi kepikiran buat posting Kode Warna HTML nih.. hihihii... thx ah, kebeneran gw lagi ga ada ide nih buat posting..
langsung aja...
dibawah ini adalah kode warna HTML yang biasa digunain buat edit template website ataupun edit kode yang ada unsur warnanya..

HTML Color Code by: Agung X-Zeg Indraguna

Buat sobat blogger yang mau pasang kode warna HTML (HTML Color Code) seperti di atas, silahkan ikuti langkah-langkah di bawah ini. . .

 Login dulu ke akun blogger
 Klik "Design"
 Pilih "HTML/JavaScript"
 Copy JavaScript dibawah ini dan paste di tempat yang telah disediakan!

 Buat postingan baru, dan masukan kode di bawah ini!

Setelah melakukan langkah-langkah tersebut, sobat blogger akan mendapatkan tampilan kode warna seperti di atas, atau contoh lainnya sobat blogger juga bisa liat di sini

Catatan:
Buat dapetin kombinasi warna yang lebih banyak, kita juga bisa ngegunain Adobe Photoshop..

Menambahkan Pesan di Bawah Posting Blog

2011-01-26T08:53:00.015+07:00

Menambahkan Pesan di Bawah Posting Blog - Lagi-lagi tampilan blog ... Sobat blogger pasti pernah liat kan blog yang dibawah postingannya ada pesan atau iklannya??? kalo belom, coba liat dibawah postingan ini deh !! itu tuh, yang ada di bawah..
isi pesannya "Info : buat sobat blogger yang . . . . . . . dst"
nah. . . sekarang gw mau share tentang cara menambahkan pesan di bawah posting blog yang hasilnya nanti kurang lebih sama seperti pesan yang ada di bawah postingan ini.

Sebenernya ada beberapa cara buat menambahkan pesan di bawah posting blog, tapi cara yang mau gw share ini cara yang menurut gw paling mudah buat dilakuin.. maklumlah, gw kan newbie..

Langsung aja, buat nanmbahin pesan dibawah posting, coba ikutin langkah2 dibawah ini!
 Login dulu ke blogger.com
 Pilih menu "Design"
 Klik "Edit HTML"
 buat jaga-jaga kalo terjadi kesalahan, sebaiknya backup dulu template yang kita gunain, caranya klik "Download Full Template"
 Beri tanda centang pada "Expand Template Widget"
 Cari kode <data:post.body/> (gunakan ctrl+f dalam pencarian)
 Copy Paste kode di bawah ini tepat dibawah kode <data:post.body/>

<hr/><b>Isi dengan pesan yang akan ditampilkan . . .</b><hr/>

 Klik "Save Template"

Keterangan:
 <hr/> adalah tag HTML untuk garis
 <b>...</b> adalah tag HTML untuk hurup tebal (bold)

Cara di atas adalah cara yang umum digunakan dalam proses menambahkan pesan di bawah posting blog. untuk mempercantik tampilan pesan kita nantinya, kita juga bisa menambahkan tag HTML lain, seperti <center>...</center> (agar teks menjadi rata tengah), <i>...</i> (untuk tulisan miring), <blink>...</blink> (untuk tulisan berkedip), bahkan menambahkan link.

Demikian sedikit penjelasan tentang cara menambahkan pesan di bawah posting blog, semoga berhasil dan mudah-mudahan bermanfaat !!

Link Otomatis Terbuka Tanpa di Klik

2011-01-25T01:18:00.009+07:00

Link Otomatis Terbuka Tanpa di Klik - kalo ngomongin soal link emang seru deh . . gimana engga, buat orang-orang yang bergaul ama dunia internet khususnya blog/website pasti ga bakalan jauh dari yang namanya link.
ok... kali ini gw mau share salah satu cara buat ngemodifikasi link, bukan cara baru sih dan bisa di bilang cara ini udah jadi rahasia umum yang diketahui banyak orang. tapi engga apa-apa lah, yang penting berbagi... sayang kan kalo ilmu di simpen sendiri aja. . .

Coba perhatiin link dibawah ini deh !!

HTML Color Code

Kode link diatas:

<a href="http://agungindraguna.blogspot.com/p/html-color-code.html">HTML Color Code</a>

Link di atas ngegunain kode link yang biasa. Coba linknya disorot pake mouse deh !! Link tersebut engga akan terbuka secara otomatis (buat buka linknya harus di klik).

Sekarang coba perhatiin link dibawah ini !!

HTML Color Code

Kode link di atas:

Link di atas kalo disorot mouse akan terbuka secara otomatis sebab kode linknya udah ditambahin onMouseover="window.location=this.href"

Sedikit ulasan tentang cara modifikasi link, mudah-mudahan bermanfaat . . .

Menampilakan Avatar Komentator

2011-01-20T23:32:00.014+07:00

Menampilakan Avatar Komentator - Berbeda dengan orang yang berkomentar dengan akun google, komentator yang berkomentar dengan nama dan url biasanya avatarnya tidak terlihat (blank). bagi pemilik blog yang mementingkan kerapihan blog miliknya, tentu aja ini merupakan nilai yang bisa mengurangi kerapihan blognya tersebut karena pada saat ada yang berkomentar dengan hanya menggunakan nama dan url akan ada ruang kosong di daftar komentarnya (avatar si komentator tidak terlihat). nah, kali ini gw mau coba share tentang cara menampilkan avatar komentator tersebut.
Gambar yang akan muncul nanti tentu aja bukan foto atau avatar asli si komentator, melainkan hanya avatar pengganti.

contoh avatar komentator di blog ini

berikut ini langkah-langkahnya:

1. Login dulu ke blogger.com
2. Pilih menu "Design"
3. Klik "Edit HTML"
4. buat jaga-jaga kalo terjadi kesalahan, sebaiknya backup dulu template yang kita gunain, caranya klik "Download Full Template"
5. Beri tanda centang pada "Expand Template Widget"
6. Cari kode ]]></b:skin> (gunakan ctrl+f)
7. Copy/paste kode dibawah ini tepat di atas kode ]]></b:skin>

/* Avatar */
.avatar-image-container img {
background:url(http://t2.gstatic.com/images?q=tbn:QG8a7ShCJzFU8M);
width:35px;
height:35px;
}

8. Cari kode <a expr:name='data:comment.anchorName'/> dan ganti kode tersebut dengan kode dibawah ini . .

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>

9. Klik "Save Template"

Biar avatar komentatornya beda ama orang lain, ganti aja url gambarnya (teks warna merah) ama gambar milik sendiri, ukurannya 35x35 px.

Link Bergerak Saat Disorot Mouse

2011-01-18T22:59:00.021+07:00

Link Bergerak Saat Disorot Mouse – Setelah dulu gw nulis tentang cara membuat efek link warna pelangi, kali ini gw mau coba share satu cara lain yang bisa kita gunain buat modifikasi link. Cara ini lumayan seru lah, sebab link yang kita buat nanti bisa bergerak kalo disorot oleh mouse.

Kita mulai ea !!

Langkah pertama:
1. Login dulu ke blogger.com
2. Pilih menu “Design”
3. Klik “Edit HTML”
4. Cari kode </head>
5. Copy/paste kode dibawah ini tepat setelah kode </head>

6. Klik “Save Template”

Langkah kedua:
Dalam pembuatan link nanti, tambahkan kode class="nudge"

Contoh link dengan teks:

<a href="url tujuan" class="nudge">teks yang akan dijadikan link</a>

Contoh link dengan gambar:

Keterangan:
1. Silahkan ubah contoh link di atas sesuai kebutuhan
2. Teks yang berwarna hijau adalah jarak bergerak link, silahkan di ubah sesuai selera

Cara Membuat Buku Tamu Tersembunyi

2011-01-18T12:04:00.020+07:00

Cara Membuat Buku Tamu Tersembunyi - Sebenernya udah banyak yang tau tentang gimana cara membuat buku tamu tersembunyi ini, bisa di bilang ini mah postingan basi (hehehehe). Tapi ga ada salahnya kan kalo gw posting lagi di sini, kebetulan juga di shoutmix ada yang nanyain. . .

Kita mulai aja. . .

1. Login ke blogger.com
2. Klik “Add a Gadget”
3. Pilih “HTML/JavaScript”
4. Masukan kode dibawah ini

5. Klik "Save"

Keterangan:
1. Silahkan edit sesuai kebutuhan
2. Ganti teks yang berwarna merah dengan gambar milik sobat blogger sendiri
3. Ganti teks yang berwarna hijau dengan kode buku tamu milik sobat blogger
4. Kalau mau posisinya rada ke atas, ubah atribut Top-nya jadi 30px atau sesuai selera (teks berwarna kuning
5. Kalo mau ganti warna garis ama background, ubah kode HTML warna border (garis) dan background (warna latar).
6. Buat ngeliat kode warna HTML-nya silahkan klik disini

Apa itu SPAM dan SCAM ??

2011-01-17T00:40:00.008+07:00

Apa itu SPAM dan SCAM ?? - SPAM adalah pesan “sampah” yang dikirimkan ke banyak tujuan. Kenapa disebut sampah?? Jelas aja, rata-rata orang yang menerima spam tidak menginginkan pesan tersebut hadir di direktori pesan mereka. Biasanya spam berisi iklan dari suatu jasa/produk tertentu. Spammer (orang yang mengirimkan spam) sengaja mengirimkan pesan spam tersebut kepada banyak tujuan dengan harapan ada salah satu dari si penerima pesan yang membaca pesan yang dia kirimkan dan akhirnya tertarik untuk membeli produk yang dia tawarkan. Dengan kata lain, keuntungan adalah tujuan utama si spammer.
Tidak hanya di email, spam juga bisa beredar di SMS dan media penyebaran pesan lainnya.

Apa itu SPAM dan SCAM ?? - SCAM adalah suatu berita yang ada dalam dunia internet yang yang ditujukan untuk membohongi atau menipu sehingga si scammer (orang yang mengirimkan berita scam) akan mendapatkan suatu keuntungan tertentu. Contoh bentuk scam yang saat ini sedang ramai di dunia internet adalah bisnis online yang menjanjikan keuntungan yang besar (bukan berarti semua bisnis online adalah scam). Sebaiknya sebelum mengikuti suatu bisnis online kita mencari banyak referensi dan tanggapan orang-orang dri program yang akan kita ikuti tersebut (bisa di google, yahoo, orang yang berpengalaman, dll).

Referensi: Wikipedia dan sumber lainnya

Apa itu Hoax ???

2011-01-14T23:35:00.022+07:00

Apa itu Hoax ??? - Apa itu hoax ?
Hoax adalah suatu berita atau informasi yang sifatnya tidak benar (bohong). Hoax dibuat dengan tujuan untuk membohongi dan membuat seseorang percaya dan membenarkan sesuatu hal yang sebenarnya adalah salah. Hoax bisa beredar dimana saja, bisa di Internet, Yahoo Messenger, Email, Facebook, Bulletin Friendster, SMS, dll.

Hoax tidak selalu harus berhubungan dengan dunia komputer dan internet, hoax juga bisa berisi tentang lingkungan, kesehatan, keuangan, atau bahkan hal sekecil apapun yang ada di dekat kita.
Ciri-ciri hoax:
1. Di distribusikan (disebarkan) melalui media pengiriman pesan (email, SMS, dll)
2. Isi berita yang disampaikan biasanya selalu membuat panik dan cemas para pembacanya
3. Selalu memberikan pesan buat memforward/meneruskan berita tersebut kepada orang lain
4. Pengirim pertama berita tidak diketahui

Berbeda dengan spam, hoax tidak memberikan keuntungan apapun buat si pembuatnya kecuali kesenangan pribadi karena hoax buatannya udah bisa ngebohongin dan menjadi pembicaraan banyak orang.

Seperti dijelaskan diatas, hoax dibuat agar si penerima berita percaya akan berita yang diterimanya walaupun berita tersebut sebenarnya adalah salah dan tidak terbukti kebenarannya. Maka dari itu dalam proses pembuatannya si pembuat hoax selalu memasukkan unsur-unsur yang dapat membuat si penerima berita percaya seperti mencantumkan istilah-istilah ilmiah, menggunakan data-data dalam bentuk angka, mencantumkan sumber berita dan alamat kantor sumber berita tersebut dll.

Referensi: Wikipedia dan sumber lainnya

SMS Online Gratis (Lagi???)

2011-01-12T22:27:00.016+07:00

SMS Online Gratis (Lagi???) - Lagi-lagi tentang SMS Online gratis. . .
yupz... setelah dulu gw nulis tentang layanan SMS online gratis dari FreeSMS4Us.com, sekarang gw mo ngasih info tentang layanan SMS Online gratis dari kusms.com .

Ini dia screenshotnya . . .

Sama halnya dengan pesan yang di kirim via FreeSMS4Us, di setiap Pesan yang dikirim via kuSMS juga akan ada embel-embel kata-kata promosi dari si mpunya web.. kata-katanya seperti ini "via kuSMS.com" . . .

Haaalah...
Ga usah banyak basa-basi lagi ah, buat yang berminat ngegunain layanan sms gratis ini, silahkan kunjungi langsung websitnya . . .

Daftar Website/Blog di Google, Yahoo dan Search Engine Lainnya

2011-01-10T20:39:00.011+07:00

Daftar Website/Blog di Google, Yahoo dan Search Engine Lainnya - Salah satu cara untuk mendapatkan pengunjung di website/blog adalah dengan mendaftar di search engine. Supaya artikel yang ditulis lebih cepat terindeks di search engine, akan lebih baik kalo kita juga mendaftarkan secara satu persatu artikel tersebut (tidak hanya mendaftarkan website/blog secara keseluruhan).

1. Google
Untuk daftar di search engine google, kita bisa mendaftar di
http://google.com/addurl

2. Yahoo
Untuk daftar di search engine Yahoo, kita bisa mendaftar di
https://siteexplorer.search.yahoo.com/submit

3. MSN
Untuk daftar di search engine MSN, kita bisa mendaftar di
http://search.msn.com/docs/submit.aspx?FORM=WSDD2

Selain ketiga search engine diatas, kita juga bisa mendaftarkan website/blog kita di http://freewebsubmission.com dan http://pingoat.com

Sedikit info, tapi mudah-mudahan bermanfaat . . .

Cara Membuat Form Untuk Banner Exchange

2011-01-10T17:06:00.022+07:00

Cara Membuat Form Untuk Banner Exchange – Salah satu cara buat ningkatin traffic blog kita adalah dengan cara bertukar link/link exchange. Nah…. Biar lebih keliatan professional dan menarik (hehehe… gaya, padahal gw juga masih pemula) alangkah baiknya dalam apabila proses pertukaran link tersebut kita ngegunain banner yang ukurannya kecil.

Tertarik buat masang banner exchange form di blog?? Berikut cara-caranya . . .

 Buat gambar yang mau dijadiin banner, ukurannya terserah (kalo punya gw ukurannya 160x52px)
 Simpan gambar yang udah dibuat tadi ke image hosting, misalnya photobucket.com
 Copy kode di bawah ini (ubah sesuai kebutuhan)

 Paste di blog (di lokasi yang diinginkan)

Hasilnya kurang lebih akan seperti di bawah ini . . .

Keterangan:
 Ubah teks warna merah sesuai kebutuhan
 teks warna hijau adalah ukuran lebar form banner exchange (bisa dubah sesuai selera)