Membuat Header Blog dengan 3 Elemen

Header blog dengan 3 elemen akan lebih mempermudah pengguna saat ingin menampilkan berbagai widget (gadget), iklan, teks, image atau kode html lain ke dalam box header. 3 elemen header terdiri atas elemen header default yang berisi blog title dan blog description, elemen header kiri (baru) serta elemen header kanan (baru). Lebar elemen dapat dibuat sesuai selera dan kebutuhan dan diperhitungkan dalam persen. Elemen header baru kanan dan kiri akan mempunyai fungsi dan kegunaan tak berbeda seperti elemen-elemen yang telah tersedia sebelumnya, seperti elemen sidebar, main, crosscol atau footer.

Arahkan cursor ke arah screenshoot di atas maka akan terlihat 2 widget (slideshow dan profil) yang berada disamping kiri dan kanan header default blogger yang berisi blog title dan description title. Ke-2 buah widget (gadget) berhasil ditampilkan dengan sangat mudah setelah 2 elemen baru header kita buat. Bentuk penambahan elemen baru yang terdapat di Page Elements (Elemen Laman) bisa terlihat dalam screenshoot di samping!

Demo Penggunaan Elemen Baru di Header Blog

Dalam demo akan bisa dilihat sebuah gadget blogger (Tampilan slide - Album web Picasa) berhasil ditambahkan di header berkat elemen baru yang dibuat di bagian header. Blog demo ini menggunakan 1 buah elemen header baru di sebelah kanan!

Kode CSS-1:

.GRnewHeader .widget h2.title, .GRnewHeader .widget h2{
       font-size:14px;
       text-transform:uppercase;
       font-weight:600;
       margin:10px;
}
.GRnewHeader .widget{
       padding:10px;
       font-size:12px;
       background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.1) 1%, rgba(153,151,151,0.1) 100%);
       background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       background: linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 1%,rgba(153,151,151,0.1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1a999797',GradientType=0 );
       margin:5px;
}

Kode CSS-2:

#header{
        float:right;
        width:50%;
        margin:0;
        padding:0;
}
#GR_headerRight{
        float: right;
        width: 25%;
        margin:0;
        padding:0; 
}
#GR_headerLeft{
        float: left;
        width: 25%;
        margin:0;
        padding:0;
}

xHTML

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
<b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
<b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='CSS3 Blogger Tutorial (Header)' type='Header'/>
      </b:section>
<div style='clear:both;'/>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>

Cara Membuat Header 3 Elemen

1. Login ke Blogger.
2. Setelah login dan halaman Dasbor (Dasboard) terbuka, cari dan klik Rancangan (Design).
3. Lanjutkan klik Edit HTML.
4. Lakukan Backup Template. Panduanya bisa dibuka di Special Tutorials yang ada di deret vertical menu sebelah kiri halaman blog.
5. Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode. Buka panduan mencari kode HTML di Special Tutorials
6. Copy dan pastekan Kode CSS-1 di atas kode ]]></b:skin>
7. Cari kode
   

   ]]>
   </b:template-skin>

   Kode ini letaknya beberapa kode di atas kode </head>
8. Copy dan pastekan Kode CSS-2 di atas kode
   

   ]]>
   </b:template-skin>

9. Cari kode:
   <div class='region-inner header-inner'>
10. Tambahkan kode xHTML baru hingga menjadi seperti kode xHTML di atas. Kode yang perlu di tambahkan adalah :
    

    <b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
    <b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
           .......
           .......
    <div style='clear:both;'/>

11. Klik Simpan Template (Save Template)
12. Klik Elemen Laman (Page Elements)
13. Coba gunakan elemen baru untuk menambah gadget!
14. Buka blog dan lihat hasilnya.
15. Selesai dan monggo silahkan bungkus widget-widget tercantik sampeyan di tempat baru yang indah ini.

Catatan/Keterangan:

1. Pada Kode CSS-1 menggunakan background rgba. Background bisa diganti sesuai selera seperti misalnya background transparent atau yang lain.
2. Untuk merubah lebar elemen header, lakukan perubahan pada persentase lebar header kiri, header (default) dan header kanan. Jumlah lebar ke-3 elemen header sebesar 100%.
3. Membuat elemen baru di header blogger template designer tidak dibatasi untuk 1, 2 atau tiga elemen saja. Jika dikehendaki kita dapat membuat sesuai jumlah yang diinginkan. Di bawah ini ada sebuah link yang di dalamnya berisi panduan untuk membuat header blogger dengan 2 elemen. Silahkan klik untuk mengikuti panduannya:
   Cara membuat header blogger dengan 2 elemen

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

Posting » Minggu KLIWON, February, 26, 2012

» Happy Blogging - gubhugreyot «