Cumulus swf - flash

Bru masuk angin!

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

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!


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 «

5 komentar:

  1. Thanks atas infonya sob ;)
    sangat bermanfaat bangt

    BalasHapus
  2. kalau dibuat 2 element saja gimana caranya mas?
    biar bisa pasang iklan,
    cthnya saja header element 1 panjang 40 persen dan elemen 2 dibuat 60 persen panjangnya

    BalasHapus
  3. kode untuk menaruh css2 ga ada nih om ..
    gimana solusinya ???

    BalasHapus
    Balasan
    1. Muhammad Risdiyanto ... : Ganti #header pada css2 dg #header-wrapper, kemudian simpan css1 & css2 hasil perubahan (yg sudah dirubah jadi #header-wrapper) di atas ]]></b:skin> .

      Lanjutkan cari :

      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='NAMA BLOG ANDA (Header)' type='Header'/>
      </b:section>
      </div>

      Ganti dg kode html berikut:

      <b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
      <b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='NAMA BLOG ANDA (Header)' type='Header'/>
      </b:section>
      </div>
      <div style='clear:both;'/>

      Lanjutkan cari :

      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='NAMA BLOG ANDA (Header)' type='Header'/>
      </b:section>
      </div>

      Ganti dg kode html berikut:

      <b:section class='GRnewHeader' id='GR_headerRight' maxwidgets='1' showaddelement='yes'/>
      <b:section class='GRnewHeader' id='GR_headerLeft' maxwidgets='1' showaddelement='yes'/>
      <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='NAMA BLOG ANDA (Header)' type='Header'/>
      </b:section>
      </div>
      <div style='clear:both;'/>

      Hapus

 
GR | Edited by | gubhug reyot