-----------------------------------------------------------------------------------------------

Jumat, 09 Januari 2015

Membuat Header 3 elemen

Membagi header menjadi 3 elemen langsung saja pesiapkan kode css berikut untuk dicopy pastekan:

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 sekaligus lihat sumber asli postingan ini: 
Cara membuat header blogger dengan 2 elemen

Tidak ada komentar:

Posting Komentar