![Page 1: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/1.jpg)
Desain Blog & Konten24 Januari 2012
Desain Blog & Konten24 Januari 2012
![Page 2: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/2.jpg)
http://nurudin.jauhari.netTwitter: @jauhari FB: [email protected]
082135335511
Nurudin Jauhari
Nganggur Itu Anugerah
![Page 3: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/3.jpg)
Inti Dari BloggingBagi Kami Inti dari Blogging adalah
Menuangkan “Sesuatu”
![Page 4: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/4.jpg)
Mengenal Mesin2 BlogsMengenal Beberapa Mesin Blog
yang banyak dipakai Saat ini
![Page 5: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/5.jpg)
Blogger.com / WordPress.org
2 Mesin Blog yang Sangat Populer
![Page 6: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/6.jpg)
Blogger.com
• Gratis
• Templates Standar
• Integrasi dengan Google
• Komentar “sedikit” susah
• Sulit Offline Editing
![Page 7: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/7.jpg)
WordPress.org
• WordPress.org bukan WordPress.com
• Dukungan Komunitas Bagus
• Ribuan Plugins
• Banyak Pilihan Tema
• Instalasi Mudah
• Server Lokal
![Page 8: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/8.jpg)
Apa Hanya Itu?MovableType, Expression Engine, Drupal,
Joomla, TextPattern dan Masih banyak layanan sejenis
![Page 9: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/9.jpg)
Kiat-kiatMemulai
Desain Blog
![Page 10: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/10.jpg)
• Tujuan Blog?
• Tema Blog?
• Fitur Blog?
• Kemampuan?
Beberapa Poin Sebelum Mulai Desain Blog
Tujuan Blog untuk Apa? Sharing Foto, Tutorial & Panduan, Informasi Umum, Berbagi Video?
Mengenal Kemampuan Diri (Desain, Coding)
![Page 11: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/11.jpg)
Beberapa Alat yang dibutuhkan
• Text/HTML Editor Adobe Dreamweaver, Coda, Notepad, Notepad++, TextMate, TextWrangler, vim
• Image Editor Pixelmator, Adobe Flash, Adobe Firework, Adobe Photoshop, Corel Draw, etc
• BrowserApple Safari, Google Chrome, Mozilla Firefox, Internet Explorer
![Page 12: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/12.jpg)
Proses Desain
Blog
![Page 13: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/13.jpg)
Merancang Dengan Grafis•Memerlukan Pengolah Grafis
•Desain dalam Bentuk Gambar
•Preview bisa langsung dilihat
![Page 14: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/14.jpg)
Langsung Koding
•Menuang Ide melalui barisan kode
•Membutuhkan Daya Imajinasi Lebih
•Lebih Cepat
![Page 15: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/15.jpg)
Typography
San-Serif
Serif
![Page 16: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/16.jpg)
Layout
1 Kolom 2 Kolom 3 Kolom Mixed
Beberapa Contoh Konsep Layout
![Page 17: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/17.jpg)
CSS & XHTMLDeskripsi CSS Menurut Wikipedia
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk
mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam.
Deskripsi XHTML Menurut WikipediaXHTML adalah bahasa markup penerus dan
pengembangan dari HTML yang memiliki kemampuan yang kurang lebih mirip HTML, tapi dengan aturan sintaks yang lebih ketat. HTML
merupakan aplikasi dari SGML (Standard Generalized Markup Language) yang sangat
fleksibel, sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih terbatas.
![Page 18: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/18.jpg)
Barisan Kode CSS
![Page 19: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/19.jpg)
Barisan Kode XHTML
![Page 20: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/20.jpg)
Beberapa Contoh Desain Blog
![Page 21: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/21.jpg)
Mengenal StrukturTema WordPress
![Page 22: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/22.jpg)
Struktur TEMA WordPress
![Page 23: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/23.jpg)
style.css
![Page 24: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/24.jpg)
Tips bikin Tema
•Gunakan CSS Framework
•Bikin Basic Theme
•Gunakan Struktur Kode yang Baku
•Child Theme
•Back Up
![Page 25: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/25.jpg)
Manajamen Konten
![Page 26: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/26.jpg)
Konten Apa Adanya
![Page 27: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/27.jpg)
Konten Dengan Desain
![Page 28: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/28.jpg)
Tips Singkat Desain Konten
•Penekanan Kata
•Sertakan Ilustrasi
•Perlakuan Berbeda
![Page 29: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/29.jpg)
Rujukan Utama
•http://codex.wordpress.org/
•http://digwp.com/
•http://wptricks.net
•http://www.google.com
![Page 30: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/30.jpg)
Nurudin Jauhari
Seorang Suami @IvaFitria, Abah @YashfaJauhar tinggal di
@DesaPonjong, Gunungkidul, Yogyakarta
Nganggur Itu Anugerah
Aktip sebagai Petani dan beberapa kegiatan Sosial di DESA PONJONG
Yogyakarta 24 Januari 2012http://nurudin.jauhari.net
Twitter: @jauhari FB: [email protected]@me.com 082135335511
![Page 31: Desain blog dan kontan Telkomsel FEB UGM 2012](https://reader033.vdocuments.pub/reader033/viewer/2022061217/54b528054a7959cf308b465c/html5/thumbnails/31.jpg)
Sumber sumber media
•Browser Screenshoot
•http://www.flickr.com/photos/kimeunyoung/2970436968/
•http://www.flickr.com/photos/topgold/4068417024/
•http://www.flickr.com/photos/birgerking/3145391821/
•http://www.flickr.com/photos/juhansonin/4734830821/