Menonjolkan Teks Tertentu Pada Postingan

Posted By anasku
Seringkali jika kita baca buku tutorial seperti misalnya tutorial HTML, tutorial Bahasa Pemrograman dan buku-buku tutorial yang lainya kita menjumpai seperti kode-kode atau script yang ditonjolkan dengan memberi background dan pembatas yang beda dengan teks-teks yang lainya yang ada di buku yang berguna untuk mempermudah para pembaca buku membedakan script-script dengan tulisan yang lainya. Begitu juga di blog jika Anda menulis tentang tutorial yang memungkinkan untuk menulis kode-kode HTML dan script-script yang lainya agar pembaca lebih mudah untuk membedakan.

Contoh seperti dibawah ini

HANYA CONTOH

POSTINGAN YANG DITONJOLKAN DISINI

HANYA CONTOH

Dan seperti ini


Kesepian hati…

Adakah benar adalah lorong waktu kebahagiaan ?

Kesunyian hati…

Adakah sungguh adalah suara merdu saat usia senja ?

Aku takut, aku salah kira

Meski kusadari kini ku di tengah itu semua

Aku hanya dapat bertanya

Tanpa sedikitpun kepastian akan jawabnya


(http://www.anggrekbiru.com/)


Terlihat perbedaan dengan contoh pertama dan kedua : contoh pertama dengan background warna dan contoh kedua dengan background gambar.

Untuk membuatnya silahkan perhatikan cara berikut

cara pertama yaitu cukup mudah kita tinggal masuk ke posting editor dan tulis code seperti dibawah ini di posting editor bagian "Edit Html"

untuk background warna kita gunakan code seperti dibawah ini

<div style="background:#FFFFCC; border:1px dotted #F5003D; padding:5px;">
DISINI POSTINGAN YANG MAU DITONJOLKAN
</div>



background:#FFFFCC;
adalah warna background, codenya bisa Anda ganti menurut warna yang Anda sukai. (lihat code warna disini)

border:1px dotted #F5003D;
adalah garis tepinya 1px adalah ketebalan dari garis tepinya, bisa kamu ganti ketebalanya sesuai selera Anda, dotted adalah jenis bordernya bisa kamu ganti sesuai selera kamu (baca disini jenis border). #F5003D adalah kode warna dari border silahkan Anda ganti dengan selera Anda.

padding:5px;
Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jaraknya dari garis tepi. (baca disini untuk lebih jelasnya)

tambahkan overflow:auto; jika ingin menambahkan fungsi scroll

untuk background gambar seperti dibawah ini
<div style="background:url(http://lh4.ggpht.com/_Vk3H6zPQ4Gw/ST-lr9UlQXI/AAAAAAAAAbE/JotHfb0BrJY/red-crystal-heart.jpg); width:508px; height:362px; padding:5px;">

DISINI TEXT

DISINI TEXT

</div>

Text yang tercetak merah diatas adalah url gambarnya. width:508px; adalah lebar area dan height:362px; adalah tinggi area.

Gimana gampang kan?

ini adalah sebagian cara untuk menonjolkan text tertentu, trik-trik berikutnya akan menyusul.
Sekian semoga sedikit membantu Anda dan bermanfaat bagi Anda.
Artikel Terkait untuk "Menonjolkan Teks Tertentu Pada Postingan"


17 comments:

Didiet said...

Makasih mas... infonya...
saya akan gunakan ini

Cengeng-ngesan T_^ said...

wah, yang saya cari-cari akhirnya udah ada nih...
thx mas infonya
gak rugi deh subscribe rss blog ini

NdesO said...

Weleh2 :D Tipsnya simple juga, tapi bermanfaat banget sih :) Nanti aja deh, kalo ada sesuatu yang penting yang mau ditonjol'in, baru aku pake trik ini B)

Kristina Dian Safitry said...

langsung tak praktekin lho ini. nyoba ya, bisa gak...

brigadista said...

keren juga keliatannya,... mantab bos...

ngeblog dg hp said...

terima kasih...

Trensains said...

Bagi yang mau tukeran link

tutorial mikrokontroler TRENSAINS

mr-mung said...

Info keren... segera menuju TKP... dan mohon izin buat copas this posting. buat catatanku.hehe...

eRGe32 said...

tq boss

azarre.tokcerlab said...

cool........!!

big thanx dari newbie negh...:D

tips trik blog said...

manstab bos

NdyTeeN said...

tq mas anas infonya...

zil arsyi said...

lagi nyari2 yang kayak gn ni..
trims mas infonya

Yohana Novemita said...

bantu banget, thanks btw.

visit juga yaaak~

ijal fauzi said...

mas, itu taro nya pas edit html di bagian mana ya? tolong dibalas

Dedy said...

Terima Kasih gan, izun terapin ya gan

obat kutil kelamin ampuh said...

dicoba di postingan ane,.. makasih gan berhasil

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas