Setiap Artikel Blog Beda Font

Cara membuat artikel atau paragraf tertentu agar jenis font-nya berbeda-beda.


Banyak sekali jenis font yang telah tercipta. Setiap font memiliki karakter dan nilai keindahannya sendiri. Sebuah situs akan semakin terlihat cantik bila pemilihan font-nya tepat. Bagusnya lagi, kita dapat menggunakan lebih dari satu jenis font pada sebuah situs (blog). Katakanlah Arial untuk Header, Georgia untuk isi artikel, dan seterusnya.

Jenis font yang digunakan dalam blog diatur sekaligus melalui CSS. Contoh berikut menjelaskannya.

Jenis font untuk artikel blog diatur melalui CSS berikut.

.post-body {
font-family: 'Ubuntu','Helvetica Neue',Arial,Helvetica,sans-serif;
font-size: 1.2em;
text-shadow: 0 1px 0 #FAFAFA;
}

CSS di atas memerintahkan browser untuk menerapkan jenis font "Ubuntu" untuk artikel blog. Jadi, setiap artikel yang telah diterbitkan akan memiliki font Ubuntu. Jika kita ingin mengganti font artikel blog kita maka kita cukup melakukan perubahan pada CSS di atas.

Bagaimana jika saya ingin menerapkan font yang berbeda untuk sebuah artikel saja atau sebuah paragraf tertentu? Apakah saya bisa mengaturnya melalui CSS tersebut? Atau apakah saya harus menghapus CSS tersebut? Tentu tidak. Bagusnya Teks editor Blogger-yaitu tempat di mana Anda biasa mengetik artikel-telah menyediakan menu pemilihan jenis font. Anda hanya perlu memilih (mem-block) paragraf  atau kalimat atau kata yang akan diterapkan padanya font tertentu, lalu klik menu Font lalu pilih jenis font yang Anda inginkan, Arial kah, Courier kah, dan lain-lain. Pekerjaan seperti ini mudah, bahkan bagi blogger pemula sekalipun. Lihat gambar di awal.

Mudah bukan?

Bagaimana jika saya ingin menggunakan font lain yang tidak ada dalam daftar font tersebut? Misalnya font Roboto. Jangan khawatir, ini juga mudah.

Caranya tambahkan link untuk jenis font yang akan Anda gunakan. Lalu, terapkan font secara inline.

Contoh.

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>
<span style="font-family: Roboto,'Times New Roman',serif;">Teks Anda di sini...</span>

Hasil untuk font Roboto diterapkan pada dua paragraf berikut.

Barang siapa berjalan untuk menuntut ilmu maka Allah akan memudahkan baginya jalan ke surga. (HR. Muslim)

Barang siapa memberikan petunjuk kebaikan, maka baginya akan mendapatkan ganjaran seperti ganjaran yang diterima oleh orang yang mengikutinya, dan tidak berkurang sedikitpun hal itu dari ganjaran orang tersebut. (HR. Muslim)


Tip. Tulislah Artikel dalam mode HTML.


Selamat belajar :)

COMMENTS

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Setiap Artikel Blog Beda Font
Setiap Artikel Blog Beda Font
Cara membuat artikel atau paragraf tertentu agar jenis font-nya berbeda-beda.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiQZpkz802HAL1blAWeZ1NIGQD_OxcDPRLIr-eAC9fQA5nKeCW4gn6xbCYxNvxSJVVZDND0FlaZ8M-cdYVQ4ut6-BLXJ1C30JEBveqfjwzMXpS-3xwqN7h2gVNHggrB4P2rL0kdJcxLk/s1600/artikel+beda-beda+font.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiQZpkz802HAL1blAWeZ1NIGQD_OxcDPRLIr-eAC9fQA5nKeCW4gn6xbCYxNvxSJVVZDND0FlaZ8M-cdYVQ4ut6-BLXJ1C30JEBveqfjwzMXpS-3xwqN7h2gVNHggrB4P2rL0kdJcxLk/s72-c/artikel+beda-beda+font.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/03/setiap-artikel-blog-beda-font.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/03/setiap-artikel-blog-beda-font.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content