Oo Gituu…

scroll it, you'll love it

4 Tag Berguna Untuk Posting (Bagian 2 dari 2)

with one comment

Document

Bagi yang terbiasa memposting blog dengan mode Visual (WordPress) atau Compose (Blogger) mungkin tidak terlalu memusingkan apa itu mengedit HTML-nya;) Soalnya kita tinggal klik-ini-klik-itu dengan editor yang disediakan. Istilahnya, sekarang ini zamannya WYSIWYG;)

Apa benar editor WYSIWYG lebih baik? Saya sendiri lebih senang menggunakan mode edit HTML. Mengapa? Karena kita punya kontrol penuh terhadap apa yang kita posting;) Ah ngapain pusing-pusing ngedit HTML-nya toh kita kan fokusnya ke postingan yang kita tulis? Hmm alasan saya tentu ingin agar tulisan saya tampil indah, oleh karena itu saya harus mengontrol bagaimana ditampilkannya;)

Oke deh, kalo pengen postingan di blog kita tampil lebih indah, mulai sekarang coba deh terbiasa dengan editor HTML-nya;) Berikut saya pengen share empat tag yang berguna untuk postingan kita di blog. Btw, ini saya khususkan untuk WordPress saja;)

Tulisan sebelumnya: 4 Tag Berguna Untuk Posting (Bagian 1 dari 2)

3.Preformated
Dengan tag ini, kita dapat menggunakan huruf yang fixed-width dalam postingan. Misalnya kita akan menggambar tabel manual dengan simbol “-” dan “|” sebagai garisnya atau mungkin memasukan ASCII art dalam postingan;) Berikut saya contohkan dulu.

« ASCII Art Kupu-Kupu »

                `         '
;,,,             `       '             ,,,;
`Y888888bo.       :     :       .od888888Y'
  8888888888b.     :   :     .d8888888888
  88888Y'  `Y8b.   `   '   .d8Y'  `Y88888
 j88888  .db.  Yb. '   ' .dY  .db.  88888k
   `888  Y88Y    `b ( ) d'    Y88Y  888'
    888b  '"        ,',        "'  d888
   j888888bd8gf"'   ':'   `"?g8bd888888k
     'Y'   .8'     d' 'b     '8.   'Y'
      !   .8' db  d'; ;`b  db '8.   !
         d88  `'  8 ; ; 8  `'  88b
        d888b   .g8 ',' 8g.   d888b
       :888888888Y'     'Y888888888:
       '! 8888888'       `8888888 !'
          '8Y  `Y         Y'  Y8'
           Y                   Y
           !                   !

http://www.ascii-fr.com/-Butterflies-.html

« Contoh Tabel »

------------------------------------------------------------
Version          | Code name   | Artwork     | Release date
------------------------------------------------------------
Fedora Core 6    | Zod         | DNA         | Oct', 2006
Fedora Core 5    | Bordeaux    | Bubble      | Mar', 2006
                 |             |             |
Fedora Core 4    | Stentz      | Bluecurve   | June, 2005
Fedora Core 3    | Heidelberg  | Bluecurve   | Nov', 2004
Fedora Core 2    | Tettnang    | Bluecurve   | May, 2004
Fedora Core 1    | Yarrow      | Bluecurve   | Nov', 2003
Fedora Core 0.94 | Severn      | Bluecurve   | Sep', 2003
------------------------------------------------------------

Keren kan? Haah… nggak?;)

tagnya:

<pre>
<strong>« ASCII Art Kupu-Kupu »</strong>

                `         '
;,,,             `       '             ,,,;
`Y888888bo.       :     :       .od888888Y'
  8888888888b.     :   :     .d8888888888
  88888Y'  `Y8b.   `   '   .d8Y'  `Y88888
 j88888  .db.  Yb. '   ' .dY  .db.  88888k
   `888  Y88Y    `b ( ) d'    Y88Y  888'
    888b  '"        ,',        "'  d888
   j888888bd8gf"'   ':'   `"?g8bd888888k
     'Y'   .8'     d' 'b     '8.   'Y'
      !   .8' db  d'; ;`b  db '8.   !
         d88  `'  8 ; ; 8  `'  88b
        d888b   .g8 ',' 8g.   d888b
       :888888888Y'     'Y888888888:
       '! 8888888'       `8888888 !'
          '8Y  `Y         Y'  Y8'
           Y                   Y
           !                   !

http://www.ascii-fr.com/-Butterflies-.html

</pre>

Mudah kok, dicoba-coba aja ya:) Btw untuk ngedit teksnya jangan pake editor WordPress, pake Notepad aja atau teks editor lain yang menggunakan font fixed-width. Nah, kalo udah siap langsung masukin deh ke dalam tag tersebut;)

4. Blank Span
Nah kalo yang ini adalah semacam trik akibat penggunaan tag div atau yang lainnya. Blank span saya namai karena tag ini tidak diisi apa-apa;) Akan tetapi, fungsinya sangat berguna dalam postingan kita. So buat apa? Lihat contoh berikut ya:)

Contoh tanpa blank span:

Kupu-Kupu

Perhatikan posisi teks ini setelah gambar di atas…

Contoh dengan blank span:

Kupu-Kupu

Perhatikan posisi teks ini setelah gambar di atas…

Nah, terlihat kan bedanya? Dengan blank span ini akan ada baris kosong setelah penggunaan tag div. Jadi lebih rapih sesuai dengan paragraf lain yang disela baris kosong;)

Penggunaan tagnya sendiri sebagai berikut.

Contoh tanpa blank span:

<div style="clear:both;text-align:center;"><img 
src="http://e-kuta.com/blog/wp-content/uploads/2008/09/taman-kupu-kupu.jpg"
alt="Kupu-Kupu" border="0" /></div>

<strong>Perhatikan posisi teks ini setelah gambar di atas...</strong>

Contoh dengan blank span:

<div style="clear:both;text-align:center;"><img 
src="http://e-kuta.com/blog/wp-content/uploads/2008/09/taman-kupu-kupu.jpg"
alt="Kupu-Kupu" border="0" /></div>
<span></span>

<strong>Perhatikan posisi teks ini setelah gambar di atas...</strong>

Jadi setelah penggunaan tag div (dan yang lainnya) untuk menyisipkan baris kosong ini gunakan saja blank span.

Oke deh, itulah empat tag yang sering saya gunakan dalam blog ini. Semoga info tersebut bermanfaat bagi teman-teman yang suka posting di WordPress. Selamat mencoba;)

Advertisements

Written by Allan AS

16 April 2011 at 8:09 am

One Response

Subscribe to comments with RSS.

  1. […] Tulisan selanjutnya: 4 Tag Berguna Untuk Posting (Bagian 2 dari 2) […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: