Menampilakan Komentar Terbaru

Tampilan recent coment (komentar terbaru) ini punya kelebihan dibanding recent coment sebelumnya. Dilihat dari setiap point yang tampil pada kode Css, tips ini bersumber dari sakahayang.com yang juga merupakan situs yang menampilkan post tentang tutorial.

Kelebihan yang ada pada recent comment ini  yaitu pada tampilan avatar yang bentuknya bulat, tulisan komentar yang dapat kita atur serta kelebihan-kelebihan lainya. Anda akan melihat kelebiha itu setelah dipasang pada blog anda.

Selain menggunakan kode Css, recent comment ini juga dibantu dengan sebuah file javascript.

Bagi anda yang ingin menggunakan file javascript milik sendiri agar proses loadingnya tidak tergantung dari file javascript milik EPG Studio. Anda dapat download javascript-nya disini.

Sebagai Contoh, Coba Anda Lihat Gambar Di Bawah..

LANGKAH PERTAMA.

1. Masuk ke Dasbor blog anda.
2. Pilih menu template pada blog yang akan dipasang recent coment.
3. Download template blog anda terlebih dulu, jika takut gagal dengan cara klik Cadangkan/Pulihkan yang berada di bagian atas kanan.
4. Setelah proses download selesai, klik Edit Template.
5. Cari kode ]]></b:skin> pada template blog anda.
6. Gunakan CTRL+F untuk mempercepat pencarian.
7. Copy kode Css dibawah ini, kemudian paste tepat dibawah kode  ]]></b:skin>
   
   <style type='text/css'>
ul.sakahayang_recent_comments{
list-style:none;
margin:0;
padding:0;
overflow:hidden;
list-style-type:none
}
.sakahayang_recent_comments li{
width: auto;
list-style-type:none;
float:none;
height:auto;
overflow:hidden;
background:transparent;
border:1px dotted #1d1d1d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin:0 0 5px;
padding:5px;
}
.sakahayang_recent_comments li .avatarImage{
   padding:3px;
   float:left;margin:0 6px 0 0;
   position:relative;overflow:hidden}
 .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-

radius:100px}
 .sakahayang_recent_comments li img{
   padding:0;
   position:relative;
   overflow:hidden;display:block}

 .sakahayang_recent_comments li span{
   margin-top:4px;
   color:orange;
   display:block;
   font-size:12px;
   font-style:italic;
   line-height:1.4}

</style>
   1. Kode border:1px dotted #1d1d1d;  : merupakan kode garis yang tampil, anda dapat mengganti ukuran, style dan warna border sesuai keinginan.
   2. Kode color:orange;  : merupakan warna tulisan yang tampil, anda dapat mengganti dengan warna kesukaan anda.
   3. Kode font-size:12px;  : merupakan ukuran huruf yang tampil. Anda dapat mengganti ukuran huruf sesuai keinginan.
   4. Kode font-style:italic;  : menunjukan tulisan yang tampil miring, kode itu dapat anda buang atau diganti dengan bold atau apa saja yang penting kodenya untuk mengatur tampilan huruf.
8. Setelah selesai pengeditan kode Css, klik tombol Simpan Template.

LANGKAH KEDUA.

1. Masuk menu Tata Letak
2. Klik tambah gadget pada bagian dimana anda akan meletakan recent comment.
3. Pilih HTML/JavaScript.
4. Copy script dibawah ini kemudian paste pada kolom yang tersedia.
   
   <script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  =3,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 107,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50;
//]]>
</script>

<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/java-script-admin/rcwaupack1.js.txt"></script>

<script type="text/javascript" src="http://ades-sambas.blogspot.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&max-results=10">

</script>
1. Kode numComments  =3,  : merupakan jumlah tampilan komentar terbaru. Dapat anda ganti dengan jumlah yang ingin ditampilkan.
2. Kode characters  = 107,  : merupakan jumlah kata yang tampil pada setiap komentar . Dapat anda ganti sesuai keinginan.
3. Kode https://sites.google.com/site/epgstudiosite/java-script-admin/rcwaupack1.js.txt  : merupakan file javascript simpanan EPG Studio. Dapat anda ganti dengan file javascript simpanan anda.
4. Ganti url blog ini http://ades-sambas.blogspot.com   dengan url blog anda
5. Setelah selesai pengeditan, klik tombol Simpan.
6. Lihat Komentar terbaru pada blog anda.

Ditulis oleh Unknown, - Rating: 4.5

Judul : Menampilakan Komentar Terbaru
Deskripsi : Tampilan recent coment (komentar terbaru) ini punya kelebihan dibanding recent coment sebelumnya. Dilihat dari setiap point yang tampil ...

Bagikan ke

Facebook Google+ Twitter