Jika kita kesulitan dalam mengedit template, mungkin karena kita belum mengenal bagian template Blogger. Berikut ini tutorial untuk mengenal bagian-bagian template Blogger

Apa kabar Sahabat blogger????? Tidak terasa bagian-bagian template Blogger sudah mencapai tahap akhir nih.

Pada awalnya saya cukup pesimis dan tidak yakin bisa menyelesaikan pembahasan ini. Tetapi karena begitu banyaknya antusias dan dukungan dari para sahabat, maka pembahasan pun menjadi menyenangkan. Terima kasih atas dukungan Anda semua.

Sekarang kita akan membahas bagian terakhir dalam template Blogger. Sebelum melangkah lebih jauh, sebaiknya Anda sudah tahu struktur dari dokumen HTML. Setelah itu, baca dahulu

Bagian-bagian Template Blogger Part 1
Bagian-bagian Template Blogger Part 2
Bagian-bagian Template Blogger Part 3
Bagian-bagian Template Blogger Part 4

Okeh lah kalau begitu… Mari kita simak bagian-bagian template blogger berikut ini

Bagian footer berawal di sini


Footer ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar.


Ini merupakan akhir dari css yang ada pada template blogger. Setelah kode ini, Anda bisa menyisipkan javascript dari autoreadmore, artikel terkait, dll. Setelah kode ini, bagian-bagian selanjutnya berisi kode HTML.


Ini merupakan tag penutup dari head pada dokumen HTML


Bagian body berawal pada tag ini
<div id='outer-wrapper'><div id='wrap2'>
Ini merupakan kode HTML dari outer-wrapper yang bisa diatur tampilannya dengan CSS


Bagian ini merupakan header-wrapper yang bias kita ubah tampilannya dengan CSS


Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini


Ini merupakan kode HTML dari main-wrapper yang bisa kita ubah tampilannya dengan CSS.


Ini merupakan kode HTML dari sidebar-wrapper yang bisa kita ubah tampilannya dengan CSS.


Ini mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.


Ini merupakan akhir dari content-wrapper


Ini merupakan kode HTML dari footer yang bisa kita ubah tampilannya dengan CSS


Ini merupakan tag penutup dari outer-wrapper


Ini merupakan tag penutup dari body pada dokumen HTML


Ini merupakan tag penutup dari dokumen HTML


Mungkin pembahasan akan lebih panjang jika kita membahas template dengan tanda centang pada 'expand widget template'.

Maka dari itu, script dari template di atas tidak dengan tanda centang pada 'expand widget template' sehingga terlihat simple.

Setelah kita mengupas tuntas bagian Post pada bagian-bagian template Blogger part 3, sekarang kita akan membahas bagian Comment dan Sidebar Content.

Sebelumnya, baca terlebih dahulu

Bagian-bagian Template Blogger Part 1
Bagian-bagian Template Blogger Part 2
Bagian-bagian Template Blogger Part 3

Setelah membaca dari part 1, silakan simak bagian-bagian template Blogger part 4 berikut ini

Bagian Comments dimulai dari sini


Mengubah tampilan judul bagian komentar


Mengubah tampilan bagian komentar


Mengubah tampilan link author atau link komentator


Mengubah tampilan isi komentar


Mengubah tampilan dari footer komentar. Comment-footer biasanya berisi tanggal komentar.


Mengubah tampilan komentar yang telah dihapus


Mengubah tampilan link feed


Sidebar dimulai dari sini


Mengubah tampilan sidebar secara keseluruhan


Mengubah tampilan daftar pada sidebar


Mengubah tampilan definisi daftar dari tag <ul>


Mengubah tampilan widget

Bagian-bagian template Blogger berlanjut pada part 5. Mudah-mudahan artikel di atas bermanfaat. Amin…

Tidak terasa bagian-bagian template Blogger sudah sampai pada part 3. Blog saya jadi seperti komik nih, hehehehe… Saya harap Anda tidak bosan dengan artikel berseri di blog saya. Abis, mau gimana lagi. Kalau dijadikan satu artikel pasti terlalu panjang…hehehehehehe

Sebelum melanjutkan pada part 3, baca dulu yang ini
Bagian-bagian Template Blogger Part 1
Bagian-bagian Template Blogger Part 2

Kali ini kita akan membahas bagian Post pada template minima. Mari kita simak bagian-bagian template Blogger part 3 berikut ini

Bagian Post dimulai dari sini


Mengubah tampilan tanggal artikel blog


Mengubah tampilan post atau artikel blog


Mengubah tampilan judul artikel blog


Mengubah tampilan link


Mengubah tampilan bagian postingan


Mengubah tampilan footer atau catatan kaki postingan blog


Mengubah tampilan link komentar


Mengubah tampilan gambar pada postingan


Sekian dulu Sob, kita lanjutkan pada Bagian-bagian Template Blogger Part 4

Mudah-mudahan bermanfaat

Apa kabar Sobat???? Mudah-mudahan baik-baik saja yaaa…

O iya, sebelum melanjutkan membaca, ada baiknya Anda membaca Bagian-bagian Template Blogger part 1 terlebih dahulu.

Pada episode kali ini, kita akan membahas bagian header, outer-wrapper, main-wrapper dan sidebar-wrapper. Untuk mempersingkat postingan dan ngga usah panjang lebar dikali tinggi, langsung saja ke tempat kejadian perkara…hehehehehehe…

Header berawal di sini


Header ini terdapat pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog. Selain teks, header juga bisa kita ganti dengan gambar.


Kode CSS ini mengubah tampilan header bagian dalam


Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan


Mengubah tampilan judul dan deskripsi blog tingkat 1


Mengubah tampilan link yang terdapat pada header


Mengubah tampilan link pada header jika pointer mouse berada di atas link.


Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2


Mengubah tampilan gambar header


Bagian ini adalah tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun diatas bagian ini


Main-Wrapper sering disebut juga posting area karena main wrapper adalah area postingan pada suatu Blog


Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget.
Misalnya gadget yang telah disediakan oleh pihak blogger seperti label, arsip, profile maupun luar blogger seperti widget alexa rank yang tempatnya disamping posting area/main wrapper


Kode CSS ini mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar, dll


Sampai di sini dulu ya Sob...

Saya harap Sobat tidak bosan berkunjung ke blog saya. Terima kasih untuk Sobat yang sudah berkunjung, berkomentar dan membaca artikel di blog saya.Ditunggu lanjutannya yaaaa….

Seperti biasanya, bagian-bagian template Blogger akan dilanjutkan pada Bagian-bagian Template Blogger Part 3 .

Setelah minggu yang lalu kita membahas tentang mengedit template blog secara offline, kali ini kita akan membahas bagian-bagian template Blogger. Sebenarnya sudah banyak blogger yang memposting artikel tentang bagian-bagian template Blogger, tetapi dengan cara yang berbeda-beda.

Di sini saya juga ingin tampil beda Sob…hehehehehehe… kita akan mengupas tuntas bagian-bagian template Blogger. Template yang akan kita kupas tuntas adalah template Minima. Mengapa Minima??? Karena template ini merupakan template yang paling dasar dan yang paling mudah untuk dipelajari.

Artikel tentang bagian-bagian template Blogger akan saya jadikan beberapa part karena tidak memungkinkan saya jadikan satu. Betul ngga???? Hehehehehehe…

Okelah kalau begitu, langsung saja ke TeKaPe.
 

Ini merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table.


Bagian head template blog yang berisi judul blog dan awal dari kode CSS. Biasanya, di sini digunakan untuk meta tag keyword dan meta tag yang lainnya.

Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.


Kode ini untuk mengubah tampilan link pada template blog Anda.


Ini untuk mengubah tampilan link yang pernah dikunjungi.
Mengubah tampilan link jika pointer mouse berada di atas link.

Mengubah tampilan link bergambar


Bagaimana Sobat??? Bagian-bagian Template Blogger berlanjut pada Part 2

Mengedit Template Blogger Secara Offline Bagian 2

Pada tutorial kali ini kita akan membahas bagaimana cara menyimpan kode CSS hasil editan kita supaya bisa dilanjutkan di lain waktu.

Langsung saja kalau begitu. Berikut ini langkah-langkahnya

Langkah 1
Setelah selesai mengedit template, klik tombol Save lalu simpan dengan nama yang sudah ada (File ini akan tersimpan dengan nama Embedded Styles.css). Setelah Anda menyimpan file CSS tersebut, mengedit template secara offline bisa Anda lanjutkan di lain waktu.

Langkah 2
Untuk melanjutkan edit template, buka Firefox lalu klik File > Open > lalu cari HomePage blog Sobat yang telah di Simpan pada tutorial bagian 2.

Langkah 3
Buka editor kode CSS. Pilih tab Embedded Styles lalu klik tombol Open . Cari file “Embedded Styles.css” yang telah di simpan pada langkah 1. Setelah itu Anda bisa melanjutkan edit template sesuai keinginan Anda...

Semoga Bermanfaat...

Melanjutkan artikel yang lalu, yaitu pemasangan Add-On Web Developer. Sebelum melanjutkan membaca, ada baiknya Anda baca dahulu Mengedit Template Blogger Secara Offline Bagian 1.

Mengedit template blog secara offline memang banyak keuntungannya. Yang pertama pastinya menghemat biaya koneksi internet, lalu praktis karena ngga usah klik tombol pratinjau berulang kali seperti secara online, dan masih banyak yang lainnya.

Dalam tutorial Mengedit Template Blogger Secara Offline Bagian 2, kita akan mengedit kode CSS blog. Berikut ini langkah-langkahnya

Langkah 1
Simpan HomePage blog Sobat dengan cara klik File > Save Page(masih dalam keadaan online)

Langkah 2
Matikan koneksi internet lalu buka HomePage blog Anda yang tadi sudah disimpan. Klik CSS pada Web Developer toolbar lalu pilih Edit CSS.


Muncul sebuah frame editor yang berisi kode CSS. Pilih tab Embedded Styles untuk melihat kode CSS dari blog Anda.



Catatan: Klik tombol Position untuk mengubah letak frame kode CSS sesuai keinginan Sobat.

Langkah 3
Edit kode CSS tersebut sesuka Anda, terserah Anda karena ini gratis...hehehehehehe...
O iya, Blog Anda akan langsung berubah mengikuti perubahan kode CSS yang sedang Anda edit.

Sekian dulu tutorial Mengedit Template Blogger Secara Offline. Tutorial akan berlanjut pada bagian 3.

Di sini kita menggunakan Add-On Firefox yang bernama Web Developer. Web developer merupakan Add-On yang digunakan untuk pembuatan website. Memiliki tools yang lengkap untuk mempermudah kita dalam proses pembuatan website. Dalam hal ini, Add-on tersebut kita gunakan untuk mengedit template Blogger.

Berikut cara pemasangannya, saya memakai Mozilla Firefox 3.6 Bahasa Indonesia

1. Buka Mozilla Firefox lalu pilih Alat > Pengaya


2. Ketikkan Web Developer pada kotak pencarian Add-Ons. Tunggu hingga Firefox menemukan hasil pencarian

3. Pilih Web Developer lalu klik tombol Pasang Ke Firefox


4. Klik Tombol Pasang Sekarang untuk memulai instalasi Add-Ons


5. Tunggu proses instalasi berjalan hingga selesai lalu Restart Firefox(tutup Firefox lalu buka kembali)

6. Jika instalasi berhasil, Toolbar Web Developer akan terpasang




Sekian dulu Kawan… Mengedit Template Blogger Secara Offline berlanjut ke bagian 2… Saya buat berseri karena untuk menghindari terlalu panjangnya postingan.

Template Blogger asli yang warna dan tampilannya itu-itu aja memang membosankan bagi kita. Untuk mendesain template blog memang dibutuhkan pengetahuan dasar CSS dan XHTML.

Untuk desain template blog, seharusnya kita bisa mendesain sendiri karena hanya kita yang tau karakteristik dari blog kita. Walaupun bisa membuat artikel yang berkualitas, tapi desain blog kita acak-acakan atau kurang menarik pasti artikel tersebut kurang diminati.

Untuk mendesain blog kita harus mengetahui atau mengerti tentang susunan template blogger atau bagian-bagian template blogger.

Ada banyak sih template yang bagus di internet, tapi pasti template blog kita akan ada yang menyamai jika blog kita pake template gratisan dari internet. Kalau template blog kita masih default atau asli dari Blogger, apa salahnya kita mengganti warna background blog sesuai keinginan kita.

Ya udah, langsung aja ke pokok pembahasan. Ini cara mengganti warna background blog

1. Login dulu ke Blogger. Karena tutorial ini dibuat cuma untuk blog di Blogger.
2. Setelah login, buka menu Tata Letak>Edit HTML.
3. Sebelum mulai bermain dengan kode HTML, Backup dulu template dengan mengklik link "Download Full Template" lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.
4. Nah sekarang kita mulai bermain dengan kode HTML. Cari kode seperti berikut

body {
background: white;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Ganti tulisan yang berwarna merah pada kode di atas dengan warna yang anda suka untuk mengganti warna template blog secara keseluruhan. Untuk daftar kode warna atau kode hexa warna bisa dicari di mbah Google. Cari kode berikut

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

6. Tambahkan kode background: white; setelah kode #outer-wrapper { lalu ganti tulisan yang berwarna merah pada kode di bawah dengan warna yang anda suka untuk mengganti warna background blog. Kodenya jadi seperti ini

#outer-wrapper {
background: white;
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

7. Cari kode berikut

#main-wrapper {
width: 500px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

8. Lakukan hal yang sama dengan langkah ke-6. Cara di bawah ini untuk mengganti warna background Postingan

#main-wrapper {
background: white;
width: 500px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

9. Cari kode berikut

#sidebar-wrapper {
width: 350px;
float: right;
padding-left:10px; /* */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

10. Lakukan hal yang sama dengan langkah ke-6. Cara di bawah ini untuk mengganti warna background Sidebar dan kodenya jadi seperti ini

#sidebar-wrapper {
background: white;
width: 350px;
float: right;
padding-left:10px; /* */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

11. Cari kode berikut

#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

12. Untuk mengganti warna background Footer, jadikan kode di atas seperti yang di bawah ini dan lakukan langkah yang sama seperti langkah ke-6

#footer {
background: white;
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

13. Langkah yang terakhir adalah melihat hasil tampilan dengan mengklik tombol Pratinjau. Tadaaa...gimana? Jadi bagus atau hancurkah blognya? Kalo jadinya bagus klik tombol Simpan Template. Kalo jadi ancur, tetap berusaha okeeeehhhh…

Template merupakan bagian yang paling penting dalam sebuah blog. Jika blog yang kita kelola tidak memiliki template mungkin blog kita tidak berbentuk atau bahkan hancur. Bagi para bloger pemula mungkin kesulitan dalam mengelola template blog yang dianggap rumit.

Maka dari itu saya akan berbagi pengalaman tentang mengenali bagian-bagian template blog. Mengelola template blog adalah hal yang mudah jika kita tau bagian-bagiannya. Di bawah ini akan kita bahas tentang bagian-bagian template Blogger.

Bagian-bagian template Blogger

body
outer-wrapper
header-wrapper
main-wrapper
sidebar-wrapper
footer

Bagian-bagian diatas merupakan penyusun pokok dalam sebuah template blog.

body merupakan tempat dimana seluruh bagian template blog diletakkan
outer-wrapper merupakan tempat dimana header, sidebar, main dan footer berada
header-wrapper merupakan pintu masuknya mesin pencari ke dalam blog kita. Karena di dalam Header terdapat judul yang mewakili blog kita
main-wrapper merupakan tempat postingan atau artikel blog kita ditampilkan atau dipublikasikan
sidebar-wrapper merupakan tempat aksesoris blog kita atau istilahnya “Widget” dan terletak di bagian samping blog
footer merupakan tempat untuk menuliskan informasi blog seperti informasi pendesain template, nama template, hak cipta, dll.

Nah, gimana? Udah ngerti belum? Kalo belum ngerti bisa Tanya ke mbah google atau ke orang yang lebih tau. Eh, ditunggu ya komentar dari para pengunjung. Jangan menyerah dalam belajar dan tetap Blogging………..