Pengalaman Menambahkan Sidebar Sebelah Kiri

Pada posting kali ini saya akan menceritakan langkah-langkah menambahkan sidebar kiri di template yang sedang saya gunakan ini. Sebenarnya, saya bisa saja mengunggah template baru yang sudah ada sidebar kirinya. Namun, mengganti template dengan yang baru seperti memulai pekerjaan dari awal bagi saya.

Bila mengganti template dengan yang baru berarti saya harus memasang ulang kode-kode verifikasi mesin pencari, kode verifikasi Alexa, serta kode-kode yang lainnya. Selain itu, saya juga harus mengatur kembali widget-widget yang sudah terpasang pada template sebelumnya.

Berikut ini langkah-langkah yang saya lakukan dalam menambahkan sidebar sebelah kiri pada template ini (Thesis SEO Blogger).

1. Masuk ke akun Blogger.

2. Mengeklik "Opsi lainnya" > Template.

3. Meletakkan kode berikut di dekat kelompok kode CSS untuk outer-wrapper, main-wrapper, dan sidebar-wrapper (di atas ]]></b:skin>)

#newsidebar-wrapper {
width: 160px; 
float: left;
padding:8px;
word-wrap: break-word;
overflow: hidden;
}

4. Selanjutnya menaruh kode berikut di atas kode <div id='main-wrapper'>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>

5. Mengeklik tombol "Simpan template".

Sampai di sini, sidebar kiri sudah berhasil ditambahkan. Namun, perlu dilakukan pengaturan dan penyesuaian dengan lebar main-wrapper (halaman posting) dan lebar sidebar kanan agar tampilan blog tidak terlihat berantakan.

Lebar sidebar kiri yang saya inginkan adalah sebesar 160px. Sedangkan lebar sidebar sebelah kanan yang saya mau adalah senilai 250px. Seperti diketahui sebelumnya, sidebar yang ada di sebelah kanan template ini terdiri dari: sidebar-top, sidebar-wrapper1, sidebar-wrapper2, dan sidebar-bottom.

Dalam hal ini saya hanya ingin menggunakan sidebar-top di mana sidebar ini mempunyai elemen-elemen seperti border dan warna latar belakang. Kemudian saya berkeinginan untuk menggunakan saja unsur-unsur yang terdapat di sidebar kanan untuk diterapkan pada sidebar sebelah kiri sehingga kode CSS sidebar kiri menjadi seperti di bawah ini.

#newsidebar-wrapper {
border-left: 1px  dotted #dddddd;
border-bottom: 1px  dotted #dddddd;
border-top: 1px  dotted #dddddd;
border-right: 1px  dotted #dddddd;
background:#F5F5F5;
width: 160px;
float: left;
padding:8px;
word-wrap: break-word;
overflow: hidden;
}

Sekarang saya akan menghitung total lebar piksel wrapper yang diperlukan untuk membentuk sidebar kiri dan sidebar kanan. Untuk lebih jelasnya bisa dilihat pada tabel di bawah ini.

	Sidebar Kiri	Sidebar Kanan
width	160px	250px
border-left	1px	1px
border-right	1px	1px
padding-left	8px	8px
padding-right	8px	8px
Jumlah	178px	268px
Total Lebar Wrapper Sidebar Kiri & Kanan	446px

Saat ini saya sudah mengetahui berapa piksel wrapper yang dibutuhkan untuk sidebar kiri dan sidebar kanan yaitu sebesar 446 piksel. Lebar Outer-wrapper untuk template ini adalah sebesar 900 piksel. Dengan demikian lebar wrapper halaman posting akan mendapat kuota sebesar 900 - 446 = 454 piksel.

Nah, agar halaman posting tidak berhimpitan dengan sisi kanan sidebar kiri dan sisi kiri sidebar kanan, maka saya menambahkan margin kiri sebesar 10px dan margin kanan sebesar 10px pada main-wrapper. Jadi, width halaman posting akan menjadi 454px - 20px = 434 px. Dua puluh piksel adalah nilai dari jumlah kedua margin.

Setelah diadakan penyesuaian, maka CSS untuk main-wrapper adalah menjadi seperti di bawah ini.

#main-wrapper {
float:left;
margin-right:10px;
margin-left:10px;
overflow:hidden;
width:434px;
word-wrap:break-word;
}

Selain itu, saya juga harus mengganti lebar kolom komentar dan kotak komentar menjadi sebesar 434 piksel untuk menyesuaikan dengan lebar halaman posting agar tampak serasi. Kedua unsur tersebut ditunjukkan pada kode seperti yang tampak di bawah ini.

#comments-block{border:0px dotted #ccc;width:434px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='434'/>

Menambah sidebar kiri

Read More

Menghilangkan Gambar ">>" pada Suatu Tautan di Sidebar

Pada saat artikel ini ditulis, saya masih menggunakan template BESTSEO-BLOGGERTEMPLATE (Thesis). Ketika saya menambahkan gadget-gadget yang di dalamnya mengandung tautan-tautan seperti gadget "Label" atau "Entri Populer", pada setiap tautan tersebut muncul gambar ">>" seperti yang ditunjukkan pada screenshot di bawah ini.

Label

Entri Populer

Gambar kecil yang berukuran sekitar 16px X 16px tersebut letaknya sangat berdekatan dengan huruf pertama tautan. Warna putih pada background gambar tersebut terlihat cukup kontras dengan warna 'abu-abu' sidebar. Selain itu, bila saya memasang widget tertentu yang menampilkan image dari postingan, gambar tersebut tetap terlihat berhimpitan dengan image.

Saya merasa tidak enak melihat tampilan seperti ini. Kemudian saya berkeinginan untuk menghilangkan saja gambar tersebut. Untuk menghilangkannya saya menghapus kode tertentu yang membuat gambar tersebut muncul.

Kode yang saya hapus adalah baris kode yang berwarna merah pada barisan kode .sidebar li seperti yang tampak di bawah ini.

.sidebar li {

-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDRnzkqctRYHXTGhdLGPEUGI5_39hP4lj6o2XWoBVMp8CfbTREHZtPQOzJ_pkpDAhJ_mxdnoN6C61zICb4MgGfg_SF3_nd-P-oDgFKlvmRB2Je52U73hBH-H09lDo3-VSxvyjNpiXZZvA/s1600/libg300.png) no-repeat scroll left -1px;
line-height:1.5em;
margin:0;
padding:0 0 0.25em 15px;
}

Bila Anda berkeinginan untuk menghilangkan gambar tersebut juga, sebaiknya simpan kode-kode di atas di tempat yang aman karena jika suatu saat Anda ingin menghadirkan kembali gambar tersebut, Anda tinggal memasang kembali kode yang dihapus tadi.

Tampilan Label

Tampilan Entri Populer

Read More

Cara Mengurangi Lebar Sidebar pada Template Thesis

Setidaknya ada 2 macam template Thesis untuk Blogspot yang saya temui. Ada template Thesis yang pada bagian sidebar-nya terdapat 2 kolom seperti pada template yang sedang saya gunakan ini. Ada pula template Thesis yang mengandung satu kolom saja di sidebar-nya.

Saya merasa sidebar tersebut terlalu lebar sehingga membuat lebar kolom halaman posting terlihat menjadi agak sempit. Sebenarnya sidebar yang cukup lebar tersebut memang didesain untuk menaruh unit iklan (adsense). Namun, saya ingin mengurangi lebar dari sidebar itu.

Screenshot sidebar sebelum dikurangi lebarnya.

Mengurangi lebar sidebar harus dibarengi dengan menambahkan lebar halaman posting. Yang mana nilai pengurangan lebar sidebar sama dengan nilai untuk menambahkan lebar halaman posting. Misalnya, saya mengurangi lebar sidebar sebesar 60px, maka saya juga harus menambahkan lebar halaman posting sebesar 60px.

Berikut ini langkah-langkah yang saya lakukan untuk mengubah nilai lebar halaman posting dan lebar sidebar pada template yang sedang saya pakai ini.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian klik "Template".

3. Klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template.

4. Lalu klik tombol "Edit HTML" dan klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Kemudian saya mencari kode-kode seperti di bawah ini untuk menemukan lebar halaman posting dan lebar sidebar. Dari kode-kode di bawah ini kalau lebar halaman posting sebesar 507px, lebar sidebar atas dan sidebar bawah sebesar 362px, lebar sidebar-wrapper1 sebesar 160px, dan lebar sidebar-wrapper2 sebesar 182px.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px  dotted #dddddd;
border-bottom: 1px  dotted #dddddd;
border-top: 1px  dotted #dddddd;
border-right: 1px  dotted #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:8px;
}
#sidebar-wrapper1 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf97VWK-2dEL7p6BWBHid1YEZ_Myij5VOnvM1tlmsywqmMWb6KphDZ7f946MIY6CYO_9Rl2vLduVwpzRgNi3rpw-lAwivUlr8kSLbc6ZXVH5niGroZBqRyyQT4-vHbMuWIkd5KP1C1kmLj/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:15px;
margin:18px 0px 5px 0px;
width:160px;
word-wrap:break-word;
}
#sidebar-wrapper2 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf97VWK-2dEL7p6BWBHid1YEZ_Myij5VOnvM1tlmsywqmMWb6KphDZ7f946MIY6CYO_9Rl2vLduVwpzRgNi3rpw-lAwivUlr8kSLbc6ZXVH5niGroZBqRyyQT4-vHbMuWIkd5KP1C1kmLj/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:182px;
word-wrap:break-word;
}
#sidebar-bottom {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf97VWK-2dEL7p6BWBHid1YEZ_Myij5VOnvM1tlmsywqmMWb6KphDZ7f946MIY6CYO_9Rl2vLduVwpzRgNi3rpw-lAwivUlr8kSLbc6ZXVH5niGroZBqRyyQT4-vHbMuWIkd5KP1C1kmLj/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:362px;
word-wrap:break-word;
}

7. Di sini saya akan membuat lebar sidebar atas dan sidebar bawah menjadi 300px. Dengan demikian saya harus mengurangi lebar kedua sidebar tersebut sebesar 62px karena 362px dikurang 300px sama dengan 62px. Setelah mengurangi lebar sidebar sebesar 62px, berarti saya juga harus menambah lebar halaman posting sebesar 62px juga. Dengan demikian lebar halaman posting menjadi 569px (507px + 62px).

Sekarang saya harus menyesuaikan lebar untuk sidebar-wrapper1 dan side-wrapper2. Seperti diketahui, saya telah mengurangi lebar sidebar-top dan sidebar-bottom masing-masing sebesar 62px, untuk itu saya harus mengurangi juga lebar kedua sidebar-wrapper tersebut sebesar 62px. Agar lebih mudahnya saya bagi 2 saja angka 62px ini sehingga lebar (width) sidebar-wrapper1 yang 160px itu saya kurangi 31px. Dengan demikian lebarnya menjadi 129px. Begitu pula lebar side-wrapper2 saya kurangi 31px sehingga menjadi 151px (182px - 31px).

8. Karena lebar kolom komentar dan lebar kotak komentar sama dengan lebar halaman posting (sebelum diubah) yakni sebesar 507px, maka ada baiknya kita menambahkan pula lebar kedua elemen tersebut agar tampak serasi yaitu menjadi 569px (sama dengan lebar halaman posting setelah diubah).

Untuk mencari kedua lebar elemen tersebut, carilah kode-kode seperti di bawah ini.

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>

9. Kemudian gantilah kedua angka 507 tersebut menjadi 569.

10. Klik tombol "Simpan template" dan lihat hasilnya.

Screenshot sidebar yang lebarnya sudah dikurangi

Sedangkan untuk mengurangi lebar sidebar pada Template Thesis SEO Blogger yang mengandung 1 kolom, caranya tidak jauh berbeda dengan cara di atas. Pada template ini, kode lebar halaman posting dan lebar kedua sidebar terdapat pada kode-kode seperti di bawah ini.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:10px;
}
#sidebar-wrapper {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf97VWK-2dEL7p6BWBHid1YEZ_Myij5VOnvM1tlmsywqmMWb6KphDZ7f946MIY6CYO_9Rl2vLduVwpzRgNi3rpw-lAwivUlr8kSLbc6ZXVH5niGroZBqRyyQT4-vHbMuWIkd5KP1C1kmLj/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}

Misalnya saya juga ingin membuat lebar kedua sidebar (sidebar-top dan sidebar-wrapper) menjadi 300px maka saya tinggal mengurangi 362px dengan 62px. Dengan demikian saya juga harus menambah lebar halaman posting (main-wrapper) sebesar 62px. Hasilnya adalah 569px (507px + 62px).

Setelah itu jangan lupa untuk mengubah lebar kolom komentar dan lebar kotak komentar. Yang tadinya mempunyai lebar 507 diganti menjadi 569. Tujuannya adalah agar serasi dengan lebar halaman posting sekarang. Kode-kode untuk kedua elemen tersebut adalah seperti di bawah ini.

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>

Berikut screenshot sidebar pada template Thesis 1 kolom sidebar, baik yang sebelum diganti lebarnya maupun setelah dikurangi lebarnya.

Sidebar yang belum dikurangi lebarnya.

Sidebar yang sudah dikurangi lebarnya.

Setelah melakukan perubahan pada lebar sidebar dan lebar halaman posting, kita perlu juga mengatur ulang banyaknya karakter atau huruf pada widget readmore otomatis agar tampilan home page menjadi lebih serasi.

Read More

Border Style Multiple pada 3 Kolom Widget

Sudah beberapa bulan ini saya menerapkan 3 kolom widget di atas footer blog ini. Memang saya sebelumnya pernah melakukan hal yang serupa, namun beberapa waktu kemudian saya menghapus kembali 3 kolom widget tersebut. Kini saya telah memasang kembali kolom widget tersebut.

Ada yang berbeda jika dibandingkan dengan pemasangan 3 kolom widget pada waktu sebelumnya. Di manakah letak perbedaannya? Pertama, dari segi widget-widget yang saya pasang pada ketiga kolom tersebut. Sekarang saya memasang widget-widget yang berhubungan dengan statistik blog ini yaitu info pagerank, info Alexa rank, total tayangan laman, user online status, dan jumlah pengunjung.

Perbedaan kedua adalah mengenai pemanis yang saya tampilkan pada ketiga kolom widget tersebut. Bila pada waktu sebelumnya saya menambahkan border dobel pada bagian atas, maka pada kali ini saya menambahkan border style multiple.

Border Style Multiple pada 3 Kolom Widget

Sedangkan mengenai cara pemasangannya dapat saya tuliskan di bawah ini. Kalau ada yang ingin menerapkannya pada template selain yang saya gunakan ini, mungkin hasil yang berbeda akan didapat.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" lalu pilih "Template".

3. Kalau mau membuat salinan template, bisa mengeklik tombol "Cadangkan / Pulihkan" terlebih dahulu.

4. Setelah itu klik tombol "Edit HTML" dan tombol "Lanjutkan".

5. Kemudian cari kode ]]></b:skin> lalu letakkan kode berikut di atas kode tersebut.

#tiga-kotak-bawah {
clear:both;
border-color: orange;
border-style: dotted dashed solid double;
border-width: 6px;
margin-bottom: 6px;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}

6. Selanjutnya cari kode <div id='footer'> lalu taruh kode berikut di atas kode tersebut.

<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

7. Klik tombol "Simpan template" dan lihat hasilnya di menu "Tata Letak".

Read More

Memunculkan Lebih Dari Satu Label pada Menu Breadcrumbs

Pada template Thesis SEO Blogger yang sedang saya gunakan ini (saat artikel ini ditulis) memang sudah tertanam 'menu breadcrumbs'. Namun, jika artikel atau posting yang mempunyai label lebih dari satu, label yang tampil pada 'menu breadcrumbs' tersebut hanya satu. Tidak semua label yang dimiliki artikel tersebut muncul.

Label yang muncul hanya satu pada menu breadcrumbs.

Untuk menyiasati agar artikel yang mempunyai beberapa label dapat tampil label-labelnya pada 'menu breadcrumbs', maka kita perlu mengedit sedikit kode 'menu breadcrumbs' tersebut. Berikut ini langkah-langkah untuk membuat semua label tampil pada 'menu breadcrumbs' pada template Thesis SEO Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian pilih menu "Template".

3. Selanjutnya klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template. Hal ini berguna untuk memudahkan mengembalikan template ke keadaan semula bila terjadi kesalahan dalam pengeditan.

4. Klik tombol "Edit HTML" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Cari kode seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

7. Perhatikan kode <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> lalu tambahkan kode &#187; sehingga menjadi <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

Selanjutnya amati kode:

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Kemudian ganti tanda"=" yang pertama dengan "!" dan tukar letak kedua kode tersebut sehingga menjadi seperti di bawah ini:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

8. Setelah kode nomor 6 diedit, maka hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

9. Klik tombol "Simpan template" dan periksa hasilnya pada artikel yang mempunyai lebih dari satu label.

Semua label tampil pada menu breadcrumbs.

Read More

Cara Membuat 3 Kolom Widget di Atas Footer pada Template Thesis

Bila Sobat juga menggunakan template Thesis seperti yang ane pakai ini dan ingin menambahkan 3 kolom widget di atas footer, Sobat bisa melihat langkah-langkahnya di bawah ini. Postingan membuat 3 kolom di atas footer ini bisa dibilang merupakan kebalikan dari posting yang berjudul Cara Membuat 3 Kolom di Bawah Header pada Template Thesis SEO.

Berikut langkah-langkah membuat 3 kolom widget pada footer. Nanti, hasilnya akan seperti yang terlihat di blog ini yaitu adanya border pada bagian atasnya. Semoga berhasil.

1. Masuk ke akun Blogger.

2. Klik Rancangan >> Edit HTML.

3. Untuk berjaga-jaga, silakan back-up template dulu dengan mengeklik Download Template Lengkap sehingga bila nanti terjadi kesalahan kita dapat dengan mudah mengembalikan tempate seperti semula.

4. Carilah kode ]]></b:skin>. Untuk pencarian cepat, tekan tombol Ctrl + F pada keyboard lalu masukan kode tersebut.

5. Kemudian copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.

#tiga-kotak-bawah {
clear:both;
border-top:3px double #e6e4e3;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}

• Silakan diubah paddingnya sesuai keinginan Sobat.

Catatan: Jika ketiga kolom tidak diberi "Judul", Anda dapat mencoba menambahkan kode margin-top:14px; di bawah kode border-top:3px double #e6e4e3; agar konten tidak mepet dengan border atas.

6. Selanjutnya cari kode <div id='footer'>.

7. Letakkan kode di bawah ini di atas kode <div id='footer'> tersebut.

<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

8. Klik tombol SIMPAN TEMPLATE.

9. Selesai.

3 kolom widget di atas footer.

Read More

Cara Membuat 3 Kolom di Bawah Header pada Template Thesis SEO

Tutorial berikut saya tujukan khusus bagi yang menggunakan template yang sama dengan yang saya pakai yaitu Thesis SEO Blogger Template karya dari Blog Juragan. Langsung saja, untuk membuat 3 kolom di bawah header, silakan simak langkah-langkahnya di bawah ini. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Bila nanti terjadi kesalahan dalam pengeditan kita sudah mempunyai backupnya sehingga dengan mudah mengembalikan template seperti semula.

4. Cari kode ]]></b:skin>. Gunakan fitur pencarian pada browser agar cepat menemukannya.

5. Copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.

#box-main-container {
clear:both;
border-bottom:3px double #e6e4e3;
}
.box-column {
padding:0px 10px 10px 10px;
}

Catatan: Jika ketiga kolom tidak diberi "Judul", tambahkan kode margin-top:14px; di bawah kode border-bottom:3px double #e6e4e3; agar konten tidak mepet dengan border atas.

6. Selanjutnya cari kode <div id='main-wrapper'>.

7. Copy kode di bawah ini dan paste di atas kode tersebut.

<div id='box-main-container'>

<div id='box1' style='width: 33%; 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: 34%; 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: 33%; 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>

8. Klik SIMPAN TEMPLATE.

9. Selesai.

Setelah ditambahkan widget, maka hasilnya akan tampak seperti gambar di bawah ini.

3 kolom di bawah header.

Read More