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 perhatikan gambar dibawah ini.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.
Sekarang kita langsung ke tips cara memasang recent commet versi 4.
LANGKAH PERTAMA
- Masuk ke Dasbor blog anda.
- Pilih menu template pada blog yang akan dipasang recent coment.
- Download template blog anda terlebih dulu, jika takut gagal dengan cara klik Cadangkan/Pulihkan yang berada di bagian atas kanan.
- Setelah proses download selesai, klik Edit Template.
- Cari kode
]]></b:skin>
pada template blog anda. - Gunakan CTRL+F untuk mempercepat pencarian.
- 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>- Kode
border:1px dotted #1d1d1d;
: merupakan kode garis yang tampil, anda dapat mengganti ukuran, style dan warna border sesuai keinginan. - Kode
color:orange;
: merupakan warna tulisan yang tampil, anda dapat mengganti dengan warna kesukaan anda. - Kode
font-size:12px;
: merupakan ukuran huruf yang tampil. Anda dapat mengganti ukuran huruf sesuai keinginan. - 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.
- Kode
- Setelah selesai pengeditan kode Css, klik tombol Simpan Template.
- Masuk menu Tata Letak
- Klik tambah gadget pada bagian dimana anda akan meletakan recent comment.
- Pilih HTML/JavaScript.
- 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> - Kode
numComments =3,
: merupakan jumlah tampilan komentar terbaru. Dapat anda ganti dengan jumlah yang ingin ditampilkan. - Kode
characters = 107,
: merupakan jumlah kata yang tampil pada setiap komentar . Dapat anda ganti sesuai keinginan. - 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. - Ganti url blog ini
http://ades-sambas.blogspot.com
dengan url blog anda - Setelah selesai pengeditan, klik tombol Simpan.
- Lihat Komentar terbaru pada blog anda.
Read more: http://epg-studio.blogspot.com/2012/05/pasang-recen-comment-versi-4.html#ixzz3JIJPeGr1
0 komentar:
Posting Komentar