4/03/2013

Bagian dan Elemen Dasar Pada Template Blog


Jika ingin memodifikasi pada bagian-bagian tertentu pada template blog tentunya kita harus mengetahui bagian mana yang harus diubah dan disesuaikan. Jangan sampai ingin mengubah bagian footer, kita justru mengotak-atik bagian sidebar, hmmm apa jadinya nanti!!? Oleh karena itu, saya coba muat artikel dari www.gembong.web.id ini sebagai bahan rujukan bilamana suatu saat ingin mengubah elemen tertentu pada blog.  Bloleh jadi seperti "kamus".

Elemen-elemen yang dibahas disini nantinya belum tentu elemen yang harus ada disetiap template Blogger, tapi hanya beberapa elemen umum yang sering dipakai dalam template Blogger.

Global:
  • body {.....} : mengatur sifat umum dari template, jika elemen yang dibawahnya tidak didefinisikan, maka properti yang ada dibagian ini yang berlaku.
  • #outer-wrapper {.....} : Bagian awal dan terbesar dari template.  Didalam bagian ini berisi header-wrappercontent-wrapper, dan footer-wrapper
  • #content-wrapper {.....} : suatu bagian yang berisi sidebars dan main.
  • a {.....} :  mengatur properti dari tulisan yang mempunyai link.
  • a:visited {.....} : mengatur properti dari tulisan yang mempunyai link setelah dikunjungi.
  • a:hover {.....} mengatur properti dari tulisan yang mempunyai link disaat mouse ada diatas tulisan tersebut.
Karena semua kode harus ditulis didalam {.....} setelah judul elemen, maka untuk penjelasan berikutnya hanya ditulis judul elemennya saja.
 
Header:
  • #header-wrapper :  Bagian yang membungkus judul dan deskripsi blog/website (Blog Title dan Blog Description).
  • #header : Bagian yang ada didalam header-wrapper.
  • #header h1 : Perintah yang ada didalam bagian ini mengatur tampilan dan tata letak judul blog (Blog Title).
  • #header h1 a : Mengatur properti link di judul blog.  
  • #header .description : Mengatur properti dari deskripsi blog.
  • #header a img : Mengatur properti dari gambar yang ada didalam header.
 Main: 
  • #main-wrapper : bagian yang didalamnya terdiri atas Date HeaderBlog PostsCommentsFeed Link, dan setiap widget yang ditempatkan di atas atau bawah artikel (Blog Posts).
  • #main : bagian yang ada didalam main-wrapper.
  • #main .widget : mengatur properti dari semua widget yang ada didalam bagian main.
  • h2.date-header - mengatur properti dari Date Header (yang ada diatas Post Title).
  • .post - mengatur properti pada bagian Blog Posts.
  • .post h3 - mengatur properti dari judul artikel (Post Title).
  • .post-body p - mengatur properti dari body atau isi artikel (post).
  • .post ul - mengatur properti dari unordered list (daftar yang tidak bernomor).
  • .post ol - mengatur properti dari ordered list (daftar bernomor).
  • .post li - cmengatur properti dari daftar individu didalam unordered list atau ordered list.
  • a img - mengatur properti secara umum dari sebuah gambar (memacu pada link; dan gambar pada link itu sendiri).
 Sidebar:
  • sidebar-wrapper : bagian yang membungkus semua element dan isi yang ada didalam sidebar.
  • .sidebar : bagian yang ada didalam sidebar-wrapper.
  • #sidebar1 :  mengatur properti didalam sidebar1.
  • #sidebar2 : mengatur properti didalam sidebar2. Jika ingin properti yang ada didalam sidebar1 dansidebar2 sama, maka properti cukup diatur di .sidebar dan tidak perlu ditulis didalam #sidebar1 dan#sidebar2 lagi di kode CSS.
  • .sidebar .widget : mengatur properti semua widget (yang ditambahkan melalui Added Page Element) di sidebar.
  • #sidebar1 .widget : hanya mengatu widget di sidebar1.
  • .sidebar .BlogArchive : mengatur properti Blog Archive. Ini secara teknis merupakan widget disidebar juga, akan tetapi mengatur properti di sidebar widget tidak mengubah widget untuk  Blog Archive. Oleh sebab itu properti di .BlogArchive pengaturannya ditulis sendiri.
  • .sidebar h2 : mengatur properti judul (title/header) pada sidebar widget.
  • .sidebar #BlogArchive1 h2 : mengatur properti judul pada Blog Archive.
Miscellaneous:
Pada dasarnya, bagian  Profile (About Me) terletak didalam sidebar, tetapi dalam penjelasan ini diletakkan di  bagian Miscellaneous.
  • #Profile1 : mengatur properti dari About Me.
  • #Profile1 h2 : mengatur judul (title/header) pada About Me.
  • .profile-img a img : mengatur gambar didalam About Me.
  • .profile-textblock : mengatur deskripsi penulis pada About Me.
  • .profile-data : mengatur data penulis pada About Me.
  • .profile-datablock : mengatur keseluruhan data dalam About Me.
  • blockquote : mengatur teks dalam tanda kutip (quoted text) pada artikel.
  • code : mengatur tulisan dalam tags code di artikel.
Post-Footer:
  • .post-footer : mengatur semua properti didalam post-footer.
  • .post-footer-line : mengatur properti setiap baris baru di post-footer.
  • .post-footer a : mengatur properti link text didalam post-footer.
  • .post-footer .post-comment-link a : mengatur link di "comment" dalam post-footer.
  • #blog-pager : mengatur properti link pada tulisan "newer posts", "home", dan "older posts".
  • #blog-pager-newer-link : mengatur properti pada link "newer posts".
  • #blog-pager-older-link : mengatur properti pada link "older posts" link.
  • .feed-links : mengatur properti pada link "Subscribe to: Posts (Atom)".
Comment:
  • #comments : mengatur semua properti pada bagian comment.
  • #comments a : mengatur properti link didalam bagian comment.
  • #comments h4 : mengatur header dibagian comment.
  • .deleted-comment : mengatur properti untuk deleted comment.
  • .comment-author : mengatur properti untuk comment author.
  • .comment-body p : mengatur properti comment body.
  • #comments ul : mengatur  unordered list didalam bagian comment.
  • #comments li : mengatur daftar individu didalam comment.
Footer:
  • #footer-wrapper : bagian yang membungkus semua elemen dan isi didalam footer section.
  • #footer : bagian yang ada didalam  footer-wrapper.
  • #footer h2 : mengatur properti dari judul  (title/header) di footer.
  • #footer .widget : mengatur properti widget yang ada di footer.
  • .footer a : mengatur properti link di footer.
Dengan mengerti dan memahami bagian-bagian di atas, kita akan dapat dengan cepat menemukan kode dan mengubahnya untuk mengganti bagian-bagian dari template tertentu sesuai dengan selera, misalnya ingin mengganti huruf, warna tulisan, background, padding, dsb. Untuk mengubah bagian-bagian tersebut, yang dilakukan hanyalah memodifikasi kode yang ada didalam {.......} pada bagian yang ingin kita ubah saja.

1 comment:

  1. kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
    dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
    berikan 4 angka 4180 alhamdulillah ternyata itu benar2 tembus AKI.
    dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
    ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
    allah saya akan coba untuk membuka usaha sendiri demi mencukupi
    kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
    sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
    yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
    insya allah anda bisa seperti saya…menang togel 275
    juta, wassalam.


    dijamin 100% jebol saya sudah buktikan...sendiri....







    Apakah anda termasuk dalam kategori di bawah ini !!!!


    1"Dikejar-kejar hutang

    2"Selaluh kalah dalam bermain togel

    3"Barang berharga anda udah habis terjual Buat judi togel


    4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


    5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
    tapi tidak ada satupun yang berhasil..







    Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
    anda semua dengan Angka ritwal/GHOIB:
    butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
    100% jebol
    Apabila ada waktu
    silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




    atau klik langsung di KLIK DSINI BOCORAN TOGEL




    angka GHOIB: singapur 2D/3D/4D/



    angka GHOIB: hongkong 2D/3D/4D/



    angka GHOIB; malaysia



    angka GHOIB; toto magnum 4D/5D/6D/



    angka GHOIB; laos
















    kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
    dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
    berikan 4 angka 4180 alhamdulillah ternyata itu benar2 tembus AKI.
    dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
    ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
    allah saya akan coba untuk membuka usaha sendiri demi mencukupi
    kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
    sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
    yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
    insya allah anda bisa seperti saya…menang togel 275
    juta, wassalam.


    dijamin 100% jebol saya sudah buktikan...sendiri....







    Apakah anda termasuk dalam kategori di bawah ini !!!!


    1"Dikejar-kejar hutang

    2"Selaluh kalah dalam bermain togel

    3"Barang berharga anda udah habis terjual Buat judi togel


    4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


    5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
    tapi tidak ada satupun yang berhasil..







    Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
    anda semua dengan Angka ritwal/GHOIB:
    butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
    100% jebol
    Apabila ada waktu
    silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




    atau klik langsung di KLIK DSINI BOCORAN TOGEL




    angka GHOIB: singapur 2D/3D/4D/



    angka GHOIB: hongkong 2D/3D/4D/



    angka GHOIB; malaysia



    angka GHOIB; toto magnum 4D/5D/6D/



    angka GHOIB; laos

    ReplyDelete

Tolong tinggalkan sedikit komentar untuk koreksi blog ini.
Harap tidak memberikan komentar :
1. Sara dan pornografi
2. Spam Content (Konten Sampah)
3. Penghinaan dan Pelecehan
4. OOT (Out Of Topic)