Membuat Sesuatu Berbeda Di Homepage Dan Post Page

Membuat Sesuatu Berbeda Di Homepage Dan Post Page

Bola Hero Gawai

Membuat Sesuatu Berbeda Di Homepage Dan Post Page

Homepage Berbeda Dengan Post Page
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>

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

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 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(http://1.bp.blogspot.com/-iT1mYIcUOAg/US9h2X1XIuI/AAAAAAAAXYs/idLjTXFEEYo/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 Kompi Ajaib, 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...! hehehehe....

Semoga bermanfaat dan selamat berkreasi....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×