Home » » Membuat Recent Comment JSON dengan Avatar

Membuat Recent Comment JSON dengan Avatar

Redi Apri Handoko | 19.58 | 0 comments
Inilah yang ditunggu-tunggu blog trik dan tips, akhirnya ditemukan juga membuat recent comment dengan avatar". Trik ini dibuat oleh Blogger Tune Up, dengan judul Percantik Sidebar Komentar Versi 2.0 atau judul bahasa inggrisnya Beauty Recent JSON Comments Sidebar 2.0. Widget ini mampu menampilkan avatar dari pengujung yang meninggalkan komentar. Selain itu akan muncul tooltip cantik ketika mouse diarahkan diatas, tool tip itu berisi nama komentator. Animasi tool tip ini sangat menarik jika dilihat oleh pengunjung blog anda. Jika Ingin memasangnya cukup mudah tinggal mengikuti langkah berikut:

1. Masuk ke Rancangan --> Elemen Halaman
2. Tambahkan gadjet lalu pilih HTML/JavaScript
3. Kopi dan masukan kode dibawah ini pada gadjet tadi
<style type="text/css">
#komentar {
background:#3eb5da;
margin:0;
padding:0;
border:1px solid #0971C8;
}
#komentar ul{
margin:0;
padding:0px;
list-style: none;
}
#komentar ul li:first-child {
border-top:none;
}
#komentar ul li {
height:46px;
border-bottom:1px solid #0971C8;
border-top:1px solid #CCCCCC;
padding:2px 0;
list-style:none;
}
#komentar ul li:last-child {
border-bottom: none;
}
#komentar ul li:hover {
background-color:#7BC4DF;
}
#komentar a,
#komentar a:link,
#komentar a:visited {
clear:both;
color:#222;
display:block;
text-decoration:none;
}
#komentar .gamen {
display: block;
float: left;
height: 42px;
left: 4px;
margin-right: 15px;
position: relative;
width: 42px;
}
#komentar .gamen>img {
border: 2px solid #ffffff;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
box-shadow: 0 1px 2px #222222;
}
#komentar ul li div.ismen {
color:#ffffff;
text-shadow:-1px -1px 1px #0971C8;
}
#komentar .ismen {
display: block;
font-size: 1em;
font-style: italic;line-height: 1.2;
padding: 2px 4px 2px 0;
}
#komentar .gamen>span{
width: 150px;
height: auto;
line-height: 20px;
padding: 5px;
left: 115px;
margin-left: -64px;
font-size: 1em;
font-weight:bold;
color: #212121;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #0971C8;
background: rgba(255,255,255,0.7);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#komentar .gamen>span:before,
#komentar .gamen>span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
#komentar .gamen>span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #0971C8;
}
#komentar .gamen:hover>span{
opacity: 0.9;
bottom: 55px;
}
</style>
<div id='komentar'>
<ul>
<script type='text/javascript'>
//<![CDATA[
var jmlkomentar = 20;
var jmlkarakter = 60;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

Keterangan:
- blogtrikdantips.blogspot.com ubah sesuai dengan alamat blog anda.
- var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar.
- var jmlkarakter = 60; ubah nilai 60 untuk menentukan jumlah karakter.

4. Simpan gadjet anda

Jika Anda ingin membuat Recent Comment Jason tersebut Tanpa Style (warna disesuaikan dengan background template anda) maka kopi kode dibawah ini lalu masukan keterangan seperti diatas:
<style type="text/css">
#komentar {
margin:0;
padding:0;
}
#komentar ul{
margin:0;
padding:0px;
list-style: none;
}
#komentar ul li {
height:46px;
margin:0 !important;
padding:4px 0 !important;
display:block;
clear:both;
list-style:none;
}
#komentar ul li:last-child {
border-bottom:none;
}
#komentar ul li:hover {
background-color:#ccc;
}
#komentar a, #komentar a:link, #komentar a:visited {
clear:both;
color:#222;
display:block;
text-decoration:none;
text-shadow:0 1px 0 #ccc;
}
#komentar .gamen {
display: block;
float: left;
height: 42px;
left: 4px;
margin-right: 15px;
position: relative;
width: 42px;
}
#komentar .gamen>img {
border: 2px solid #fefefe;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
-webkit-box-shadow:0 1px 2px #222;
-moz-box-shadow:0 1px 2px #222;
box-shadow:0 1px 2px #222;
}
#komentar .gamen>span{
width: 150px;
height: auto;
line-height: 20px;
padding: 5px;
left: 115px;
margin-left: -64px;
font-size: 1em;
font-weight:bold;
color: #212121;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #ccc;
background: rgba(255,255,255,0.7);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#komentar .gamen>span:before,
#komentar .gamen>span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
#komentar .gamen>span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #ccc;
}
#komentar .gamen:hover>span{
opacity: 0.9;
bottom: 55px;
}
#komentar .ismen {
display: block;
font-size: 1em;
line-height: 1.2;
padding: 2px 4px 2px 0;
}
</style>
<div id='komentar'>
<ul>
<script type='text/javascript'>
//<![CDATA[
var jmlkomentar = 20;
var jmlkarakter = 60;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

Selamat mencobanya!
Berbagi Dengan Teman:

Posted by : Redi A.H ~ / Tutorial windows, SEO , Info gadget, Download game

Artikel Membuat Recent Comment JSON dengan Avatar Di posting oleh Redi A.H pada 19 Mar 2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kontak atau komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging!!!

0 comments:

Posting Komentar

Terimakasih atas kunjungan anda semua, sebelumnya mohon maaf kami tidak menerima komentar yang berbau tentang pornografi.
TERIMAKASIH atas partisipasinya.

 
Site Meter :
Copyright © 2011. Tutorial Windows 7 - All Rights Reserved
Proudly powered by Blogger
Thank You For Google