Mengganti Image di Home Page dengan.....

Sabtu, 21 Juli 2012
Kalau Blognya kawan ingin tampil beda dengan Blogger yang lainnya atau kawan ingin Blognya seperti Blog saya ini :w; maksud saya disini setiap Artikel atau postingan ada Imagenya baik pada Home Page maupun pada Single Page :z; yang pada umumnya saya lihat sudah biasa, tapi sekarang saya ingin berbagi dengan kawan sebagai pengunjung setia Blog ini yaitu Image pada Postingan di Home Page diganti dengan jumlah Komentar yang ada pada Artikel tersebut atau dengan kata lain Image tersebut hanya kelihatan pada Single Page saja sedangan di Home Page tidak ada karena sudah diganti dengan Jumlah Komentar :z;
Bagaimana kawan tertarik ?! :r;
Cara sebagai berikut :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor Pilih Template - Edit HTML - Lanjutkan
  • Cari ]]></b:skin> atau .comment-link
  • Copas script berikut diatas ]]></b:skin> atau ganti  .comment-link dengan script dibawah ini
.comment-link{color:#122B15;background:url(http://1.bp.blogspot.com/-oi8cr-wcEuE/TiJYFMYa6zI/AAAAAAAAB64/YM6mUIKekbQ/s1600/Komentar-.png) no-repeat;
width:30px;
height:30px;
float: left;
margin: 5px;
padding:5px 14px 10px 5px;
font-size:12px;
text-align:right;
}
  • Selanjutnya cari kode script Readmore yang biasanya disimpan dibawah ]]></b:skin> atau diatas </head>, perhatikan contoh Readmore 
<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 200; summary_img = 150; img_thumb_height = 100; img_thumb_width = 100; </SCRIPT> <SCRIPT src='https://sites.google.com/site/blogbegocreation/javascript/readmore-otomatis.js' type='text/javascript'/>

  • Teks yang saya beri warna merah adalah ukuran Image pada Home Page, yang akan kawan rubah dari 100 menjadi 0 [nol] 
  • Simpan sementara Template kawan
Sekarang kita lanjutkan kembali pengerjaannya:

  • Beri tanda check disamping Expand Template Widget
  • Cari <data:post.body/> yang pertama
  • Copas Script berikut diatasnya
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='float:left;text-align:center;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> </b:if></a>
            </b:if>
          </div>
</b:if>

  • Simpan Template kawan dan lihat hasilnya


0 komentar:

Posting Komentar