Seputar Template Editing - Bicara soal Blog , jujur hal yang paling saya minati adalah bagian template dan desain . Ya , basic saya memang di bagian itu sih sebenarnya ... karena memang basic saya tuh orang yang suka seni . Yakni seni ngoprek dan ngerusak .. hehe becanda . Saya tuh suka ngegambar , dan jika pengin lihat beberapa koleksi saya silahkan lihat beberapa kerjaan saya di album photo facebook .

Kembali ke masalah template . Di awal saya gabung di blogger itu sebenarnya karena saya tertarik untuk mendesain website , dimulai dengan belajar mendesain blog . Dan sebagai newbie tulen tentu hal yang dilakukan pertama kali adalah mencari tempalte dan mulai mencari tutorial tutorial dari para master untuk mengedit beberapa bagiannya , ya semua itu biar lebih keren mungkin . Dan faktanya saya banyak sekali melakukan banyak sekali kesalahan .

Setiap kali nemu tutor saya coba , dan selalu error .Semakin sering dapet dan praktekin tutorial semakin banyak juga errornya . Ya semua itu karena saya sama sekali gak tau bagian bagian pada template .
Seiring berjalannya waktu barulah saya mulai mengenal apa itu Css , HTML , JavaScript , jQuery dan Php . Dan anehnya hingga setahun ini saya baru ngerti sama Css dan HTML . Dan itu membuat saya jadi Cloner beberapa waktu kemarin haha . Malah sesat endingnya .

Soal Template Editing
Saya pikir kesalahan mengedit template yang saya alami itu tidak mutlak dialami oleh saya sendiri . Semua blogger baru pasti pernah mengalaminya , terbukti banyak sekali pertanyaan pada setiap komentar di penyedia tutorial . Dan begitupun yang dialami beberapa teman saya yang akhirnya berhenti ngeblog karena saking bingungnya sama urusan Script .

Script
Script template dan pengkodean inilah yang membuat saya bertahan dan terus berjuang ngeblog hinga saat ini . Karena itu begitu menarik buat saya . Dan saya sampai akhirnya berhenti nggambar karena menekuni dunia blogging ini yang penuh dengan script .
Banyak orang yang akhirnya berhenti ngeblog gara gara stuck dibagian script yang membingungkan . Jika gak paham dan gak mau mahamin .

Yah setidaknya saya sekarang ini sudah mulai paham tentang Css dan HTML , meskipun belum paham dengan JavaScript , mungkin kedepannya bakal memperdalam itu . Dengan pengetahuan yagn baru sekedar itu tapi saya malah yakin bisa bikin template sendiri . haha gaya , cuman masih malas karena gak punya program dan juga gakpunya banyak waktu . meskipun pada awalnya memang saya minat untuk mendesain .

Mengenai Struktur Template
Sejauh ini sudah ada beberapa orang yang minta bantuan saya memecahkan masalah dalam kesalahan template dan secara kebetulan mungkin saya berhasil mengatasi Error itu .
Cara yang saya gunakan sebenarnya cara yang penuh dengan eksperimental dengan dasar anggapan bahwa saya gak bakal mati atau cedera gara-gara template rusak . Toh masih ada template original yang bisa di upload ulang .

Secara simpel mengenai Struktur Template saya menggolongkan beberapa bagian utama dan sub yang menyusun tempalte menjadi halaman Blog .

Bagian Bagian template yang saya pahami :

  1. body
  2. header
  3. main-wrapper
  4. wrapper-inner
  5. casing
  6. content
  7. sidebar
  8. footer


Setiap template itu berbeda penamaan setiap elementnya tergantung dari Mood para pembuat template ( mungkin ) . Tapi aslinya sama saja .

Itu bagian paling mendasar menurut saya , entahlah gimana menurut para master template .

Saya jabarkan sedikit untuk para newbie mengenai bagian bagian diatas .
BODY
Body merupakan halaman keseluruhan website . Ini adalah background yang letaknya paling belakang . semua bagian terbungkus oleh bagian ini .

HEADER
Adalah bagian yang membungkus kepala halaman . Untuk bagian ini masing masing template berbeda , namun pada dasarnya sama , tergantung dari desain yang ingin ditampilkan .

MAIN WRAPPER
Untuk bagian satu ini , ini adalah bagian yang membungkus konten dan juga sidebar . Atau bisa dibilang background dari bagian konten blog yang berisi materi posting dan juga konten-konten lainnya .

WRAPPER INNER
Wrapper inner ini hanya penamaan saja , tidak semua template memiliki bagian ini . Fungsinya hanyalah mengatur posisi bagian konten . Untuk template wordpress biasanya menggunakan nama Container .

CASING
Casing dan WRAPPER INNER ini sama saja , hanya beda nama dan beda cerita tapi maksudnya sama saja . Hanya saja dengan penamaan Casing untuk INNER WRAPPER menurut saya lebih memudahkan pengenalan dan pemahaman template .

CONTENT
Content ini adalah bagia utama yang berisi segala materi yang akandisajikan , mulai dari post hingga komentar . Di dalam Content ini kita akan menemukan banyak sekali script di dalam template yang membingungkan . Tapi kalau dipahami , sepertinya tidak terlalu membingungkan .

SIDEBAR
Sidebar adalah bagian sisi dari sebauh halaman blog yang bsia berisi materi materi pendukung misal popular post , artikel terbaru , lebel ataupun banner . Yang ada di bagian ini hanyalah widget yang bisa di customisasi melalui halaman edit tata letak ( Layout ) atau bisa juga melalui mode Edit HTML template .

FOOTER
Footer adalah bagian kaki dari halaman Blog yang bisa di isi dengan konten apapun semau kita .
Pada umumnya di bagia footer ini ada beberapa widget , lumrahnya ada 4 kolom widget yang bisa diisi dengan berbagai konten . Dan dibagian paling bawah ada link Credit yang berisi keterangn si pembuat Template .

Dengan mengetahui bagian bagian paling mendasar penyusun halaman web ini kita jadi lebih mudah untuk menemukan hal apa yang akan kita edit di masing masing bagian tersebut .

Misal jika kita ingin mengedit bagian atas di halaman blog , maka bagian Header yang harus kita urus .
Mulai dari Css , HTML hingga ke bagian JavaSriptnya . Untuk mengedit konten yang terdapat pada bagian post maka bagian CONTENT yang perlu kita ubek ubek .

ELEMEN FEATURED
Biasanya dibeberapa template blog dilengkapi dengan berbagai macam fitur , dan paling sering ditemui adalah fitur Slider . Sering sekali saya menemukan orang kebingungan untuk mengedit bagian ini pada template , karena bingung dimana letaknya dan apa namanya serta apa yang harus diedit .

Sebenarnya ini mudah saja . Hal yang perlu diperhatikan adalah pada bagian WRAPPER . Letaknya ada dibawah Header dan diatas Casing .

Cara Mudah Mengedit Template
Sering orang kerepotan untuk menemukan bagian yang harus di edit karena tidak memiliki pengetahuan tentang HTML dan struktur template yang digunakan . Tapi disini saya ingin memberitahukan untuk anda yang benar benar baru dalam dunia Blogger untuk lebih mudah mengedit template .

Masih bicara soal Featured Content yang biasanya berupa Slider image dibawah header .
Untuk mengedit bagian ini yang perlu kita lakukan itu sebenarnya sederhana sekali .

Lihat pada halaman blog , lihat kalimat yang tertulis di halaman tersebut , dalam hal ini yang terdapat di bagian Slider .
Contoh liaht gambar :

Yang perlu kita lakukan adalah mencari kata kata tersebut di dalam Edit HTML area dengan mengetikan kata tersebut . Maka nanti akan ketemu semuanya seperti gambar dibawah ini

Lalu edit saja bagian yang ingin di ganti .
Hal ini tidak hanya berlaku untuk Slider saja , melainkan semua konten yang tampil di halaman blog kita . Hal inisebenarnya cara yang paling simpel tapi jarang yang memakainya dan malah dilupakan begitu saja .
Banyak kasus orang kerepotan dalam pengeditan mudah ini dan malah milih buat bermumet ria .


Css Editing
Untuk mengedit warna , bentuk dan ukuran maka yang harus kita lakukan adalah dengan mengedit bagian Css nya . Tapi tidak jarang juga yang kerepotan untuk menemukan kode Css yang mana yang harus diedit .

Sebenarnya cara ini juga sangatlah mudah untuk ukuran saya yang masih Newbie dan otodidak .
langkah yang kita lakukan adalah dengan cara yang sama seperti tadi . yaitu dengan mencari kata yang tampil di bagian template .

Misal kita ingin mengedit menu pada blog kita .
Pada template hasil download yang sudah terdapat Menu , umumnya menu itu sudah bernama , maka cari saja kata itu di template Edit HTML .

Maka kita akan menemukan misalnya begini


Pola nya begini :

<div class='menu'>
  <a href='/publishers'>Publishers &amp; Advertisers</a>
  <a href='/networks'>Ad Networks &amp; Agencies</a>
  <a href='/features_overview'>Solutions</a>
  <a href='/services'>Services</a>
</div>
Bagaiaman menemukan Css nya ?
Perlu diperhatikan 2 hal . Di dalam Css dan HTML ada yang menggunakan pola Id misal <div id='menu'> dan ada juga yang mengunakan class <div class='menu'> .
Nah bedanya disini adalah terletak pada Css nya . Jika Id maka Css nya menggunakan #menu , dan jika class maka Css menggunakan .menu .

Karena diatas polanya mengunakan class , maka yang kita cari adalah .menu .

Ketikan kata .menu pada pencarian di template . Maka kan kita temukan banyak sekali kode seperti dibawah ini :

.menu {
    float: right;
}
.menu a, .menu a.active {
    display: block;
    color: #054b8a;
    text-shadow: 1px 1px 1px #fff;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #dfe3e9 url("http://wac.a164.edgecastcdn.net/80A164/static/images/buttons_sprite.png") repeat-x 0 -887px;
    line-height: 22px;
    font-size: 17px;
    text-decoration: none;
    float: left;
    margin-left: 4px;
    padding: 6px 19px 40px;
    border-color: transparent
}
.menu a .innerBorder {
    /*padding: 5px 20px 2px;*/
    border-width: 0;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.menu a.active .innerBorder {
    border-width: 1px 1px 0 1px;
    border-color: #fff;
}
.menu a.active,
.menu a:hover {
    background: #dfe3e9 url("http://wac.a164.edgecastcdn.net/80A164/static/images/buttons_sprite.png") repeat-x 0 -788px;
    padding: 5px 18px 0;
    border-width: 1px;
    border-style: solid;
    border-color: #BCC2CA #BCC2CA #DEE2E8 #BCC2CA;
}
.menu a.active {
    -webkit-box-shadow: 0px 10px 24px -5px #fefefe;
    box-shadow: 0px 10px 24px -5px #fefefe;
    position: relative;
    z-index: 2;
}
Dan itulah bagian bagian yang bisa kita edit untuk merubah tampilan dari menu tersebut .

Dan lagi hal ini tidak hanya berlaku pada bagian menu , tapi untuk semua bagian yang tampil di halaman Blog .
Yang perlu diingat untuk mempercepat dan akurasi pencarian kode Css adalah dengan mengetahui penggunaan id atau class . itu saja , dan itu simpel sekali .


Itu baru beberpa bagian kecil di dalam template , tapi pada dasarnya rumus diatas bisa dugnakan untuk merubah elemen apapun yang tampil di blog kita . Dan itu rumus paling dasar .

Untuk urusan konten yang lain yang terdapat di bagian lain seperti misal Post , Header , Footer dan juga Sidebar , cara yang dilakukan tetap sama .


Template blog itu bisa kita jadikan seperti apa saja tampilannya semau kita , tinggal kita nya saja yang harus telaten untuk mengedit dan membuat bagian bagian dari blog kita .

Dan lagi , untuk melakukan pengeditan pada template kita itu harus telaten dan jangan sampai lupa untuk memback up template sebelum melakukan pengeditan . Jadi semisal ada kerusakan saat pengeditan , kita masih punya salinan edisi terbaru dengan editan terakhir yang telah kita lakukan tanpa mengulang dari Nol lagi .



Iya , mungkin itu saja Cara paling mendasar Seputar Template Editing yang mungkin sudah anda lakukan atau tengah ingin anda lakukan dengan cara yag berbeda .
Untuk yang punya pertanyaan seputar Template Editing , jangan sungkan untuk bertanya pada saya dan saya akan menjawab semampu saya .

Perlu diketahui , jika kita sudah akrab dengan Blogger , maka kemungkinan untuk berhenti dari editing template sngat kecil , karena memang itu menyenangkan . Apalagi kalau kita selalu menganggap rumput tetangga lebih hijau , maka sebisa kita kita akan membuat rumput kita lebih hijau lagi , dalam hal ini edit edit lagi .

Tapi perlu diingat bahwa Ngeblog itu bukan cuma masalah tampilan dan Template Editing , karena orang bisa mengenal kita dan blog kita adalah dari tulisan yang kita bagikan , bukan dari template yang kita edit bolak balik .

Demikian artikel ini dan semoga bermanfaat .

2 comments

avatar
24 October 2013 at 02:04

makasih gan,, tambah ilmu lagi,,

Reply
avatar
24 October 2013 at 03:28

masama sob

Reply

Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih