Mempercantik Judul Artikel Dengan Menambahkan Bingkai

Selain dipengaruhi oleh faktor konten artikel yang unik dan bermanfaat, pada dasarnya tampilan halaman sebuah blog juga sangat mempengaruhi pengunjung agar senantiasa betah untuk membuka dan membaca setiap artikel pada blog yang dimaksud. Belum lagi bila didukung dengan loading halaman yang ringan, maka hal ini akan membuat pengunjung semakin betah berada di blog yang kita kelola.

Nah, bila pada artikel sebelumnya yang berjudul “Cara Mengatasi Konten Yang Menembus Bidang Posting”, kita memanfaatkan bingkai untuk mengatasi konten dalam bentuk kode HTML, CSS, Java Script atau konten lain yang melewati batas bidang posting, maka kali ini kita akan memanfaatkannya untuk mempercantik tampilan judul artikel yang kita terbitkan.

Pada prinsipnya kode yang digunakan untuk menambahkan bingkai pada judul artikel adalah serupa dengan kode yang digunakan untuk mengatasi konten yang menembus bidang posting. Dari kedua hal tersebut yang membedakan adalah dalam penerapan kode yang dimaksud. Jika kode tersebut digunakan untuk mengatasi konten yang menembus bidang posting penerapannya adalah dengan menyisipkannya dalam artikel yang akan diterbitkan, maka kode tersebut disisipkan pada template bila diterapkan untuk judul artikel.

Selanjutnya dalam hal menambahkan bingkai untuk mempercantik judul artikel yang diterbitkan, langkah-langkahnya adalah sebagai berikut:

1. Login ke akun Blogger Anda.
2. Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
3. Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
4. Centang pilihan ‘Expand Template Widget’.
5. Cari kode <b:includable id='post' var='post'> dan kemudian perhatikan bahwa di bawahnya terdapat kode <h3 class='post-title entry-title'> yang secara default adalah seperti di bawah ini.
   

        <h3 class='post-title entry-title'>
         <b:if cond='data:post.link'>
           <a expr:href='data:post.link'><data:post.title/></a>
         <b:else/>
           <b:if cond='data:post.url'>
             <b:if cond='data:blog.url != data:post.url'>
               <a expr:href='data:post.url'><data:post.title/></a>
             <b:else/>
               <data:post.title/>
             </b:if>
           <b:else/>
             <data:post.title/>
           </b:if>
         </b:if>
         </h3>

   
   
6. Ganti kode di atas dengan kode di bawah ini.
   

         <h3 class='post-title entry-title'>
         <div style='-moz-border-radius: 7px 7px 7px 7px; background-color: #f3f3f3; border: 1px solid #cccccc; height: auto; margin: 0px; overflow: auto; padding: 5px;  width: auto;'>
         <b:if cond='data:post.link'>
           <a expr:href='data:post.link'><data:post.title/></a>
         <b:else/>
           <b:if cond='data:post.url'>
             <b:if cond='data:blog.url != data:post.url'>
               <a expr:href='data:post.url'><data:post.title/></a>
             <b:else/>
               <data:post.title/>
             </b:if>
           <b:else/>
             <data:post.title/>
           </b:if>
         </b:if>
         </div>
         </h3>

   
   
7. Simpan template Anda.

Sebagai contoh atas penggunaan dan penerapan teknik di atas adalah seperti yang tampak pada gambar di bawah ini.

Screenshot: eltelu.blogspot.com

Namun perlu Anda perhatikan bahwa kode #f3f3f3 dan #cccccc yang terdapat pada langkah nomor enam (6) adalah kode yang menyatakan warna latar serta warna garis. Sehingga bila warna yang dihasilkan oleh kedua kode tersebut kurang sesuai, maka Anda dapat menggantinya menggunakan kode warna yang sesuai dengan keinginan Anda.