Membuat Sesuatu Berbeda Di Homepage Dan Post Page

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

Bagi yang sudah paham ihwal arahan HTML template dan andal memodifikasi atau bahkan menciptakan template, ini yaitu hal yang sudah biasa. Namun yang belum paham, apalagi yang belajarnya belajar sendiri ibarat aku ini, merupakan hal yang luar biasa susahnya. Bagaimana tidak...kok tampilan homepage dan post page berbeda? Kok sanggup ya...?

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

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

Dan alasannya pengaturan ini tidak akan ditampilkan di post page dan statis page, maka penulisannya juga harus ditambahkan arahan lain ibarat 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 ibarat 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 arahan CSS untuk mengatur tampilan homepage di antara arahan di atas. Sebagai contoh, ini yaitu 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/AVvXsEhR1K_LtX_3vdu98yy7xI-QXBig1di0kaam_Xx1SRPKWKHRcMCXC_0Zwy9Ip3ea6UO-2fCUEUDf_vaYWV5ICYUBQ8bmDFW1YQiQV-MZTRBxwO57-A4KxUds5F6IKom2wGxwI-Je3YYuPJY/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 yaitu arahan CSS yang mengatur tampilan homepage Kompi Ajaib, sehingga tampilan homepage berbeda dengan post page, begitu juga dengan tampilan sidebarnya.

Dalam hal ini aku ingin menyampaikan bahwa meskipun kita tidak punya dasar ilmu yang memadai ihwal HTML atau cara menciptakan web, namun dengan mencar ilmu 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....

Sumber https://www.kompiajaib.com/

Share this post