Home » » Cara Menampilkan Judul Saja di Halaman Depan Blog

Cara Menampilkan Judul Saja di Halaman Depan Blog

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(http://2.bp.blogspot.com/-R47EHosIpq0/T1j_-WTQBFI/AAAAAAAAFxk/guY5A6IBT2k/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!

Thanks for reading & sharing Cara Menampilkan Judul Saja di Halaman Depan Blog

Previous
« Prev Post

4 comments:

Comment Page:
  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

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox