Cara Membuat Efek Pada Judul Postingan

Cara Membuat Efek Pada Judul Postingan dimaksudkan untuk memberikan tampilan baru yang berbeda dengan penampilan biasanya. Untuk membuat box judul posting seperti di atas, kita hanya akan menggunakan kode CSS dan xHTML sehingga beban kode sama sekali tidak mempengaruhi loading blog atau bahkan bisa dikatakan beban blog sama sekali tidak bertambah. Keunggulan dari desain ini adalah dengan ditambahkannya efek transparansi serta background animasi yang membuat penampilan menjadi sangat luar biasa cantik, serta ...dan ini yang paling penting ....! Dia kompatibel di semua browser! Jelas sebuah accecories blog yang pantas dipertimbangkan untuk ditampilkan guna membuat blog tampil semakin manis.

Berikut Cara Membuat Efek Pada Judul Postingan sebagai berikut:

Login To Bloger/Login ke Bloger : Tulis "User Name/AlamatEmail" dan "Password/Sandi".
Dasboard/Dasbor : Setelah login dan sampeyan masuk di halaman "Dasbor" silahkan KLIK link "Layout/Tata Letak/Rancangan".
Layout/Tata Letak : Setelah melewati halaman "dasbor" sampeyan akan memasuki halaman baru "Page Element/Elemen Laman" yang masih termasuk halaman "Tata Letak". KLIK link "Edit HTMl".
Backup/Restore Template : Back-up Template/Amankan Template dengan cara KLIK link "Download Full Template/Download Template Lengkap".
Expand Template Widget : KLIK "Expand Template Widget"
Find CSS code and Delete/Cari dan Hapus Kode CSS : Hapus beberapa syntax yang seperti kode CSS di bawah ini : ".post h3" dan ".post h3 a, .post h3a:hover", serta ".post h3 a:visited, kemudian ganti dengan kode CSS baru seperti di bawahnya.

Bentuk syntax yang harus di hapus kira-kira seperti di bawah ini (contoh dari template Minima) :

.post h3 {
      margin:.25em 0 0;
      padding:0 0 4px;
      font-size:140%;
      font-weight:normal;
      line-height:1.4em;
      color:$titlecolor;
      }
.post h3 a, .post h3 a:visited, .post h3 strong {
      display:block;
      text-decoration:none;
      color:$titlecolor;
      font-weight:bold;
      }
.post h3 strong, .post h3 a:hover {
      color:$textcolor;
   }

Kemudian ganti kode yang diatas dengan kode di bawah ini:

.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888787; margin:0 5px;}
.b2 {height:1px; background:#333333; border-right:2px solid #888787; border-left:2px solid #888787; margin:0 3px;}
.b3 {height:1px; background:#333333; border-right:1px solid #888787; border-left:1px solid #888787; margin:0 2px;}
.b4 {height:2px; background: #333333; border-right:1px solid #888787; border-left:1px solid #888787; margin:0 1px;}
.bgjudul {background: #555 url();; border-right:1px solid #888787; border-left:1px solid #888787;}
.bgposting {background: #000;; border-right:1px solid #888787; border-left:1px solid #888787;}
.teksjudul{padding:0 10px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);text-align:center;}
.bgjudul:hover {background:#6b6a69 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGrayBlackAnimaH11V38.gif) center;}
.teksjudul:hover {opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);}
.post h3 a{
      color:#00f3fc;
      text-decoration:none;
      }
.post h3 a:visited{
      color:#fa03fd;
      }
.post h3 a:hover{
      color:red;
      text-decoration:underline;
      }
.post h3 {
      font-family:Times New Roman;
      margin:.25em 0 0;
      padding:0 0 4px;
      font-size:150%;
      font-weight:500;
      line-height:1.4em;
      color:$titlecolor;
}

Lalu cari kode 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'>
          <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
          <data:post.title/>
       </b:if>
    </b:if>
</h3>

Kemudian ganti kode diatas dengan kode dibawah ini :

<h3 class='post-title entry-title'>
  <div>
     <b class='b1'/><b class='b2'/><b class='b3'/><b class='b4'/>
       <div class='bgjudul'>
         <div class='teksjudul'>
           <b:if cond='data:post.link'>
           <a expr:href='data:post.link'><data:post.title/></a>
           <b:else/>
           <b:if cond='data:post.url'>
           <a expr:href='data:post.url'><data:post.title/></a>
           <b:else/>
           <data:post.title/>
           </b:if>
           </b:if>
        </div></div>
      <b class='b4'/><b class='b3'/><b class='b2'/><b class='b1'/>
   </div>
</h3>