Dasar Dasar HTML

Sebuah Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Walaupun sekarang kita bisa membuat web/blog hanya dengan klak-klik mouse tapi setidaknya kita harus sedikit mengerti tentang dasar-dasar HTML, ya tho?. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya :
* CARA MEMASUKKAN GAMBAR
kode :

<img src="http://kendhin.890m.com/banner-trik.gif" border="0" height="17" width="90">

keterangan :
yang warna biru adalah lokasi gambar kamu.
height="17" width="90" adalah ukuran lebar dan tinggi gambar

* CARA MEMBUAT LINK
Kode :

<a href="http://materitraining.blogspot.com" >tips blog </a>

Keterangan :
Text warna biru adalah link yang dituju.
Tulisan "tips blog" adalah tulisan yang ditampilkan.
Jika pingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :

<a href="http://materitraining.blogspot.com" target="_blank"><img src="http://acehfotografer.net/upload/images/w4uo9y5c0gy19k73ezs.gif" border="0" height="17" width="90"> </a>

Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "http://materitraining.blogspot.com"

* CARA MENGETENGAHKAN TEXT/GAMBAR
Kode :

<center>text</center>

Keterangan :
Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar

* CARA MEMBUAT BARIS BARU
Kode :

<br>

Keterangan :
Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan

* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH
Kode :

<b>text</b>
<i>text</i>
<u>text</u>

Hasil :
Tebal
Miring
Garis Bawah

* KODE-KODE WARNA
#000000   Hitam
#999999    Abu-abu
#FFFFFF  Putih
#FF0000  Merah
#00FF00  Hijau
#0000FF  Biru
#FFFF00  Kuning
#00FFFF  Biru Laut
#FF00FF  Merah Muda
#9900FF  Ungu
#FF6600  Orange

Nah Selamat Mencoba.

Selengkapnya Bos......

Cara Buat Google Translation

mendukung bahasa indonesia. Oleh karena itu, setiap web / blog yang menggunakan bahasa indonesia, sudah bisa di terjemahkan ke dalam bahasa lain dengan melalui google translate. Untuk lebih mempermudah pengunjung blog dalam menterjemahkan blog kita (bhs. indonesia) ada baiknya jika kita memasang widget google translation flag di blog. Caranya ga sulit kok, tinggal copy paste saja kode di bawah ini ke salah satu bagian blog anda sesuai dengan yang anda inginkan :

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQEFzNouzGUjMyTo_oeJd8ki-s1GdWIyVDlPhHA2FtnhH29YCKRUCaqRTWKKTOw3cRLbkSuT1RsKT3dryi-W3gDZ8m9i7PmeOh-fJ3vfTGh6fz5h4n6GADR60356-xesfXgZt69k9rg6E/s320/english.jpeg" height="20" title="English" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6NeBAORD_lUoKIhdFn2l2GkW05tgsS4nHmAI5c6azRAJUSmzf59vb15FUo7794ZRoM_bqgoP_eIvSKkLv5VHTAmltdLBRK84fqrlZy6ctDO_mu5mbE50J0H7mvYhJ48329vG31c4oYu8/s320/french.jpg" height="20" title="French" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHCY6HrdI_TlcPj3EgRFPUfDws3lYEKKxC4fD-a5ZrjUP7pRxDOXzARf5Qfq14nijXTqv07UgLYOPEJovOZftxTS0LnKU7HgmsJDAa_M8woZWAjtACzBAFLK6AbKbZVoc9VWIqLbqnKI/s320/german.jpg" height="20" title="German" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhed2gjY9RWxHkzs8UYSLyGtvaT90e76PJq-QTvqrslcYJAvLj4KwBoVclx6LLa4d7Xvf6bsyxdS0knl2D_y9gTH_bguxcXkwCHYDY56MLZ54HeCyHy5zbw8upU_1rN-i8Oww68R_Pt520/s320/spanish.jpg" height="20" title="Spain" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhegFMv9BWMYNWVUNHKzAPdUJkhwD3mt9OAXB83M5QSQp_8k_zWyfEAgP0as0o5i_IsDhF4IujH3mL4E1v3pKzGKDawTmhMcK2FRQG9BOit7qPaSYUXj6FUss2-l3idv4yt6PPOggWLalk/s320/italian.jpg" height="20" title="Italian" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDNqHbaBDAE1EFn7jLl7h7ANdJ2tDMwJPZObdniDHebaA8SE4w50pmqxShJe-EmTm4j7OqL5-STbGiWvpFpI-IlCFHu84r4xk0gSiUTG2WyZrvp9rbtj_Tf_UFfWdlqd2459IIv0g3aY/s320/dutch.jpeg" height="20" title="Dutch" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVgw11kS9Xho5J_HmteeqOjOlQPfiRBwsP8KF-34alo60pdVkA3gcNqd2TVWF67jVQ-BTHqEz2t15YanR93NjIlfGAx4L13Vzy4a-mMXknCD9uHTYClA6lsyyxgx6g04-nRiA-5qDSQHA/s320/russian.jpeg" height="20" title="Russian" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8OBWLHSVZRwyzpaIROcWVd1pcQK3eay_-9MowYmq-w0MRdevXX5tzDIWm1nDPl-rod6uBAXNF67nJ8kPqnG6Nt1Um75ckPniAlLHonXNKdbY7u4MtskLdHiG-JLyuj-amlC0m3TAYE9E/s320/brazilian.jpg" height="20" title="Portuguese" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehDDjOeXFXC5JJRbBpJtfNGdFnvbfzfXoKdWx55B6J6ecr1Q1bGzTs5S5AiNWbDlpYWVNtmkebEr91Yke9-NR-N2jWshxOdUOjQmGl8i9Mn82lBuWoY6wIU9LUkGtRNJBbf1F9c1SLhE/s320/japan.jpg" height="20" title="Japanese" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsdB5uR-jjQSEcSfCAA0gZyqfSu1qlB_jAw5NNDlTAoHi0rwNqxMIdd5mjVSEe2nUk0sqflOdHUs6ds5hlpuMxHqLcPnJV9_Sqr9KH86nVfgOYk0yzUkfBiyiThoIK6EJw7vnzoYBFws4/s320/korean.jpg" height="20" title="Korean" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYdX2kl78jY0DiaR6SujYG3-Xc8NJgOT-CfTIK1BpZRIvc1tP4j_7EML4gCK4ZpG8FRlaDYTrKhb86uEYxfwpY3frxjRrc62auQegGdJl2sN9S7v9fvPoCyxdJF00FS78mWrbe0Pi3o4/s320/arab.jpeg" height="20" title="Arabic" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoL2KIao4aeRSmQDM7TUwueHPy9EapX9OzS5GfpaKnYThYbxv54TcDYBxrgObOgynNaxoHaE3tXjyM3lYEjmh-jESEC4IkMV2b8kL0crwCzCfLxfGRYKJLsqdXQj4DiZztDWV5nBvNiUc/s320/china.jpg" height="20" title="Chinese Simplified" align="absbottom"/></a>

Jika widget diatas sudah diterapkan, maka hasilnya akan seperti ini :

Anda bisa lihat beberapa bendera. Yang mana jika kita klik salah satu bendera, maka blog kita akan langsung diterjemahkan ke dalam bahasa yang sesuai dengan bendera yang anda klik tadi. Sekian dulu ya..jika ada pertanyaan, silahkan masukan saja di Buku Tamu...

Selengkapnya Bos......

Cara Menampilkan Postingan Terbaru & Komentar Terbaru

Cara Buat Postingan Terbaru :

Kamu pingin nampilin postingan terbaru (Recent Post) kamu di side bar?
Kalo pingin, beginilah caranya :

1. Login to Blogger kemuduan pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy kode berikut ini dan taruh dalam kotak "content".

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

4. Ganti YOURBLOGNAME dengan nama blog kamu.

5. Angka "10" menunjukkan jumlah "Posting Terbaru" yang ditampilkan, kamu bisa menggantinya

6. Terus Simpan.

Nha coba lihat blog kamu, udah nongol kan "Posting Terbaru" kamu...
Good..good..good

Cara Buat Komentar Terbaru :

Menampilkan recent comments atau komentar terbaru fungsinya adalah supaya kita bisa dengan mudah mengetahui siapa yang baru saja memberikan komentar pada blog kita dan di postingan mana mereka berkomentar. Recent Comments ini bisa kita pasang di halaman utama blog kita.
Beginilah cara membuat Recent Comments (Komentar Terbaru):

1. Login to Blogger kemuduan pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy kode berikut ini dan taruh dalam kotak "content".

<script style="text/javascript" src="http://kendhin.890m.com/comments.js"></script><script style="text/javascript">var a_rc=8;var m_rc=false;var n_rc=true;var o_rc=40;</script><script src="http://materitraining.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>

- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti materitarining.blogspot.com dengan nama blogmu.
- Terus Simpan.

Coba dilihat blogmu, langsung jadi deh.

Selengkapnya Bos......

Membuat Background Posting Berbeda-beda

Dalam membuat background ada dua alternatif yaitu membuat background dengan warna dan membuat background dengan bantuan gambar, khusus untuk background dengan gambar terbagi lagi ke dalam beberapa teknik yaitu background gambar dengan teknik repeat (ada repeat, repeat-x, repeat-y) dan background gambar dengan teknik no-repeat (gambar backgroundnya memang ukuran besar).

Membuat background dengan warna

Agar warna background postingan bisa berbeda-beda setiap postingan, anda perlu melakukan :

Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose (seperti pada gambar, Pilih yang berwarna Biru)

:


Awali postingan anda dengan kode seperti ini

<div style="background:kode_warna_disini;">

Teks

</div>

Ganti tulisan kode_warna_disini dengan kode warna yang anda inginkan.


Membuat background dengan Gambar

Nah jika postingan anda ingin mempunyai background berupa gambar, langkah pertama yang harus di ingat yaitu anda harus punya gambar yang akan di jadikan background (bahasanya ko bolak-balik dekok begitu yach?). Trus gambar tersebut harus di upload ke hosting tempat menyimpan gambar.

Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose(Seperti pada Gambar Diatas). Awali postingan anda dengan kode seperti ini :

<div style="background:url(alamat_gambar_disini) no-repeat;">
Isi Teks
Dan diakhir postingan, harus di tutup dengan kode seperti ini :

</div>

Ganti tulisan alamat_gambar_disini dengan alamat gambar yang ingin anda tampilkan. Penggunaan kode no-repeat tentu saja apabila gambar yang anda miliki memiliki ukuran besar dan tidak mau di tampilkan berulang-ulang.

Seperti halnya pada background dengan warna, kode inipun bisa anda tambah-tambahin sesuai dengan keinginan.

Sebagai contoh, saya ingin membuat posting dengan background yang beralamat di http://acehfotografer.net/upload/images/w4uo9y5c0gy19k73ezs.gif, background ingin di simpan di sebelah kanan atas posting tanpa repeat, padding sebesar 10 pixel, besar hurup 90% :

<div style="background:url(http://acehfotografer.net/upload/images/w4uo9y5c0gy19k73ezs.gif) no-repeat right top; text-align:justify; font-size:90%; padding:10px">
Saat masyarakat Indonesia terus-menerus dibombardir berita sekitar teroris dan pengejaran para pelaku peledakan bom, terbetik kabar kelanjutan kasus kematian David Hartanto Widjaja yang dinyatakan tewas akibat bunuh diri oleh Pengadilan Koroner Singapura, Rabu (29/7). Keputusan hakim ini bukan hanya mengecewakan keluarga David, tapi juga bangsa Indonesia. Peluang publik untuk mengungkap kebenaran peristiwa itu pun jadi tertutup. Masyarakat pun bertanya-tanya, apa yang telah dilakukan pemerintah untuk melindungi warganya di luar negeri?
</div>

Eiiiith... gampang juga kan? ya udah di coba dulu aja biar jadi hafal...

Selengkapnya Bos......