Recent Comment Gravatar Tanpa Admin di Dropdown Menu

Share :

Tweet

Alhamdulillah akhirnya bisa ngepost lagi.... Hari ini saya akan share hasil eksperiment saya, yaitu membuat Recent Comment di Dropdown Menu. Recent Comment yang umumnya terletak di sidebar dan sekarang saya akan share yang terletak di dropdown menu. Untuk lebih lanjutnya bisa di lihat dari screenshot di bawah ini atau live demo di blog saya.

Bagi yang tertarik memasang dropdown menu seperti di blog saya silahkan ikuti langkah langkah mudah di bawah ini:

1. Login ke akun blogger masing-masing
2. Pergi ke Tata Letak >> Tambah Gadget
3. Klik HTML/Javascript 
4. Masukkan kode di bawah ini.


<style>
nav{
font:bold 15px Calibri,Arial,Sans-Serif;
}
nav *{
margin:0 0 0 0;padding:0 0 0 0;list-style:none;
}
nav ul{
background:#333;
height:30px;
box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.1), 0px 1px 3px rgba(0,0,0,0.4);
color: #e0e0e0;
}
nav li {
float:left;
display:inline;
}
nav li a{
padding:0px 15px;
line-height:30px;
color:#aaa !important;
text-shadow:0px -1px 0px #000;
display:block;
text-decoration:none;

}
nav li a:hover, nav li a:active{
background:#555;
}
nav li ul{
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
-webkit-transition:all 0.26s ease-out 0.2s;
-moz-transition:all 0.26s ease-out 0.2s;
-o-transition:all 0.26s ease-out 0.2s;
transition:all 0.26s ease-out 0.2s;
}
nav li li{
display:block;
float:none;
width:100%;
}
nav li:hover > ul{
visibility:visible;
width:200px;
opacity:1;
padding-left: 5px;
}
nav li li ul{
left:200px;
margin-top:-30px;
}
nav li.sub > a{
position:relative;
padding-right:30px;
}
nav li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#F1B215 transparent transparent transparent;
position:absolute;
top:15px;
right:10px;
}
nav li.sub li.sub > a:after{
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #F1B215;
position:absolute;
top:11px;
right:10px;
}

nav li:hover > #commenti ul{
visibility:visible;
width:250px;
opacity:1;
padding-left: 5px;
padding-bottom: 10px;
}
#commenti .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden; margin-top: 13px; }    
#commenti .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} 
#commenti ul {
  font-family:Verdana,Arial,Sans-Serif;
  color:#777;
  font-size:9px;}
.troller ul {padding-bottom: 5px;}
#commenti b { font-size: 12px;
text-decoration: none;
font-weight: bold; text-transform: capitalize;}
#commenti a:hover{ background: none; text-decoration: underline;}
#commenti li{padding: 5px;
margin: 0;
border-bottom: 1px solid black;
}
</style>

<nav>
<ul>
<li><a class='top1_link' href='/'>Home</a></li>
<li><a href='#'>Menu</a></li>
<li class='sub'><a href='#'>Drop Menu</a>
<ul>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
</ul>
</li>




<li><a href='#'>Menu</a></li>
<li class='sub troller'><a href='#'>Recent Comment</a>
<div id="commenti">
<script type="text/javascript">
var numComments=10,
showAvatar=true,
avatarSize=30,
roundAvatar=false,
characters=100,
showMorelink=false,
moreLinktext="More »",
defaultAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOy6gG1dhQlsc20HE8E1qQn7n-krFHjQrUUldPgELVQSVdj7CGG5hr7rCuJ8LEQY_nWnvvgboNTxZT23vtjhXDRf-dytBkz_16izuhWfvXPRk2xmMrLHFAX9wQLpV2vt37U-R4smpuycs/s1600/anon5.png",
hideCredits = true;
maxfeeds=10,
adminBlog='Aspar Susanto';
</script>

<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwanau.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&max-results=10"></script>
</div>
</li>
<li><a href='#'>Menu</a></li>
<li class='sub'><a href='#'>Drop Menu</a>
<ul>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>

</ul>
</li>
</ul>
</nav>

6. Perhatikan kode diatas, edit sesuai dengan selera sobat.                                                  numComments  = 10, (jumlah komentar yang di tampilkan)  characters  = 100, (jumlah karakter yang akan ditampilkan)  maxfeeds=10,(feed yang di load, harus sama dengan max feeds)  adminBlog='Aspar Susanto'; (nama tampilan admin).
7. ganti max-results=10, harus sama dengan max feed. 
8. Selanjutnya sobat blogger saya persilahkan untuk berkreasi sendiri....
9. Klik Simpan

Mungkin ini saja yang bisa saya share hari ini, jika ada pertanyaan silahkan ditanyakan lewat komentar di bawah ini. Salam Blogger!!!

Tag : Blogging