Membuat Sesuatu Berbeda Di Homepage Dan Post Page

text-align: center;">

Pengalaman ini saya dapat dari bongkar pasang template blog yang saya dapat dari Maskolis. Setelah melewati banyak kegagalan dalam memodifikasi template blog, akhirnya banyak pelajaran yang diperoleh. Ya...salah satunya yang akan dibagikan di bawah ini.

Bagi yang sudah paham tentang kode HTML template dan jago memodifikasi atau bahkan membuat template, ini adalah hal yang sudah biasa. Namun yang belum paham, apalagi yang belajarnya otodidak seperti saya ini, merupakan hal yang luar biasa susahnya. Bagaimana tidak...kok tampilan homepage dan post page berbeda? Kok bisa ya...?

Banyak perbedaan yang bisa kita buat. Misalnya background homepage berbeda dengan post page, bentuk sidebar, warna tulisan, header, dan lain sebagainya. Sebenarnya cukup mudah, hanya menambahkan SESUATU di bawah skin atau kode ]]></b:skin>. SESUATU tersebut adalah kode CSS yang khusus untuk mengatur tampilan homepage (tidak ditampilkan di post page dan statis page). Karena kode CSS ini disimpan setelah atau di bawah skin, maka penulisannya harus ditambahkan kode lainnya seperti di bawah ini:

<style type='text/css'>

...

Kode CSS Di sini.

...

</style>

Dan karena pengaturan ini tidak akan ditampilkan di post page dan statis page, maka penulisannya juga harus ditambahkan kode lain seperti di bawah ini:

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

...

KODE

...

</b:if>

</b:if>

Sehingga jika digabungkan akan menjadi seperti di bawah ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>

...

Kode CSS Di sini.

...

</style>
</b:if>

</b:if>

Nah silahkan simpan kode CSS untuk mengatur tampilan homepage di antara kode di atas. Sebagai contoh, ini adalah pengaturan homepage .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post{background:#e1e1e1;border:1px solid #b0130d;margin-bottom:15px;padding:10px}
.post h1,.post h2{font:18px Oswald;line-height:1.2em;margin:8px 0;padding:0;color:#222;text-shadow:1px 1px #fff, 1px 1px #ccc, 2px 2px #ddd, 3px 3px #eee}
.post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out;margin-top:0}
.post-body{font:12px Arial;border-top:none;padding:0px;background:none;line-height:1.5em;margin:0;margin-top:5px;padding-bottom:0px;text-align:justify;color:#444}
.post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
.post-footer,.postmeta{display:none}
.cutter{width:190px;height:140px;overflow:hidden;border:4px double #b0130d;margin:0 10px 0px 0;float:left;padding:0px}
.sidebar .widget-content, .sidebar2 .widget-content, .sidebar3 .widget-content, .sidebar4 .widget-content, .sidebar5 .widget-content, .sidebar6 .widget-content{border:1px solid #b0130d;border-top:none;margin:0 auto;padding:0}
.newsfea2{background:none;padding:4px;border:1px solid #b0130d;margin:0 auto}
body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOf38rodkca0qO7OXgS-VIM_QHTcq75EgLWvdUuQ8_Sn15BGaGhodUEE4kqcYX9OA4vW5pSbgNhZ21Vj3Pvi75j-uSlT-V1qRhYyBfQqKmCupuQgVTsFdSR5sEFdR7-uOnyOWOoXi_a9s/s1600/vichy.png)  repeat fixed top center;color:#333;font:x-small Georgia Serif;font-size:small;text-align:left;margin:0}
.headline-wrapper{background:none}
</style>
</b:if>

</b:if>

Kode yang berwarna merah di atas adalah kode CSS yang mengatur tampilan homepage , sehingga tampilan homepage berbeda dengan post page, begitu juga dengan tampilan sidebarnya.

Dalam hal ini saya ingin mengatakan bahwa meskipun kita tidak punya dasar ilmu yang memadai tentang HTML atau cara membuat web, namun dengan belajar yang sungguh-sungguh dan pantang menyerah dengan mencoba dan mencoba. Ketika kita mengalami kegagalan, tidak ada salahnya untuk bertanya ke orang lain, siapa tahu ada solusi utuk kita. Maka akan ada banyak pelajaran yang kita dapatkan dari kesalahan dan kegagalan tersebut.

Jangan pantang menyerah...merdeka...! hahahaha....

Semoga bermanfaat dan selamat berkreasi....