Menambahkan Gambar di Halaman Blog

Entah kenapa koq judulnya aneh..Halah, ga penting. Maksudku adalah bagaimana cara menambah gambar pikachu seperti yang ada di blogku ini. Ga cuma gambar sih, bisa kamu tambah banner, jam, atau yang lainnya, tapi aku belum tau caranya..hehe.^_^
Konsekuensi menambah gambar seperti ini adalah blogmu akan semakin berat loadingnya tergantung besarnya gambar yang kamu tambahkan. Usahakan cari gambar yang size-nya dibawah 10 KB. Untuk gambar bergerak, cari yang format .gif. Cukup ah basa basinya, langsung ke tutorialnya. Sebenarnya aku liat dari blog ini. Let's BEGIN...

Cara menambahkan gambar :
a. sign in ke blogger.
b. klik tab layout.
c. pilih edit html.
d. JANGAN beri tanda centang pada expand widget template, kalo dicentang akan muncul kode2 aneh.
e. cari kode berikut : ]]>
f. tempatkan kode berikut di atas kode tersebut :

#tambah_gambar {
position:fixed;_position:absolute;top:250px; left:10px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

posisi gambarnya bisa kamu ganti dengan mengganti kata top dengan bottom untuk di bawah dan left dengan right untuk di kanan. Jaraknya juga bisa, dengan cara mengganti nilai px..
top:250px berarti image berada di atas dengan jarak 250 pixel dari atas.

g. lalu cari kode berikut : /body

h. tempatkan kode berikut di atas kode tersebut :

<div id="tambah_gambar"><a href="http://161721.blogspot.com"><img border="0" src="http://i170.photobucket.com/albums/u269/amy_hearts/pikachu.gif/" /></a></div>

kamu bisa mengganti link blognya dengan link blog kamu dan link imagenya dengan link image kamu (harus di-upload dulu lho, bisa ke photobucket, imageshack atau yang lain) atau url image yang kamu sukai.

i. kalo udah, klik preview dulu buat lihat hasilnya.

j. kalo gagal, bisa di clear edit.

j. kalo udah bagus, baru klik save template.

k. selesai.^_^

Oh, ya, klo mau tambah gambar, kamu tinggal copy paste kode tadi, tapi kode #tambah_gambar diganti dengan yang lain seperti #tambah_gambar2 dan kode div id="tambah_gambar" juga diganti dengan nama yang sama, contoh div id="tambah_gambar2". Ingat, ga boleh beda.

Gimana, udah bisa belom ?? jangan lupa untuk isi comment ya. Biar cepet terkenal. ^_^
OK, semoga berguna.

Read full article...

Show summary...

Auto-Hide the NAVBAR

Ehm..ehm...Tutorial ketiga dan yang paling mudah di antara yang sebelumnya. Tentang navbar, apa itu navbar?? Navbar (navigation bar?? ndak bener??) adalah sebuah kotak persegi panjang yang terletak di atas halaman blog anda. Navbar berisi cari blog, next blog, sign in, dsb. Bagi kalangan tertentu, navbar ini sangat menjengkelkan. Tetapi jika dihapus, risikonya blog anda akan dihapus. Kejam. Maka, untuk menghindari hal tersebut, saya akan membahas cara menghilangkan navbar sementara dan akan muncul jika kursor mengarah kepadanya. Membosankan, langsung aja ke tutorialnya. Let's BEGIN...

Cara auto-hide the navbar :

a. sign in ke blogger.
b. cari tab layout.
c. pilih edit html.
d. cari :

body {

background: (letaknya ada di awal2 kode html)

e. copy paste kode berikut di atas kode tersebut :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

f. klik preview.
g. apabila navbarnya dah hilang (auto-hide), langsung klik save template.
h. selesai. ^_^

Mungkin ini terlalu mudah dan tidak berguna, tapi jujur saja, bagi saya ini sangat berguna. haha.
Oh, ya, klo ada masalah, langsung komentar aja di bawah. Insya Allah, saya akan membantu.
Sampai jumpa lagi di tutorial berikutnya. ^_^

Read full article...

Show summary...

Membuat Read more.. atau Selengkapnya...

Ini adalah tutorial kedua dari saya. Mungkin ini kelihatan menjiplak, tapi saya berusaha untuk menampilkan cara2 yang mudah dimengerti untuk orang-orang seumuran saya. OK, cukup basa basinya, langsung ke pokok masalah. Disini akan dibahas mengenai cara membuat link read more khusus para pengguna blogger (klo wordpress,dkk kayaknya ga bisa, sorry). Link read more dibuat untuk mempersingkat posting yang panjang dengan 'memotong' bagian yang akan di link dengan read more. Klo postingnya sudah pendek dan tidak perlu read more, tolong jangan dipraktikkan, soalnya read more ini muncul di setiap posting, entah panjang atau pendek. Dan jangan lupa, setiap mengganti HTML dimohon untuk meng-klik preview dulu sebelum di save template. Ini mencegah supaya kesalahan2 saat pengeditan, bisa di-undo dengan cara meng-klik clear edit. Nah, saatnya tutorial. Let's BEGIN...

Cara membuat read more :

a. sign in ke Blogger.
b. pilih layout.
c. klik edit html.
d. berikan tanda centang ( v ) pada kotak expand widget templates.
e. cari kode berikut :

<div class="post-body">

f. hapus semua kode di bawah kode tersebut sampai kode berikut :

<div style="clear: both;"> <!-- clear for photos floats -->

diantara dua kode tersebut harus kosong.
g. letakkan kode berikut di antara dua kode di atas.

<b:if cond="data:blog.pageType == "item"><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style><p><data:post.body/><a expr:href="data:post.url"><b><div align="center">Read more...</div></b></a></p></b:if>

kata read more bisa diganti dengan Selengkapnya atau selanjutnya, terserah anda.
align='center' digunakan untuk mengatur posisi read more, bisa left, center, atau right.
h. peletakkan harus dilakukan dengan benar. INGAT, jangan di save template dulu.
i. klik preview. Perhatikan tulisan read more, sudah ada atau belum.
j. kalau belum, klik aja clear edit untuk meng-undo semua pengeditan.
k. kalau ada, yakinkan diri anda untuk meng-save template.
l. klik save template.
m. untuk 'menghilangkan' posting, klik edit html setelah selesai posting. INGAT, jangan di-publish dulu. Lalu letakkan :

<span class="fullpost">

sebelum posting yang anda ingin hilangkan. Dan tutup dengan

</span>

pada akhir baris html.
n. postingan yang akan dihilangkan harus berada di antara :

<span class="fullpost">postingan yang hilang</span>

o. Selesai....^_^

Semoga tutorial ini berguna. Klo ada masalah, silahkan komentar di bawah. Nantikan tutorial saya selanjutnya. Jangan lupa tuker2an link ya..Biar cepet terkenal..Haha..Jayuss...^_^

Read full article...

Show summary...

Membuat Background Blog menjadi Image Sendiri

Kemarin ada yang tanya mengenai layout berupa image sendiri. Trus, jelasinnya susah klo ga sekalian buka blog. Tapi kali ini, aku akan mencoba menerangkan cara mengganti background blog menjadi image sendiri. Ada dua versi; 1. versi image dari internet (butuh url-nya gambar itu), 2. versi image dari harddisk komputer (perlu di-upload dulu). Nah, sekarang kita mulai dari versi 1. Let's BEGIN...

Versi 1 -> image dari internet :
a. gunakan template minima, entah yang mana, terserah.
b. sign in ke blogger.
c. pilih tab Edit -> Layout.
d. pilih edit html.
e. cari tulisan seperti ini : body { background: $bgcolor; (kira2 seperti itu), letaknya ada di awal2 html.
f. ganti $bgcolor dengan : url(letakkan url image disini) fixed; (kata fixed membuat background berhenti bergerak ketika di sroll down).
g. jika perlu, klik preview untuk melihat hasil.
h. jika sudah, klik save template.
i. selesai. ^_^

Versi 2 -> image dari harddisk komputer :
a. gunakan template minima, entah yang mana, terserah.
b. sign in ke blogger.
c. pilih tab Edit -> Layout.
d. pilih edit html.
e. buka halaman ini di jendela baru.
f. klik browse, lalu cari lokasi image yang anda inginkan sebagai background dari harddisk.
g. klik open, lalu upload. Maka jendela baru akan muncul.
h. tunggu beberapa saat. Pada baris bawah sendiri akan muncul url image kamu di samping tulisan Direct link to image.
i. copy link itu.
j. kembali ke blog edit html.
k. cari tulisan seperti ini : body { background: $bgcolor; (kira2 seperti itu), letaknya ada di awal2 html.
l. ganti $bgcolor dengan : url(letakkan url image disini) fixed; (kata fixed membuat background berhenti bergerak ketika di sroll down).
m. jika perlu, klik preview untuk melihat hasil.
n. jika sudah, klik save template.
o. selesai. ^_^

OK, selesai sudah tutorial mengganti background. Klo ada kesulitan, langsung komentar aja kesini, Insya Allah aku akan membantu. Maaf klo kurang gambar, soalnya ga ada waktu buat nampilin gambar. ^_^

Read full article...

Show summary...