Ini caranya Membuat Blog Tampak Keren :P

Dengan modal koneksi lemot sama huruf 's' di keyboard yang macet :P gw coba bikin blog (di blogger) mulai dari suhu nol derajat celsius. Ditemani lagunya jastinbiber yang katanya norak "biarin ah" gw mulai garuk² keLapa..mau dengerin lagunya? cLick GW !

Okay,, gak usah banyak cucun, buat yang belom punya akun Google bisa daftar di google.com/accounts/NewAccount, tapi kalo udah punya tinggal masuk ke google.com/accounts/ServiceLogin aja.

Kalo udah login (kelar bikin akun, verifikasi lewat email, etc.),, masuk kedraft.blogger.com, login lagi.., isi formulir..,

Pas milih Template menurut gw yang 'Keren' sihAwesome Inc. by Tina Chen tapi terserah elo kan.. selera orang beda². Pilih Templatenya, click continue, and Your blog has been created!

Click "Start Blogging", terus bikin deh "Artikel" Blog perdana lo tuh.. (bukan blog namanya kalo gak ada isinya :D iya gak?). Yang penting dan jangan sampai lupa yaitu "Alamat Blog Elo", kalo kaya yang gw bikin di atas kan badpeoples-blog.blogspot.com tuh.., jangan kaya "seseorang", bikin Blog ko lupa alamatnya XD.., pas di tanya, "mana blognya?" *bengong* wkwkwkwkkkk....

Abis kelar nulis, Click "Publish Post" terus "View Post" deh..

Tips

Biar lebih bebas dalam nulis Postingan, "Lebih baik" elo pake setingan kaya gini:

Tujuannya:
• Biar elo jadi lebih bebas "nge-Layout" postingan lo pake tag HTML
• elo bisa lebih aman "misalnya" kalo mau nyisipin Javascript di postingan lo.

Contoh Misal Example: di postingan "Perdana" gw di badpeoples-blog.blogspot.com/2010/12/post-perdana.html gw nulis pake tag HTML kaya gini..

        Bjaklaut-Loncat  
 

dan hasil tampilannya jadi kaya gini.. Emang keliatannya kurang "Genah" gitu kan,, tapi itu sebabnya gw ngasih id="propil" di tag DIVdiatas biar nantinya kita bisa ngasih General CSS ke dia (ke id itu).

ps:
• maksud gw General CSS disini, satu CSS bisa buat semua "Postingan" dengan target id="propil" di dalamnya. (pokonya gitu lah.. XD )

General CSS

Add HTML/JavaScript Gadget:
• Step1
Masuk ke "Design"
• Step2
"Add Gadget" dimana aja terserah
• Step3
Pilih "HTML/JavaScript"
• Step4
Isi pake CSS ini:
• Step4: Save
• Step5: Lihat hasilnya lah... :P

---

Ganti Background Blog

Sebenernya udah ada fasilitas dari Blogger sih.. tapi kalo mau "nyeleneh" dikit boleh dong.. :P

Kemaren di atas kan udah di bahas soal bikin "General CSS" tuh yang pake "Gadget HTML/JavaScript", nah kita coba utak-atik lagi siapa tau bisa buat ganti "background" juga.

• Kita samperin Gadget-nya terus click "Edit"
• Coba kita tambahin CSS background kaya di bawah:

body { background:black url(http://images2.layoutsparks.com/1/213500/peaceful-fairy-blue-black.jpg) no-repeat fixed center center;    } 

Nambahinnya di sebelah mana aja yang penting masih ada di dalam tag

Sedikit penjelasan tentang CSS di atas,

• body {} nandain kalo bagian "tag body"lah yang mau di atur style-nya
• Property yang ada di dalam kurung
• background: => kita mau nyeting style bagian background dari tag body
• black => warna background (bisa juga #000)
• url(ALAMAT GAMBAR) => tau lah..
• no-repeat => pilihan lainnya repeat, repeat-x,repeat-y
• fixed => berarti gambarnya diem gak ikut turun naek pas di gulung. Kebalikannya scroll
• center center => Posisi. Lebih lengkapnya baca diw3schools.com/css/css_background.asp

---

Post Styling

Masih sama kaya kemaren, Edit GadgetHTML/JavaScript yang kemaren di isi CSS, tambahin beberapa CSS berikutnya..

---

Bikin style buat setiap "Sub-Judul" Post:

#judul {   font-size:20px;   font-weight:bold;   font-family:Square721 BT, Verdana;   text-transform:uppercase;   display:block;   clear:both; } 

Jadi setiap kali mau bikin "Sub-Judul" elo tinggal bikin "tag" kaya gini.. Ini Adalah Sub-Judul dan hasilnya jadi kaya gini.. Ini Adalah Sub-Judul

---

Bikin style buat setiap "First Line" Paragraph:

#fl {   font-size:20px;   font-weight:bold;   margin-left:30px;   font-family:English111 Presto BT, ParkAvenue BT; } 

Jadi setiap kali mau bikin "First Line" di Paragraph elo tinggal bikin "tag" kaya gini..

Ini adalah "First Line" pada setiap Paragraph..

dan hasilnya jadi kaya gini..

Ini adalah "First Line" pada setiap Paragraph..

---

Styling buat setiap "Gambar" yang ada di dalam Post:

#Blog1 img {   vertical-align:middle;   border:none;   background-color:transparent;   padding:1px 3px; } 

Setiap bikin "Gambar" di dalam Post elo tinggal pake "tag" kaya gini..

Text sebelum gambar http://i91.photobucket.com/albums/k305/TrashedLover/kitty-2.gif"/>Text setelah gambar.

dan hasilnya jadi kaya gini.. Text sebelum gambar Text setelah gambar.

Gak usah terlalu "terpaku" sama contoh CSS di atas, elo bisa berkreasi suka-suka elo kan? emang siapa yang ngelarang ?! :D buat referensi tentang CSS elo bisa baca-baca di CSS Beginner Tutorial dihtmldog.com atau yang lainnya.. Googling aja..