Cara Menampilkan Judul Saja di Halaman Depan Blog

Baca Juga

SEJUMLAH template magazine maskolis menampilkan Judul Posting Saja di Halaman Depan Blog, yaitu hanya berupa daftar judul tulisan, tanpa gambar thumbnail dan deskripsi, misalnya Johny Paper Magazine.

Jika Anda ingin menampilkan daftar judul saja di homepage, misalnya karena halaman depan blog Anda menampilkan widget Recent Post by Label, berikut ini sejumlah kode yang digunakan maskolis dalam sejumlah templatenya.

Cara Menampilkan Judul Saja di Halaman Depan Blog

1. Masuk ke template: Template > Edit HTML
2. Silakan pilih kode yang sesuai dengan template Anda yang yang pas di hati.

KODE1
Simpan di atas kode </head>

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color: #333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>

KODE2
Ganti kode <b:include data='post' name='post'/>

dengan:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <a expr:href='data:post.url'> <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:0px solid #ccc;margin-bottom:0px;background:;color:;'> <data:post.title/></div></a> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>

ATAU

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:5px 0 5px 10px;box-shadow:5px 6px 2px #808080;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin-bottom:2px;color:#00ACEE;text-shadow: 1px -1px 0px #E0E0E0;font-size:20px;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Kode kedua di atas adalah kode  yang membuat tampilan daftar judul posting mirip ilustrasi gambar di atas, namun tanpa tanggal atau waktu publikasi. Untuk menambahkan tulisan Latest Post plus icon RSS, tambahkan kode berikut ini di bawah kode <div id='main-wrapper'>

<h2 style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy33aTMfviQHH-W0Qz9_JixDUiLqSQo-Vv9bPopUE1-RqRB6f6pvmwOlXOy-1kJnbnfUhzoeYO_nTo9Yl_2pfva7X43a6hVg49oCvh4qdnJySc8TdDMCNxth1RezTjZ4owfjRuPaxb7kB9/s1600/icon_rss.jpg) no-repeat 3px 10px;margin:0;letter-spacing:-.001em; padding:8px 0 8px 25px;  font:bold 13px Arial;color:#07327c; text-transform:uppercase;overflow:hidden;">Latest Post</h2>

KODE3
Simpan  di bawah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

ATAU

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

KODE4
Ganti <b:include data='post' name='post'/> dengan kode:

<!--Post Titles Only-->
<b:if cond='data:blog.pageType != "item"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Post Titles Only-->

Demikian Cara Menampilkan Judul Saja di Halaman Depan Blog. Good Luck!