BLOG THEME<br />MustamarNatsir | www.mustamar.com <br />
MustamarNatsir<br />http://www.mustamar.com<br />ask@mustamar.com<br />@mustamar<br />
BLOG<br />CMS<br />BACKEND<br />FRONTEND<br />PRIVATE<br />PUBLIC<br />THEME<br />
Apaitu BLOG THEME?<br />
Blog Theme<br />Blog Theme adalahsekumpulan file-file pemrograman, yang dapatdiaksesoleh user (pengunjung blog) lewatjalur...
Anatomi Theme<br />Header Area<br />Navigation Area<br />Main Content Area<br />Pendukung (Sidebar, Widget, dll.)<br />Ima...
Memilih Theme<br />
Memilih Theme<br />Faktor yang harusdipikirkan:<br />Pemilik Blog (kamu?)<br />Pembaca Blog<br />Sistem<br />Koneksi inter...
PanduanMemilih Theme<br />Theme MengambarkanTopik& Target.<br />Image: courtesy of perezhilton.com & sunghajung.com<br />
PanduanMemilih Theme<br />Branding Area.<br />Image: courtesy of creativedisc.com<br />
PanduanMemilih Theme<br />Warnadan Layout.<br />Image: courtesy of creativedisc.com and problogger.net<br />
PanduanMemilih Theme<br />NavigasiBaik.<br />Image: courtesy of creativedisc.com<br />
PanduanMemilih Theme<br />Konten blog JELAS<br />Image: courtesy of creativedisc.com<br />
PanduanMemilih Theme<br />Posisi & JumlahElemenPendukung, optimal dandapatbenar-benarmendukungfungsi blog.<br />Image: cou...
PanduanMemilih Theme<br />Mendukungfungsi yang adadi editor postingan.<br />
PanduanMemilih Theme<br />ElemenHalaman OK<br />Heading (H1, H2, H3, H4, dst.)<br />Listing (ordered & unordered)<br />Par...
PanduanMemilih Theme<br />FiturKomentar OK<br />MustamarNatsir<br />ask@mustamar.com<br />http://www.mustamar.com<br />Hi,...
PanduanMemilih Theme<br />Author Page & Info<br />Di tiappostingan<br />Di halaman author<br />Avatar?<br />Profil?<br />T...
PanduanMemilih Theme<br />Posisiiklan:<br />Tidakmengganggukonten<br />Tidakmengganggumata<br />Tidakmengganggu layout sec...
PanduanMemilih Theme<br />System Friendly<br />Koneksi internet<br />Device yang digunakan (PC? Mobile? Ukuran Monitor Sec...
BagaimanaMendapatkan Theme?<br />
Mendapatkan Theme<br />Pakai yang GRATISAN<br />Pakai yang BERBAYAR<br />BikinSendiri!<br />
Theme Gratisan<br />AturanPakai:<br />Biasanyadilarangmenghilangkan author link<br />Biasanyadilaranguntukdijualbelikan<br...
Theme Gratisan<br />Tempatmendapatkannya:<br /><ul><li>WordPress: </li></ul>http://www.wordpress.org/extend/themes/<br /><...
Theme Berbayar<br />AturanPakai:<br />Penggunaanbiasanyatergantunglisensinya.<br />Developer & community support.<br />Ter...
Theme BuatanSendiri<br />Yang diperlukan:<br />Menguasai HTML dan CSS dasar.<br />Menguasai platform blogmu, danpemrograma...
Theme BuatanSendiri<br />Mulainyadarimana?<br />Kuasai HTML dan CSS. http://www.w3schools.com<br />Menguasai platform blog...
Theme BuatanSendiri<br />ProsesPembuatan Theme<br />Tentukantopik theme blog yang akandibuat<br />Membuatsketsa layout & k...
Theme sudahada.PakainyaGimana?<br />
Installasi Theme<br />Blogger/Blogspot:<br />Login diblogmu (www.blogger.com )<br />Pilih link menu “Design” pada section ...
Installasi Theme<br />
Installasi Theme<br />Blogger/Blogspot:<br />Template Designer  (Design >> Template Designer) jugabisadigunakanuntukmemper...
Installasi Theme<br />WordPress: (http://www.wordpress.com) <br />Login diblogmu<br />Pilih menu Appearance >> Themes<br /...
Installasi Theme<br />WordPress (seft hosted):<br />Di menu Appearance >> Themes, pilih tab “Install Themes”<br />Gunakan ...
Download materiinidi:<br />www.mustamar.com<br />
Adapertanyaan?<br />MustamarNatsir<br />http://www.mustamar.com<br />ask@mustamar.com<br />@mustamar<br />Fyuh… Akhirnya…<...
Upcoming SlideShare
Loading in...5
×

Theme idbloglicious-makassar

1,983

Published on

Materi presentasi materi theme di IdBloglicious Makassar, 22 April 2011. Dibawakan oleh Mustamar Natsir

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,983
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
81
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Theme idbloglicious-makassar

  1. 1. BLOG THEME<br />MustamarNatsir | www.mustamar.com <br />
  2. 2. MustamarNatsir<br />http://www.mustamar.com<br />ask@mustamar.com<br />@mustamar<br />
  3. 3. BLOG<br />CMS<br />BACKEND<br />FRONTEND<br />PRIVATE<br />PUBLIC<br />THEME<br />
  4. 4. Apaitu BLOG THEME?<br />
  5. 5. Blog Theme<br />Blog Theme adalahsekumpulan file-file pemrograman, yang dapatdiaksesoleh user (pengunjung blog) lewatjalur frontend, dantugasnyamerepresentasikankonten blog. <br />Image: courtesy of creativedisc.com<br />
  6. 6. Anatomi Theme<br />Header Area<br />Navigation Area<br />Main Content Area<br />Pendukung (Sidebar, Widget, dll.)<br />Image: courtesy of creativedisc.com<br />
  7. 7. Memilih Theme<br />
  8. 8. Memilih Theme<br />Faktor yang harusdipikirkan:<br />Pemilik Blog (kamu?)<br />Pembaca Blog<br />Sistem<br />Koneksi internet<br />Search Engine<br />Device >> PC? Mobile?<br />
  9. 9. PanduanMemilih Theme<br />Theme MengambarkanTopik& Target.<br />Image: courtesy of perezhilton.com & sunghajung.com<br />
  10. 10. PanduanMemilih Theme<br />Branding Area.<br />Image: courtesy of creativedisc.com<br />
  11. 11. PanduanMemilih Theme<br />Warnadan Layout.<br />Image: courtesy of creativedisc.com and problogger.net<br />
  12. 12. PanduanMemilih Theme<br />NavigasiBaik.<br />Image: courtesy of creativedisc.com<br />
  13. 13. PanduanMemilih Theme<br />Konten blog JELAS<br />Image: courtesy of creativedisc.com<br />
  14. 14. PanduanMemilih Theme<br />Posisi & JumlahElemenPendukung, optimal dandapatbenar-benarmendukungfungsi blog.<br />Image: courtesy of creativedisc.com<br />
  15. 15. PanduanMemilih Theme<br />Mendukungfungsi yang adadi editor postingan.<br />
  16. 16. PanduanMemilih Theme<br />ElemenHalaman OK<br />Heading (H1, H2, H3, H4, dst.)<br />Listing (ordered & unordered)<br />Paragraph>> Alignment.<br />
  17. 17. PanduanMemilih Theme<br />FiturKomentar OK<br />MustamarNatsir<br />ask@mustamar.com<br />http://www.mustamar.com<br />Hi, kenalan dong. SayaMustamar, blogger paling keren se-Makassar. SUMPAH!!!<br />Image: courtesy of creativedisc.com<br />
  18. 18. PanduanMemilih Theme<br />Author Page & Info<br />Di tiappostingan<br />Di halaman author<br />Avatar?<br />Profil?<br />Tulisandari author<br />Image: courtesy of problogger.net & mashable.com<br />
  19. 19. PanduanMemilih Theme<br />Posisiiklan:<br />Tidakmengganggukonten<br />Tidakmengganggumata<br />Tidakmengganggu layout secarakeseluruhan<br />Posisiiklantetappunyanilaitinggi<br />
  20. 20.
  21. 21. PanduanMemilih Theme<br />System Friendly<br />Koneksi internet<br />Device yang digunakan (PC? Mobile? Ukuran Monitor SecaraUmum?)<br />Search Engine Friendly<br />
  22. 22. BagaimanaMendapatkan Theme?<br />
  23. 23. Mendapatkan Theme<br />Pakai yang GRATISAN<br />Pakai yang BERBAYAR<br />BikinSendiri!<br />
  24. 24. Theme Gratisan<br />AturanPakai:<br />Biasanyadilarangmenghilangkan author link<br />Biasanyadilaranguntukdijualbelikan<br />Biasanyadilaranguntukdipakaimencarinafkah<br />Tidakadagaransi!<br />Community support.<br />
  25. 25. Theme Gratisan<br />Tempatmendapatkannya:<br /><ul><li>WordPress: </li></ul>http://www.wordpress.org/extend/themes/<br /><ul><li>Blogger: </li></ul>http://www.btemplates.com/<br />www.bloggerthemes.net<br />
  26. 26. Theme Berbayar<br />AturanPakai:<br />Penggunaanbiasanyatergantunglisensinya.<br />Developer & community support.<br />TersediaGaransi<br />
  27. 27. Theme BuatanSendiri<br />Yang diperlukan:<br />Menguasai HTML dan CSS dasar.<br />Menguasai platform blogmu, danpemrogramannya. (PHP untukWordPress, XML untuk Blogger, dll.)<br />Punyajiwasenisecukupnya<br />Punyapemahamanmengenai layout<br />Software pendukung (text editor, image editor, local server, dll.)<br />
  28. 28. Theme BuatanSendiri<br />Mulainyadarimana?<br />Kuasai HTML dan CSS. http://www.w3schools.com<br />Menguasai platform blogmu. http://codex.wordpress.org/http://www.google.com/support/blogger/?hl=enhttp://www.google.com/support/blogger/bin/answer.py?hl=en&answer=176245<br />Pahami layout. <br />Mulailahdengan yang sederhana, ataumencontoh theme yang sudahada.<br />Manfaatkan internet danbergaul forum komunitas theme designer.<br />Contoh tutorial: http://themetation.com/2008/07/14/how-to-create-wordpress-themes-from-scratch-part-1/<br />
  29. 29. Theme BuatanSendiri<br />ProsesPembuatan Theme<br />Tentukantopik theme blog yang akandibuat<br />Membuatsketsa layout & konsep<br />Sketsa –> Digital Layout (image processing)<br />Image –> HTML Template + CSS (slicing)<br />Sisipkankode-kode yang dibutuhkanoleh platform blog kamu<br />Test Theme (demo)<br />Perbaikan<br />Test lagi (demo lagi)<br />Theme jadi<br />Install theme<br />
  30. 30. Theme sudahada.PakainyaGimana?<br />
  31. 31. Installasi Theme<br />Blogger/Blogspot:<br />Login diblogmu (www.blogger.com )<br />Pilih link menu “Design” pada section blog yang maudigantithemenya.<br />Pilih sub menu “Edit HTML”<br />Browse filenya (darikomputer), lalu upload, atau Copy – Paste kode XML, ke editor yang disediakan,<br />Preview, untukmelihattampilan,<br />Klik “Save Template”<br />
  32. 32. Installasi Theme<br />
  33. 33. Installasi Theme<br />Blogger/Blogspot:<br />Template Designer (Design >> Template Designer) jugabisadigunakanuntukmempermudahdesain & customize theme.<br />
  34. 34. Installasi Theme<br />WordPress: (http://www.wordpress.com) <br />Login diblogmu<br />Pilih menu Appearance >> Themes<br />Aktifkan theme yang diinginkan.<br />
  35. 35. Installasi Theme<br />WordPress (seft hosted):<br />Di menu Appearance >> Themes, pilih tab “Install Themes”<br />Gunakan Search Bar untukmencari theme diWordPress Theme Directory<br />Ataugunakan “Feature Filter” untukmencari theme berdasarkanfitur<br />Pilih link menu “Upload” untuk theme hasildownloaddataubuatansendiri.<br />
  36. 36. Download materiinidi:<br />www.mustamar.com<br />
  37. 37. Adapertanyaan?<br />MustamarNatsir<br />http://www.mustamar.com<br />ask@mustamar.com<br />@mustamar<br />Fyuh… Akhirnya…<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×