HTML Pemula

By : AdiMPS

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda, meskipun sekarang sudah banyak pembuatan halamanHTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :

Belajar

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :

Belajar

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :

Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :

<b><i><u>Belajar</u></i></b> hasilnya seperti :

Belajar

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :

Belajar

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span>hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

Membuat Huruf Besar semua (uppercase) gunakan kode :

<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :

BELAJAR

Membuat Huruf Small caps gunakan kode:

<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:

Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:

<p>4<sub>2</sub></p>hasilnya seperti ini:

4₂

Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4<sup>2</sup></p> hasilnya seperti ini:

4²

Membuat Huruf bergaris atas gunakan kode:

<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:

Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:

<strike>Belajar</strike> hasilnya seperti ini:

~~Belajar~~

Menentukan jenis huruf gunakan kode:

<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan ukuran huruf gunakan kode:

<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan warna huruf gunakan kode:

<p style="color: green; >Belajar</p> hasilnya seperti ini:

Belajar

Membuat bullet dot bolong gunakan kode:

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot kotak gunakan kode:

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot bulat gunakan kode:

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Mengatur posisi bullet gunakan kode:

hasilnya seperti ini:

DOT 1

DOT 2

DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:

<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>

hasilnya seperti ini:

Belajar

Membuat tabel border solid gunakan kode:

hasilnya seperti :

Text

Membuat tabel border dot gunakan kode:

hasilnya seperti ini:

Text

Membuat tabel border dashed gunakan kode:

hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:

hasilnya seperti ini:

Text

Membuat tabel border Ridge gunakan kode:

hasilnya seperti ini:

Text

Membuat tabel border Insert gunakan kode:

hasilnya seperti ini:

Text

Membuat tabel border Outset gunakan kode:

hasilnya seperti ini:

Text

Membuat Tabel Biasa gunakan kode :

hasilnya seperti:

Text

Membuat Tabel berwarna gunakan kode :

<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

Membuat Tabel berwarna tak berbingkai gunakan kode :

<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

0 Comments

Tag : Blog,

Cara Posting Code HTML di Blog

By : AdiMPS

Berikut ini salah satu cara posting code HTML di Blog dengan menggunakan text area. Menggunakan text area mempunyai beberapa kelebihan dibanding dengan cara lain, diantaranya:

kita dapat meringkas area posting sehingga tidak terlalu luas,
selain itu area postingan akan terlihat lebih rapi,
juga kita dapat menambah scroll pada text area tersebut
kita bisa meletakkan dikiri, kanan atau tengah posting
kita dapat menambahkan perintah sorot semua untuk di copy.
kode html yg di copy tdk akan ada yg tertinggal.

caranya >>
- masuk ke entri baru/pos baru (buat pos baru)
- pilih tab HTML, kemudian masukan kode di bawah ini :

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="30" name="txt" rows="5" wrap="VIRTUAL">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></div>
</form>
</div>

Kemudian pindah ke tab Compose

Hasilnya :

Silahkan klik pada tulisan HIGHLIGHT ALL, maka semua text yang ada di dalam Text Area akan langsung ter-HIGHLIGHT / ter-PILIH.

lalu bisa deh masuin kode" ke dalam kotak/text area itu biar lebih keren ja. ^_^

0 Comments

Tag : Blog,

Cara Membuat Widget Recent Post Keren

By : AdiMPS

Widget recent post adalah widget yang diperlukan agar pengunjung dapat melihat artikel apa saja yang terbaru atau yang sering dibaca oleh pengunjung lainnya. Widget recent post ini hampir sama dengan widget popular post bawaan blogger. Lalu apa kerennya ?

Seperti kita ketahui bahwa widget popular post bawaan blogger hanya bisa kita rubah untuk ditampilkannya gambar, judul artikel dan summary posting. Untuk merubah besar - kecil nya gambar tidak ada option nya. Begitu juga untuk merubah berapa banyak huruf yang akan ditampilkan pada summary post juga tidak bisa.

Widget recent post yang saya sharing disini dapat mengatasi semua kekurangan tersebut.
Diantaranya:

Ukuran gambar / avatar bisa kita atur sesuai keinginan
Jumlah karakter huruf isi artikel bisa kita atur sesuai keinginan
Jumlah komentar yang masuk bisa kita tampilkan
Jumlah artikel yang ingin kita tampilkan bisa lebih dari 10 artikel

Cara menampilkan atau menghilangkan nya cukup dengan merubah parameter: true atau false pada script tersebut.
Untuk merubah yang lainnya, silahkan Anda explore sendiri. Jangan takut rusak.

Bagaimana cara membuat widget recent post keren tersebu, ikuti petunjuknya berikut ini.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian masuk ke Tata letak ==> Tambah gadget ===> Html/javascript

3. Masukkan semua kode dibawah ini:

<div style="overflow:auto; width:100%px; max-height:250px; padding:5px;">
<style>
img.recent_thumb {padding-right:10px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js"></script>
<script type="text/javascript">
var numposts = 20;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="http://www.catatan-piper-comex.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script></div>

4. Sebelum disimpan Anda ganti dulu alamat url saya (catatan-piper-comex.blogspot.com) dengan alamat url blog Anda, setelah diganti dengan alamat url blog Anda, kilk save / simpan.
Anda bisa lihat hasilnya sebentar, apabila masih belum cocok bisa Anda modifikasi lagi sesuai keinginan Anda.

0 Comments

Tag : Blog,

Cara Membuat Kolom Komentar Bertingkat di Blogger

By : AdiMPS

Banyak cara untuk membuat kolom komentar bertingkat di blogger, maksudnya bertingkat adalah antara kolom komentar pengunjung dengan kolom komentar admin tidak sejajar. Dengan fitur komentar bertingkat ini, kita dapat langsung menuliskan balasan komentar di bawah komentar pengunjung yang ingin kita balas dengan mengeklik link "Balas" yang ada di bawah komentar pengunjung tersebut. Nantinya, bila komentar balasan ini telah dipublikasikan maka komentar itu akan muncul di bawah komentar yang dibalas seperti halnya pada komentar blog WordPress.

Perlu diketahui, setelah kita menerapkan komentar bertingkat ini, mungkin ada aplikasi yang berkaitan dengan komentar menjadi tidak berfungsi lagi, seperti warna kotak komentar admin yang berbeda, emoticons, dan lain sebagainya.

Bagi yang menggunakan template bawaan Blogger dapat mencoba cara di bawah ini untuk mengaktifkan fitur komentar bertingkat.

1. Masuk ke akun Blogger Anda.

2. Setelah berada di laman Dasbor, klik menu "Setelan" kemudian pilih "Komentar". Pada bagian "Komentar" tentu saja pilih tampilkan. Sedangkan di bagian "Penempatan Formulir Komentar" pilih "Disematkan di bawah entri".

3. Selanjutnya klik tombol "SIMPAN SETELAN" yang berada pada bagian bawah laman.

4. Masih berada di menu "Setelan", silakan klik tab "Feed Situs". Pada bagian "Izinkan Feed Blog" pilih "Penuh".

5. Kemudian klik tombol "SIMPAN SETELAN".

6. Selanjutnya silakan cek komentar pada blog Anda, apakah sudah berganti menjadi komentar bertingkat atau belum.

Nah, bagi yang menggunakan template modifikasi atau template hasil men-download dari pihak ke-tiga, bisa menyimak langkah-langkahnya di bawah ini.

1. Ikuti langkah-langkah di atas.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk berjaga-jaga jika nanti terjadi kesalahan, kita sudah mempunyai backup sehingga dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang pada "Expand Template Widget".

5. Silakan cari kode <b:include data='post' name='comments'/>

Bila Anda menggunakan peramban web Mozilla Firefox, Anda dapat menekan tombol Ctrl + F pada keyboard. Kemudian copy kode yang akan dicari tersebut dan paste di kotak yang tersedia, kemudian klik tab "Sorot semuanya". Nah, sekarang kode-kode yang dicari akan mempunyai warna latar belakang teks berwarna ungu. Kode tersebut ada yang berjumlah 3, ada juga yang berjumlah 4, tergantung pada template yang dipakai.

Klik "Sorot semuanya".

6. Silakan ganti semua kode pada langkah nomor 5 yang ditemukan dengan kode di bawah ini.

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

7. Klik tombol "SIMPAN TEMPLATE".

8. Silakan lihat komentar blog Anda, apakah sudah mengalami perubahan menjadi komentar bertingkat atau belum.

2 Comments

Tag : Blog,

AdiMPS

Hidup 1X ja Santai Lah

Silahkan Pilih

HTML Pemula

Cara Posting Code HTML di Blog

Cara Membuat Widget Recent Post Keren

Cara Membuat Kolom Komentar Bertingkat di Blogger

Arsip

Kategori Dipilih

Pengunjung GalaU