Ketika membuka blog pada layar yang berbeda, mungkin kita akan menemukan satu hal yang unik. Tampilan blog tidak berubah seperti aslinya, terutama bagi blog yang struktur pengkodean menggunakan fixed layout. Tidak jarang kita menggeser ke kanan & ke kiri — lama-lama jari jadi lentik— untuk membaca artikel atau beberapa widget pada sidebar. Idealnya, tampilan yang baik adalah menggeser ke atas & ke bawah.
Sebuah hal yang menarik ketika Blogger™ menambahkan fitur ini dalam kapabilitas tampilan blog pada versi mobile. Namun yang menjadi kendala adalah ketika kita telah menerapkan beberapa conditional tags dalam sebuah pengkodean atau widget, maka hal itu akan menjadi kompleks. Meskipun dalam penerapan untuk versi mobile sudah dapat dikustomisasi menurut keinginan pengelola, seperti menambahkan mobile='yes', mobile='no', dan mobile='only' pada widget ataupun penggunaan conditional tags berikut.
<b:if cond='data:blog.isMobile'>
Sebagai alternatif kita dapat menerapkan desain yang responsif pada blog dengan menggunakan media queries. Bukankan antara perangkat komputer &mobile berbeda dari sisi kekuatan memuat suatu halaman situs web atau blog? Benar sekali, jika ditampilkan dalam default, besar kemungkinan waktu memuat pada mobile akan lebih singkat. Tetapi apabila kita melakukan kustomisasi — pada tampilan mobile — hingga hampir mirip dengan tampilan di perangkat komputer, tentu akan menambah beban juga bukan? Yah, terutama di Blogger™. Berikut contoh sederhana penerapan media queries dalam CSS template — Optimasi Blog menggunakan cara ini.
@media screen and (max-width:800px) { … CSS untuk media screen dengan lebar maksimal 800px … <!-- contoh CSS: body { font-size: .875em; line-height: 1.7143em; } --> }
@media screen and (max-width:600px) { … CSS untuk media screen dengan lebar maksimal 600px … }
Atau dengan menggunakan penggabungan media queries (min & max)
@media screen and (min-width:600px) and (max-width:800px) { … CSS untuk media screen dengan lebar minimal 600px dan maksimal 800px … }
Catatan: kode yang berwarna merah merupakan lebar layar, kita dapat menambah variabel lebar yang lain (1024px, 800px, 600px, 480px, 320px, dan sebagainya) di dalamnya. Dan masih banyak lagi metode media queries lain yang mungkin tidak hanya terbatas pada lebar layar, seperti lebar device (device-width).
Dengan menggunakan media queries, diharapkan tampilan blog akan sesuai dengan beberapa ukuran lebar layar yang berbeda. Tentunya harus disesuaikan pula dengan pengkodean template pada masing-masing blog. Kemudian akses URL yang dilakukan pengguna mungkin tidak akan bervariasi, seperti penambahan ?m=0 atau ?m=1 di belakang permalink. Hal inilah yang menjadi dasar mengapa saya mencoret “Lihat versi mobile” pada kaki blog ini, namun akan menjadi alternatif apabila akses sedang ‘lemot’ pada pengguna mobile.
Para blogger tentu sudah tidak asing lagi dengan yang namanya “Formulir Kontak”. Formulir kontak berguna sebagai media interaksi pengunjung agar terhubung langsung ke email pengelola blog. Formulir ini berbeda dengan meninggalkan komentar & memiliki skala yang lebih luas, contoh: memberikan saran berkenaan dengan blog atau permintaan posting, bertanya tentang suatu topik posting ketika komentar pada posting tersebut telah ditutup, dan sebagainya
Banyak layanan pihak ketiga yang menyediakan fasilitas ini, antara lain: EmailMeForm, Kontactr, Foxyform & FreeContactForm. Nah, sekarang bagaimana jika kita ingin membuat formulir kontak sendiri? Salah satu alternatifnya adalah dengan menggunakan PHP (Hypertext Preprocessor), seperti yang akan Optimasi Blog deskripsikan berikut.
Web Hosting
Langkah awal, kita harus memiliki hosting. Mungkin salah satu situs web yang menyediakannya secara gratis adalah 000webhost.com (jika tidak berkeberatan, taut tersebut merupakan afiliasi Optimasi Blog di 000webhost) atau dapat menggunakan hosting lain. Kemudian buat satu subdomain gratis yang disediakan oleh layanan tersebut. Silakan buka akun email sesuai dengan email yang didaftarkan pada 000webhost untuk melihat konfirmasi akun. Jika sudah, kembali ke 000webhost & beranjak ke Cpanel. Klik icon “File Manager” dan masukkan kata sandi sesuai dengan waktu pendaftaran atau ganti kata sandi berbeda (baru) dengan melakukan akses ke “View FTP Detail”. Sekarang kita berada dalam File Manager, buka berkas public_html. Hapus file “default.php”, kemudian buat file baru bernama “index.php” yang berisi Silence is golden.
<?php // Silence is golden. ?>
Nah, sekarang subdomain gratis telah dapat kita pergunakan untuk menyimpan berbagai berkas. Selanjutnya masih di dalam berkas public_html, kita membuat file PHP yang nantinya akan dimunculkan sebagai formulir isian kontak.
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) { ob_start("ob_gzhandler"); } else { ob_start(); } ?> <?php error_reporting( 0 );?> <?php //Memperbaiki kesalahan pemberitahuan pada debug $nameError = ''; $emailError = ''; $commentError = ''; //Mengecek apakah isi form sudah dikirim if(isset($_POST['submitted'])) { //Mengecek apakah chaptcha rahasia terisi if(trim($_POST['checking']) !== '') { $captchaError = true; } else { //Mengecek apakah kolom nama sudah diisi if(trim($_POST['contactName']) === '') { $nameError = 'Silakan isi nama Anda terlebih dahulu'; //Pesan error jika kolom nama kosong $hasError = true; } else { $name = trim($_POST['contactName']); } //Mengecek apakah kolom alamat email sudah diisi dan valid if(trim($_POST['email']) === '') { $emailError = 'Anda lupa untuk memasukkan alamat email';//Pesan error jika kolom email kosong $hasError = true; } else if (!preg_match("/^[a-z0-9]+([_\\.-][a-z0-9]+)*@([a-z0-9]+([\.-][a-z0-9]+)*)+\\.[a-z]{2,}$/i", trim($_POST['email']))) { $emailError = 'Alamat email yang Anda masukkan tidak valid';//Pesan error jika alamat email tidak valid $hasError = true; } else { $email = trim($_POST['email']); } //Mengecek apakah kolom isi pesan sudah disi if(trim($_POST['comments']) === '') { $commentError = 'Apakah Anda ingin mengirim pesan kosong? Silakan isi pesan Anda';//Pesan error jika kolom pesan masih kosong $hasError = true; } else { if(function_exists('stripslashes')) { $comments = stripslashes(trim($_POST['comments'])); } else { $comments = trim($_POST['comments']); } } //Mengirimkan pesan, jika semua kolom telah diisi dengan valid if(!isset($hasError)) { $emailTo = 'email@example.com';//Alamat email tujuan, ganti dengan email anda $subject = 'Pesan via formulir kontak dari '.$name;//Judul pesan yang masuk ke email kita dari form kontak $sendCopy = trim($_POST['sendCopy']);//Opsi untuk mengirimkan salinan pesan kepada pengirim $body = "Nama: $name \n\nEmail: $email \n\nIsi Pesan: $comments";//Isi Email $headers = 'From: Optimasi Blog <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;//Header email mail($emailTo, $subject, $body, $headers); if($sendCopy == true) { $subject = 'Pesan Anda dari nama blog Anda';//Judul pesan salinan kepada pengirim apabila checkbox kirim salinan dicentang $headers = 'From: admin blog <email@example.com>';//Header email pesan salinan, silakan diedit nama dan alamat emailnya mail($email, $subject, $body, $headers); } $emailSent = true; } } } ?> <!DOCTYPE html> <html> <head> <title>Formulir Kontak</title> <link rel="stylesheet" href="/css/style.css.php"/> </head> <body> <?php if(isset($emailSent) && $emailSent == true) { ?> <h3>Terima kasih, <?=$name;?></h3> <p>Pesan Anda telah dikirim, kami akan segera membalas secepat mungkin.</p> <?php } else { ?> <?php if(isset($hasError) || isset($captchaError)) { ?> <p class="error">Maaf, tampaknya ada masalah dalam pengiriman pesan Anda, silakan coba lagi :)<p> <?php } ?> <form action="contact-form.php" id="contactForm" method="post"> <p class="contact-form-author"> <label for="contactName">Nama <small>*</small></label> <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="30" tabindex="1" class="requiredField" /> <?php if($nameError != '') { ?> <span class="error"><?=$nameError;?></span> <?php } ?> </p> <p class="contact-form-email"> <label for="email">Email <small>*</small></label> <input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" size="30" tabindex="2" class="requiredField email" /> <?php if($emailError != '') { ?> <span class="error"><?=$emailError;?></span> <?php } ?> </p> <p class="contact-form-message"> <label for="commentsText">Pesan <small>*</small></label> <textarea name="comments" id="commentsText" cols="45" rows="8" tabindex="3" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea> <?php if($commentError != '') { ?> <span class="error"><?=$commentError;?></span> <?php } ?> </p> <p class="inline"> <input type="checkbox" name="sendCopy" id="sendCopy" tabindex="4" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Kirim salinan pesan ini ke email Anda.</label> </p> <p class="screenReader"> <label for="checking" class="screenReader">Biarkan seperti ini!</label><input type="text" name="checking" id="checking" size="10" tabindex="5" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /> </p><!--Chaptca rahasia--> <p class="contact-form-submitted"> <input name="submitted" type="submit" id="submitted" tabindex="6" value="Kirim Pesan" /> </p> </form><!-- #contactForm --> <?php } ?> </body> </html>
Untuk kode yang berwarna merah merupakan kompres file dengan menggunakan gzip & warna biru diisi dengan email serta nama blog, sesuaikan dengan keterangan yang diberi warna hijau. Beri nama file di atas menjadi “contact-form.php” (tanpa tanda petik). Adapun <link rel="stylesheet" href="/css/style.css.php"/> akan kita buat terpisah dari file induk (contact-form.php)
Buat direktori baru dengan nama “css” (tanpa tanda petik). Masuk ke dalam direktori css, kemudian tambahkan file baru dengan nama “style.css” (tanpa tanda petik) yang isinya lebih kurang sebagai berikut.
Silakan Anda kustomisasi pengkodean CSS (Cascading Style Sheets) di atas, sehingga sesuai dengan keinginan dan/atau template Anda. Jangan lupa membuat satu file baru (dalam folder css) lagi untuk mengompresi CSS tersebut & beri nama “style.css.php” (tanpa tanda petik).
<?php ob_start("ob_gzhandler"); ob_start("compress"); // required header info and character set header("Content-type: text/css; charset: UTF-8"); // duration of cached content (Cache for 1 weeks) $offset = 60 * 60 * 24 * 7; $ts = gmdate("D, d M Y H:i:s", time() + $offset) . " GMT"; // cache control to process header ('Cache-Control: max-age=' . $offset . ', must-revalidate'); //set etag-header header('ETag: "'.md5($ts).'"'); // expiration header format $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT"; // send cache expiration header to browser header($ExpStr); // initialize compress function for white-space removal ob_start("compress"); // Begin function compress function compress($buffer) { // remove comments $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); // remove tabs, spaces, new lines, etc. $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); // remove unnecessary spaces $buffer = str_replace('{ ', '{', $buffer); $buffer = str_replace(' }', '}', $buffer); $buffer = str_replace('; ', ';', $buffer); $buffer = str_replace(', ', ',', $buffer); $buffer = str_replace(' {', '{', $buffer); $buffer = str_replace('} ', '}', $buffer); $buffer = str_replace(': ', ':', $buffer); $buffer = str_replace(' ,', ',', $buffer); $buffer = str_replace(' ;', ';', $buffer); return $buffer;} require_once('style.css'); ob_end_flush(); ?>
Dua file dalam direktori css, yakni style.css dan style.css.php dengan pemanggilan <link rel="stylesheet" href="/css/style.css.php"/> pada file contact-form.php
Sekarang formulir kontak telah siap dimanfaatkan serta diletakkan pada blog, biasanya dalam halaman kontak. Sebelumnya — mungkin ini sifatnya opsional (tambahan) — menambah beberapa pengaturan pada .htaccess agar lebih maksimal. Baris pertama umumnya telah otomatis ditambahkan, tinggal melakukan konfigurasi untuk baris-baris selanjutnya. Taut kredit khusus untuk Mutohar Alwi dalam posting Cara Setting Expired Header.
# Do not remove this line, otherwise mod_rewrite rules will stop working <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
# Prevents directory listing IndexIgnore *
# Strong HTACCESS Protection <Files ~ "^.*\.([Hh][Tt][Aa])"> order allow,deny deny from all satisfy all </Files>
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Isi keseluruhan public_html (subdomain) yang terdiri dari satu folder css dan tiga buah file (.htaccess, index.php, dan contact-form.php).
Implementasi Formulir Kontak dalam Blog
Setelah melakukan beberapa langkah-langkah di atas pada hosting kita untuk mendukung fasilitas kontak. Sekarang bagaimana cara melakukan konfigurasi formulir kontak tersebut dalam blog? Cukup ringkas, buat halaman statis baru (contoh: h**p://namablog.blogspot.com/p/kontak.html) dengan beberapa kalimat sebagai pembuka. Kemudian tambahkan markah berikut di bawah kalimat pembuka.
Perhatikan namasubdomain (warna merah) harus sesuai dengan yang kita daftarkan, contoh: optimasi.netai.net, optimasi.site90.com, dan sebagainya. Kemudian tambahkan CSS berikut pada template untuk mengatur markah object& letakkan di bawah ]]></b:skin>.
Kemungkinan yang banyak diutak-atik adalah CSS object pada properti height agar formulir kontak tampil penuh, ketika memunculkan pesan error pada saat mengklik tombol “Kirim Pesan”. Taut demonstrasi dapat dilihat pada halaman Kontak Optimasi Blog. Berikut beberapa penampakkan hasil uji coba formulir komentar pada akun email pengelola blog.
Bosan membacanya? Oleh karena terlalu panjang, meskipun sebenarnya dapat dikustomisasi lebih singkat. Posting membuat formulir kontak ini merupakan bahan dokumentasi penulis serta sedikit menambah wawasan kita tentang ‘dunia’ hosting & bagaimana melakukan optimalisasi terhadap sejumlah file didalamnya. Tidak menutup kemungkinan terdapat kekeliruan dalam penyampaian atau pengkodean di atas, sehingga dibutuhkan kritik serta saran agar dapat memperbaiki posting ini.
Anda mungkin pernah membaca posting Menambah Lokasi Link Post (Breadcrumbs Trail) oleh Hoctro. Posting ini juga berhubungan dengan hal tersebut, namun di-aransemen dengan beberapa hack agar muncul di beberapa halaman & ditambahkan format microdata data-vocabulary. Penggunaan data-vocabulary dimaksudkan agar breadcrumbs mampu berdiri sendiri, sehingga akan harmonis dengan format microdata http://schema.org/Blog. Lebih lanjut mengenai breadcrumbs yang didukung beberapa format dapat kita telaah pada Rich snippets — Breadcrumbs.
Untuk pengkodean berwarna merah, dapat diganti sesuai keinginan Anda dengan menyesuaikan pula di halaman apa ia ditampilkan. Sedangkan warna biru (“/”) merupakan pemisah (separator) antar title. Letakkan pengkodean pada “Edit HTML”, jangan lupa centang Expand Widget Templates. Kemudian cari kode berikut & taruh di atasnya.
<b:includable id='main' var='top'>
Kita telah menambahkan widget breadcrumbs (kalau boleh dikatakan demikian), tinggal cara memanggil serta meletakkan kode pemanggilan tersebut. Perlu diperhatikan, kemungkinan pengkodean tiap template dapat berbeda-beda. Cara memanggilnya adalah melalui markah berikut.
<b:include data='posts' name='breadcrumb'/>
Letakkan kode pemanggilan itu di atas <b:include data='top' name='status-message'/>, seperti yang dapat kita amati di bawah ini.
Penambahan breadcrumbs di atas, khusus dilakukan pada Blogger™ & pengkodeannya tidak mutlak demikian. Artinya kita masih dapat merubah atau melakukan modifikasi sesuai dengan pengkodean template yang digunakan.
Bahan Bacaan: Breadcrumb for Blogger format RDF (Resource Description Framework) — Blogger Plugins.
Sebenarnya membuat gadget atau widget posting atau komentar terbaru adalah sangat mudah, yaitu dengan memanfaatkan feed default bagi pengguna Blogger™.
Cara menambahkan kedua feed di atas dilakukan melalui kustomisasi Tata Letak (Layout) pada dashboard akun Blogger™ Anda.
Kemudian pada jendela pop-up yang terbuka, pilih gadget “Feed”.
Masukkan URL feed default Blogger™ Anda, seperti yang telah diperlihatkan di atas (satu gadget berarti satu URL)& jangan lupa diganti nama blog yang berwarna merah dengan Blog Anda. Eksekusi dengan mengklik tombol “Continue”.
Selanjutnya akan ditunjukkan beberapa pengaturan yang dapat Anda kustomisasi pada gadget atau widget feed yang baru dibuat tersebut. Akhiri dengan mengklik tombol “Save”.
Mungkin yang kurang nyaman dilihat hanya pada gadget atau widget komentar terbaru (recent comments), karena isi komentar — jumlahnya dapat diatur pada saat konfigurasi feed — akan ditampilkan pula. Alternatifnya kita dapat mengganti dengan memilih gadget “HTML/JavaScript”, kemudian masukkan script berikut, sehingga komentar terbaru akan menampilkan nama komentator & judul posting.
Catatan: Widget komentar terbaru akan ditampilkan dalam daftar urut (<ul>). Teks “On” menunjukkan pemisah antara nama komentator & dengan judul posting. Angka 5 menunjukkan jumlah komentar & angka 0 merupakan isi komentar serta jangan lupa mengganti nama blog dengan blog Anda.
Untuk demonstrasi dapat dilihat pada sidebar atau footer Optimasi Blog — Komentar Terakhir & Posting Terakhir.
Setiap blogger pasti tahu, apa yang dimaksud dengan halaman arsip? Ya, betul sekali. Halaman itu terdiri dari kumpulan posting yang tersusun secara teratur, baik berdasarkan tahun, bulan, tanggal terbit, kategori, label, atau berisi keseluruhan item — yang telah disebutkan sebelumnya — dan sebagainya. Banyak sekali metode yang dapat dimanfaatkan untuk membuat halaman arsip, antara lain: menggunakan JavaScript &widget.
Trik blogger kali ini “Optimasi Blog” akan berbagi tentang membuat halaman arsip dengan menggunakan widget arsip dan widget label pada Blogger™. Ini didapat dari hasil blog-walking ke “Simple Blogger Tutorial” dalam posting Create a Separate Label or Archive Page in Blogger yang ditulis oleh Raju.
Petama, buatlah terlebih dulu sebuah halaman statis yang akan menampilkan arsip — contoh: Arsip — sehingga akan terbentuk sebuah permalink baru, seperti: h**p://namablog.blogspot.com/p/arsip.html. Isilah halaman itu dengan kalimat pembuka atau lainnya.
Kedua, masuk ke akun Blogger.com & pergi ke “Edit HTML”. Backup terlebih dulu template sebelum melakukan trik blogger ini. Perhatikan pula struktur pengkodean template, karena sangat dimungkinkan akan berbeda. Cari kode berikut, kemudian tambahkan kode yang berwarna merah di bawahnya.
Jangan lupa disimpan & sekarang Anda telah memiliki elemen baru di bawah “Posting Blog”, dengan selector class='main' dan id='main1'. Elemen itu dapat Anda tambahkan maksimal 2 gadget — maxwidgets='2' — pada dashboard Blogger™ dalam menu “Tata Letak” (Layout).
Ketiga, tambahkan widget label dan widget arsip dengan mengklik add a gadget, sehingga tidak ada lagi opsi add a gadget pada elemen di bawah “Posting Blog”. Oleh karena kedua widget tersebut akan ditampilkan hanya pada halaman tertentu, yakni h**p://namablog.blogspot.com/p/arsip.html, maka diperlukan kustomisasi dengan memanfaatkan conditional tags.
Keempat, kembali ke “Edit HTML” & centang Expand Widget Templates. Cari kode berikut — dalam widget arsip maupun widget label — kemudian sisipkan dengan kode yang berwarna hijau.
<b:widget … > <b:includable id='main'> <b:if cond='data:blog.url == "h**p://namablog.blogspot.com/p/arsip.html"'><!-- sesuaikan alamat dengan halaman yang dibuat untuk arsip --> …code widgets… </b:if> </b:includable> </b:widget>
Conditional tags di atas berarti bahwa, widget akan ditampilkan hanya pada halaman dengan alamat h**p://namablog.blogspot.com/p/arsip.html, selain URL tersebut maka widget tidak akan ditampilkan.
Kelima, apabila menuju halaman lain — selain h**p://namablog.blogspot.com/p/arsip.html — masih terlihat janggal. Yah, mungkin tersisa ruang kosong karena pengaruh pengkodean elemen, seperti margin atau padding. Coba tambahkan CSS berikut di bawah ]]></b:skin>.
CSS (Cascading Style Sheets) di atas dimaksudkan, jika URL bukan h**p://namablog.blogspot.com/p/arsip.html, maka selectorid='main' — #main1 — disembunyikan.
Untuk demontrasi trik blogger di atas, silakan klik taut arsip “Optimasi Blog”. Apabila terdapat kekeliruan dalam deskripsi tentang membuat halaman arsip tanpa javascript, mari kita perbaiki bersama melalui kolom komentar. Begitu pula jika terdapat pertanyaan atau kritik dapat kita diskusikan pada media yang sama pula.
Pernah melihat hal yang menarik pada tanggal posting (date-header)? Atau kebanyakan tidak melihat, oleh karena tidak jarang elemen ini dihilangkan? Date Header merupakan kepala (judul) tanggal yang terdiri dari satu atau lebih posting, dimana mereka diterbitkan pada tanggal yang sama. Seandainya hari ini — 21 Oktober 2012 — Anda dapat menerbitkan sebanyak dua posting, maka kedua posting tersebut akan memiliki kepala tanggal 21 Oktober 2012.
Sebenarnya date header pada Blogger™ dapat ditampilkan dengan menarik, seperti sebagai icon kalender atau bentuk-bentuk lain. Mungkin disebabkan kekurang-tahuan kita, sehingga tidak jarang menghilangkan elemen ini. Berikut merupakan gambar pengaturan tanggal posting, baik melalui language and formating atau tata letak (layout) posting blog & kode elemen-nya.
Pengaturan tanggal posting (date-header) melalui language and formating.Pengaturan tanggal posting (date-header) melalui tata letak (layout) posting blog.
Backup terlebih dulu template sebelum melakukan trik blogger berikut ini. Kemudian akses edit HTML melalui menu Template pada dashboard Blogger™, klik tombol proses & centang “Expand Widget Templates”. Tampilan tanggal posting dapat dibuat sedikit menarik dengan menambahkan script berikut di atas </head>, sehingga nantinya format tanggal mudah untuk dikustomisasi.
Cari markah date-header seperti pada kode yang diberi warna merah di atas, kemudian ganti dengan kode berikut. Oleh karena beberapa pengaturan template pada blog penulis, maka <h2> diganti dengan <div>.
Format tanggal posting harus sesuai seperti gambar (figure) di atas, letaknya — sampai posting ini diterbitkan — berada pada urutan ketiga dari bawah (third from bottom). Contoh: “Oktober 21, 2012” atau “October 21, 2012“. Selanjutnya, menambahkan CSS berikut di atas ]]></b:skin>.
.date-header { background: #666; color: #fff; float: left; position: relative; text-align: center; width: 44px;/* perhatikan border-width left & right */ } .date-header:after { content: ''; display: block; position: absolute; bottom: -20px;/* perhatikan border-width top & bottom */ left: 0; border-color: #666 #666 #fff #666; /* nilai kode yang berwarna biru sama dengan nilai pada warna latar */ border-style: solid; border-width: 8px 22px 12px;/* top=8px, bottom=12px, left & right masing-masing=22px */ } .date-header .month { border-bottom: 1px solid #fff; display: block; } <!-- Menghilangkan koma & tahun --> .date-header .sep, .date-header .year { clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } <!-- Memberikan ruang disebelah kiri untuk ditempati date-header --> .post { padding-left: 58px; }
Terkadang .post dapat pula diganti dengan .post-outer — sedangkan atribut padding dapat pula diganti dengan margin — tergantung pengkodean dalam tiap-tiap template. Hasilnya dapat dilihat pada tanggal posting di blog ini atau dapat diamati melalui gambar berikut.
Sekarang tampilan tanggal posting lebih menarik bukan? Pun tidak perlu lagi meng-unggah gambar & sebagainya. Selamat mencoba trik blogger “memodifikasi tanggal posting (date-header)”. :)
