Membuat Sesuatu Berbeda Di Homepage Dan Post Page

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

Bagi yang sudah paham wacana isyarat HTML template dan hebat memodifikasi atau bahkan membuat template, ini ialah hal yang sudah biasa. Namun yang belum paham, apalagi yang belajarnya otodidak menyerupai aku ini, merupakan hal yang luar biasa susahnya. Bagaimana tidak...kok tampilan homepage dan post page berbeda? Kok mampu ya...?

Banyak perbedaan yang mampu 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 isyarat ]]></b:skin>. SESUATU tersebut ialah isyarat CSS yang khusus untuk mengatur tampilan homepage (tidak ditampilkan di post page dan statis page). Karena isyarat CSS ini disimpan setelah atau di bawah skin, maka penulisannya harus ditambahkan isyarat lainnya menyerupai di bawah ini:

 
 <style type='text/css'>
 ...
 Kode CSS Di sini.
 ...
 </style>
 

Dan sebab pengaturan ini tidak akan ditampilkan di post page dan statis page, maka penulisannya juga harus ditambahkan isyarat lain menyerupai 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>
 

Baca juga cara menampilkan atau menyembunyikan sesuatu atau widget di blog DI SINI.

Sehingga bila digabungkan akan menjadi menyerupai 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 isyarat CSS untuk mengatur tampilan homepage di antara isyarat di atas. Sebagai contoh, ini ialah pengaturan homepage Kompi Ajaib.

 
 <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/AVvXsEjrS5Ej57rSHHrqWLmh_zrVSyPJlN1Xj48-PkCNVnGaGJ8KCWtRrhz8y77Ostu-qDN9qLng5SSwY-2fefR6lerIi_bjJscnfLmt8YkhCs90yWksa1WnsgSZNLTC_qhP5bwIvRJFpyPWdGQ/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 ialah isyarat CSS yang mengatur tampilan homepage Kompi Ajaib, sehingga tampilan homepage berbeda dengan post page, begitu juga dengan tampilan sidebarnya.

Dalam hal ini aku ingin mengatakan bahwa meskipun kita tidak punya dasar ilmu yang memadai wacana HTML atau cara membuat web, namun dengan berguru yang sungguh-sungguh dan pantang mengalah 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...! hehehehe....

Semoga bermanfaat dan selamat berkreasi....