Pengaturan Lanjut Template Blogger Buatan Sendiri - Cemonggaul.Com

Template Blogger buatan sendiri yang telah kita buat kemarin masih membutuhkan pengaturan lanjut. Seperti pengaturan heading, isi navigasi, blog post, komentar, meta content, tanggal, content widget, dan lain-lain. Untuk itu, kali ini Cemonggaul.com akan memberikan sedikit batuan dalam pengaturannya. Apa-apa saja hal pokok yang perlu dibuat pengaturan, dan apa saja hal baru yang harus Anda ketahui. Bila Anda belum membaca tutorial awalnya dan agar bisa mengikuti apa yang akan disampaikan, sebaiknya Anda buka dulu tutorial cara membuat template blogger sendiri dengan EasyHtml.

Mengatur CSS Lanjutan Template Blogger Buatan Sendiri

Walaupun sebenarnya misalkan kita tidak membuatnya, blogger akan membuat pengaturan sendiri. Hanya saja masih standar. Disini kita akan mencoba untuk membuat pengaturan lanjutan agar template yang telah kita buat kemarin lebih cantik dan bagus dipandang. Tool yang perlu dipersiapkan sebelumnya adalah colorpicker yang telah Anda unduh kemarin dan tool EasyHtml tidak kita perlukan lagi saat ini. Sebelumnya buka dulu blog baru "bahanpercobaantemplate" yang telah Anda buat kemarin, dan langsung buka menu template sekalian masuk edit HTML. Buat dulu sekat pemisah antara bagian CSS satu dengan yang lain. Kode pemisahnya adalah /*-----kepala----*/ , /*-----navigasi-----*/ , /*------badan----*/, /*----kotak post-----*/ , /*--------tangan kanan-----*/ , /*-----kaki----*/. Pertama yang kita per-cantik dulu adalah bagian heading-nya.

Mengatur CSS Heading

Pada bagian heading ini yang membutuhkan pengaturan utamanya adalah title (<h1>) dan description. Kita tetap akan menggunakan parameter aslinya saja agar lebih mudah. Atau kalau ingin semuanya unik menggunakan panggilan Anda sendiri itu juga bisa, namun Anda perlu merubah juga pemanggilnya, jadi sedikit ribet. untuk default-nya isi header antara lain kurang lebih sebagai berikut:

#header{text-align:left}
.header h1{font-size:150%;font-weight:bold;}
.header a{font-size:120%;color:#00F}
.header a:hover{font-size:120%;color:#000033}
#header .description{font-size:105%;color:#000;width:400px}
.header img{margin:15px 0 15px 0}

Keterangan:

Berhubung kemarin telah kita tetapkan nilai ukuran besaran font pada bagian kotak-luar yaitu 13px. Sekarang pengaturan font selanjutnya disini saya menggunakan ukuran %. Ini tidak mutlak harus %. Anda boleh saja tetap menggunakan ukuran px. Maksud dari font-size 150% pada header h1 adalah besaran font 1,5 kali lebih besar dari ukuran pada parameter yang lebih luas Yakni 13px. Kalau di buat px sekitar 13 + 13/2 = 13px+6,5px =19,5 px.
Untuk menebalkan ukuran font adalah "bold", bisa juga dengan ukuran numerik 800. bila ingin lebih tebal lagi, penulisannya adalah "bolder".
Yang dimaksud dengan "header a" adalah Setiap link yang berada pada bagian header. Biar tidak menjebak dan baik dimata google hover ini warnanya harus berubah. jangan disamakan dengan warna teks biasa.
Header a:hover adalah link dibagian header apabila disorot oleh mouse. Biar tidak menjebak dan baik dimata google hover ini warnanya harus berubah. jangan disamakan dengan warna linknya.
Header a:visited adalah link bagian header setelah mendapat kunjungan / pernah dikunjungi. Anda boleh tetap menyamakan link normal atau bisa juga merubah warnanya.
Header .description adalah pengaturan untuk deskripsi blog Anda
header img adalah pengaturan apabila Anda menggunakan gambar.
Anda bisa mengubah nilainya, yaitu antara {....} sesuai dengan selera Anda sendiri. parameter pengaturan masih sama seperti kemarin.

Mengatur CSS body

Pada bagian body secara default dari blogger. isinya antara lain kurang lebih sebagai berikut;

.date-header{display:none}
.post{border:1px solid #C6C7C7;margin-bottom:10px;padding:10px;}
.post h2,.post h2 a,.post h2 a:visited,.post h2 strong{font-weight:bold;color:#0000FF;text-transform:capitalize}
.post h2 strong,.post h2 a:hover {font-weight:bold;color:#0E3BA1}
.post h2,.post h3,.post h4{font-weight:bold;line-height:1.3em}
.post-meta {font-size:75%;color:#333;}
.post-meta a {color:#990000;}
.post-meta a:hover {color:#FF0000;}
.post-body {margin-top:15px;text-align:justify;line-height: 1.5em;}
.post-body blockquote {line-height:1.3em;}
.post-body p{line-height:1.3;margin-bottom:10px;}
.post-body ul,.post-content ol {margin-left:30px;margin-bottom:20px;}
.post-body ul {list-style:outside;}
.post-body ol {list-style:decimal;}
.post-body ul li,.post-content ol li {line-height:1.3;margin-bottom:5px;}
.post img {border:6px double #333}
.post-footer{margin-top:15px}
.main .widget {text-align:left}

Keterangan:

.date-header adalah pengaturan untuk tanggal posting. letak tanggal posting secara default adalah diatas judul posting
.post adalah pengaturan isi posting itu sendiri
.post h2 adalah pengaturan untuk title atau judul posting. Anda bisa juga menambahkan pengaturan h3 , h4 dan seterusnya.
.post-meta adalah pengaturan seperti label, time post, author, share button, dll
.post-body adalah pengaturan isi posting. jadi setelah title atau judul
.post-body p adalah pengaturan paragraf
.post-blockquote adalah pengaturan blockquote (dalam penulisan posting adalah button tanda petik)
.post-body ul ini untuk mengatur button bullet ini harus ada lanjutan pengaturan penulisannya ul li
.post-body ol untuk mengatur button numerik ini juga harus ada pengaturan lanjutan penulisannya ol li
.post img adlah mengatur gambar yang ada dalam posting
.post footer ini untuk mengatur footer post
.main .widget ini adalah pengaturan untuk widget post itu sendiri. letaknya kalau dilihat ada diluarnya .post
Silahkan gunakan imajinasi Anda untuk mengaturnya

Mengatur CSS Sidebar / sidebar widget

Yang perlu diatur hampir sama dengan bagian post diatas. Perbedaannya terletak pada kata sebelumnya. Kurang lebih sebagi berikut:

.sidebar h3{font-size:105%;background:#999;margin:3px;padding:3px}
.sidebar ul {list-style:none;margin:0;padding:0;text-align:left}
.sidebar li {margin:0;padding-top:0;padding-right:0;padding-bottom:.25em;}
.sidebar ul li {border-bottom:1px solid #EFEFEF;line-height:1.2;}
.sidebar .widget{margin-bottom:5px}
.sidebar .widget-content{padding:0 8px;margin-bottom:10px;border:1px solid #C6C7C7}
.sidebar-ads .widget-content{padding:0 8px;margin-bottom:10px}

Disini saya menambahkan .sidebar-ads .widget. Maksud saya ini dgunakan apabila anda ingin menempatkan iklan di bagian sidebar. Tapi untuk menempatkaanya Anda harus membuat juga pemanggilnya
<b:section class='sidebar-ads' id='sidebar-ads' preferred='yes'>

Mengatu CSS Comment

Ini adalah pengaturan untuk kotak komentar yang ada dibawah postingan. Yang perlu diatur kurang lebih sebagai berikut:

#comments h4{margin:1em 0;font-weight:bold;color:#333333;}
#comments-block {margin:1em 0 1.5em;line-height:1.6em;}
#comments-block .comment-author {margin:.5em 0;}

#comments-block .comment-body {margin:.25em 0 0;}
#comments-block .comment-footer {margin:-.25em 0 2em;}
#comments-block .comment-body p {margin:0 0 .75em;}
.deleted-comment {font-style:italic;color:gray;}
.author-comments { background: #ddd;border: 1px solid #666666; padding: 5px; }
#comments-block .avatar-image-container img {background: #fff url(https://lh6.googleusercontent.com/-H6zAH-hO5lg/Tibog_Gg8qI/AAAAAAAAAYQ/QYvJ4OkVUm8/default-avatar-profile.png) no-repeat left top;width:32px;height:32px;}
#blog-pager-newer-link {float:left;}
#blog-pager-older-link {float:right;}
#blog-pager {text-align:center;}
.feed-links {margin-top:30px;clear:both;line-height:2.5em;}

Kalau Anda mengikuti dari awal, kayaknya tidak perlu dijelaskan lagi. Hanya disitu juga saya tuliskan #blog-pager dan feed-link, ini kalau anda melihat setiap posting blogger ada link berbunyi "newer post" dan "older post" dan juga "subscribe by email". Silahkan gunakan imajinasi anda. Disini kita sudah selesai dalam membuat pengaturan lanjutan. Insyaallah di lain waktu kita akan membuat perubahan pada template agar lebih SEO friendly. Bila ada pertanyaan, silahkan bertanya di kotak komentar.

Itulah beberapa pengaturan yang sebaiknya Anda tambahkan dalam CSS agar template yang Anda buat menarik. Selanjutnya silahkan kreasikan sendiri pengaturan template blogger buatan Anda sendiri.

Cemong Blog

Laman