February 29, 2016

Cara Menampilkan Judul Saja di Halaman Depan Blog

February 29, 2016

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.

Cara Menampilkan Judul Saja di Halaman Depan Blog

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!

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

5 comments on Cara Menampilkan Judul Saja di Halaman Depan Blog

  1. Terima kasih infonya pak. Salam

    ReplyDelete
  2. kalo mau nampilin page/halaman utuh di homepage gimana ya . nbaru dibawahnya latest post ? mohon pencerahannya cb

    ReplyDelete
    Replies
    1. bisa kasih contohnya blog mana yang begitu ya? baru denger tuh :)

      Delete
  3. trik ini menarik tapi hanya cocok untuk blog magazine style.. just my opinion. no offense :)

    ReplyDelete
  4. blog ane juga gitu bang, judul saja di halaman depan blog

    ReplyDelete

Contact Form

Name

Email *

Message *