Posted by : Unknown
Rabu, 19 Maret 2014
ok kawan..... ane mau share nih,,,, tentang cara pasang recent comment dengan avatar ..... pasti dah pada tw semua... ok ane ga lama2 langsung aja kurang lebih screen shootnya kayak gini
disentuh mouse
ini tooltipnya
nih klo lbih jelasnya lgi cobain aja...
- Andi Asrul ZaniSaya Mau Nanya nih bro. bagaimana sih caranya Ganti Gambar Logo Homepage di Blog Ini ? mhon jawabann...
- rahmathost.comthx sharingnya gan
- Surya Promomakasih mas bro buat sharenya.. menarik sekali artikelnyaagen tiket onlinejasa iklan massal
- Dapur Bugilterima kasih gan
- Allef DanidanSenhor, boa noite como eu faço para obter este tema ???
- imamkeren sobagen tiket pesawat
Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :
1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :
<script type='text/javascript' src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<style type='text/css'>
/* Beauty Recent UWI Comments */
#komentar {margin:0;padding:0;background:transparent;box-shadow:0px 1px 3px #000;box-shadow:inset 0px 0px 5px #000;
border: 2px solid rgba(255, 255, 255, 0.03);}
#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 rgba(255, 255, 255, 0.03);border-top:1px solid rgba(255, 255, 255, 0.03);padding:2px 0;list-style:none;}
#komentar ul li:last-child {border-bottom: none;}
#komentar ul li:hover {background-color:#222;}
#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 rgba(255, 255, 255, 0.03);}
#komentar .ismen {display: block;font-size: 1.2em;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: #fff;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid white;background:darkred;text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 450px;opacity: 0;box-shadow: 0px 0px 4px red;-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 white;}
#komentar .gamen:hover>span{opacity: 0.9;bottom:50px}
</style>
<script type='text/javascript'>//<![CDATA[
var jmlkomentar = 10;
var jmlkarakter = 100;
//]]>
</script>
<div id='komentar'>
<ul><script type="text/javascript" src="http://ut2a-4down.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script> </ul>
</div>
5. Klik Simpan. Lihat hasilnya.
NB :: - Teks yang berwarna merah, anda ganti dengan Nama Blog anda.
Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.
Selamat mencoba.!\
NB :: - Teks yang berwarna merah, anda ganti dengan Nama Blog anda.
Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.
Selamat mencoba.!\
sumbernya boss : ut2a
kerennnn........
BalasHapus