Tampilan Home Page tanpa Postingan

Tampilan Home Page

Sekarang saya mencoba berbagi dengan kawan cara membuat Tampilan Blog pada Home Page Bergaya tanpa Postingan, yang saya maksud disini adalah tampilan Blog pada Home Page suka-suka kita dan yang utama postingan / Artikel kita sembunyikan pada Home Page, untuk Demonya kawan bisa lihat » disini
Bagaimana Keren kan ?!


Okey langsung ke cara membuatnya : 

• Masuk ke Account Blogger dengan ID kawan 
• Pada Perancang Template pilih Pengaturan - Format - Tampilkan sebanyak mungkin : ganti jumlahnya menjadi 0 (Nol) posting di halaman utama - Simpan Setelan. 
• Pilih Edit HTML - Simpan / Download Template kawan dulu 
• Beri tanda centang pada radio disamping tulisan Expand Template Widget. 
• Cari kode berikut .comment-link{ 
• Kalau sudah ketemu Hapus / Ganti kode tersebut dengan kode dibawah ini 

.comment-link{float:right; overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:2px 5px 0px 0px;}

• Selanjutnya cari kode <b:include data='post' name='post'/> 
• Hapus atau ganti kode tersebut dengan kode berikut 

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div style='float:center; padding:4px;margin:5px;border:2px solid #00F; -moz-border-radius:10px;-webkit-border-radius:10px; background:#50A9F0; font size: 16px; text-decoration: none; line-height:normal;'> <a expr:href='data:post.url' style='text-decoration:none;'><data:post.title/></a><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='text-decoration:none;'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a></div> <b:else/><b:include data='post' name='post'/> </b:if> <b:else/><b:include data='post' name='post'/> </b:if>

Teks yang saya beri warna hijau adalah warna background judul Artikel, silahkan disesuaikan

• Selanjutnya cari kode : <b:includable id='status-message'> yang kode lengkapnya kurang lebih sebagai berikut

Tampilan Home Page II

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if></b:includable>

• Hapus atau Ganti Kode tersebut dengan :

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<div class='status-msg-wrap'>

<div class='status-msg-body'>

<a href='http://blog-renovasi.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke BLOG CREATION...'>

<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAr89QgUHDs30w4lEeaKQmR_t_ohUUhIAVxOMV0e3qoYXZpaU1LaXi0FDKq3MMRxdL6ihiq940x2IBbImS9vNu-pXsM3QHr4xJyHElMAd1gkxfRmfJvUvA0B2qMd0PsGczlz5-rp5Xrp4/s320/anjing+menggonggong.jpg' width='200'/><br/><br/><span style='color: rgb(255, 255, 0); font-size:34px; font-weight:bold;'> &#187;<blink> Masuk </blink></span>

</a>

</div>

<div class='status-msg-hidden'>

<a href='http://blog-renovasi.blogspot.com/search?max-results=500' style='cursor: pointer;' text-decoration='no' title='Masuk ke BLOG CREATION...'>

<img border='0' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAr89QgUHDs30w4lEeaKQmR_t_ohUUhIAVxOMV0e3qoYXZpaU1LaXi0FDKq3MMRxdL6ihiq940x2IBbImS9vNu-pXsM3QHr4xJyHElMAd1gkxfRmfJvUvA0B2qMd0PsGczlz5-rp5Xrp4/s320/anjing+menggonggong.jpg' width='200'/><br/><br/><span style='color: rgb(255, 255, 0); font-size:34px; font-weight:bold;'> &#187;<blink> Masuk </blink></span></a>

</div>

</div>

<div style='clear: both;'/>

</b:if>

</b:includable>

Catatan :

• Silahkan ganti URL Blog saya dengan URL kawan 
• Ganti URL image / gambar tersebut dengan yang kawan punya
• Simpan Template dan lihat hasilnya