Cara Design Blogazine Template

chmood
Malam Teman teman T.I Sniper :) maaf sibuk bangeud nih heheheh nih sedikit cara dulu ya ?
sebelum kita melangkah ke tutur selanjutnya...!



Design Blogazine Template

Pada dasarnya tampilan, kulit (skin) template pada blogspot ada 3 (tiga) tampilan. Yatu tampilan Homepage (Beranda), Pagesearch (search Label,Halaman) dan Posting Area (post entry). Lalu bagaimana agar tiap-tiap tampilan (Home, Page, Post) tersebut bisa berbeda?

Caranya dengan menambahkan CSS atau juga HTML untuk skin pada masing-masing tampilan (Home, Page, Post). lalu bagaimana memisahkan Tampilan-tampilannya tersebut agar template tidak rusak atau tampilannya acak-acakan?

Dengan menggunakan tag kondisional (pemutus/pemanggil) itulah solusi yang tepat untuk, karena apabila hanya menggunakan CSS (pakai perintah css "display:none;) untuk memisahkannya maka masih akan terlihat, terbaca dan terloading didalam View Sourcenya, tentunya blog akan terasa sedikit berat, karena harus membaca style/css, javascript atau juga html yang tak seharusnya tampil.

Dibawah ini contoh singkat menggunakan/menerapkan tag kondisional (pemutus/pemanggil) pada template blogspot.

<!DOCTYPE HTML>
<html>
<head>

* Tag Kondisional untuk tampilan Layout Homepage (Beranda):
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<--/* CSS HOME/BERANDA */-->

<style>
Style layout Css HomePage(Beranda)
</style>
</b:if>

* Tag Kondisional untuk tampilan Page (Halaman):

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<--/* CSS PAGE/HALAMAN */-->
<style>

Style layout Css Pagesearch (Halaman)

</style>
</b:if>
</b:if>

* Tag Kondisional untuk tampilan Post (posting):

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<--/*CSS ENTRY/POSTING/-->
<style>

Style layout Css PostEntry (posting)

</style>
</b:if>

</head>
<body>

* Tag Kondisional untuk tampilan Layout Homepage (Beranda):
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<--/* HTML HOME/BERANDA */-->
<div='bla-bla'>
HTML HOMEPAGE DISINI
</div>
<b:else/> /* TAG PEMENGGAL */

* Tag Kondisional untuk tampilan Page (Halaman):
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<--/* HTML PAGE/HALAMAN */-->
<div='bla-bla'>
HTML PAGE DISINI
</div>
</b:if>
</b:if>

* Tag Kondisional untuk tampilan Post (posting):
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<--/* HTML ENTRY/POSTING */-->
<div='bla-bla'>
HTML POST DISINI
</div>
</b:if>
</b:if>

</body>
</html>

Untuk contohnya/demonya silahkan buka link berikut ini (BERANDA/HOME, PAGE SEARCH, POST/ENTRY) dan lihat masing-masing sourcenya (CTRL+U) yang tampil.

Sekian dulu sobat tips sederhana Design Blogazine Template,, untuk lebih jelasnya silahkan sobat coba lakukan eksperimen sendiri, karena sesuatu itu takkan berhasil kalau kita tidak pernah mencobanya, maaf kalau masih banyak kekurangan dan juga kesalahan.
Semoga Bermanfaat...!!! lebih lengkap di T.I Sniper kita mengali ilmu bersama

Category
Komentar