Tampilan beranda beda dengan single post

Membuat sebuah tampilan halaman beranda dengan single post berbeda adalah hal yang sudah biasa dan banyak sekali contohnya di internet. beberapa baris kode css dan html sudah bisa melakukan hal tersebut.
Kunci dari blog yang memiliki tampilan berbeda antara halaman beranda dan single post karena dalam kode html terdapat dua buah kode css untuk tampilan posting, untuk tampilan pada halaman beranda kode css tersebut bisa anda temukan di bawah code ]]></b:skin> dan untuk tampilan pada single post atau halaman posting kode tersebut bisa anda temukan di atas kode ]]></b:skin>
Dan jika ada salah satu tampilan sidebar yang hilang pada tampilan single post itu karena memang sengaja dihilangkan dengan menambahkan kode seperti di bawah ini untuk sidebar yang dihilangkan.

<b:if cond='data:blog.pageType != "item"'>
Kode sidebar yang dihilangkan ada disini
</b:if>

Dan untuk contoh kode tampilan yang membedakan antara halaman beranda dan single post seperti dibawah ini:

h2.date-header {text-transform:none;font:normal 12px Arial;color:#999; margin:0.1em 0 .1em;line-height: 1.2em;}
.post {margin:.5em 0 0.1em;border-bottom:1px solid #dcd9d9;padding-bottom:0.1em;  }
.post h3 {font-family:Georgia, Times, Serif;margin:.25em 0 0;padding:0 0 4px;font-size:180%;font-weight:bold;line-height:1.2em;color:#000000;}
.post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#000000;font-weight:bold;}
.post h3 strong, .post h3 a:hover {color:#000000;}
.post-body {border-top:3px solid #CCCCCC;padding-top:6px;margin:0 0 .75em;line-height:1.4em;}
.post-body blockquote {line-height:1.3em;}
.post-footer {margin: .75em 0;color:#666;text-transform:none;letter-spacing:.01em;font: normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;line-height: 1.4em;}
.comment-link {margin-left:.6em;}
.post img, table.tr-caption-container {padding:6px;overflow: hidden;margin-top:5px;border:1px solid #dcd9d9;background:#fff; -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);}
.tr-caption-container img {border: none;padding: 0;}
.post blockquote {background:#ffffff url() no-repeat top left;font:bold 20px Arial;color:#000;letter-spacing:.001em;line-height: 1.0em;padding:25px 0 0 50px;margin:0 15px 10px 0;width:240px;float:left;}
.post blockquote p {margin:.75em 0;}
span.post-timestamp {display:none;}

]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
#main-wrapper {width: 410px;padding-left:5px;}
h2.date-header, .jump-link, .feed-links, .post-footer, #blog-pager-newer-link, #blog-pager-older-link, #blog-pager, .profile-link, span.given-name {display:none;}
.post {margin:.0em 0 0.6em;border:1px solid #dcd9d9;padding:5px 10px 8px 10px;}
.post:hover {background:#F0F2F3;}
.post h3 {font-family:Arial;margin:.05em 0 0;letter-spacing:.01em;font-size:120%;font-weight:bold;line-height:1.2em;color:#16387C;}
.post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#16387C;font-weight:bold;}
.post h3 strong, .post h3 a:hover {color:#333;text-decoration:underline;}
.post-body {margin:0.1em 0 .15em;line-height:1.5em;font:normal 12px Arial;color:#333;border-top:none;padding-top:0px;}
.post img, table.tr-caption-container {padding:4px;margin-top:4px;}</b:if>
</style>

Dengan sedikit kreatifitas dan teliti dalam kode CSS maupun HTML apapun bisa anda lakukan dalam sebuah blog, Belajar dan belajar, mengetahui apa yang belum diketahui mungkin bisa menjadi jalan menuju Roma.

Tweet