Popular posts

Labels

Tampilkan postingan dengan label Blog Hack. Tampilkan semua postingan

Cara Membuat Atau Menambah 3 Kolom Dibawah Header

Rabu, 29 Februari 2012
Posted by tt
Add Comments
,
Read More...
hari ini akhirnya berkesempatan Lagi untuk mengurus Dapur setelah beberapa hari ini Dapur Ditinggalkan karna disibukkan Dengan Proyek Akhir dan Tugas Akhir Skripsi jadi Sekedar istrahat dan menghilangkan Jenuhnya Pikiran yang dipres selama satu bulan maka Dapur Tutorial Blogspot Sempatkan untuk membuat tutorial lagi.

Tutorial blog kali ini kembali membahas tetang cara menambah Eleman Halaman Pada Blog. Buat anda yang senang menambahkan aksesoris  dihalaman blog atau sobat ingin Memasang Space iklan300 x 250 trik ini sangat cocok untuk diterapkan. Tema Kali ini Dapur Tutorial Blogspot Akan Membahas Tetang  Cara Membuat Atau Menambah 3 Kolom Dibawah Header.


Cara Membuat Atau Menambah 3 Kolom Dibawah Header berhubungan dengan tutorial sebelumnya tentang Cara Membuat Atau Menambah 2 Kolom Dibawah Header. Dari tutorial tersebut kita akan menambahkan sedikit kode untuk Merubahnya menjadi 3 kolom.

Berikut Lankah-Langkah Untuk Menambah 3 Kolom Dibawah Header :
  1.  Pastikan anda sudah login ke akun blogger/blogspot
  2. Setelah ada berada pada halaman Panel Blog anda Pilih " Template"


  3. Klik Tombol Edit HTML


  4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


  5. Jangan lupa Centang Expand Template Widget.


  6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini 
  7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode)
  8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin> 
    9. <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
    </div> 
  9. Selanjutnya Cari kode <div id='main-wrapper'> atau <div id="main-outer">
  10. Copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">
    11. <div id='box-kolom-widget'>
    <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
    </div>
  11. Lankah terakhir klik Tombol Simpan Template 


  12. Selesai dan lihat hasilnya
Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar

Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 3 Kolom Dibawah Header Semoga bisa bermanfaat

Cara Membuat atau Menambahkan 2 Kolom Dibawah Header

Kamis, 23 Februari 2012
Posted by tt
Add Comments
,
Read More...

Sudah hampir satu bulan blog ini tidak di update dan sekarang mumpung lagi ada kesempatan jadinya saya duduk sejenak untuk berbagi informasi tetang cara membuat atau menambahkan 2 kolom di bawah header. Seblumnya Dapur Tutorial Blogspot Sudah Pernah Menyampaikan Tetang tutorial Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog dan Cara Menambahkan Elemen Halaman Baru Di Atas Header Blog

Nah...Untuk menambahkan 2 kolom dibawah header tidak begitu sulit kita hanya memodifikasi sedikit dari kode tersebut.

Berikut langkah-langkah yang harus anda lakukan :
  1. Login menggunkan akun blog anda
  2. Setelah anda masuk ke Dashboard pilih Menu "Template"


  3. Klik  Tombol Edit HTML


  4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


  5. Centang Expand Template Widget.


  6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini
  7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
  8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>
    9. #box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }
  9. Sekaran Anda cari Kode <div id='main-wrapper'>   atau <div id="main-outer"> 
  10. Apabila sudah ketemu copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">
    11. </div>
    <div id='box-kolom-widget'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>

    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>

    <div style='clear:both;'/>
  11. Lankah terakhir klik Tombol Simpan Template


  12. Selesai dan lihat hasilnya
Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar


Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 2 Kolom Dibawah Header Semoga bisa bermanfaat

Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog

Minggu, 12 Februari 2012
Posted by tt
Add Comments
,
Read More...
Setelah Dapur Tutorial Blogspot sukses posting tutorial blogspot tetang Cara Menambahkan Elemen Halaman Baru Diatas Header Blog  kali ini Dapur Tutorial Blogspot akan kembali menyampaikan cara menambahkan elemen halaman.

Elemen halaman yang akan ditambahkan kali ini berda di bawah header blog anda seperti gambar berikut


Fungsinya tetap sama sebagai tempat untuk meletakan widget yang pada umumnya digunakan oleh banyak orang untuk meletakan Iklan atau menu horizontal.

Berikut lankah-Lankah yang Harus anda lakukan untuk menabah Elemen Halaman baru dibawah Header :
  1. Login Menggunakan Akun Blogspot anda pilih menu "Template"


  2. Selanjutnya akan tampil seperti halaman berikut, klik pada tombol Edit HTML


  3. Klik tombol Next/Lanjutkan setelah itu anda akan dibawa kehalaman edit HTML seperti berikut


  4. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini
  5. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
  6. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>
    7. #under_header{
    margin:10px 0;
    padding:1%;
    width:100%;
    }
  7. Sekarang anda cari kode yang mirip dengan kode berikut ini
    • Kode Yang harus anda cari jika anda menggunakan template lama blogger
      • <div id='header-wrapper'> 
      <b:section class='header' id='header' maxwidget="1" showaddelement="no">
      <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
      </b:section>
          </div>
    • Kode yang harus anda temukan jika anda menggunkan template baru blogger
      • <div id='header-outer'> 
      <b:section class='header' id='header' maxwidget="1" showaddelement="no">
      <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
      </b:section>
          </div>
  8. Apabila sudah ketemu copas kode dibawah ini dan letakan dibawah kode diatas
    9. <div id="under_header">
    <b:section class='header' id='gadgetheader' preferred='yes'/>
    </div>
  9. Lankah terakhir klik simpan


  10. Selesai
Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak jika ada Elemen tambahan dibawah Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar



Demikian Tutorial Kali ini tetang Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog Semoga bisa bermanfaat