Box Lengkung Rounded Corners dilengkapi Efek dan Animasi di Judul Posting: Panduan BloGGeR Cara Membuat Rounded Corners

Panduan dan Tutorial Cara Membuat Box Melengkung atau Rounded Corners pada Judul Posting 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.

Cara Membuat box lengkung rounded corners dengan efek dan animasi di judul posting :

1. Login To BloGGeR/Login ke BloGGeR : Tulis "User Name/AlamatEmail" dan "Password/Sandi".
2. Dasboard/Dasbor : Setelah login dan sampeyan masuk di halaman "Dasbor" silahkan KLIK link "Layout/Tata Letak/Rancangan".
3. 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".
4. Backup/Restore Template : Back-up Template/Amankan Template dengan cara KLIK link "Download Full Template/Download Template Lengkap". Kalau ingin melihat "Panduan Cara Mengamankan Template (Back-Up)", sampeyan bisa KLIK di sini!
5. Expand Template Widget : KLIK "Expand Template Widget"
6. 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) :
   

   Kode yg dicari :

   .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;
   }

   
   Keterangan/Catatan:
   
   Di beberapa template yang lain, kode .post h3 dituliskan dalam bentuk berbeda seperti di bawah ini:
   

   Kode dalam bentuk berbeda :

   h3.post-title {
          margin-top: 20px;
   }
   h3.post-title a {
          font: $(post.title.font);
          color: $(post.title.text.color);
   }
   
   h3.post-title a:hover {
          text-decoration: underline;
   }

7. New CSS code/Kode CSS Baru : Gunakan kode CSS baru ini dan letakkan di tempat kode yang telah di hapus :
   
   

   Kode CSS :

   .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://gubhugreyotprojects-smallbg.googlecode.com/svn/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;
   }

8. Find HTML Code/Cari Kode HTML : Cari kode html di bawah ini :
   

   <h3 class='post-title entry-title'>

9. Kode HTML Lengkap Di bawah kode html di atas masih terdapat kode lanjutannya seperti di bawah ini :
   

   xHTML :

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

10. Ganti dengan kod HTML berikut : Hapus semua kode HTML di atas dengan kode HTML baru berikut ini :
    
    

    xHTML :

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

11. Gunakan Ctrl+F (keyboard) saat mencari kode dalam template supaya lebih cepat ditemukan. Bila belum begitu jelas tentang penggunaan "Ctrl+F" untuk mencari Kode HTML, silahkan baca panduannya dengan KLIK di sini!
12. Save Template/Simpan Template : KLIK "Save Template/Simpan Template".
13. Open Blog/Buka Blog : Buka blog sampeyan untuk melihat hasilnya.

Penting:
Tutorial ini telah sukses diuji coba dengan Template Tata Letak. Jika ingin menggunakan di Blogger Template Designer tentu harus dilakukan beberapa penyesuaian!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Senin PON, Maret, 05, 2012

» Happy Blogging - gubhugreyot «