Blog:cara sehat mempercantik dan memperkaya blog oleh ... · PDF file... yg sederhana, yg...

Blog:cara sehat mempercantik dan memperkaya blogoleh : Agus Hery
Blog cantik agar mudah dikenali dan berkesan bagi pembacanya
http://edittag.blogspot.com/

cantikDefinisi :cantik = indah, enak dipandang
Dengar apa kata blogger tentang blog yang indah :
neli : yg "berisi, yg sederhana, ygsimple, bermanfaat juga(http://www.keluarganugraha.net/blog)
rina : yang isinya beragam daninformatif dan warna cerah(http://www.zidansyifa.blogspot.com/)

cantik
eka : blog yg cantik itu yg designnya keren
neli : yg "berisi, yg sederhana, ygsimple, bermanfaat juga(http://www.keluarganugraha.net/blog)

cantikBeda orang = beda persepsiBeda blogger = beda keinginan
Apakah perlu menyerap semua persepsi yang berbeda agar menemukanjatidiri blog yang sangat unik milik sendiri.

Blog cantik1?

Blog cantik2?

Karakteristik blog
Pengertian blog :Menurut www.bytowninternet.com/glossary Blog is short for weblog. A weblog is a journal (or newsletter) that is frequently updated and intendedfor general public consumption.Blogs generally represent the personality of the author or the Web site.

Point penting
1. Selalu diupdate : Tujuan punya blog : berbagi cerita, memindahkan tulisan pribadi, mengumpulkan artikelbagus di internet, berbagi ilmu -> harus punya engine yg tepat2. Diniatkan untuk konsumsi publik -> bersifat eksternal :Penampilan, tata letak yang bersahabat, kemampuan interaksi3. Sebagai perwakilan dari pribadi penulis :Typhografy, warna, gaya bahasa, penulisan berdasarkan sudut pandangpenulisnya

Perbandingan blog A

Perbandingan blog B

engine
Tips memilih blog :
A. pengalaman situsB. kemudahan mengubah tampilanC. fasilitas umpan balikD. sindikasi

A.Pengalaman situs
- Pilih gratisan atau berbayar- Pilih yang mudah mengakltifkan fungsi didalamnya- Sering bertanya ke blogger lain

B.Kemudahan mengubah tampilan
Bagi mereka yang paham dalam membuat situs, mengganti tampilansitus blog tidaklah menjadi suatu perkara yang rumit. Namun, bagaimana dengan mereka yang tidak memiliki pengalaman membuatsitus? Hal inilah yang kemudian mendorong penyedia blog gratis menyediakan template untuk situs blog anggotanya.
Cari berdasarkan yang paling banyak dukungan teknisnya ; forum, milis, free-template.

C.Fasilitas umpan balik
Fasilitas yang memungkinkan pengunjung menghubungi pemilik situsatau meninggalkan pesan pada blog.
Beberapa fasilitas umpan balik yang sering ditemui pada blogadalah: Comment (komentar) yang biasa ditemukan pada setiappostingan, Tagboard/Shoutbox atau Chatting Box yang menjadi sarana bagi pengunjung untuk meninggalkan pesanmereka.

D.sindikasi
Sindikasi merupakan sebuah teknologi dalam dunia cyber yangakan memberitahukan kepada pengunjung kapan suatu situsdi-update.
Saat ini banyak blog menawarkan teknologi RSS (Really Simple Syndication) sebagai salah satu alat sindikasi. Dengan menggunakanpiranti lunak yang dinamakan RSS, pengunjung tidak perlu susah-susahtiap hari mengunjungi blog favoritnya untuk mengetahui apakah ada
posting baru yang masuk. Mereka cukup memasangagregator RSS tersebut pada blog mereka.
Teknologi lain yang juga sering dimanfaatkan untuk sindikasiadalah e-mail. Dengan mendaftarkan diri pada blog, e-mail akan dikirim pada pengunjung tiap kali pemilik blog meng-update blognya.

Alur mesin blog
Blogger Engine
Laman admin
Laman Muka
Alur mesin blog

Konstruksi blog

Variable name

Ilmu yang perlu dipelajari
1. HTML : hypertext markup language
2. CSS : cascading style sheet
3. Javascript fundamental

HTML 1
New Document
Contoh kode HTML dalam blog

HTML 2
Tautan/link : Atribut : target,
Memanggil gambar : Atribut : width,height,border
Format text :
Pindah baris : List item : /, Table :
kode HTML dasar

HTML 3
Memasukan faviconGambar :Kode:
Kode HTML menampilkan logo blog pada URL bar

HTML 4Pasang kode banner milik sendiri agar mudah disalin blog lainKode:

HTML 5tableKode:

HTML 6bannerKode:

HTML 5Tautan Komen Recent Comments
@

HTML 6Memasukan icon YM di blogGambar :Kode:Kirim IM

HTML 7Memasukan blogroll manualGambar :Kode:
temen-temenku
abcdefghi

CSSContoh kode CSS
a.more{display:none;}
span.fullpost {display:none;}span.fullpost + a.more{display:inline;}span.fullpost + div + a.more{display:inline;}

CSS 1Ada 3 cara untuk menuliskan kode CSS dalamsebuah halaman.
1. Inline style,2. Document-level style, dan3. External style sheet.
1. Inline style
contoh inline style

CSS 22. document-level style,
test
p { color:#0000FF;font-weight:bold; }
bagian judul
tulisan ada disini

CSS 33. External Style sheet
Style linked
I'm so bluuuuoooo!... I am ba-loooooo, tooooo!

CSS 4
Imported style sheet
@import
url(http://www.kumquats.com/styles/gen_styles.css);@import
"http://www.kumquats.com/styles/spec_styles.css";body {background: url("backgrounds/marble.gif")}

CSS 51. 2. [ back home ]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
http://img381.imageshack.us/img381/8919/head1xr

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;
}

Contoh blog dgn css 1Satu : 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;}
}

Contoh blog dgn css 2Dua : abstraksiContoh : berita selengkapnyaKode : 1.sertakan sintak CSS berikut dalam style sheet
span.fullpost {display:inline;}
2. menambahkan sintak CSS berikut di bawah :
baca lengkapnya

Contoh blog dgn css 3Dua : template dgn CSS disembuyikanContoh : @links (http://www.dot.com/css.css);Kode : 1.sertakan sintak CSS berikut dalam style sheet
span.fullpost {display:inline;}
2. menambahkan sintak CSS berikut di bawah :
baca lengkapnya

Contoh blog dgn css 4Dua : background dengan fix propertiesKode :1. body {
background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat fixed;
2. body { background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat-y fixed;
3. body {background:url('http://photos1.blogger.com/blogger/1234/567/890/berbunga.jpg') repeat-x fixed;

Contoh blog dgn css 5Dua : menyembunyikan profileContoh :Kode :

javascript

Javascript 1Contoh 1Prompt
alert(":~*Pyu * Area BebasmMuka Cemberut!Pyu~: ") alert("Hayuuuu~~~ Yang MasihcemBeYu~t Cenyum Dunk! ^__^ ")

Javascript 2Contoh 1Header berganti\ganti

Javascript 3Contoh 1No right click

Color and GraphicsContoh 1
http://wellstyled.com/tools/colorscheme2/index-en.html

Fasilitas umpan balik
Comment (komentar) Tagboard/Shoutbox atau Chatting Box Guest Book Buku Tamu.
Penyelenggara shoutbox :-oggix-shoutmix-cbox

Fasilitas umpan balik
Contoh gambar

sindikasiRSS (Really Simple Syndication)Contoh :Penyelenggara :-google reader-feedostyle-bloglines

Pasang sindikasi-google reader

Tool blog
-counter-clock-flickr

counter1SitemeterGuna : menghitung jumlah pengunjung, harian, mingguanMengetahui log pengunjung, IP, lokasi,durasi, browser yang digunakan

flickrGuna : menam

Blog:cara sehat mempercantik dan memperkaya blog oleh ... · PDF file... yg sederhana, yg...

Documents

Transcript of Blog:cara sehat mempercantik dan memperkaya blog oleh ... · PDF file... yg sederhana, yg...