Cara Membuat Efek Stabilo pada Tulisan di Blog

Posted by noeroel arashi | 02:50 | | 2 comments »

Tips Membuat Background Tulisan di Blogspot

Tutorial Blog| Cara membuat efek stabilo pada tulisan di postingan blog merupakan salah satu tips dalam membuat background pada tulisan di blog. Efek tulisan ini berfungsi untuk membedakan tulisan tertentu dengan tulisan yang lainnya, misalnya tulisan yang memuat kode HTML. Jika anda tertarik ingin menggunakan efek stabilo pada tulisan, anda tinggal gunakan kode berikut ini.

<span style="background-color:#FFFFB3;"> Ganti tulisan ini dengan tulisan yang ingin diberi efek stabilo</span>

Demikian Tutorial Blog mengenai cara membuat efek stabilo pada tulisan di blog yang bisa saya bagikan kali ini. Semoga bermanfaat dalam menambah wawasan anda. Pengunjung yang baik tidak ada salahnya memberi komentar setelah membaca postingan ini. Terima kasih atas perhatiannya dan sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Membuat Gambar Membesar Ketika Disorot

Posted by noeroel arashi | 22:55 | , | 1 comments »

Cara Membuat Gambar Membesar Ketika Disorot Mouse

Tutorial Blog| Cara membuat gambar membesar ketika disorot merupakan salah satu teknik dalam mempercantik postingan kita. Sebagaimana yang kita tahu bahwa dengan adanya gambar di postingan kita dapat membuat tampilan postingan kita terlihat lebih hidup dan enak dilihatnya. Akan tetapi terlalu banyak gambar juga membuat kita pusing dalam melihatnya selain itu dapat membuat loading blog kita menjadi lambat. Keuntungan dari membuat gambar dapat membesar ketika diarahkan mouse adalah dapat menghemat tempat dalam postingan. Selain itu juga dapat membuat tampilan di postingan kita terlihat lebih menarik dan profesional. Jika anda tertarik ingin menerapkannya dalam blog anda silahkan anda ikuti cara berikut ini.

1. Copy Paste kode di bawah ini pada tempat yang ingin anda beri gambar dalam postingan.

<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script><img border="0" class="expando" height="100" src="URL GAMBAR ANDA" width="100" />

2. Untuk mendapatkan url gambar, sebelumnya anda harus mengunggah gambar terlebih dahulu.
3. Ganti URL GAMBAR ANDA dengan url gambar yang tadi anda unggah.
4. Lihat hasilnya akan seperti gambar di bawah ini.

Silahkan Anda arahkan kursor mouse anda pada gambar di bawah ini !

Jika gambar yang ingin anda masukan lebih dari satu maka agar lebih praktis anda dapat gunakan cara sebagai berikut ini.

1. Copy Paste Script di bawah ini.

<style type="text/css">
border: none;
vertical-align: top;
</style>
<script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script>

2. Letakan script di atas di bawah <head>.
3. Lalu Copy Paste kode di bawah ini tiap kali anda ingin memasukan gambar

<img border="0" class="expando" height="100" src="URL GAMBAR ANDA" width="100" />

Jika anda ingin lebih praktis lagi maka Copy Paste sript pada No. 1 di bawah <head> yang ada pada menu Template Edit HTML. Untuk cara Edit Tempalate silahkan klik di sini. Selanjutnya lakukan seperti cara No. 3 nanti secara otomatis setiap anda memasukan gambar akan berlaku efek membesar ketika disorot mouse.

Keterangan:

  • Angka pada height="100" dan width="100" menunjukkan panjang dan lebar gambar dapat anda sesuaikan sendiri. Usahakan ukuran gambar asli lebih besar dari ukuran heigh dan width supaya efek membesarnya terlihat.
  • Ganti tulisan URL GAMBAR ANDA dengan url gambar yang ingin anda pakai.
  • <script src="http://kodecode.googlecode.com/files/expandos.js" type="text/javascript"></script> merupakan script yang membuat efek gambar menjadi membesar ketika disorot jadi jangan pernah anda merubahnya.
  • Semua cara di atas berlaku untuk penulisan mode HTML dan tidak berlaku untuk mode Compose.

Demikian Tutorial Blog mengenai cara membikin gambar membesar ketika disorot kursor mouse yang bisa saya share kali ini. Mudah-mudahan dapat memberikan manfaat bagi anda. Terima kasih atas perhatiannya dan saya sangat senang sekali apabila ada yang bersedia memberikan komentar pada postingan kali ini. Sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Membuat Keterangan Gambar dengan CSS

Posted by noeroel arashi | 17:59 | , | 1 comments »

Cara Membuat Gambar Membesar Ketika Disorot Mouse

Tutorial Blog-CSS| Cara membuat keterangan gambar di blog adalah salah satu tips untuk memberikan penjelasan mengenai keterangan gambar yang kita unggah agar para pengunjung dapat memahaminya. Namun yang ingin saya bagikan kali ini tidak hanya dapat memberikan keterangan pada gambar akan tetapi sekaligus membuat tampilan gambar menjadi lebih dinamis dan terlihat canggih. Ketika pointer mouse berada di area gambar maka keterangan gambar tiba-tiba muncul dari bawah dengan efek hover yang sangat menarik perhatian mata. Jika anda ingin mencoba menerapkan tips ini silahkan anda Copy Paste kode CSS berikut ini lalu tempatkan di bawah kode <head>. Cara ini hanya berlaku untuk penulisan postingan dengan mode HTML dan tidak berlaku untuk mode Compose.

Untuk menampilkan keterangan gambar dengan efek hover ini, setiap kali kita ingin memasukan gambar gunakan kode di bawah ini. Tentunya sebelumnya anda unggah gambarnya terlebih dahulu untuk mendapatkan url.

Arahkan kursor mouse Anda pada gambar di bawah ini!

MEMBERI KETERANGAN GAMBAR
Memberi keterangan gambar dengan CSS.

Bagaimana mudah bukan? Sekian Tutorial-CSS mengenai cara memberi keterangan yang menarik pada gambar di blog dengan CSS yang bisa saya bagi kali ini. Terima kasih atas perhatiannya dan saya senang sekali apabila anda memberi komentar setelah membaca postingan saya. Sampai jumpa dan salam...

Cara Membuat Gambar Menjadi Lingkaran

Posted by noeroel arashi | 19:53 | , | 0 comments »

Tips Membuat Efek Lingkaran Menjadi Bentuk Kotak Persegi

Tutorial Blog-CSS| Cara membuat gambar/foto menjadi lingkaran dan berubah menjadi kotak persegi apabila disorot mouse merupakan salah satu teknik yang menggunakan CSS dalam pembuatannya. Seiring dengan perkembangan dunia web semakin meningkat pula efek-efek menarik yang bisa disajikan, salah satunya yaitu membuat efek foto menjadi lingkaran dan ketika didekati pointer mouse akan berubah menjadi kotak persegi. Efek canggih ini dapat dimanfaatkan dalam foto di postingan atau dalam membuat banner iklan sehingga tampilannya menjadi lebih profesional dan menarik.

Sebagaimana yang kita tahu penggunaan gambar di blog akan membuat blog terlihat menarik dan tidak membosankan. Tetapi jika terlalu banyak menggunakan gambar maka akan membuat loading di blog kita menjadi lama. Oleh karena itu, bijaklah ketika membuat sebuah postingan agar selain dapat menyajikan postingan yang menarik juga tetap mempertahankan loading blog yang cepat sehingga pengunjung akan merasa nyaman ketika mengunjungi blog kita. Efek pada foto yang akan saya bagikan kali ini murni menggunakan CSS sehingga tidak membuat berat di loading blog. Gambar di bawah ini merupakan demo dari efek membuat gambar/foto menjadi lingkaran dan apabila diarahkan kursor mouse akan berubah menjadi kotak persegi secara tiba-tiba.

Tutorial CSS Tutorial CSS Tutorial CSS Tutorial CSS

Arahkan kursor mouse Anda pada gambar di atas!

Apabila anda tertarik ingin mencoba menerapkannya pada blog, silahkan ikuti cara berikut ini:

1. Letakkan kode CSS berikut ini di bawah kode <head> ketika anda membuat entri baru (hanya berlaku pada penulisan mode HTML). Tempatkan di antara <style> dan </style>. Tetapi jika anda ingin menerapkannya pada banner iklan, langsung letakkan di atas kode ]]></b:skin>. Caranya pilih Template lalu Edit HTML.

2. Setiap anda ingin memasukan gambar pada postingan gunakan kode di bawah ini, dengan catatan anda harus mengunggah gambarnya terlebih dahulu untuk mendapatkan url gambar. Untuk yang ingin menerapkannya dalam banner iklan langsung copy paste pada gadget caranya pada menu Tata Letak pilih Tambahkan Gadget. Setelah kodenya dimasukan Klik Simpan.

<div id="mode1">
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBARIKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
<a target="_blank" href="URL BLOG ANDA/IKLAN"><img src="URL GAMBAR IKLAN/BLOG ANDA" border="0"/></a>
</div>

Sekian Tutorial Blog-CSS tentang cara membuat gambar menjadi lingkaran dan berubah menjadi kotak persegi ketika disorot kursor mouse yang bisa saya bagikan kali ini. Semoga bermanfaat dalam memperkaya wawasan anda. Pengunjung yang baik tidak ada salahnya memberi komentar setelah membaca tulisan ini. Terima kasih atas perhatiannya dan sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Membuat Kotak Berbayang dengan CSS

Posted by noeroel arashi | 01:51 | , | 1 comments »

Tips Membuat Kotak Berbayang dengan CSS

Tutorial Blog-CSS| Cara membuat kotak dengan efek shadow pada postingan blog tidak perlu menggunakan photoshop karena dengan CSS3 sudah dapat dilakukan. Tidak seperti pada Photoshop yang kita harus mengedit gambar menjadi mempunyai bayangan kemudian kita unggah di blog kita yang kadangkala membuat loading di blog menjadi berat, dengan CSS hanya memasukan kode tertentu efek bayangan pada kotak sudah dapat kita nikmati di blog kita. Selain itu tidak mempengaruhi berat loading.

Belajar membuat kotak berbayang dengan CSS 3

Kotak berbayang di atas merupakan salah satu demo yang memanfaatkan CSS dalam pembuatannya. Jika anda tertarik ingin menerapkannya pada blog anda silahkan ikuti cara berikut ini.

1. Copy Paste kode CSS berikut di bawah <head> ketika anda menulis postingan baru.

2. Setiap anda ingin menampilkan efek berbayang pada kotak, anda gunakan kode berikut.

<div class=shadow
Style="width:200px">
Belajar membuat kotak berbayang dengan CSS 3
</div>

Perhatikan baris box-shadow: 8px 8px 4px #0c0c0c; yang membentuk efek kotak berbayang. Property box-shadow memiliki empat parameter/atribut sebagai berikut.
1. Offset Horizontat Bayangan
8px seperti contoh berarti bayangan kotak bergeser sebesar 8 pixel secara horizontal ke sebelah kanan. Jika parameter bernilai negatif, bayangan akan tampil disebelah kiri kotak.
2. Offset Vertikal Bayangan
8px seperti pada contoh berarti bayangan kotak bergeser sebesar 8 pixel secara vertikal ke bawah. Jika parameter bernilai negatif, bayangan akan tampil pada atas kotak.
3. Radius Blur
Semakin besar nilai ini, bayangan akan semakin blur. Jika 0px, akan didapatkan bayangan yang solid tanpa ada efek blur. Pada contoh di atas digunakan radius blur sebesar 4 pixel.
4. Warna Bayangan
Pada contoh ditentukan warna bayangan adalah #0c0c0c.

Baris Kedua, yaitu background-color:#00ff00; berfungsi untuk mendefinisikan warna background.

Baris <div class=shadow style=”width:200px”> merupakan pemanggilan class .shadow dengan membatasi isi konten dalam div sebesar 200 pixel. Pemanggilan CSS dengan atribut style ini disebut dengan Inline Styles.

Sekian Tutorial Blog-CSS tentang cara membuat kotak berbayang pada postingan blog yang bisa saya bagikan kali ini. Semoga bermanfaat dan sebagai pengunjung yang baik tidak ada salahnya memberikan komentar setelah membaca tulisan di atas. Terima kasih atas perhatiannya dan sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Membuat Tulisan Basmallah di Posting Blog

Posted by noeroel arashi | 01:45 | | 0 comments »

Tips Membuat Tulisan Basmallah di Posting Blog

Tutorial Blog| Cara membuat tulisan basmallah di posting blog dapat menjadi salah satu alternatif dalam menyajikan tampilan yang unik di postingan blog kita. Mungkin di antara anda pernah menjumpai tulisan bismillah di bawah judul postingan blog tertentu dan anda bertanya-tanya bagaimana cara membuatnya? kali ini saya akan membagikan caranya, silahkan copy paste kode di bawah ini di tempat yang ingin anda letakkan tulisan basmallah. Tips ini hanya berlaku untuk penulisan dengan mode HTML.

Hasilnya akan seperti di bawah ini.

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Catatan: Anda dapat merubah ukuran tulisan basmallah di atas dengan merubah font-size dalam kode misalnya menjadi 24px 26px 30px atau ukuran yang lainnya.

Sekian Tutorial Blog tentang tips membuat tulisan basmallah pada posting di blog blogspot yang bisa saya share kali ini. Semoga bermanfaat dan jangan lupa untuk memberikan komentar. Terima kasih dan sampai jumpa di postingan saya selanjutnya. Salam..

Cara Membuat Widget Tombol Share di blog

Posted by noeroel arashi | 12:47 | | 0 comments »

Tips Membuat Tombol Share yang Menarik

Tutorial Blog| Tips cara membuat widget tombol share facebook, twitter, google, myspace, MSN, yahoo dll. yang menarik di blog dapat memberi nilai tambah karena selain mempermudah pengunjung blog dalam melakukan share postingan yang mereka baca juga dapat menyajikan tampilan yang menarik bagi pandangan mata. Bagaimana cara membuatnya. Anda dapat mengikuti cara berikut bila anda ingin menerapkannya pada blog anda.

1. Login ke akun blog anda.
2. Pilih Desain Lalu klik Tata Letak.
3. Pilih Tambahkan Gadget.
4. Pilih HTML/JavaSript.
5. Copy Paste kode di bawah ini. Lalu klik Simpan.

Hasilnya dapat anda lihat di bawah.

Sekian Tutorial Blog tentang tips cara membuat tombol share facebook, twitter, yahoo, google, myspace, MSN dll. di blog yang bisa saya bagikan kali ini. Semoga bermanfaat, jangan lupa untuk memberikan komentar jika anda selesai membaca postingan ini. Terima kasih dan sampai jumpa lagi di postingan saya selanjutnya. Salam..

Cara Membuat Link Membesar Ketika Disorot

Posted by noeroel arashi | 09:48 | , | 1 comments »

Cara Membuat Link Membesar dengan CSS

Cara membuat link membesar ketika disorot dengan mouse merupakan salah satu cara untuk mempercantik link. Link dapat dipercantik dengan CSS. Mungkin anda pernah menemui link dan ketika anda meletakkan/mengarahkan kursor pada tulisan link tersebut tiba-tiba tulisan link tersebut menjadi membesar. Kalau anda juga ingin membuat sebuah link yang dapat membesar ketika disorot mouse, berikut ini cara yang dapat anda lakukan.

<style type="text/css">
a.sundaboy-com:link {color:#ff0000;}
a.sundaboy-com:visited {color:#DF7401;}
a.sundaboy-com:hover {font-size:150%;}
</style>
<a class="sundaboy-com" href="http://belajar-html-lengkap.blogspot.com/" target="_blank">Belajar Html Lengkap</a>

Contoh: Arahkan kursor pada tulisan di bawah ini!

Belajar Html Lengkap

Keterangan:
  • Tulisan yang berwarna merah ganti dengan url link anda.
  • Tulisan yang berwarna hijau ganti dengan judul link anda.
  • Tulisan yang berwarna ungu dapat anda ganti dengan warna yang anda inginkan.

Selain dapat membuat link membesar ketika disorot, dengan CSS juga dapat membuat:
1. Link berubah warna ketika disorot klik di sini.
2. Link berubah warna tulisannya ketika disorot klik di sini.

Sekian Tutorial Blog-CSS mengenai cara membuat tulisan link membesar ketika diarahkan/disorot mouse. Mudah-mudah dapat memberikan manfaat dalam menambah pemahaman anda mengenai CSS atau blogging. Terima kasih atas perhatiannya dan saya sangat senang sekali apabila ada yang bersedia memberikan komentar pada tulisan saya kali ini. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Memberi Efek Menarik pada Gambar di Blog

Posted by noeroel arashi | 23:31 | , | 0 comments »

Cara Membuat Efek pada Gambar dengan CSS

Tutorial Bog-CSS| Cara memberi efek menarik pada gambar di blog dengan CSS merupakan salah satu tips untuk mempercantik tampilan blog kita. Mungkin di antara kita pernah mengunjungi suatu blog dan ketika kita mengarahkan kursor mouse pada gambarnya maka akan muncul efek seperti berputar, melengkung, bergetar, bergerak ke samping, dll. Sebagaimana kita tahu bahwa CSS tidak membuat loading di blog kita menjadi berat namun kode-kodenya dapat membuat tampilan blog kita semakin menarik dan keren, sehingga tidak ada salahnya kalau kita menerapkannya pada blog kita. Berikut ini ada beberapa contoh kode CSS yang dapat digunakan untuk memberi efek pada gambar di blog kita.

Ketika anda menulis postingan baru harus memilih mode HTML jangan mode Compose. Copy Paste kode <style type="text/css">KODE CSS</style> di bawah <head>. Ganti KODE CSS dengan kode css yang diinginkan. Untuk menampilkan efek kode CSS tadi pada gambar, setiap kali kita ingin memasukan gambar kita gunakan kode HTML <img class="#" src="URL GAMBAR" />.

1. Efek Fade In (membuat gambar menjadi blur lalu menjadi terang ketika disorot/diarahkan kursor mouse)

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

2. Efek membuat gambar menjadi melengkung lalu kembali ke seperti semula ketika diarahkan/disorot kursor mouse.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

3. Efek Rotasi (membuat gambar berputar dan membesar ketika diarahkan/disorot kursor mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

4. Efek Skew (Membuat gambar menjadi berpendar ketika diarahkan/disorot mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

5. Efek gambar bergerak ke samping

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

6. Efek Fade Out (membuat gambar menjadi blur ketika diarahkan/disorot mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

7. Efek Bumping (membuat gambar bergerak ke atas ketika diarahkan/disorot mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

8. Efek melengkung (membuat sudut gambar menjadi melengkung ketika diarahkan/disorot mouse).

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

9. Efek bingkai bergaris ketika gambar diarahkan/disorot mouse.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

10. Efek bayangan/shadow ketika gambar diarahkan/disorot mouse.

KODE CSS

KODE HTML

Hasilnya seperti di bawah ini.

Sekian Tutorial Blog-CSS mengenai tips mempercantik tampilan gambar pada blogspot dengan menggunakan CSS yang bisa saya share kali ini. Semoga bermanfaat dalam meningkatkan tampilan blog anda. Pengunjung yang baik tidak ada salahnya memberi komentar setelah membaca postingan ini. Terima kasih atas perhatiannya. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Membuat Widget Kamera Tersembunyi di Blog

Posted by noeroel arashi | 18:53 | | 1 comments »

Cara Memasang Widget Kamera Tersembunyi di blogger

Tutorial Blog-CSS|Cara membuat atau memasang kamera tersembunyi seperti CCTV di blog merupakan salah satu cara untuk mempercantik tampilan blog. Tidak seperti kamera CCTV yang kita jumpai di mall atau kantoran tertentu, kamera tersembunyi di blog hanyalah sebuah widget yang dapat bergerak seperti kamera yang sedang mengintai sehingga tampilan blog menjadi lebih menarik. Jika anda tertarik untuk memasang gadget kamera pengintai ini pada blog anda silahkan ikuti cara berikut ini.

1. Login ke akun blog anda.
2. Pilih Desain lalu Klik Tata Letak.
3. Pilih Tambahkan Gadget.
4. Pilih HTML/JavaSript.
5. Copy Paste kode di bawah ini.

Hasilnya akan tampak seperti di bawah ini

Hasilnya akan tampak seperti di bawah ini

6. Klik simpan dan lihatlah hasilnya.

Demikian Tutorial Blog-CSS mengenai cara memasang gadget kamera CCTV di blogspot yang bisa saya bagikan kali ini. Terima kasih atas perhatiannya dan semoga dapat memberikan manfaat khususnya dalam mempercantik tampilan blog anda sehingga menjadi lebih menarik. Saya senang sekali jika ada yang bersedia memberikan komentar pada postingan saya kali ini. Sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Membuat Efek 3D pada Tulisan Blog

Posted by noeroel arashi | 14:24 | , | 0 comments »

Cara Membuat Efek Tiga Dimensi pada Tulisan Blog

Tutorial Blog-CSS mengenai cara membuat efek 3D (Tiga Dimensi) pada tulisan di blog dapat dilakukan dengan memanfaatkan CSS. Dengan Efek tiga dimensi pada tulisan dapat membuat tampilan blog menjadi semakin menarik karena tercipta variasi di antara tulisan-tulisannya. Bagi anda yang tertarik ingin menerapkan efek 3D pada tulisan blog anda silahkan ikuti cara berikut ini.

1. Copy Paste kode di bawah ini sebelum anda menulis tulisan yang ingin anda beri efek bayangan atau 3D

<h1 style=" color: #ff8000; font-size: 30px; text-align: center; text-height: font-size; text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd;"> EFEK 3D PADA BLOG DENGAN CSS </h1>

Maka akan terlihat seperti tampilan di bawah ini

EFEK 3D PADA BLOG DENGAN CSS

Keterangan: Ganti tulisan yang berwarna merah (EFEK 3D PADA BLOG DENGAN CSS) dengan tulisan yang ingin anda beri efek 3D.

2. Copy Paste kode berikut ini untuk tipe lain dari efek 3D pada tulisan di blog.

<h4 style="text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd; font-size: 50px; color: #666; text-align:center; text-height:font-size;">Belajar Html Lengkap</h4>

Hasilnya akan seperti tampilan di bawah ini.

Belajar Html Lengkap

Keterangan: Ganti tulisan yang berwarna merah (Belajar Html Lengkap) dengan tulisan yang ingin anda beri efek 3D.

Demikian postingan saya mengenai cara membuat efek text-shadow pada tulisan di blogspot yang bisa saya share kali ini. Mudah-mudahan dapat memberikan manfaat bagi anda dalam berkreasi di dunia blogging. Terima kasih atas perhatiannya dan saya senang sekali apabila ada yang bersedia memberikan komentar pada postingan saya kali ini. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Membuat Gadget pada Blog

Posted by noeroel arashi | 06:50 | | 0 comments »

Cara Menambahkan Gadget pada Blog

Tutorial Blog| Cara membuat Gadget atau widget pada blog bagi para pemula memang sedikit membingungkan, apalagi jika baru membuat blog. Gadget dapat digunakan untuk membuat atau menambahkan like box facebook, pengikut, page rank, recent post, arsip blog, twitter, histats, slide foto, jam, dll. Jika anda sekarang sedang mencari tahu tentang cara menambahkan gadget pada blog ikuti langkah-langkah berikut ini.

1. Login pada akun blogger anda.
2. Pada dasbor pilih Desain.
3. Klik Tata Letak lalu pilih Tambah Gadget.

5. Pilih salah satu gedget yang ingin anda tambahkan dengan klik tanda plus (+), atau jika anda ingin memasukan kode HTML tertentu pilihlah HTML/JavaSript.

4. Untuk yang memilih HTML/JavaSript masukan kode tertentu untuk membuat gadget yang anda inginkan, jika anda ingin memberi judul ketikkan judul pada kotak judul yang tersedia. Untuk yang memilih selain HTML/JavaSript dapat langsung meng-klik Simpan.

5. Klik Simpan jika sudah selesai.

Sekian Tutorial Blog mengenai cara memasang gadget atau widget pada blogger. Walaupun sederana tetapi semoga dapat bermanfaat. Terima kasih atas perhatiannya dan saya senang sekali jika ada yang bersedia memberikan komentar pada postingan saya kali ini. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Membuat Deskripsi Blog|Tutorial Blog

Posted by noeroel arashi | 12:56 | | 0 comments »

Cara Memberi Deskripsi Blog

Tutorial Blog|Cara membuat deskripsi blog bagi yang baru memasuki dunia blogging mungkin dirasa belum paham mengenai ini. Begitu pula dengan saya pada saat baru membuat blog saya bingung ketika ingin memberi deskripsi tentang blog saya. Memberikan deskripsi blog sebenarnya sangatlah mudah apalagi dengan tampilan blogger terbaru saat ini sangat memudahkan pengguna dalam beraktivitas blogging. Apabila anda sekarang sedang bertanya bagaimana cara untuk membuat deskripsi blog ikutilah cara berikut ini.

1. Login ke akun blogger anda.
2. Pilih Desain lalu klik Setelan maka secara otomatis akan terbuka setelan Dasar.
3. Klik Edit pada deskripsi lalu isikan deskripsi mengenai blog anda pada kotak yang disediakan, maksimal 500 karakter.
4. Klik Simpan Perubahan kalau sudah selesai mengisikan deskripsi.

Contoh: Lihat gambar di bawah ini! Arahkan kursor pada gambar untuk memperbesar gambar.


Sekian Tutorial Blog mengenai cara memberikan deskripsi pada blog blogspot yang bisa saya bagikan kali ini. Bagaimana mudah kan dalam membuatnya? Terima kasih atas perhatiannya dan saya sangat senang sekali apabila ada yang bersedia memberikan komentar pada postingan saya kali ini. Jika anda menyukai tulisan saya ini silahkan klik like pada icon like facebook yang sudah tersedia. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Edit Template Blog Tampilan Baru

Posted by noeroel arashi | 09:59 | | 0 comments »

Cara Edit Template Blogspot

Tutorial Blog >>Cara mengedit template pada blog dengan tampilan baru sedikit berbeda jika dibandingkan dengan blog tampilan yang lama. Belum lama ini blogger telah melakukan inovasi dengan merubah tampilannya untuk lebih memudahkan user dalam melakukan kegiatan blogging. Berikut ini cara mengedit template blog dengan tampilan baru:

1. Login ke blogger.com
2. Klik Template lalu pilih Edit Html. Jika masih memiliki Navbar maka klik Desain baru dilanjutkan dengan mengklik Template-Edit Html.

3. Klik Lanjutkan
4. Centang Expand Template Widget. Hal ini bertujuan apabila terjadi kesalahan maka akan mendapatkan pemberitahuan dari blogger.
5. Masukan kode script yang diinginkan untuk mengedit template.
6. Klik pratinjau sebelum menyimpan untuk melihat hasilnya.

7. Klik Simpan Template
8. Klik tanda silang untuk close dan lihat hasilnya.

Bagaimana mudah bukan? Sekian dulu untuk tutorial blog mengenai cara mengedit template blog dengan tampilan baru. Saya ucapkan terima kasih kepada para pengunjung yang bersedia menyimak dari awal hingga akhir tulisan saya ini. Mudah-mudahan dapat memberikan manfaat dalam menunjang kegiatan blogging anda. Sampai jumpa di postingan saya selanjutnya. Salam...

Cara Membuat Link Berubah Warna Ketika Disorot

Posted by noeroel arashi | 21:41 | , | 0 comments »

Cara Membuat Link Berubah Warna dengan CSS

Cara membuat link berubah warna ketika disorot mouse merupakan salah satu cara untuk mempercantik link sehingga tampilannya terlihat lebih menarik. Dengan tampilan yang menarik tentunya juga dapat menambah kesan pada blog/website kita tampil lebih profesional sehingga akan meningkatkan daya tarik bagi pengunjung. Untuk mempercantik link ini kita dapat memanfaatkan CSS. Selain tidak membuat loading blog/website menjadi berat, CSS juga dapat membuat tampilan blog/website menjadi lebih menarik dengan kode-kodenya. Berikut ini saya berikan cara membuat link menjadi berubah warna ketika di sorot dengan CSS beserta dengan contohnya.

<style type="text/css">
a.sundaboy:link {color:#FF0000;}
a.sundaboy:visited {color:#0000FF;}
a.sundaboy:hover {color:#DF7401;}
</style>
<a class="sundaboy" href="http://belajar-html-lengkap.blogspot.com/" target="_blank">Belajar Html Lengkap</a>

Contoh: Letakkan kursor pada tulisan di bawah ini!

Belajar Html Lengkap

Keterangan:
  • Ganti yang bertuliskan warna hijau dengan url link anda
  • Ganti yang bertuliskan warna biru dengan judul link anda
  • Ganti yang bertuliskan warna merah dengan warna yang anda inginkan.

Sekian tutorial Blog-CSS mengenai cara mempercantik link dengan CSS (membuat link berubah warna ketika disorot). Semoga dapat bermanfaat untuk menambah wawasan anda dalam dunia blogging/website. Terima kasih atas perhatiannya dan saya senang sekali apabila ada yang bersedia memberikan komentarnya pada postingan yang saya buat kali ini. Sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Bikin Deskripsi Posting di Blog

Posted by noeroel arashi | 11:48 | | 0 comments »

Cara Memberi Deskripsi pada Postingan Blog

Cara Membuat/Memberi deskripsi pada postingan blog blogspot dengan tampilan terbaru tidak lah sulit, karena tampilan terbaru blogger menyediakan fitur-fitur yang sangat memberikan kemudahan bagi pengguna dalam melakukan aktivitas blogging. Tidak seperti sebelumnya kita harus memasukan tag meta tertentu yang menurut saya sedikit merepotkan bahkan salah sedikit saja maka tidak akan berfungsi dan hal itu tentunya sangat merugikan.

Sebagaimana yang kita tahu bahwa dengan memberikan deskripsi pada tiap postingan blog maka akan memaksimalkan pencarian postingan yang kita buat pada penelusuran search engine. Dengan kata lain pemberian deskripsi pada postingan blog dapat meningkatkan SEO. Menurut saya teknik SEO yang baik adalah teknik yang menggunakan fitur-fitur dari penyedia aslinya, sebagai contoh blog saya dibuat di blogger maka teknik SEO yang baik adalah menggunakan fitur-fitur dasar yang disediakan oleh blogger untuk meningkatkan pencarian di search engine. Logikanya blogger menyediakan fitur-fiturnya pasti memiliki tujuan tentunya untuk menunjang aktivitas blogging dari para penggunanya dan bersifat kompatibel karena secara orisinil blogger sendiri yang menyediakannya. Teknik SEO yang salah akan berakibat pada postingan kita tidak akan terindex di search engine. Untuk memberikan deskripsi pada postingan di blog sebelumnya kita aktifkan terlebih dahulu fitur deskripsi penelusuran dengan cara sebagai berikut:

1. Login ke akun blogger anda.
2. Pada Dasbor pilih Desain.
3. Klik Setelan.

4. Klik Preferensi Penelusuran.

5. Pada tag meta di bawahnya terdapat tulisan deskripsi lalu klik Edit.

6. Pilih Ya pada aktifkan deskripsi penelusuran?
7. Isikan deskripsi blog anda pada kotak yang disediakan, maksimal 150 karakter.
8. Klik Simpan Perubahan.

Setelah mengaktifkan fitur deskripsi penelusuran di atas kita masuk ke halaman Entri dan liat perubahannya ketika kita membuat postingan baru atau mengedit postingan,pada setelan entri sudah terlihat fitur Deskripsi Penelusuran dan kita tinggal klik untuk memasukan deskripsi postingan yang kita buat.


Sekian Tutorial Blog mengenai Cara Membuat Deskripsi pada Postingan di Blogger yang bisa saya bagikan kali ini. Semoga dapat memberikan manfaat bagi anda dalam memaksimalkan aktivitas blogging. Saya ucapkan terima kasih atas perhatiannya dan saya senang sekali apabila ada yang memberikan komentarnya pada postingan saya kali ini. Sampai jumpa lagi di postingan saya selanjutnya. Salam...

Cara Buat Label-Kategori Posting Blog Tampilan Baru

Posted by noeroel arashi | 22:49 | , | 0 comments »

Cara Membuat Label pada Postingan Blog

Cara membuat label pada postingan Blog dengan tampilan baru tidaklah susah. Karena tampilan terbaru Blogger sangat memudahkan pengguna dalam melakukan kegiatan blogging. Sebuah postingan yang baik sudah semestinya memiliki label karena selain membuat daftar postingan kita menjadi lebih tertata dan teratur, label juga sangat mendukung dalam optimasi SEO terutama pencarian oleh search engine. Berikut ini cara membuat label pada postingan blog dengan tampilan baru:

  1. Sebelumnya kita buat postingan baru terlebih dahulu dengan Klik New Entri.
  2. Pilih mode tulis compose/HTML.
  3. Lalu tulis yang ingin anda posting pada kotak posting.
  4. Perhatikan lajur pada setelan entri sebelah kanan lalu klik label.
  5. Tuliskan kata-kata yang ingin dipakai sebagai label. Gunakan tanda koma untuk memisahkan antarlabel.
  6. Klik selesai.

Sekian Tutorial Blog mengenai Cara Membuat Label pada Blog Tampilan Baru. Semoga dapat memberikan manfaat terutama dalam hal kegiatan blogging anda. Terima kasih atas perhatiannya dan saya senang sekali apabila ada yang memberikan komentarnya pada postingan saya kali ini. Akhir kata salam...

Cara Mengedit Template Blog

Posted by noeroel arashi | 22:16 | | 0 comments »

Cara Edit Template Blogspot

Cara Mengedit Template Blog >>Segala sesuatu pastinya memiliki dasar. Pohon yang menjulang tinggi pun mempunyai akar sebagai dasar untuk menopang dari terjangan angin. Tak lain dengan gedung pencakar langit juga memiliki pondasi sebagai dasar sebelum membangunnya menjadi tegak berdiri. Bahkan sebuah hubungan pasti memiliki dasar sebelum memulainya. Begitu pula belajar mengenai blog harus mengetahui dasar-dasar awal sebelum melangkah ke tingkat selanjutnya. Dasar yang akan dibahas kali ini yaitu Dasar dalam Mengedit Template Blog.

Ketika anda ingin mengedit sebuah template blog sering kali dijumpai kode-kode sebagai berikut </head> , <body>, ]]></b:skin>, atau <data:post.body/>. Sebagai contoh anda ingin membuat read more otomatis pada postingan blog maka anda harus mengubah kode <data:post.body/> yang ada pada menu Edit Template HTML dalam blog dengan script tertentu dan yang sering menjadi pertanyaan di manakah letak kode tersebut? Kalau anda mencarinya satu-satu akan percuma dan membuang waktu karena kode tersebut terselip di anatara ratusan kode-kode yang lain. Jadi bagaimana solusinya? Sebenarnya browser seperti Mozilla Firefox, IE, atau Google Chrome memiliki fungsi untuk menunjang dalam mengedit template blog. Bagaimanakah caranya?

Caranya yaitu dengan >> klik Edit - Find pada menubar di paling pojok kiri atas pada Mozzila atau IE, sedangkan pada google chrome pada urutan kedua di pojok kanan atas. Selain itu anda juga bisa menggunakan cara yang lebih praktis dengan menekan Ctrl+F, berlaku untuk semua browser. Setelah itu akan muncul kotak Find di pojok kiri bawah (Mozzila & IE) dan pojok kanan atas (Google Chrome). Lalu ketikan apa yang ingin anda cari di sana, sebagai contoh : <data:post.body/> , nah sekarang coba anda cari kode yang lainnya yang ingin anda temukan. Mudah bukan?

Sekian penjelasan mengenai cara mengedit template blog yang bisa saya berikan. Terima kasih kepada pengunjung yang bersedia menyimak dan memberikan komentar. Mudah-mudahan dapat bermanfaat dan sampai jumpa di postingan selanjutnya. Salam...

Belajar Html Dasar Lengkap

Posted by noeroel arashi | 08:53 | , | 1 comments »

Belajar HTML Dasar|Belajar Html Lengkap

Belajar HTML Dasar

HTML (HyperText Markup Language) adalah bahasa dengan tanda-tanda khusus yang digunakan di awal era web untuk menyajikan informasi. HTML merupakan script yang digunakan untuk menyusun/membuat dokumen web yang apabila kita melakukan desain terhadap html berarti kita telah melakukan tindakan pemograman. Namun HTML bukanlah sebuah bahasa pemograman karena hanya berisikan perintah-perintah tertentu agar dapat diakses atau diterjemahkan oleh browser. Jika kita ingin membuat suatu website atau blog maka pengetahuan tentang html ini sangat penting sebagai dasar utama. Secara mendasar, dokumen html mempunyai susunan sebagai berikut:

<html>
<head>
<title>Judul</title>
</head>
<body>
.
.
.
</body>
</html>

Kode HTML diawali dengan <html> dan diakhiri dengan </html>. Beberapa hal penting dalam kode html :
- Tanda <> menyatakan sebuah tag
- Pada umumnya tag berpasangan. Contohnya <html> dengan </html>, <head> dengan </head> dan <body> dengan </body>.
- Tag yang tidak berpasangan antara lain adalah <br> dan <hr>.
- Pada tag yang berpasangan, tag yang berkedudukan sebagai tag penutup mempunyai bentuk berupa </>.
Contoh: Ketiklah script di bawah ini kemudian simpan dengan nama lat1.html.

<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
</body>
</html>

Untuk melihat hasilnya, silakan jalankan browser favorit Anda, dengan cara membuka file lat1.html yang sudah Anda buat tadi dengan menggunakan browser seperti contoh tampilan dibawah ini saya menggunakan browser Mozila Firefox :

Keterangan:

  • Tag <TITLE> digunakan untuk memberi judul dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang akan disimpan. Pada contoh di atas judul dokument html yaitu "Belajar HTML"
  • <BODY> adalah isi dokumen yang akan ditampilkan dibrowser Anda. Isi dokumen pada contoh di atas adalah " Ini adalah web pertama saya."

Terdapat dua pilihan dalam mendesain html :

  1. Menuliskan secara manual tag-tag html ke dalam dokumen html. Bagi para pemula pilihan ini dirasa lebih tepat karena dengan menuliskan tag-tag html satu persatu maka akan menambah pemahaman mengenai cara kerja dan perintah-perintah dalam HTML, meskipun cara ini akan menguras banyak waktu tetapi segala sesuatu tidak ada yang instan oleh karenanya berusaha lebih keras akan lebih baik dan akan terasa hasilnya ketika kita sudah mampu mengusai html. Cara manual ini dapat dilakukan dengan menuliskan kode-kode html pada program editor seperti notepad.
  2. Menggunakan editor praktis yaitu sebuah program khusus yg didesain untuk membuat, melakukan editing bahkan mempublishnya ke internet. Adobe dreamweaver merupakan salah satu program yang banyak digunakan oleh para desainer web dalam mendesain html. Para pemula yang malas untuk belajar kebanyakan memilih pilihan yang kedua ini karena praktis dan tidak menguras waktu.
Struktur Dasar HTML

Struktur dasar html secara umum terbagi menjadi 2 bagian yaitu header dan body. Komponen penyusun dari html meliputi tag, elemen, dan atribut.

  • Tag

    Tag adalah suatu teks khusus (markup) yang terdiri dari dua karakter yaitu < dan >. HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut.Tag biasanya merupakan suatu pasangan yang disebut dengan : 1. Tag awal, dinyatakan dalam bentuk <nama tag> 2. Tag akhir, dinyatakan dalam bentuk </nama tag>. Format : <nama tag> teks yang ditampilkan </nama tag>. Contoh : untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>
    Contoh ketiklah kode berikut lalu simpan dengan nama tag.html

    <<html>
    <head>
    <title>Belajar HTML</title>
    </head>
    <body>
    Ini adalah web pertama saya.
    <h1>Ini adalah heading 1</h1>
    <h2>Ini adalah heading 2</h2>
    <h3>Ini adalah heading 3</h3>
    <h4>Ini adalah heading 4</h4>
    <h5>Ini adalah heading 5</h5>
    <i>tulisan ini terlihat miring</i>
    <b>tulisan ini terlihat tebal</b>
    <u>tulisan ini bergaris bawah</u>

    Maka setelah dokumen tag.html dibuka dengan menggunakan mozilla firefox maka tampilannya akan seperti gambar di bawah ini.

  • Element

    Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.Contoh untuk menampilkan judul dokumen pada browser digunakan element title yaitu:
    <title> merupakan tag pembuka,
    Diisi dengan judul (isi)
    </title> merupakan tag penutup
    Berikut ini contoh beberapa macam element:

    1. Element HTML

      Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.

      Sintaks:

      <html>
      ...........
      </html>

    2. Element title

      Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
      Sintaks:

      <title>
      .........
      </title>

    3. Element head

      Elemen <head> merupakan elemen yang berisikan informasi mengenai halaman web yang tengah dibuka, yang tidak akan ditampilkan secara visual di halaman browser. Sintaks

      <head>
      .....
      </head>

      Pada halaman web modern, umumnya elemen mengandung:

      • elemen title, yang menunjukkan judul dari halaman yang tengah dibuka dan muncul pada toolbar browser.
      • elemen meta, yang menunjukan informasi meta data mengenai halaman web yang tengah diakses.
      • elemen link, yang menunjukan hubungan antara halaman web yang dibuka dan file lain. Umumnya digunakan untuk “memasukkan” file CSS ke halaman web yang bersangkutan.
      • elemen script, digunakan untuk memasukkan script yang bekerja pada sisi klien seperti JavaScript.

      Selain keempat elemen di atas, terdapat juga elemen style yang digunakan untuk memasukkan perintah stylesheet dan base untuk menetapkan alamat dan target dari semua link yang berada di dalam halaman web. Bagaimanapun, elemen base jarang dijumpai penggunaannya dan elemen style jarang digunakan karena paradigma saat ini untuk memisahkan stylesheet dengan halaman web agar mudah dalam pengorganisasiannya.

    4. Element body

      Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.
      Element BODY mempunyai atribut-atribut yang menspesifikasikan khususnya warna dan latar belakang dokumen yang akan ditampilkan pada browser.

      Sintaks:

      <body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
      ..............
      </body>

    Pada dasarnya, elemen yang diletakkan diantara tag <body> terdiri dari tiga jenis:

    • Markup struktural: menunjukan tujuan dari text. contoh, tag heading <h2></h2>
    • Markup presentasional: menunjukan tampilan dari informasi, terlepas dari fungsinya. contoh: <strong></strong>
    • Markup hypertext: markup yang membuat bagian dari dokumen menghubungkan ke dokumen yang lain. contoh: <a href=""></a>

  • Atribut

    Atribut text memberikan warna pada teks, bgcolor memberikan warna pada latar belakang dokumen HTML, background memberikan latar belakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi. Jika atribut bgcolor dan background keduanya dispesifikasikan maka atribut background yang akan digunakan, akan tetapi jika nilai atribut background (gambar) tidak ditemukan pada dokumen HTML maka atribut bgcolor yang akan digunakan.

    Atribut mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:

    <TAG>
    nama-attr="nilai-attr"
    nama-attr="nilai-attr"
    .................
    >
    .................
    </TAG>

Secara umum nilai atribut harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latar belakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">

Bullet and Numbering Html

Posted by noeroel arashi | 20:09 | , | 0 comments »

Belajar HTML Bullet|Belajar Html Lengkap

Cara Membuat Bullet and Numbering Html

Saya ucapkan selamat datang di blog Belajar Html Lengkap, pada kesempatan kali ini saya akan berbagi ilmu tentang bagaimana membuat bullet dan numbering pada postingan di blog .Kita sering kali menjumpai daftar item (list), baik berupa penomoran (numbering) maupun bullet pada suatu postingan /tulisan yang berfungsi untuk memberikan label atau urutan agar postingan/tulisan tersebut terstruktur dengan rapi sehingga dapat dipahami dengan mudah oleh para pembacanya.

Cara Membuat Bullet and Numbering pada posting blog tidaklah sulit tetapi hanya butuh ketelitian. Sebenarnya pada post editor blog sudah tersedia fasilitas untuk membuat list baik numbering maupun bullet, untuk blogspot sendiri fasilitas ini terdapat pada mode "Tulis" atau "Compose" yaitu berupa icon, dan penggunaannya cukup dengan meng klik icon tersebut. Namun penggunaan fasilitas ini dirasa kurang memadai, terutama karena kurangnya variasi type numbering maupun bullet, juga pada saat kita hendak menggunakan list yang bertingkat. Selain itu pada post editor mode "HTML" fasilitas bullet dan numbering tidak tersedia sehingga mau tidak mau harus membuatnya.

Sejauh yang saya ketahui, untuk membuat bullet and numbering ini bisa langsung melalui HTML, atau bisa juga melalui CSS (Cascading Style Sheet). Namun kali ini saya hanya akan membahas cara membuat bullet dan numbering dengan HTML. Untuk tutorial ini bisa anda coba membuatnya di notepad, atau langsung di blog juga bisa. HTML mendukung beberapa format list, baik numbering List dan bullets List. Berikut ini beberapa format dari bullet dan numbering HTML:

  1. Bullet HTML
    2.  Bullet dan numbering berbeda hanya pada tag pertama dan terakhir saja. Jika ingin membuat list berupa numbering maka tag yang anda gunakan adalah OL. Sementara jika anda ingin membuat list berupa bullet maka gunakan tag UL. Adapun Tag HTML yang digunakan untuk bullet dibuka dengan kode <ul> dan ditutup dengan kode </ul> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>. Perhatikan contoh berikut:

    <html>
    <head>
    <title>Bullet HTML</title>
    </head>
    <body>
    <ul>
    <li>bullet satu</li>
    <li>bullet dua</li>
    <li>bullet tiga</li>
    </ul>
    </body>
    </html>

Tulislah kode di atas pada notepad lalu simpan dengan nama bullet.html. Setelah selesai disimpan bukalah file bullet.html tadi dengan browser misalnya mozilla firefox sehingga tampilannya akan menjadi seperti yang di bawah ini.

Ada beberapa tipe bullet yang dapat digunakan di antaranya sebagai berikut:

  • Tipe Disc
    •  Agar jarak antar barisnya tidak terlalu jauh maka penulisan tag htmlnya tidak perlu ganti baris (tidak usah di enter). Perhatikan contoh berikut:

    <html>
    <head>
    <title>HTML Tipe Disc</title>
    </head>
    <body>
    <ul type="Disc"> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list seterusnya...</li></ul>
    </body>
    </html>

    Maka tampilan pada browser akan tampak seperti di bawah ini.
  • Tipe Circle
    •  Tipe ini menampilkan bullet dengan bentuk lingkaran. Contoh:

    <html>
    <head>
    <title>Bullet HTML Tipe Circle</title>
    </head>
    <body>
    <ul type="Circle"> <li>list 1</li> <li>list 2</li> <li>list 3</li> <li>list seterusnya...</li></ul>
    </body>
    </html>

    Maka tampilan pada browser akan tampak seperti berikut ini.
  • Tipe Square
    •  Tipe ini menampilkan bullet dengan bentuk kotak persegi. Contoh:

    <html>
    <head>
    <title>Bullet HTML Tipe Square</title>
    </head>
    <body>
    <ul type="Square">
    <li>list 1</li><li>list 2</li><li>list 3</li><li>list seterusnya...</li></ul>
    </body>
    </html>

    Untuk cara membuat numbering html silahkan klik disini

    Sekian tulisan tentang bullet dan numbering html yang bisa saya sampaikan. Silahkan dicoba sendiri mudah-mudahan tulisan saya dapat bermanfaat dalam membuat postingan menjadi lebih rapih dan menarik. Terima kasih dan salam....

Atribut-Atribut Dasar Html

Posted by noeroel arashi | 20:03 | , | 0 comments »

Atribut HTML|Belajar Html Lengkap

Atribut Core, Language, Event











Daftar atribut-atribut dibawah ini adalah atribut-atribut standard yang dapat digambarkan untuk elemen-elemen HTML. Atribut-atribut standard terbagi tiga kelompok, Atribut Core, Atribut Language, dan Atribut Event.

  1. Atribut Core
    2.

    Atribut-atribut core tidak boleh digambarkan untuk elemen BASE, HEAD, HTML, META, PARAM, SCRIPT, STYLE, dan TITLE. Atribut-atribut core antara lain CLASS, ID, STYLE, dan TITLE.

    Atribut CLASS digunakan untuk menetapkan nama kelas untuk elemen-elemen HTML, nantinya aturan CSS dengan class selectornya dapat mengacu kepada nilai dari atribut CLASS elemen-elemen HTML yang terkait.

    Contoh:

    <HTML>
    <HEAD>
    <STYLE TYPE="text/css">
    P.kelas {
    color:blue;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <P CLASS="kelas">Alinea</P>
    </BODY>
    </HTML>

    Atribut ID digunakan untuk menetapkan pengenal unik untuk sebuah elemen HTML, nantinya aturan CSS dengan Id selectornya dapat mengacu kepada nilai dari atribut ID sebuah elemen HTML. Nilai atribut ID adalah unik. Ini menggambarkan bahwa satu elemen dengan dengan elemen HTML lainnya tidak boleh memiliki nilai atribut ID yang sama, beda dengan atribut CLASS!

    Contoh:

    <HTML>
    <HEAD>
    <STYLE TYPE="text/css">
    P#id {
    color:blue;
    }
    </STYLE>
    </HEAD>
    <BODY>
    <P ID="id">Alinea</P>
    </BODY>
    </HTML>

    Atribut STYLE digunakan untuk menerapkan aturan CSS langsung didalam tag awal dari elemen-elemen HTML yang terkait.

    Contoh:

    <HTML>
    <BODY>
    <P STYLE="color:red">merah</P>
    <P STYLE="color:blue">biru</P>
    </BODY>
    </HTML>

    Atribut TITLE digunakan untuk memberikan ekstra informasi tambahan berupa teks untuk sebuah elemen HTML. Nilai atribut TITLE ini akan ditampilkan sebagai tooltip, yaitu ketika pointer mouse tepat diatas sebuah elemen. Atribut TITLE sangat penting untuk elemen A, IMG, ABBR, dan ACRONYM.

    Contoh:

    <HTML>
    <BODY>
    <P>Saya kuliah di jurusan<ABBR TITLE="Teknik Informatika">TI</ABBR></P>
    </BODY>
    </HTML>

  2. Atribut Language
    3.

    Atribut-atribut language tidak boleh digambarkan untuk elemen BASE, BR, FRAME, FRAMESET, HR, IFRAME, PARAM, dan SCRIPT. Atribut-atribut language antara lain DIR dan LANG.

    Atribut DIR digunakan untuk menggambarkan arah-arah penulisan untuk isi didalam sebuah elemen HTML. Apakah arah penulisannya dari arah kiri ke kanan ("ltr") atau dari arah kanan ke kiri ("rtl").

    Contoh:

    <HTML>
    <BODY>
    <P LANG="id" DIR="ltr">teks rata kanan</P>
    <P LANG="id" DIR="rtl">teks rata kiri</P>
    </BODY>
    </HTML>

    Atribut LANG digunakan untuk menetapkan kode bahasa untuk isi didalam sebuah elemen HTML. Untuk nilai dari atribut LANG ini, anda dapat lihat di ID-ID Bahasa HTML.

  3. Atribut Event
    4.

    Berikut adalah daftar dari atribut-atribut event yang dapat digambarkan untuk elemen-elemen HTML:

    Atribut event ONCLICK digunakan untuk menetapkan bahwa sebuah script akan dijalankan ketika pengguna mengklik dengan mouse pada sebuah elemen.

    Contoh:

    <HTML>
    <BODY>
    <INPUT TYPE="button" VALUE="Klik!" ONCLICK="javascript:alert('Event ONCLICK dipanggil')">
    </BODY>
    </HTML>

    Atribut event ONDBLCLICK digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika pengguna mengklik dua kali dengan mouse pada sebuah elemen.

    Contoh:

    <HTML>
    <BODY>
    <INPUT TYPE="button" VALUE="Klik!" ONDBLCLICK="javascript:alert('Event ONDBLCLICK dipanggil')">
    </BODY>
    </HTML>

    Atribut event ONMOUSEDOWN digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika tombol mouse ditekan.

    Contoh:

    <HTML>
    <BODY>
    <INPUT TYPE="button" VALUE="Klik!" ONMOUSEDOWN="javascript:alert('Event ONMOUSEDOWN dipanggil')">
    </BODY>
    </HTML>

    Atribut ONMOUSEMOVE digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan.

    Contoh:

    <HTML>
    <BODY>
    <IMG SRC="example.com.gif" ONMOUSEMOVE="alert('Menuju ke Example.com!')">
    </BODY>
    </HTML>

    Atribut event ONMOUSEOUT digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan keluar dari sebuah elemen.

    Contoh:

    <HTML>
    <BODY>
    <IMG SRC="example.com.gif" ONMOUSEOUT="alert('Menuju ke Example.com!')">
    </BODY>
    </HTML>

    Atribut event ONMOUSEOVER digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika mouse digerakkan tepat diatas sebuah elemen.

    Contoh:

    <HTML>
    <BODY>
    <IMG SRC="example.com.gif" ONMOUSEOVER="alert('Menuju ke Example.com!')">
    </BODY>
    </HTML>

    Atribut event ONMOUSEUP digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika tombol mouse dilepaskan, setelah sebelumnya tombol mouse ditekan.

    Contoh:

    <HTML>
    <BODY>
    <IMG SRC="example.com.gif" ONMOUSEUP="alert('Menuju ke Example.com!')">
    </BODY>
    </HTML>

    Atribut event ONKEYDOWN digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika sebuah tombol keyboard ditekan.

    Contoh:

    <HTML>
    <BODY>
    <SCRIPT TYPE="text/javascript">
    function bukanAngka(e){
    var keyAngka;
    var keyKarakter;
    var cekAngka;
    if(window.event){//IE
    keyAngka = e.keyCode;
    }else if(e.which) {//Netscape/Firefox/Opera
    keyAngka = e.which;
    }
    keyKarakter = String.fromCharCode(keyAngka);
    cekAngka = /d/;
    return !cekAngka.test(keyKarakter);
    }
    </SCRIPT>
    <FORM>
    Ketikkan hanya teks bukan angka:
    <INPUT TYPE="text" ONKEYDOWN="return bukanAngka(event)">
    </FORM>
    </BODY>
    </HTML>

    Atribut event ONKEYUP digunakan untuk menetapkan bahwa sebuah script akan dijalankan oleh browser ketika tombol keyboard dilepaskan, setelah sebelumnya ditekan.

    Contoh:

    <HTML>
    <HEAD>
    <SCRIPT TYPE="text/javascript">
    function hurufBesar(x){
    var y=document.getElementById(x).value;
    document.getElementById(x).value=y.toUpperCase();
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    Nama: <INPUT TYPE="text" ID="nama" ONKEYUP="hurufBesar(this.id)">
    </BODY>
    </HTML>

Subscribe to: Posts (Atom)