Title Post atau judul posting adalah sesuatu yang sangat penting bagi blog. Selain menjadi sember utama mesin pencari untuk meng-index, melalui judul posting pula blogger punya kewajiban untuk membuat pengunjung tertarik mengikuti seluruh isi posting. Pada template blogger box post title atau judul posting sama sekali tidak ditandai secara khusus agar judul posting punya sebuah ciri tertentu yang membedakannya dengan bagian posting yang lain. Jika pun ada, perbedaan yang terlihat hanyalah pada jenis font, color dan ukurannya.
Tips dan trik modifikasi yang akan kita lakukan ini adalah sebuah upaya untuk membuat background pada title post. Tidak hanya sekedar untuk membuatnya terlihat berbeda dengan bagian posting lainnya, namun sekaligus melalui ini setiap blogger punya kesempatan untuk mebuat blog tampil lebih menarik dan membuat ciri tertentu yang tak dimiliki blog lain. Yah..., kreativitas blogger adalah modal untuk terus mencintai blognya sekaligus memacu kemauan untuk secara kontinyu melahirkan posting-posting baru!
Cara menampilkan background di post tile Blogger Template Designer
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Design (Rancangan).
- Cari dan klik Edit HTMl.
- Backup Template dengan cara :
- Klik Download Template Lengkap (Download Full Template).
- Simpan file template di folder PC. Berikan nama yang berisikan waktu modifikasi untuk lebih memudahkan mengingat dan menggunakan disaat diperlukan kembali.
- Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.
- Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>.
- Klik Simpan Template (Save Template).
Ada dua macam background yang dapat digunakan pada title posting.
- Background color:
membuat background color lebih sederhana dibandingkan penggunaan background image. Penggunaan background color juga telah berkembang cukup baik karena gradasi warna melalui css3 background gradient bisa digunakan.
- Background Image:
Bagi banyak blogger background image lebih banyak menjadi pilihan karena berbagai kreatifitas bisa berkembang dengan tak terbatas. Anda bisa menggunakan background dengan ukuran paling kecil hingga terbesar. File yang digunakan juga bisa jpg, gif atau png, yang masing masing disesuaikan dengan kebutuhan. Background file berekstensi .jpg sendiri lebih banyak digunakan untuk file image berukuran besar karena cenderung mempunyai beban lebih ringan sekaligus punya kecepatan loading lebih baik.
Background Color:
Background Color Standar:
h3.post-title{
padding:5px 6px;
background:blue;
border-left:3px double #333;
border-bottom:10px double #333;
}Background Gradient:
h3.post-title{
padding:10px 5px;
border-bottom:5px double #555;
background:linear-gradient(top, rgba(103,206,224,0) 0%,rgba(7,130,252,1) 100%); /* standart */
background:-o-linear-gradient(top, rgba(103,206,224,0) 0%,rgba(7,130,252,1) 100%); /* Opera */
background:-moz-linear-gradient(top, rgba(103,206,224,0) 0%, rgba(7,130,252,1) 100%); /* Mozilla */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,206,224,0)), color-stop(100%,rgba(7,130,252,1))); /* google chrome */
background:-webkit-linear-gradient(top, rgba(103,206,224,0) 0%,rgba(7,130,252,1) 100%); /* google chrome */
background:-ms-linear-gradient(top, rgba(103,206,224,0) 0%,rgba(7,130,252,1) 100%); /* IE10 */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0067cee0', endColorstr='#0782fc',GradientType=0 ); /* IE */
}Background Image:
Background berukuran kecil berulang:
h3.post-title{
padding:8px 6px 5px;
background:white url(background.jpg);
}Background berukuran kecil berulang horizontal:
h3.post-title{
padding:5px 6px;
background:white url(background.jpg) left center repeat-x;
}Background berukuran kecil berulang vertical:
h3.post-title{
padding:5px 6px;
background:white url(background.jpg) top center repeat-y;
}Background berukuran besar tak berulang:
h3.post-title{
padding:2px 6px;
background:white url(background.jpg) center center no-repeat; /* center center bisa diganti top center, bottom center, top left, bottom left, top right atau bottom right */
}
Membuat background post title tentunya tak selesai begitu saja dengan kode-kode css di atas. Beberapa property css lain perlu ditambahkan agar penempatan background bisa terlihat lebih baik. Di bawah ini adalah salah satu pengembangan pada syntax
h3.post-title {....}. Kode CSS ini juga mengikutsertakan kode css pada posting box agar tercipta kesesuaian jarak antara post title dan kalimat pertama (bagian pertama: bisa berupa teks atau image) yang dipostingkan.
Pengembangan kode CSS background Post Title:
h3.post-title{
min-height:98px; /* membuat box post title selalu berketinggian minimal 98px (sesuaikan dengan background) */
padding-bottom:15px; /* agar ada ruang bawah post title cukup lebar */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggP7IxhtBUjEha9lYKSZheSoKWeqLct6wpPfaoZJrduTN3D0b26ZzK4JKxfBv9f_XUpfYcRzJTv1F33wbsP4oe5_r_dvILEKrgi43DIRJPpDXpJCB4HuQcmshWdQVXscYYgR4tyi0cihyphenhyphenD/s1600/gubhugreyot-gun.png) top center no-repeat; /* top center no-repeat= posisi background di atas-tengah tak berulang */
background-size:100% 98px; /* background auto width dengan tinggi 98px */
}
.post-body{
margin-top:-20px; /* mengatur jarak post title dan box posting (teks awal posting) */
}Catatan/Keterangan:
- Background color bisa menggunakan kode teks (black, white dll), menggunakan kode berbentuk #fff (white), #000 (black) dst atau rgba color (contoh: rgba(0,0,0,0.5))
- Background berulang digunakan ketika background image yang dipergunakan kecil dan diharapkan dapat memenuhi seluruh box post title.
- Background tak berulang membuat background image ditampilkan utuh sebagai 1 (satu) image saja dibelakang teks title posting. Background ini bisa berupa image berukuran besar,sedang ataupun kecil. Jika berukuran kecil atau sedang biasanya karena ingin ditampilkan pada salah satu sisi/ujung box post title.
- Untuk background berukuran besar dengan warna kompleks sebaiknya menggunakan file berekstensi .jpg
- Untuk membuat background gradient dilahkan datang di
http://colorzilla.com/gradient-editor/
