Oo Gituu…

scroll it, you'll love it

4 Tag Berguna Untuk Posting (Bagian 1 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;)

1. More tag
Tag yang satu ini berfungsi untuk “memotong” postingan kita agar yang ditampilkan di halaman muka hanya bagian pembuka aja. Pasti gak enak kan kalo ada blog yang tampilan mukanya (home) semua postingan ditampilkan full. Walhasil, halaman muka pun berat dibuka dan kesan tulisan yang indah pun kurang;)

tagnya:

<!--more-->

atau dengan kostumasi teksnya:

<!--more Baca selengkapnya... more-->

Penggunaannya tinggal masukan di akhir paragraf yang akan kita potong. Contoh dalam blog ini:

...pengen <em>share</em> empat tag yang berguna untuk postingan
kita di blog. Btw, ini saya khususkan untuk WordPress
saja;)<!--more-->

<strong>1. More tag</strong>
Tag yang satu ini berfungsi untuk "memotong"...

Gampang kan?;)
Untuk info selengkapnya, buka saja page berikut: http://en.support.wordpress.com/splitting-content/more-tag/

2. Floating Image
Nah, dalam blog ini di atas kan ada tuh gambar yang saya ambil dari 123rf.com. Gambarnya kan gak di baris terpisah dengan teks. Nah dengan tag berikut berapa pun besar gambar yang kita masukan, teksnya akan menyesuaikan;) Oh ya, untuk paragraf pertamanya langsung saja mulai dari baris setelah tag ini, tidak perlu disela baris kosong;)

tagnya:

<div style="clear:both;text-align:center;">
<a href="http://123rf.com"
style="clear:left;float:left;margin-bottom:1em;margin-right:1em;">
<img height="170px"
src="http://us.cdn3.123rf.com/168nwm/topone/topone0712/topone071200032.jpg"
alt="Document" /></a></div>

Nah, yang dicetak tebal ini nilainya bisa kita sesuaikan dan saya bantu jelaskan deh;)

  • link berikut merupakan tujuan saat gambar tersebut diklik. Sesuaikan dengan kebutuhan aja, misal di sini:
    http://123rf.com
  • left di sini adalah letak di mana gambar diposisikan, apakah left, middle, atau right. Khusus untuk yang middle gak usah menggunakan tag ini;) Btw, tetep sesuaikan dengan kebutuhan dengan menyesuaikan juga margin untuk teksnya. Misal:
    ...left;margin-bottom:1em;margin-right:1em;...
    atau
    ...right;margin-bottom:1em;margin-left:1em;...
  • lebar atau tinggi cukup diatur salah satunya saja agar gambar tetap proporsional. Saya sendiri biasa menggunakan “170px” atau “175px” untuk lebar atau tingginya, menyesuaikan dengan temanya aja;) Akan tetapi, kalo ukuran gambarnya sudah sesuai, tidak terlalu kebesaran, width atau height ini tidak saya gunakan:) Kalau pun harus diresize, besarnya sesuaikan dengan kebutuhan aja mau “100px”, “200px”, atau berapa aja;)
  • sumber gambar di sini dapat kita gunakan dari yang sudah ada atau dengan menguploadnya sendiri. Di sini saya menggunakan:
    http://us.cdn3.123rf.com/168nwm/topone/topone0712/topone071200032.jpg
  • teks pengganti untuk gambar yang kita gunakan, contoh di sini adalah “Document“. Misal seseorang mendisable tampilan image pada browsernya atau gambar tersebut belum selesai diload maka teks ini yang akan muncul terlebih dahulu sebagai “keterangan”;)

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

Advertisements

Written by Allan AS

15 April 2011 at 7:50 pm

Posted in Blogging

Tagged with , , ,

One Response

Subscribe to comments with RSS.

  1. […] Tulisan sebelumnya: 4 Tag Berguna Untuk Posting (Bagian 1 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: