Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

5 komentar:

  1. Pak,punya saya tidak ada kode yang
    < h3 class = 'post-title entry-title' >
    www.ahmad-mufid.co.cc

    BalasHapus
  2. Box lengkung:
    di beberepa template lain .post h3 di tulis dalam bentuk h3.post-title{...) --> di posting telah di perjelas.

    Support buat gubhug reyot:
    Terima kasih yang sedalam-dalamnya atas segala dorongan semangat dari semua sobat blogger. Membuat template adalah salah satu rencana yang hingga saat ini blom dapat terwujud. Semoga segera bisa di release!
    Semoga tutorial ini memberi manfaat dan mampu memberi dorongan semangat sekaligus pemahaman baru tentang desain blog! Segala kekurangan mohon maaf sebesar2nya!

    BalasHapus
  3. yes saya bisa namun anehnya tidak sama kenapa yah mas

    BalasHapus
  4. Emang gak semua templat sama bang ,, termasuk saya yg kesulitan mengatasi nya , saya pake templat pt wangun bgt

    BalasHapus

 
GR | Edited by | gubhug reyot