Breaking News

Monday, May 7, 2012

Membuat Kolom Komentar dengan Foto

Untuk kali ini saya mau berbagi tips dan trik untuk membuat kolom komentar yang memiliki foto dan pop up nama user yang berkomentar. 
langsung saja langkah-langkahnya sebagai berikut :
1. Login ke blogger.com
2. Buka tab perancangan
3. klik Tambah  Gadget
4. Pilih HTML/Javascript
5. Copy Pastekan script dibawah ini
<style type="text/css">
#komentar {
background:#ffffff;
margin:0;
padding:0;
border:1px solid #ffffff;
}
#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 #ffffff;
}
#komentar ul li div.ismen {
color:#0971C8;
text-shadow:-1px -1px 1px #ffffff;
}
#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: #000000;
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 = 6;
var jmlkarakter = 45;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://unromantic-romeo.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>

Ganti teks yang berwarna merah dengan url blog kalian sendiri.
Simpan dan Lihat Blog. Semoga brhasil
Selamat mencoba semoga bermanfaat

3 comments:

  1. wan caranya bagai mana

    cz krang ngerti pemakaiannya

    ReplyDelete
  2. login dulu rip biasa, masuk ke tab perancangan, nnti kan ada buat tambah gadget, klik aja nti pilih yang html/javascript, copyn scrit diatas ke bagian html td, gnti yg teks yg wara merah pke url blog arip

    ReplyDelete
  3. www.indobet77.com

    Master Agen Bola , Casino , Tangkas , Togel Terbesar
    dan Terpercaya Pilihan Para Bettor

    Promo Terbaru :
    - Bonus  10% New Member Sportsbook
    - Bonus 5% New Member Casino Online
    - Bonus 10% Setiap Hari Bola Tangkas
    - CASHBACK untuk Member
    - BONUS REFERRAL 5% + 1% Seumur Hidup

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : indobet77_sb2@yahoo.com
    - EMAIL : indobet77@gmail.com
    - WHATSAPP : +63 905 213 7238
    - WECHAT : indobet77
    - SMS CENTER : +63 905 213 7238
    - PIN BB : 2B65A547 / 24CC5D0F

    Salam Admin ,
    http://indobet77.com/

    ReplyDelete

Designed By