Your SlideShare is downloading. ×
0
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Cantik
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cantik

2,418

Published on

Published in: Economy & Finance, Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,418
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Blog:cara sehat mempercantik dan memperkaya blog Blog cantik agar mudah dikenali dan berkesan bagi pembacanya Oleh. Asep Moh. Muhsin & Tim Soluina
  • 2. cantik <ul><ul><li>Definisi : </li></ul></ul><ul><ul><li>c antik = indah , enak dipandang </li></ul></ul><ul><ul><li>Dengar apa kata blogger t entang blog yang indah : </li></ul></ul><ul><ul><li>neli : yg &quot;berisi“, yg sederhana, yg simple, bermanfaat juga </li></ul></ul><ul><ul><li>(http://www.keluarganugraha.net/blog) </li></ul></ul><ul><ul><li>rina : yang isinya beragam dan informatif dan warna cerah </li></ul></ul><ul><ul><li>(http://www.zidansyifa.blogspot.com/) </li></ul></ul>
  • 3. cantik hali : blog yg cantik itu yg designnya keren <ul><ul><li>neli : yg &quot;berisi“, yg sederhana, yg simple, bermanfaat juga </li></ul></ul><ul><ul><li>(http://www.keluarganugraha.net/blog) </li></ul></ul>
  • 4. cantik Beda orang = beda persepsi Beda blogger = beda keinginan Apakah perlu menyerap semua persepsi yang berbeda agar menemukan jatidiri blog yang sangat unik milik sendiri.
  • 5. Blog cantik1?
  • 6. Blog cantik2?
  • 7. Karakteristik blog <ul><ul><li>P engertian blog : </li></ul></ul><ul><ul><li>Menurut www.bytowninternet.com/glossary </li></ul></ul><ul><ul><li>Blog is short for weblog. </li></ul></ul><ul><ul><li>A weblog is a journal (or newsletter) that is frequently updated and intended </li></ul></ul><ul><ul><li>for general public consumption. </li></ul></ul><ul><ul><li>Blogs generally represent the personality of the author or the Web site. </li></ul></ul>
  • 8. Point penting <ul><ul><li>Selalu diupdate : </li></ul></ul><ul><ul><li>Tujuan punya blog : </li></ul></ul><ul><ul><li>berbagi cerita, memindahkan tulisan pribadi, mengumpulkan artikel </li></ul></ul><ul><ul><li>bagus di internet, berbagi ilmu -> harus punya engine yg tepat </li></ul></ul><ul><ul><li>2. Diniatkan untuk konsumsi publik -> bersifat eksternal : </li></ul></ul><ul><ul><li>Penampilan, tata letak yang bersahabat, kemampuan interaksi </li></ul></ul><ul><ul><li>3. Sebagai perwakilan dari pribadi penulis : </li></ul></ul><ul><ul><li>Typhografy, warna, gaya bahasa, penulisan berdasarkan sudut pandang </li></ul></ul><ul><ul><li>penulisnya </li></ul></ul>
  • 9. Perbandingan blog A
  • 10. Perbandingan blog B
  • 11. engine <ul><ul><li>Tips memilih blog : </li></ul></ul><ul><ul><li>A. p engalaman situs </li></ul></ul><ul><ul><li>B. kemudahan mengubah tampilan </li></ul></ul><ul><ul><li>C. fasilitas umpan balik </li></ul></ul><ul><ul><li>D. sindikasi </li></ul></ul>
  • 12. A. Pengalaman situs - Pilih gratisan atau berbayar - Pilih yang mudah mengakltifkan fungsi didalamnya - Sering bertanya ke blogger lain
  • 13. B. Kemudahan mengubah tampilan <ul><ul><li>Bagi mereka yang paham dalam membuat situs, mengganti tampilan situs blog tidaklah menjadi suatu perkara yang rumit. Namun, bagaimana dengan mereka yang tidak memiliki pengalaman membuat situs? Hal inilah yang kemudian mendorong penyedia blog gratis menyediakan template untuk situs blog anggotanya. </li></ul></ul><ul><ul><li>Cari berdasarkan yang paling banyak dukungan teknisnya ; forum, milis, free-template. </li></ul></ul>
  • 14. C. Fasilitas umpan balik <ul><ul><li>F asilitas yang memungkinkan pengunjung menghubungi pemilik situs atau meninggalkan pesan pada blog. </li></ul></ul><ul><ul><ul><ul><li>Beberapa fasilitas umpan balik yang sering ditemui pada blog adalah: </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Comment (komentar) yang biasa ditemukan pada setiap postingan, Tagboard/Shoutbox atau Chatting Box yang menjadi sarana bagi pengunjung untuk meninggalkan pesan mereka . </li></ul></ul></ul></ul>
  • 15. D. sindikasi <ul><ul><li>Sindikasi merupakan sebuah teknologi dalam dunia cyber yang </li></ul></ul><ul><ul><li>akan memberitahukan kepada pengunjung kapan suatu situs </li></ul></ul><ul><ul><li>di-update. </li></ul></ul><ul><ul><li>Saat ini banyak blog menawarkan teknologi RSS (Really Simple Syndication) sebagai salah satu alat sindikasi. Dengan menggunakan piranti lunak yang dinamakan RSS, pengunjung tidak perlu susah-susah tiap hari mengunjungi blog favoritnya untuk mengetahui apakah ada posting baru yang masuk. Mereka cukup memasang agregator RSS tersebut pada blog mereka. </li></ul></ul><ul><ul><ul><ul><li>Teknologi lain yang juga sering dimanfaatkan untuk sindikasi adalah e-mail. Dengan mendaftarkan diri pada blog, e-mail akan dikirim pada pengunjung tiap kali pemilik blog meng-update b lognya. </li></ul></ul></ul></ul>
  • 16. Alur mesin blog Blogger Engine Laman admin Laman Muka Alur mesin blog
  • 17. Konstruksi blog
  • 18. Variable name
  • 19. Ilmu yang perlu dipelajari <ul><ul><li>1. HTML : hypertext markup language </li></ul></ul><ul><ul><li>2. CSS : cascading style sheet </li></ul></ul><ul><ul><li>3. Javascript fundamental </li></ul></ul>
  • 20. HTML 1 <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <BODY> </BODY> </HTML> Contoh kode HTML dalam blog
  • 21. HTML 2 Tautan/link : <a href=“URL”> Atribut : target, Memanggil gambar : <img src=“pathURL”> Atribut : width,height,border Format text : <b><del><i><p> Pindah baris : <br> List item : <ul>/<ol>, <li> Table : <table><tr><td></td></tr></table> kode HTML dasar
  • 22. HTML 3 <ul><ul><li>Memasukan favicon </li></ul></ul><ul><ul><li>Gambar : </li></ul></ul><ul><ul><li>Kode: </li></ul></ul><ul><ul><li><link rel=&quot;shortcut icon&quot; href=&quot;http://favatar.myfavatar.com/agushery.ico&quot; type=&quot;image/x-icon&quot; /> </li></ul></ul>Kode HTML menampilkan logo blog pada URL bar
  • 23. HTML 4 Pasang kode banner milik sendiri agar mudah disalin blog lain Kode: <textarea rows=&quot;3&quot;><a href=&quot;http://edittag.blogspot.com&quot; target=&quot;_blank&quot;><img src=&quot;http://photos1.blogger.com/blogger/4452/1518/1600/bannerkecil.gif&quot; width=&quot;80&quot; height=&quot;15&quot; border=&quot;0&quot; alt=&quot;http://edittag.blogspot.com&quot;></a></textarea>
  • 24. HTML 5 table Kode: <table border=1 width=90><tr><td>
  • 25. HTML 6 banner Kode: <textarea rows=&quot;3&quot;><a href=&quot;http://edittag.blogspot.com&quot; target=&quot;_blank&quot;><img src=&quot;http://photos1.blogger.com/blogger/4452/1518/1600/bannerkecil.gif&quot; width=&quot;80&quot; height=&quot;15&quot; border=&quot;0&quot; alt=&quot;http://edittag.blogspot.com&quot;></a></textarea>
  • 26. HTML 5 Tautan Komen <h2 class=&quot;sidebar-title&quot;>Recent Comments </h2> <ul> <Blogger> <BlogItemCommentsEnabled> <BlogItemComments> <li> <$BlogCommentAuthor$> @ <a href=&quot; <$BlogCommentPermalinkURL$>&quot;> <$BlogCommentDateTime$> </a> </li> </BlogItemComments> </BlogItemCommentsEnabled> </Blogger> </ul>
  • 27. HTML 6 Memasukan icon YM di blog Gambar : Kode: <a href=&quot;ymsgr:sendIM?YOURID&quot;>Kirim IM</a> <a href=&quot;ymsgr:sendIM?YOURID&quot;><img src=&quot;http://opi.yahoo.com/online?u=edittagagus&m=g&t=1&quot;></a>
  • 28. HTML 7 Memasukan blogroll manual Gambar : Kode: <p>temen-temenku</p> <ul> <li><a href=“http://abc.blogspot.com”>abc</a></li> <li><a href=“http://def.blogspot.com”>def</a></li> <li><a href=“http://ghi.blogspot.com”>ghi</a></li> </ul>
  • 29. CSS <ul><ul><ul><ul><ul><li>Contoh kode CSS </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li><style type=&quot;text/css&quot;> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>a.more{display:none;} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li><MainOrArchivepage> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>span.fullpost {display:none;} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>span.fullpost + a.more{display:inline;} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>span.fullpost + div + a.more{display:inline;} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li></MainOrArchivePage> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li></style> </li></ul></ul></ul></ul></ul>
  • 30. CSS 1 <ul><ul><ul><li>Ada 3 cara untuk menuliskan kode CSS dalam sebuah halaman. </li></ul></ul></ul><ul><ul><ul><li>1. Inline style, </li></ul></ul></ul><ul><ul><ul><li>2. D ocument-level style, dan </li></ul></ul></ul><ul><ul><ul><li>3. E xternal style sheet.   </li></ul></ul></ul><ul><ul><ul><li>1. Inline style </li></ul></ul></ul><ul><ul><ul><li>  </li></ul></ul></ul><ul><ul><ul><li><div style=&quot;font:11px Verdana,Arial,Sans-serif;text-align:center&quot;> </li></ul></ul></ul><ul><ul><ul><li>contoh inline style </li></ul></ul></ul><ul><ul><ul><li></div> </li></ul></ul></ul>
  • 31. CSS 2 <ul><ul><ul><ul><li>2. document-level style, </li></ul></ul></ul></ul><ul><ul><ul><ul><li><html> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><head> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><title>test</title> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><style type=&quot;text/css&quot;> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>p { color:#0000FF;font-weight:bold; } </li></ul></ul></ul></ul><ul><ul><ul><ul><li></style> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></head> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><body> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><p> bagian judul</p> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><p> tulisan ada disini </p> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></body> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></html> </li></ul></ul></ul></ul>
  • 32. CSS 3 <ul><ul><ul><ul><li>3. External Style sheet </li></ul></ul></ul></ul><ul><ul><ul><ul><li><head> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><title>Style linked</title> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><link rel=stylesheet type=&quot;text/css&quot; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>href=&quot;http://www.kumquats.com/styles/gen_styles.css&quot; /> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></head> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><body> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><h1>I'm so bluuuuoooo!</h1> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>... </li></ul></ul></ul></ul><ul><ul><ul><ul><li><h1> I am ba-loooooo, tooooo!<h1> </li></ul></ul></ul></ul>
  • 33. CSS 4 <ul><ul><ul><li><head> </li></ul></ul></ul><ul><ul><ul><li><title>Imported style sheet</title> </li></ul></ul></ul><ul><ul><ul><li><style type=&quot;text/css&quot;> </li></ul></ul></ul><ul><ul><ul><li>@import url(http://www.kumquats.com/styles/gen_styles.css); </li></ul></ul></ul><ul><ul><ul><li>@import &quot;http://www.kumquats.com/styles/spec_styles.css&quot;; </li></ul></ul></ul><ul><ul><ul><li>body {background: url(&quot;backgrounds/marble.gif&quot;)} </li></ul></ul></ul><ul><ul><ul><li></style> </li></ul></ul></ul><ul><ul><ul><li></head> </li></ul></ul></ul>
  • 34. CSS 5 1. <div id=&quot;header&quot;></div> 2. <div class=&quot;dateheader&quot;><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> </div> <div align=&quot;right&quot;>[ <a href=&quot;<$BlogURL$>&quot;>back home</a> ]</div> Keterangan: #header{ background-image: url( http://img381.imageshack.us/img381/8919/head1xr . jpg); height: 422px; background-repeat: no-repeat; background-position: center; background-color: #CCCCCC; border: 1px solid #FFFFFF; margin-bottom: 5px; } Contoh kode CSS di blog
  • 35. CSS 6 .dateheader { font-size: 10px; text-transform: lowercase; font-weight: bold; letter-spacing:.2em; background: transparent; text-align: right; color: White; font-family: Arial, Helvetica, sans-serif; margin-bottom:5px; margin-right: 5px; }
  • 36. Contoh blog dgn css 1 Satu : blog dgn scrollbar berwarna body{ background-color: #000; text-align: center; cursor: crosshair; scrollbar-arrow-color: #000000; scrollbar-track-color: #D0CECE; scrollbar-face-color: #FFD32A; scrollbar-highlight-color: #D0CECE; scrollbar-3dlight-color: #FFD32A; scrollbar-darkshadow-color: #D0CECE; scrollbar-shadow-color: #FFD32A;} }
  • 37. Contoh blog dgn css 2 Dua : abstraksi Contoh : berita selengkapnya Kode : <ul><ul><ul><ul><li>1.sertakan sintak CSS berikut dalam style sheet </li></ul></ul></ul></ul><ul><ul><ul><ul><li>a.more{display:none;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li><MainOrArchivepage> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>span.fullpost {display:none;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>span.fullpost + a.more{display:inline;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>span.fullpost + div + a.more{display:inline;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li></MainOrArchivePage> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><ItemPage> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>span.fullpost {display:inline;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li></ItemPage> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>2. menambahkan sintak CSS berikut di bawah <$BlogItemBody$> : </li></ul></ul></ul></ul><ul><ul><ul><ul><li><a class=&quot;more&quot; href=&quot;<$BlogItemPermalinkUrl$>&quot;title=&quot;baca lebih lengkap...&quot;> baca lengkapnya</a> </li></ul></ul></ul></ul>
  • 38. Contoh blog dgn css 3 Dua : template dgn CSS disembuyikan Contoh : @links (http://www.dot.com/css.css); Kode : <ul><ul><ul><ul><li>1.sertakan sintak CSS berikut dalam style sheet </li></ul></ul></ul></ul><ul><ul><ul><ul><li>a.more{display:none;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li><MainOrArchivepage> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>span.fullpost {display:none;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>span.fullpost + a.more{display:inline;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li>span.fullpost + div + a.more{display:inline;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li></MainOrArchivePage> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><ItemPage> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>span.fullpost {display:inline;} </li></ul></ul></ul></ul><ul><ul><ul><ul><li></ItemPage> </li></ul></ul></ul></ul><ul><ul><ul><ul><li>2. menambahkan sintak CSS berikut di bawah <$BlogItemBody$> : </li></ul></ul></ul></ul><ul><ul><ul><ul><li><a class=&quot;more&quot; href=&quot;<$BlogItemPermalinkUrl$>&quot;title=&quot;baca lebih lengkap...&quot;> baca lengkapnya</a> </li></ul></ul></ul></ul>
  • 39. Contoh blog dgn css 4 Dua : background dengan fix properties Kode : <ul><li>body { background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat fixed; </li></ul><ul><li>body { background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat-y fixed; </li></ul><ul><li>body {background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat-x fixed; </li></ul>
  • 40. Contoh blog dgn css 5 Dua : menyembunyikan profile Contoh : Kode : <!-- Begin #profile-container --> <!-- <$BlogMemberProfile$> --> <!-- End #profile -->
  • 41. javascript <script language=&quot;Javascript&quot;> <!-- // keterangan skrip disini .. </script> <!-- Begin #profile-container --> <!-- <$BlogMemberProfile$> --> <!-- End #profile -->
  • 42. Javascript 1 Contoh 1 Prompt <SCRIPT language=&quot;JavaScript&quot;>alert(&quot;:~*Pyu * Area Bebas mMuka Cemberut!Pyu~: &quot;)</SCRIPT> <SCRIPT language=&quot;JavaScript&quot;>alert(&quot;Hayuuuu~~~ Yang Masih cemBeYu~t Cenyum Dunk! ^__^ &quot;)</SCRIPT>
  • 43. Javascript 2 Contoh 1 Header bergantiganti <!-- Begin #profile-container --> <!-- <$BlogMemberProfile$> --> <!-- End #profile -->
  • 44. Javascript 3 Contoh 1 No right click <script language=JavaScript> <!-- var message=&quot;bright eyes&quot;; function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function(&quot;return false&quot;) // --> </script>
  • 45. Color and Graphics Contoh 1 http://wellstyled.com/tools/colorscheme2/index-en.html
  • 46. Fasilitas umpan balik Comment (komentar) Tagboard/Shoutbox atau Chatting Box Guest Book Buku Tamu. Penyelenggara shoutbox : -oggix -shoutmix -cbox
  • 47. Fasilitas umpan balik Contoh gambar
  • 48. sindikasi RSS (Really Simple Syndication) Contoh : Penyelenggara : -google reader -feedostyle -bloglines
  • 49. Pasang sindikasi -google reader
  • 50. Tool blog -counter -clock -flickr
  • 51. counter1 Sitemeter Guna : menghitung jumlah pengunjung, harian, mingguan Mengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan
  • 52. counter2 Sitemeter Guna : menghitung jumlah pengunjung, harian, mingguan Mengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan
  • 53. counter3 Sitemeter Guna : menghitung jumlah pengunjung, harian, mingguan Mengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan
  • 54. counter4 Sitemeter Guna : menghitung jumlah pengunjung, harian, mingguan Mengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan
  • 55. counter5 Sitemeter Guna : menghitung jumlah pengunjung, harian, mingguan Mengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan
  • 56. counter6 Sitemeter Guna : menghitung jumlah pengunjung, harian, mingguan Mengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan
  • 57. counter7 Sitemeter Guna : menghitung jumlah pengunjung, harian, mingguan Mengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan
  • 58. counter8 Sitemeter Guna : menghitung jumlah pengunjung, harian, mingguan Mengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan
  • 59. flickr Guna : menampilkan foto ke dalam blog, login dan buka http://www.flickr.com/badge_new.gne
  • 60. flickr http://edittag.blogspot.com/2006/07/web-display-flickr-photos-on-your.html
  • 61. Tips blogging Guna : Aktifkan komen utk anyone Balas shout Banner animasi Perhatikan berat file blog keseluruhan ( ukuran file dibawah 30K membutuhkan waktu 8 detik dengan koneksi 56K ) Cek di http://www.websiteoptimization.com/services/analyze/ Cek posisi blog di mesin pencari Tinggi header tidak setengah dari laman muka Jangan gunakan media suara Navbar/iklan tetap dipasang Percantik header agar mendapat kesan berbeda Gunakan template non-table Ilustrasi tidak melebihi lebar content Saat menyimpan template pastikan semua kode disimpan secara sempurna

×