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

Beberapa hari yang lalu saya membaca artikel di blog Kang Rohman yang berjudul Optimasi Meta Tag Keyword dan Dekripsi yang artikelnya saya temukan di Mbah Google. Setelah saya membaca, ternyata Kang Rohman memiliki Meta Tag dengan formasi baru. Lalu terpikirkan oleh saya untuk coba membahasnya kembali. Mungkin bisa bermanfaat untuk Sobat semua.

Meta tag keyword dan deskripsi umumnya digunakan untuk memberi informasi halaman blog kita ke bot search engine sehingga mempermudahnya untuk meng-crawl blog kita.

Dilihat dari namanya yang menggunakan kata “Java” yang jika diartikan ke dalam bahasa Indonesia yaitu Jawa, banyak orang yang menyangka jika script ini berasal dari bahasa Jawa. Prasangka ini sangat jauh sekali jika kita mempelajari script ini. Tidak ada sepatah kata pun yang berasal dari bahasa Jawa dalam script ini.

Dalam blogosphere, JavaScript sangat dikenal dengan script yang bisa bikin gendut blog kita dan dapat membuat loading blog menjadi berat. Banyak yang sudah kenal dengan JavaScript, tetapi banyak juga yang belum tahu apa itu JavaScript. Oleh karena itu, ayo kita kupas tuntas.

Jika Sobat ngeblog menggunakan platform atau mesin blog dari Blogger, pasti sering mendengar script yang bernama CSS. Script ini memang berperan sanggat penting dalam blog kita karena jika tidak ada script ini, mungkin blog kita akan tampil acak-acakan di browser.

Sering sekali kita bertanya-tanya apa itu CSS dan kegunaannya. Oleh karena itu, ayo kita kupas tuntas pada artikel ini.

Beberapa hari ini saya terpengaruh oleh statistik blog saya karena jumlah pengunjung yang turun drastis. Pengaruh tersebut membuat saya jadi malas ngeblog, malas blogwalking, dan malas posting. Lama-lama stastik blog saya bisa menjerumuskan saya pada lubang yang bisa membuat saya berhenti ngeblog.

Tapi kan itu cuma statistik...
Iya, itu cuma statistik yang selalu kita lihat untuk mengecek traffic blog kita. Terkadang statistik blog bisa membuat kita semangat ngeblog dan bisa juga membuat semangat ngeblog hilang. Supaya Sobat ngga mengalami hal itu, berikut beberapa tips supaya tidak terpengaruh statistik blog

Membuat tulisan copyright di blog memang banyak manfaatnya. Salah satunya supaya blog kita anti pembajakan. Sebenarnya pembajakan tetap saja terjadi karena tulisan copyright ini hanya sebuah tulisan tanpa ada hukum yang mendampinginya.

Tulisan copyright ini sangat sering kita temui di bagian bawah sebuah blog atau website. Kalau menurut saya, tulisan ini memberikan informasi siapa pembuat template blog Sobat, siapa pemilik blog tersebut atau info-info lainnya.

Sobat pasti sering kan kehabisan tempat pada saat memasang widget di blog. Mau dipasang di sidebar penuh, di header penuh, di footer juga penuh. Trus gimana dong????

Gampang Sob… Pecah aja footer blog Sobat menjadi tiga bagian. Jika kita lihat, Template default Blogger cuma memiliki footer satu kolom aja. Kalau kita jadikan 3 kolom kan lumayan tuh, space di blog kita jadi makin banyak. Kalau masih bingung, Sobat bisa lihat di blog kumpulan tutorial ngeblog. Coba Sobat scroll ke bagian paling bawah halaman, terlihat footernya ada 3 kolom. Bagaimana?? Tertarik untuk membuat footer menjadi 3 kolom. Ya udah deh, silakan Sobat simak tutorial singkat berikut ini.

Ketemu lagi di acara Kumpulan Tutorial Ngeblog...hehehehehehe...tepuk tangan dong...

Kali ini kita akan membahas tutorial mengganti background header blog dengan gambar. Kenapa harus gambar??? Kan bisa pake warna??? kalau mengganti warna background header blog sudah kita bahas pada kesempatan yang lalu. Silakan Sobat baca cara mengganti warna background header blog.

Jika mengganti background header blog dengan gambar, blog kita akan terlihat lebih menarik. Pada dasarnya, gambar mewakili kata-kata yang ngga mungkin kita tuliskan. Jadi, header blog mewakili bagaimana karakteristik blog kita. Kalau blog Kumpulan Tutorial Ngeblog menggunakan gambar header yang kecil. Kenapa kok kecil???? Kan itu trik supaya halaman blog ini tidak berat saat loading...hehehehehe...

Supaya blog kita lebih menarik, yang kita ubah terlebih dahulu pasti header blog kan??? Hayo ngaku...hehehehehehe...
Bagian ini memang sangat penting karena selain sebagai tempat judul blog, header blog juga mewakili karakteristik dari blog kita. Banyak sekali cara supaya header blog kita terlihat lebih menarik dan salah satu caranya yaitu mengganti warna background header blog.

Kalau kita mempunyai blog yang isinya tutorial, pasti sering kan memposting kode HTML?? Seperti blog saya ini yang ngaku-ngaku blog yang isinya kumpulan tutorial ngeblog, sering sekali memposting kode HTML untuk keperluan tutorial seperti kode HTML untuk membuat navigasi breadcrumb, untuk membuat auto read more, untuk mengganti link read more dengan gambar, dll.

Dahulu kala sebelum tahu cara memposting kode HTML...(kok kayak dongeng nih...hehehehehehe...) pada saat memposting kode HTML saya bingung setengah hidup karena kode HTML-nya ikut di eksekusi sama si browser. Alhasil, saya jadi ngga pernah memposting tutorial yang ada kode HTML-nya deh.

Link Read More yang berupa teks jika kita lihat semakin lama semakin membosankan. Untuk menghilangkan kebosanan tersebut, kita bisa mengganti link read more dengan gambar.

Cara mengganti link read more dengan gambar tergolong cukup mudah. Blog Kumpulan Tutorial Ngeblog juga sudah saya ganti link read more-nya. Lumayan untuk menambah hiasan blog...hehehehehehehe...

Auto Read More merupakan Read More otomatis dengan fungsi yang canggih. Kenapa canggih? Karena Auto Read More dilengkapi dengan pengaturan jumlah karakter yang tampil pada home page blog Anda. Ada 2 pengaturan jumlah karakter yaitu jumlah karakter Read More dengan gambar dan jumlah karakter Read More tanpa gambar.

Kecanggihan yang lain yaitu Read More ini memiliki image thumbnail yang menampilkan gambar pertama pada postingan blog Anda dan memunculkannya pada awal paragraf.

Contoh navigasi breadcrumb bisa Anda lihat di atas judul tutorial ini. Itu merupakan navigasi breadcrumb yang biasanya Anda temui pada beberapa blog atau website termasuk blog Kumpulan Tutorial Ngeblog.




Cara membuatnya pun cukup mudah. Silakan ikuti langkah-langkah membuat navigasi breadcrumb berikut ini

Langkah 1
Login ke akun Blogger milik anda > Tata Letak >Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Catatan: Biasakan membackup template blog Anda sebelum mengedit HTML

Langkah 2
Beri tanda centang pada Expand Widget Templates. Copy kode CSS di bawah ini lalu paste tepat di atas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}

Ganti kata yang berwarna merah dengan kode warna sesuai keinginan Anda
Ganti kata yang berwarna biru dengan ukuran font sesuai keinginan Anda

Langkah 3
Cari kode <div class='post hentry uncustomized-post-template'>
Copy kode di bawah ini lalu paste tepat di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>

Ganti kata yang berwarna merah sesuai dengan keinginan Anda

Langkah 4
Klik tombol Simpan. Setelah tersimpan, buka salah satu halaman artikel pada blog Anda.
Navigasi Breradcrumb telah terpasang tepat di atas judul artikel blog Anda.

Pasca ulang tahun yang ke-10, Blogger gencar menambahkan fitur baru dan berbenah diri untuk memenuhi permintaan para penggunanya. Mulai dari fitur Readmore Otomatis, Post Editor Baru, Template Designer pada Blogger Draft dan salah satu diantara fitur-fitur baru tersebut yaitu Label Cloud.

Seperti apa Label Cloud? Coba Anda lihat ke bagian bawah halaman blog ini, ada kategori kan? Nah itu namanya label cloud.


Bagaimana cara mengubah tampilan label lama menjadi Label Cloud? Mari kita simak langkah-langkah di bawah ini

Langkah 1
Login ke akun Blogger milik anda > Tata Letak > Elemen Halaman. Klik Edit pada widget Label blog Anda.

Langkah 2
Setelah jendela konfigurasi label terbuka, atur konfigurasi label sesuai pada gambar di bawah ini.

Setelah itu, klik tombol Simpan

Langkah 3
Sebelum mempercantik tampilan label cloud, perlu diperhatikan bahwa label cloud memiliki 5 tingkatan mulai dari warna hingga ukuran hurufnya.

Masuk ke bagian Edit HTML lalu copy kode di bawah ini tepat di atas kode ]]></b:skin>

.label-size-1 a {
color: #000000;

font-size: 8px;

text-decoration: none;
}
.label-size-1 a:hover {
text-decoration: underline;
}

.label-size-5 a {
color: #000000;

font-size: 12px;

text-decoration: none;
}
.label-size-5 a:hover {
text-decoration: underline;
}

Ganti font-size sesuai keinginan Anda.

Langkah 4
Klik Simpan. Label Cloud telah terlihat lebih bagus.

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.

Javascript memang selalu jadi pertimbangan ketika kita akan memasangnya ke dalam blog. Betapa tidak, ukurannya yang cukup besar membuat blog kita jadi ‘gendut’ dan berat untuk diakses. Berbagai cara telah ditempuh supaya javascript tersebut bisa ringan saat loading blog. Mulai dari menyimpan javascript di tempat lain atau mengkompres javascript supaya lebih ramping.

Eitsss... mengkompres javascript? Apa bisa?

Mengkompres javascript dilakukan untuk memperkecil ukuran javascript. Cara kerjanya seperti WinRar ata WinZip. Bedanya, cara ini dilakukan tanpa software. Jadi kita tidak usah men-download software tertentu. Bagaimana caranya?? Silakan simak langkah demi langkah berikut ini

Langkah 1
Copy javascript yang ada di blog Anda. Misalnya javascript auto readmore.
Buka Javascript Compressor. Paste javascript ke dalam kotak bagian atas pada halaman Javascript Compressor. Klik tombol Compress. Tunggu beberapa saat hingga proses kompres selesai.

Langkah 2
Setelah selesai, javascript hasil kompres akan muncul pada kotak bagian bawah. Copy javascript tersebut.

Langkah 3
Ganti javascript yang tadi belum dikompres pada blog Anda dengan javascript yang telah dikompres. Klik Simpan dan blog Anda sekarang lebih ringan.

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 .