Heading Style with Effect

Heading style with effect tidak hanya dapat digunakan untuk membuat sebuah judul/title sebuah paragraf saja, namun dapat digunakan dan dikembangkan untuk berbagai hal lain dalam blog, seperti misalnya untuk membuat sebuah link, baik saat posting ataupun saat menggunakan gadget. Heading yang sangat berbeda dengan bentuk/tampilan heading pada umumnya ini bertujuan agar membuat blog terlihat berbeda dan lebih indah. Effek yang tercipta dihasilkan melalui css3 transition dan opacity effect. CSS3 lain yang digunakan adalah border-radius yang digunakan untuk membentuk sudut lengkung. Silahkan anda klik link demo di bawah ini untuk mengetahui secara lebih jelas seperti apa sebenarnya yang dimaksud dengan heading style with effect serta kegunaannya.

D E M O

Langkah untuk membuat Heading Style with Effect :

Kode CSS :

h4.GRheading{
        font-family:Times New Roman; 
        font-size:18px; 
        font-weight:bold; 
        padding:5px  0; 
        border-bottom:1px solid #aaa; 
        border-left:30px solid #aaa; 
        opacity:0.7;
        filter:alpha(opacity=70);
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
}
h4.GRheading:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        border-color:#900;
}
h4.GRheading,h4.GRheading span{
        transition:0.8s linear;
        -o-transition:0.8s linear;
        -moz-transition:0.8s linear;
        -webkit-transition:0.8s linear;
        -ms-transition:0.8s linear;
}
h4.GRheading span{
        border-top-right-radius:5px;
        padding:3px 10px;
        margin-left:3px;
        margin-top:-5px;
        display:block;
        color:#eee;
        text-shadow:1px 1px 1px #000;
        letter-spacing:-1px;
        border-top:3px solid #888;
        border-right:2px solid #888;
        background:#555;
}
h4.GRheading:hover span{
        color:#900;
        background:#aaa;
        border-color:#666;
        text-shadow:2px 2px 2px #888;
}

xHTML untuk judul Paragraf atau judul lainnya:

<h4 class="GRheading">
<span>Tuliskan teks di sini!</span></h4>

xHTML untuk membuat link:

<a href="URL" title="title here"><h4 class="GRheading">
<span>Tuliskan teks di sini!</span></h4>
</a>

Cara membuat heading style with effect :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

1. Panduan cara backup template, mencari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials yang terletak di menu sebelah kiri halaman.
2. Untuk membuat background berbeda pada heading style with effect, anda dapat menggunakan background image.

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

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «