Mempercantik Tampilan Judul Posting

Melihat gambar diatas sudah jelas bahwa tema posting kali ini adalah bagaimana cara membuat blog 'makin cantik' dengan menambahkan kotak bingkai di judul posting.

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 Sobat. 

Notes : Namun perlu Sobat 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 Sobat dapat menggantinya 
menggunakan kode warna yang sesuai dengan keinginan sendiri.

Sumber: http://eltelu.blogspot.com/2012/04/mempercantik-judul-artikel-dengan.html#ixzz2EqezFouC