Blog cms template
-
Upload
nicholas-sihotang -
Category
Business
-
view
987 -
download
0
description
Transcript of Blog cms template
![Page 1: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/1.jpg)
Mengatur Tampilan Blog
Kelas #2Workshop Progresif
BloggerSUMUT
![Page 2: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/2.jpg)
nichpakaich#BloggerSUMUT
Halo, saya Nichpakaich
![Page 3: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/3.jpg)
Content Management System
Content (Tulisan)
Canvas
(Theme / Template)
CMS
(Blog)
Secara Sederhana …
![Page 4: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/4.jpg)
Urusan Content mah, Gampang!
![Page 5: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/5.jpg)
Mempersiapkan Content
![Page 6: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/6.jpg)
Kalau Tampilan?
![Page 7: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/7.jpg)
HTML & CSS
Hyper-Text Markup Language
• Bahasa pemrograman untuk mempresentasikan sebuah halaman web
Cascading Style Sheet
• Mengendalikan format komponen sebuah halaman web secara terstruktur
![Page 8: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/8.jpg)
HaloDunia.HTML
<html><head>
<title> {Nama Anda} </title></head><body>
<p>Halo Dunia</p></body></html>
![Page 9: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/9.jpg)
HaloDunia.HTML
![Page 10: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/10.jpg)
HTML
<body><p>Halo Dunia</p><img src="http://bloggersumut.net/logo_bloggersumut.net_200.jpg">
</body></html>
![Page 11: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/11.jpg)
HaloDunia.HTML
![Page 12: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/12.jpg)
CSS
<title> {Nama Anda} </title> <style>
p { font-size: 36px; background: #209900;color: #dfdfdf;
}</style></head>
![Page 13: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/13.jpg)
HaloDunia.HTML
![Page 14: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/14.jpg)
Pendalaman HTML & CSS
Topik dasar berikut akan sangat membantu:
• Tag HTML<strong> <em> <u> <font><img> <table> <iframe>
• CSSfont-facecolorbackground
![Page 15: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/15.jpg)
Kapan Menggunakannya?
![Page 16: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/16.jpg)
Memilih Theme/Template
Bagaimana cara memilih theme atau template blog?
![Page 17: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/17.jpg)
Wordpress Theme
![Page 18: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/18.jpg)
Blogger Template
![Page 19: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/19.jpg)
Perhatikan 3 Hal Ini
Elemen Tampilan
•Estetika•Pencitraan
Elemen Fungsional
•Flexibilitas(plugins, gadget/widget)•Kemudahan yang ditawarkan
Elemen Pengunjung
•Kenali kelompok pembaca(umur, gender, lokasi)
![Page 20: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/20.jpg)
Elemen Tampilan
• Butuh berapa kolom? • Suka model majalah atau kronologis?• Bagaimana dengan anchor-text?• Heading style-nya bagus?• Suka header-nya?• Font-nya unik?
![Page 21: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/21.jpg)
Layout
Content
Header
Sidebar
Footer
![Page 22: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/22.jpg)
Elemen Fungsionalitas
• Ada fitur “Read more” gak?• Navigasi halaman ada?• Komponen layout bisa dipindah-
pindah?(gagdet / widget ready)
• Bisa share langsung ke teman-teman?
• SEO Friendly kah?
![Page 23: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/23.jpg)
Elemen Pengunjung
Yang membaca blog Anda itu..• Ibu-ibu kah? Atau Remaja Gaul?• Jangan-jangan aki-aki yang untuk
baca koran sudah harus pakai kaca pembesar?
• Apakah mereka suka membaca sambil mendengarkan lagu?
• Atau orang yang baru melek internet?
![Page 24: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/24.jpg)
Memperkaya Tampilan Blog
Memanfaatkan Gadget/Widget untuk Blog
![Page 25: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/25.jpg)
Blogger Gadget
![Page 26: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/26.jpg)
Blogger Gadget
1
2
![Page 27: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/27.jpg)
Blogger Banner
http://bloggersumut.net/logo_bloggersumut.net_200.jpg
![Page 28: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/28.jpg)
Wordpress Widget
di “seret saja”
![Page 29: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/29.jpg)
Wordpress Widget Banner
http://bloggersumut.net/logo_bloggersumut.net_200.jpg
![Page 30: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/30.jpg)
TIPS
Beberapa masukan untuk menguasai cara memilih template/theme dan memperkaya tampilan blog
![Page 31: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/31.jpg)
Tips
Tambah jam terbang berseluncur (browsing)
![Page 32: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/32.jpg)
Tips
Jika sudah buntu, jangan malu untuk mencari pertolongan profesional atau yang sudah berpengalaman
![Page 33: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/33.jpg)
Tips
![Page 34: Blog cms template](https://reader033.fdocuments.in/reader033/viewer/2022061203/547cded9b4af9fc9158b5268/html5/thumbnails/34.jpg)
TERIMA KASIH@nichpakaich
Sampai jumpa di Workshop Progresif BloggerSUMUT selanjutnyaKelas #3: Promosi Blog