perbedaan elemen css pada template blog

Dalam  mendesain sebuah template blog kita tidak asing lagi dengan yang namanya CSS dan HTML saya sendiri hoby dalam mendesain sebuah template blog walaupun hasil nya masih jelek dan sangat sederhana sekali maklum saya belajar edit template secara otodidak tanpa ada pendidikan formal.

Sekian lama saya  bergelut dengan editan template blog dan akhirnya saya dapati perbedaan yang sangat mencolok ( bagi saya pribadi ) setelah saya konver antara template yang gratisan dan template yang berbayar, ada perbedaan pada kerangka template, saya contohkan salah satu perbedaan nya:

1. di bawah ini elemen css yang menggunakan # ( pagar } trus nama elemen outer-wrapper sehingga menjadi #outer-wrapper dengan pemanggil html nya: id
#outer-wrapper {
margin:0 auto;
padding:0;
width:1000px;
}
dan pasangan html nya seperti dibawah ini:
<div id='outer-wrapper'>
bla...
bla...
</div>
2. Dan di bawah ini elemen css yang menggunakan . ( titik ) trus nama elemen outer-wrapper sehingga menjadi .outer-wrapper dengan pemanggil html nya: class dan id
.outer-wrapper {
margin:0 auto;
padding:0;
width:1000px;
}
dan pasangan html nya seperti dibawah ini:
<div class='site-outer' id='site-outer'>
bla...
bla...
</div>
Memang saya sudah bisa menerapkan dengan 2 metode di atas yang berlainan walau pun dengan kerja keras saya bisa membedakan ke 2 metode tersebut

Justru yang menjadi pertanyaan pribadi saya adalah apa kelebihan pada metode yang ke 2 tersebut. sehinga metode yang ke 2 tidak terdapat pada template gratisan ( walaupun ada jumlah nya sedikit ) bahkan para master blogger semua elemen dalam template nya mengunakan metode yang ke 2 bukan metode yang ke 1

Mungkin para master desain template blog ada yang mau memberikan sedikit ilmunya tentang kelebihan dari metode yang ke 2 atau siapa saja yang tahu kelebihan metode yang ke 2 bisa memberikan sedikit pencerahan nya lewat kolom komentar sebelum dan sesudah nya saya ucapkan terima kasih atas partisipasinya

22 komentar

  1. Wahh manteb nih tutor, ijin terapkan yahh kawan.

    BalasHapus
  2. wew keren, tapi ngak jadi PERTAMAX! ^:D
    - salam damai-

    BalasHapus
  3. mantap mas opivk detail sekali.. :)

    BalasHapus
  4. Sangat Bermanfaat Mas :-d Thanks Udah Di Share :D

    BalasHapus
  5. Selamat Hari Raya Idul Adha mas :)

    BalasHapus
  6. ini dari dulu juga jadi sebuah pertanyaan saya, bingung, apa sih maksudnya? padahal sama, saya lebih sering menggunakan metode pertama untuk melakukan editan, malah metode yang kedua jarang sekali saya pakai, masih ingat gak mas karim waktu template terjadi berantakan bebrapa waktu yang lalu? yang membuat berantakan ternyata terjadi pada metode pertama. mungkin itulah alasannya para desain berbayar menggunakan metode kedua, mungkin lebih komplik ya hehhe.. saya sebagai status newbie malah memberi pendapat, kan aneh hehehe :) :-bd

    BalasHapus
    Balasan
    1. kalau di lihat dari cara berkomentar di blog DTE mba leony ini bukan blogger newbie, template yang di pakai para master justru metode yang ke 2 maka nya sekarang saya ngikut cara mereka. terima kasih mba leiny sudah meluangkan waktu nya buat berdiskusi :-d

      Hapus
  7. justru itu mas, saya lagi mencari kelebihan dan kekurangan dari metode ke 1 dan metode ke 2 biar tidak salah arah dalam meng edit template di kemudian hari ;)

    BalasHapus
  8. ada pertanyaan mas taufik, kalo saya validkan template sekarang ke CSS3 malah ancur mas, bahkan blog-pager tidak masuk kearea outer-wrapper, apa itu akibat dari teknik yang pertama ya?

    BalasHapus
  9. satu lagi mas.. kok eror ya?

    Kesalahan: Missing required field "updated".
    Kesalahan: Missing required hCard "author".

    linknya disini mas taufik...
    http://www.google.com/webmasters/tools/richsnippets?q=bravoseo.blogspot.com

    BalasHapus
  10. 1 lagi ya... masih penasaran

    kok saya terapkan ada border2 gak jelas gitu mas, padalah saya cari tidak ada?
    http://topsmedia.blogspot.com/2013/07/kerangka-template-valid-schemaorg.html << dibagian postingannya

    BalasHapus
  11. 1. setelah di cek itu pengaruh bundle css, kalau masalah blog-pager tergantung meletekan nya di mana saja bisa

    2. selama ini saya pakai yang ini, ga ada masalah apa apa
    Posted by <span class='vcard author'><span class='fn'><data:post.author/></span></span> / <span class='updated'><data:post.timestamp/></span>

    3. http://topsmedia.blogspot.com/2013/07/kerangka-template-valid-schemaorg.html
    ini template yang masih kosong hanya kerangka saja

    BalasHapus
  12. masalah valid css, ini tergantung kita yang mau meng edit nya kalau bikin template yang sederhana tentu dan pastinya mudah untuk di validkan css nya, akan tetapi kalau bikin template yang full desain pastilah sulit untuk di validkan css paling cuma meminimalis kan yang error nya saja, buat membuktikan nya silahkan cek blognya para master desain yang blog nya full desain

    BalasHapus
  13. udah lama nih ga mampir.. makin keren aja blognya..

    mampir juga ya :D www.nandarious.com

    BalasHapus
  14. alo di ane gan bahasa css bukan seperti itu malah #outer wraper nya malah menjadi seperti ini :
    <div class='content'>
    <div class='content-fauxcolumns'>
    <div class='fauxcolumn-outer content-fauxcolumn-outer'>
    <div class='cap-top'>
    <div class='cap-left'/>
    <div class='cap-right'/>
    </div>
    <div class='fauxborder-left'>
    <div class='fauxborder-right'/>
    <div class='fauxcolumn-inner'>
    </div>
    </div>
    <div class='cap-bottom'>
    <div class='cap-left'/>
    <div class='cap-right'/>
    </div>
    </div>
    </div>

    <div class='content-outer'>
    <div class='content-cap-top cap-top'>
    <div class='cap-left'/>
    <div class='cap-right'/>
    </div>
    <div class='fauxborder-left content-fauxborder-left'>
    <div class='fauxborder-right content-fauxborder-right'/>
    <div class='content-inner'>

    BalasHapus

Terima kasih atas kunjungan nya dan Gunakan tag seperlunya

Tag kode pendek <i rel="code">KODE ANDA</i>
Tag kode panjang <i rel="pre">KODE PANJANG ANDA</i>
Tag gambar <i rel="image">URL GAMBAR</i>
Tag judul <b rel="h3">JUDUL ANDA DI SINI...</b>
Tag huruf tebal <b>TEKS ANDA DI SINI...</b>
Tag huruf miring <i>TEKS ANDA DI SINI...</i>

Konversi Code