Sunday, January 2, 2011

What's Next

Post Styling

Masih sama kaya kemaren, Edit Gadget HTML/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..
<big id="judul"> Ini Adalah Sub-Judul </big>

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..
<p><span id="fl"> I</span>ni adalah "First Line" pada setiap Paragraph.. </p>

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 <img src="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 di htmldog.com atau yang lainnya.. Googling aja..

Thursday, December 30, 2010

post perdana

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 ke draft.blogger.com, login lagi.., isi formulir..,

Pas milih Template menurut gw yang 'Keren' sih Awesome 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..

<div id="propil">

  <img src="http://graph.facebook.com/whenTheyAre.going.todoSomeThing.Incredibly.Stupidz/picture/"/>

  <a href="http://bajaklaut-loncat.blogpot.com">Bjaklaut-Loncat</a>

</div>
dan hasil tampilannya jadi kaya gini..


Emang keliatannya kurang "Genah" gitu kan,, tapi itu sebabnya gw ngasih id="propil" di tag DIV diatas 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:
    <style type="text/css">
    #propil {
      float:right; 
      padding:1px 5px; 
      background:black url(http://i48.servimg.com/u/f48/11/68/31/08/a90bca10.gif) repeat fixed center center; 
      -moz-border-radius:5px;
      max-width:200px;
    }
    
    #propil img {
      float:left; 
      padding:0px 5px 0px 0px;
      background-color:transparent;
    }
    
    #propil a {
      font-weight:bold;
      color:yellow;
      font-family:Borg 9, Comic Sans MS, Futura XBlkIt BT, tahoma, arial;
    }
    #propil a:hover {
      color:skyblue;
    }
    </style>
    
  • Step4: Save
  • Step5: Lihat hasilnya lah... :P


To be continue.. (kayanya panjang nih urusan XD)
Indosat gak bia komen di blogger kalo gak pake proxy.. wkwk.. cucian XD