cantik

Blog:cara sehat mempercantik dan memperkaya blog

Blog cantik agar mudah dikenali dan berkesan bagi pembacanya

Oleh. Asep Moh. Muhsin & Tim Soluina

cantikDefinisi :

cantik = indah, enak dipandang

Dengar apa kata blogger tentang blog yang indah :

neli : yg "berisi“, yg sederhana, yg simple, bermanfaat juga

(http://www.keluarganugraha.net/blog)

rina : yang isinya beragam dan informatif dan warna cerah

(http://www.zidansyifa.blogspot.com/)

cantik

hali : blog yg cantik itu yg designnya keren

neli : yg "berisi“, yg sederhana, yg simple, bermanfaat juga

(http://www.keluarganugraha.net/blog)

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.

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 intended

for 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 artikel

bagus di internet, berbagi ilmu -> harus punya engine yg tepat

2. Diniatkan untuk konsumsi publik -> bersifat eksternal :

Penampilan, tata letak yang bersahabat, kemampuan interaksi

3. Sebagai perwakilan dari pribadi penulis :

Typhografy, warna, gaya bahasa, penulisan berdasarkan sudut pandang

penulisnya

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 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.

Cari berdasarkan yang paling banyak dukungan teknisnya ; forum, milis, free-template.

C.Fasilitas umpan balik

Fasilitas yang memungkinkan pengunjung menghubungi pemilik situs atau meninggalkan pesan pada blog.

Beberapa fasilitas umpan balik yang sering ditemui pada blog adalah: Comment (komentar) yang biasa ditemukan pada setiap postingan, Tagboard/Shoutbox atau Chatting Box yang menjadi sarana bagi pengunjung untuk meninggalkan pesan mereka.

D.sindikasi

Sindikasi merupakan sebuah teknologi dalam dunia cyber yang akan memberitahukan kepada pengunjung kapan suatu situs di-update.

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.

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

<HTML><HEAD><TITLE> New Document </TITLE></HEAD><BODY></BODY></HTML>

Contoh kode HTML dalam blog

HTML 2

Tautan/link : <a href=“URL”> Atribut : target,Memanggil gambar : <img src=“pathURL”> Atribut : width,height,borderFormat text : <b><del><i><p>Pindah baris : <br>List item : <ul>/<ol>, <li>Table : <table><tr><td></td></tr></table>

kode HTML dasar

HTML 3

Memasukan faviconGambar :Kode:<link rel="shortcut icon" href="http://favatar.myfavatar.com/agushery.ico"

type="image/x-icon" />

Kode HTML menampilkan logo blog pada URL bar

HTML 4Pasang kode banner milik sendiri agar mudah disalin blog lainKode:<textarea rows="3"><a href="http://edittag.blogspot.com" target="_blank"><img src="http://photos1.blogger.com/blogger/4452/1518/1600/bannerkecil.gif" width="80" height="15" border="0" alt="http://edittag.blogspot.com"></a></textarea>

HTML 5tableKode:

<table border=1 width=90><tr><td>

HTML 6bannerKode:<textarea rows="3"><a href="http://edittag.blogspot.com" target="_blank"><img src="http://photos1.blogger.com/blogger/4452/1518/1600/bannerkecil.gif" width="80" height="15" border="0" alt="http://edittag.blogspot.com"></a></textarea>

HTML 5Tautan Komen <h2 class="sidebar-title">Recent Comments

</h2> <ul>

<Blogger>

<BlogItemCommentsEnabled>

<BlogItemComments>

<li>

<$BlogCommentAuthor$> @

<a href="

<$BlogCommentPermalinkURL$>">

<$BlogCommentDateTime$>

</a>

</li>

</BlogItemComments>

</BlogItemCommentsEnabled>

</Blogger>

</ul>

HTML 6Memasukan icon YM di blogGambar :Kode:<a href="ymsgr:sendIM?YOURID">Kirim IM</a><a href="ymsgr:sendIM?YOURID"><img src="http://opi.yahoo.com/online?u=edittagagus&m=g&t=1"></a>

HTML 7Memasukan blogroll manualGambar :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>

CSSContoh kode CSS

<style type="text/css">a.more{display:none;}<MainOrArchivepage>span.fullpost {display:none;}span.fullpost + a.more{display:inline;}span.fullpost + div + a.more{display:inline;}</MainOrArchivePage></style>

CSS 1Ada 3 cara untuk menuliskan kode CSS dalam sebuah halaman.

1. Inline style,2. Document-level style, dan 3. External style sheet.

1. Inline style <div style="font:11px Verdana,Arial,Sans-serif;text-align:center"> contoh inline style </div>

CSS 22. document-level style,

<html> <head> <title>test</title> <style type="text/css"> p { color:#0000FF;font-weight:bold; } </style> </head> <body> <p>bagian judul</p> <p>tulisan ada disini</p> </body> </html>

CSS 33. External Style sheet

<head> <title>Style linked</title> <link rel=stylesheet type="text/css" href="http://www.kumquats.com/styles/gen_styles.css" /> </head> <body> <h1>I'm so bluuuuoooo!</h1> ... <h1> I am ba-loooooo, tooooo!<h1>

CSS 4

<head> <title>Imported style sheet</title> <style type="text/css"> @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")} </style> </head>

CSS 51. <div id="header"></div>2. <div class="dateheader"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> </div><div align="right">[ <a href="<$BlogURL$>">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

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

a.more{display:none;} <MainOrArchivepage> span.fullpost {display:none;} span.fullpost + a.more{display:inline;} span.fullpost + div + a.more{display:inline;} </MainOrArchivePage> <ItemPage> span.fullpost {display:inline;} </ItemPage>2. menambahkan sintak CSS berikut di bawah <$BlogItemBody$> : <a class="more" href="<$BlogItemPermalinkUrl$>"title="baca lebih lengkap..."> baca lengkapnya</a>

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

a.more{display:none;} <MainOrArchivepage> span.fullpost {display:none;} span.fullpost + a.more{display:inline;} span.fullpost + div + a.more{display:inline;} </MainOrArchivePage> <ItemPage> span.fullpost {display:inline;} </ItemPage>2. menambahkan sintak CSS berikut di bawah <$BlogItemBody$> : <a class="more" href="<$BlogItemPermalinkUrl$>"title="baca lebih lengkap..."> baca lengkapnya</a>

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<script language="Javascript"><!--// keterangan skrip disini..</script>

Javascript 1Contoh 1Prompt

<SCRIPT language="JavaScript">alert(":~*Pyu * Area Bebas mMuka Cemberut!Pyu~: ")</SCRIPT> <SCRIPT language="JavaScript">alert("Hayuuuu~~~ Yang Masih cemBeYu~t Cenyum Dunk! ^__^ ")</SCRIPT>

Javascript 2Contoh 1Header berganti\ganti


Javascript 3Contoh 1No right click

<script language=JavaScript> </script>

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

sindikasi

RSS (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 : menampilkan foto ke dalam blog, login dan bukahttp://www.flickr.com/badge_new.gne

flickr

http://edittag.blogspot.com/2006/07/web-display-flickr-photos-on-your.html

Tips bloggingGuna :Aktifkan komen utk anyoneBalas shoutBanner animasiPerhatikan 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 pencariTinggi header tidak setengah dari laman mukaJangan gunakan media suaraNavbar/iklan tetap dipasangPercantik header agar mendapat kesan berbedaGunakan template non-tableIlustrasi tidak melebihi lebar contentSaat menyimpan template pastikan semua kode disimpan secara sempurna

cantik

Economy & Finance