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/AVvXsEiASsdfNMGlgDvPXXJQkUmZd17W9kZ5GNGJC2sIRY4wZlkQT5X4H5b385RoxdsY8yKO4TAF4XTkKH9iTCSBEgk2fLN0C4lAWWH1dYOF1uU2cRM9BcmeTs4ZrNnjszgW2_mWvLIhBoJpe6I/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/AVvXsEiASsdfNMGlgDvPXXJQkUmZd17W9kZ5GNGJC2sIRY4wZlkQT5X4H5b385RoxdsY8yKO4TAF4XTkKH9iTCSBEgk2fLN0C4lAWWH1dYOF1uU2cRM9BcmeTs4ZrNnjszgW2_mWvLIhBoJpe6I/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