Cara Membuat Blog Full Width

Pada dasarnya apabila kita menggunakan template bawaan dari blogger mempunyai ukuran tampilan standar lebar(width) 960 px,dengan ukuran ini apabila kita lihat dengan menggunakan layar monitor yang model kotak / persegi akan terlihat pada sisi kiri maupun sisi kanan dari layar monitor masih ada space atau ruang yang kosong,nah disini dengan tema sesuai judul akan saya coba template yang ukuran standar ini saya sulap jadikan full width dengan ukuran 1000 px.

Dan mungkin apabila kita buat template dengan ukuran full width kita bisa lebih leluasa untuk membuat tulisan kita bisa lebih banyak dari yang ukuran standar,begitu juga untuk kolom widget / gadget bisa kita perlebar lagi ukurannya dari yang ukuran standar apabila dirasa ukuran yang standar kurang lebar.Baiklah sekarang menuju langkah pembuatan template sesuai tema yaitu template standar blogger untuk dijadikan full width.

Langkah pembuatannya 

Pertama pakai salah satu template yang simple bawaan dari blogger setelah itu pada dasboard blogger pilih Template dan pilih Edit HTML.Setelah tampil halaman HTML nya coba cari kata body,untuk memudahkan pencarian karena begitu banyak serangkaian kode pada halaman ini dan tentunya pihak blogger sudah jauh-jauh menyiapkan shortcut untuk pencarian yaitu dengan menekan tombol ctrl + f,untuk cara penggunaanya coba klik dimana saja asal didalam area kode-kode html kemudian tekan pada keyboard tombol ctrl + f maka akan muncul kotak pencarian yang posisinya berada di pojok kanan atas didalam area kode html,sekarang coba masukan kata

body

pada kotak pencarian kemudian tekan enter.
Pada body tersebut nanti yang akan dicari yang terlihat seperti ini tampilannya kira-kira

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

Kemudian pada bagian

padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

coba ganti dengan ini

padding: 0px;

Kemudian cari lagi kode ini

.content-inner

carilah kode tersebut yang terlihat seperti ini

.content-inner { padding: $(content.padding) $(content.padding.horizontal); }

apabila sudah ketemu coba ganti dengan ini

.content-inner { padding: 10px 0px; }

Selanjutnya cari lagi kode

.content-outer, .content-fauxcolumn-outer, .region-inner

ini biasanya berada diantara <b:template-skin> dan </b:template-skin>dan akan tampak seperti ini

.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}

coba pada bagian max-width: $(content.width); ganti dengan

max-width: 100%;

Kemudian cari lagi kode ini

]]> </b:template-skin>

dan tambahkan diatasnya kode ini

.main-outer { max-width: 1000px; margin: 0 auto; }

yang terakhir coba cari


]]> </b:skin>

kemudian letakan kode ini diatasnya

.tabs-inner { padding: 0px; } .section { margin: 0px; } .header-inner .widget {margin: 0px; }

coba di simpan / save template.
Dan coba view blog... Hmmm jadilah Full witdh.
Begitulah kira-kira cara pembuatan  template full width,selamat berkreasi bagi yang suka Otak Atik.

Oke salam blogger.

Tag Kondisional Dalam Blog

Suatu blog itu sama halnya dengan penyimpanan file seperti di dalam PC / Komputer ,yang terdiri dari beberapa folder,dalam blog apabila kita menuliskan artikel dan kita buat berbagai macam kategori atau kalau dalam blog kita beri label itu bisa diartikan label tersebut adalah folder.
Jadi apabila suatu artikel kita beri label maka artikel itu merupakan bagian dari label tersebut,ketika blog kita sudah banyak memiliki artikel ada baiknya kita kelompokan sesuai dengan label yang berhubungan.

Kondisional

Ketika artikel telah dubuat atau dikategorikan ke label masing-masing,contoh pada saat kita memilih satu label,maka halaman blog tersebut akan tampil seluruh artikel sesuai dengan  label yang dipilih tadi,beda halnya pada halaman home akan tampil semua mewakili label label sesuai dengan artikel yang telah di posting,inilah pada blog dinamakan suatu kondisi.
Dan dalam blog tersebut telah dibuat atau dirancang sedemikian rupa maka akan ada beberapa macam kondisi yang perlu kita ketahui,mungkin ini belum semua yang saya tau kondisi apasaja yang ada didalam blog,ini hanya sebagian saja yang saya akan coba tuliskan.

Tag Tag Kondisional

Dalam blog kode kondisional biasanya diawali dengan <b:if cond='...'>

Dan inilah tag tag kondisional yang saya tahu:

1.Tag Kondisional Halamanmuka(HOMEPAGE) dimana untuk kode nya kira-kira seperti ini

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

dan untuk kebalikannya atau selain halamanmuka(homepage) kodenya

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

2.Tag Kondisional Halaman Postingan

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

dan untuk kebalikannya atau selain halaman posting adalah

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

3.Tag Kondisional Halaman Statis

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

Halaman statis contohnya seperti halaman contac,About.
dan untuk kebalikannya atau selain halaman statis adalah

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

4.Tag Kondisional Halaman Indeks

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

Mungkin yang dimaksud halaman indeks adalah semua halaman kecuali halaman postingan dan halaman statis
5.Tag Kondisional Halaman Label

<b:if cond='data:blog.searchLabel'>

6.Tag Kondisional Error Page 404

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

7.Tag Kondisional Halaman Arsip

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

8.Tag Kondisional Halaman Tertentu

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>

Itulah tag tag kondisional yang saya tahu,kemungkinan masih banyak  yang belum saya ketahui seluruhnya kondisional yang berada di blog.

Contoh Penggunaan Tag

Sebagai contoh untuk penggunaannya misalkan kita ingin widget comment hanya ditampilkan di halaman posting sedangkan dihalaman home tidak di tampilkan seperti blog saya yang sederhana ini,caranya adalah:
pada halaman edit HTML kita cari

</head>

kemudian letakan kode ini di atasnya

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#HTML4 {
 display: none;
}
</style>
</b:if>

HTML4 yang berada didalam kode diatas merupakan id widget punya blog saya,dan ini kemungkinan akan berbeda-beda id nya di blog teman-teman punya.
Demikianlah bahasannya mengenai tema tag tag kondisonal di dalam blog,semoga bermanfaat.
Salam Blogger