Menamabah elemen halaman dibawah dua sidebar

Sebelumnya pernah posting cara menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama.
 
Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:


Menambah elemen di bawah dua sidebar

1. Login ke blogger dengan id anda
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :
   

   #sidebar-wrapper {
   width: 220px;
   float: $startSide;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }

6. Silahkan diganti dulu nilai width 220px; dan properti float: $startSide; dengan nilai lebar sidebar yang anda rencanakan. Misalnya width: 350px dan properti menjadi float: right; Jadinya seperti ini :
   

   #sidebar-wrapper {
   width: 350px;
   float: right;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }

7. Jika anda telah membuat dua sidebar di bawah sidebar utama seperti pada tutorial yang sebelumnya, silahkan tambahkan hanya kode yang berwarna hijau saja.
   

   #left-col {
   width:170px;
   float:left;
   word-wrap:break-word;
   overflow:hidden;
   }
   #right-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }
   #bottom-col {
   width:350px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

   Sehingga kodenya akan menjadi seperti ini :
   

   #sidebar-wrapper {
   width: 350px;
   float: right;
   $startSide
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }
   #left-col {
   width:170px;
   float:left;
   word-wrap:break-word;
   overflow:hidden;
   }
   #right-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }
   #bottom-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

8. Sekarang buat kode HTML untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah kode ini :
   

   <div id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'/>
   <b:widget id= dan seterusnya...
   <b:section class='sidebar' id='left-col' preferred='yes'/>
   <b:section class='sidebar' id='right-col' preferred='yes'/>
   </div>

9. Sisipkan kode berikut di bawah kode tadi :
   <b:section class='sidebar' id='bottom-col' preferred='yes'/>
10. Sehingga secara keseluruhan menjadi seperti ini :
    

    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'/>
    <b:widget id= dan seterusnya....
    <b:section class='sidebar' id='left-col' preferred='yes'/>
    <b:section class='sidebar' id='right-col' preferred='yes'/>
    <b:section class='sidebar' id='bottom-col' preferred='yes'/>
    </div>

11. Sekarang klik tombol SIMPAN TEMPLATE
12. Selesai

menambah dua kolom elemen halaman dibawah sidebar utama

Kali ini saya ingin mengetengahkan cara menambah dua kolom elemen halaman dibawah sidebar utama.
Tidak panjang lebar lagi, berikut cara menambah elemen halaman dibawah sidebar utama yang saya jadikan tempat eksperimen blog saya lainnya yang menggunakan template default blogger yaitu minima...
Tampilan awal templateminime seperti gambar dibawah ini:


Bagaimana cara menambah elemen dibawah sidebar utama menjadi dua kolom seperti gambar dibawah ini:

Ikuti langkah langkahnya:
Menambah elemen di bawah sidebar utama

1. Login ke blogger dengan id anda
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :

#sidebar-wrapper {
width: 220px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

   6. Ganti nilai width 220px; dan properti float: $startSide; dengan nilai sidebar anda. Misalnya:
Kalau untuk template minima 220 dibagi menjadi dua hasilnya sangat kecil karena itu anaa pilih 350, setelah dibagi dua dan memperhitungkan margin atau jarak antara kedua sidebar baru maka untuk setiap kolomnya (sidebar kanan dan kiri) lebarnya menjadi 170 dan float: right;
Maka kode diatas jadi seperti ini:

#sidebar-wrapper {
width: 350px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

             7. Sekarang tambahkan kode berikut di bawah kode tadi

#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

   8. Secara keseluruhan kodenya menjadi seperti ini :

#sidebar-wrapper {
width: 350px;
float: right;
$startSide
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-col {
width:170px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#right-col {
width:170px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

   9. Sekarang kita akan membuat kode HTML untuk sidebar left dan sidebar right tersebut. Cari kode ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
</div>

  10. Sisipkan kode berikut di bawah <b:widget id= dan seterusnya.... :

<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>

  11. Sehingga secara keseluruhan menjadi seperti ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:widget id= dan seterusnya....
<b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>

12. Nah agar sidebar yang telah dibuat tidak melorot jumlah yang kita tambahkan pada sidebar utama tadi tambahkan pula pada 3 elemen halaman template anda yaitu

• Elemen Header
• Elemen Outer
• Elemen Footer

Lebar sidebar utama setelah dirubah - lebar sidebar asli = jumlah yang anda harus tambahkan pada lebar header, outer dan footer (350-220 =130).
Kode masing masing elemen seperti ini:

• Untuk Header

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

• Untuk Wrapper

/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

• Untuk Footer

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Tulisan berwarna merah adalah yang harus anda ganti angkanya dengan menambahkannya dengan jumlah penambahan pada sidebar utama. Dari contoh diatas maka perhitungannya 660+130=790
13. Sekarang klik tombol SIMPAN TEMPLATE
SELESAI.
Untuk melihat hasilnya klik Elemen halaman! Semoga berhasil, semoga bermanfaat!

Membagi Header Mnejadi dua Kolom

Tutorial sebelumnya kita sudah pernah membahas cara menambahkan kolom atau elemen halaman diatas header dan dibawah header juga menambahkan dua dan tiga kolom dibawah header. Kali ini kita akan belajar menambahkan elemen halaman baru pada header atau membagi header menjadi dua kolom.
Hasilnya seperti screenshot berikut:

Berikut langkah-langkahnya:

1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik Tata Letak
3. Klik Edit HTML
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti beikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

6. Ganti semua kode diatas dengan kode berikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px; 
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}

Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.
7. Sekarang cari kode seperti berikut:

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

8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:

<div id='header-wrapper'>
<div id='header-one'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat  Eksperimen Kecil (Header)' type='Header'/>
</b:section>
    </div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

9. Klik Simpan Template
10. Selesai
Untuk melihat hasil, klik elemen halaman

Menambah dua dan tiga kolom elemen halaman dibawah header

Tutorial kali ini kembali kita akan belajar desain template, sebelumnya saya pernah membahas cara menambahkan elemen halaman atau kolom tambah gadget dibawah header. Nah sekarang kita akan belajar cara menambahkan elemen halaman dibawah header menjadi dua, tiga kolom atau multi kolom, seperti screenshot berikut.


Caranya sangat mudah, ikuti langkah-langkah berikut:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'>

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3. Simpan template dan lihat hasilnya dibagian elemen halaman

Menambah elemen halaman di bawah header

Waktu blog walking or silaturahim dibeberapa blog teman, diantara beberapa blog teman saya liat dibawah headernya sebelum postingan banyak aksesoris blognya, ragam widget salam sapa tuk pengunjunglah, bannerlah, iklanlah dan lah lah lainnya deh. Bermula dari awal ketertarikan itulah (lah lagi?), timbul hasrat saya tuk exsperimen kecil. Saya penasaran kok di template saya ngga ada dibagian elemen halaman kolom untuk menambah  gadget dibawah header ya?
Maka mulailah saya selancar dengan browsing, nanya kepaman google. Akhirnya nemu deh caranya, dipraktekkanpun langsung jadi karena rupanya tidak terlalu sulit, hanya butuh ketelitian dan kesabaran dikit ja…Alhamdulillah hasilnya dah tengokkan salam sebelum postingan blog ni?
Nah ni saya bagi tutorialnya buat teman teman.

 Bagaimana menambah elemen halaman tepat dibawah header…

• Anda mesti dalam keadaan log in ke blogger.
• Masuk menu tata letak=>Edit HTML. Untuk mengantisipasi hal yang tidak anda inginkan, baiknya download lengkap dulu (backup) dulu template anda. Kalau saya langsung aja, he2.
• Jangan lupa untuk mencentang kotak kecil Expand Template Widget.
• Copi kode warna merah berikut, paste diatas kode ]]></b:skin>

#under_header{
margin:10px 0;
padding:1%;
width:100%;
}

• Cari kode seperti ini:

<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>

• Paste kode warna merah berikut dibawah kode tadi

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

Langkah terakhir tinggal save template.

Menambah elemen halama di atas (header)

oh ya, kalau mau buat tab menu di bagian atas header bisa gak. soalnya cuma blog2 tertentu yang ada menu nya di bagian atas, misalnya kayak blog ini ada menu agama islam, teknologi, glitter text, kesehatan dsn. blog saya bisa kah di buat spt itu ? mohon petunjuknya.. silahkan di liat blog saya !
Jawabannya: Alhamdulillah bisa, pertama anda tentu harus mengetahui dulu cara menambah elemen di atas header.

Berikut ikuti langkah langkahnya:

Dalam keadaan login=> pada dasbor klik tata letak/ layout=> edit HTML=> cari kode ]]></b:skin>

• Tambahkan kode berikut diatas kode ]]></b:skin>
  

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

• Kemudian cari kode berikut  <div id='header-wrapper'>
  
• Kemudian copy kode berikut diatas <div id='header-wrapper'>
  

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

• Selanjunya simpan template!

Lihat hasilnya klik elemen halaman, jika ada kolom tambah gadget diatas header langkah langkah yang anda lakukan berhasil!

Selanjutnya elemen tambah gadget diatas header bisa anda gunakan untuk macam macam widget. Untuk cara membuat menu tab navigator horizontal pada postingan berikutnya insyaAllah. Sedangkan cara menambah elemen halaman dibawah header bisa lihat . AMATULLAH

Menampilkan Hanya judul Posting

Kita sering menjumpai pada banyak blog ketika kita mengklik tabel atau category postingan yang tampil sangat banyak sesuai dengan banyaknya postingan yang diberi label yang kita klik dan parahnya jika blog tersebut tidak menggunakan readmore sehingga loading page akan sangat lama dan berat, nah untuk solusinya kita bisa terapkan trik berikut yang hanya menampilkan judul posting ketika diklik:
Login dulu pada Blogger

Pilih Layout/Tata Letak kemudian Edit HTML -----> centang Expand Template Widget

Cari kode berwarna merah yang penempatannya kayak gini niih:

<div class='blog-posts feed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

Kalo kode warna merah gak ketemu bisa cari kode berikut:

<b:include data='post' name='post'>

Kalau sudah ketemu ubah kode tadi dengan kode berikut

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Jangan lupa simpan template