Membuat recent comment dengan efek overlay || jQuery ||

Mungkin tidak semua orang akan membaca komentar - komentar yang ada pada blog anda. Umumnya pengunjung cukup melihat dan membaca artikel, sedikitnya mungkin memperhatikan komentar terakhir yang di tulisakan pengunjung lewat widget "Recent Comments" yang umumnya di letakan pada sidebar.

Bagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay. Jadi, widget recent comments tersebut akan keluar ditengah halaman blog setelah anda menekan sebuah menu yang telah kita sediakan untuk menerapkan efek overlay. Untuk lebih jelasnya anda bisa lihat contoh nya disini.

jQuery

Langkah pertama untuk menampilkan efek overlay pada widget "Recent Comments" adalah dengan menggunakan plugin jQuery. Silahkan anda masuk ke halaman template. Page Elements » Edit HTML

recent commnet

Letakan jQuery plugin dibawah ini pada bagian bawah tag <head>

Lalu tekan Save Template dan kembali kehalaman Page Elements.

recent comment

Buat sebuah widget baru dengan cara add a gadget » HTML/Javascript

recent comment

letakan kode css dan html ini di dalam nya.

<style type="text/css">
/* style untuk id photos */
#photos { text-align:center; }
#photos img { cursor:pointer; margin:0 0px;
background-color:#fff;
-moz-border-radius:4px;
-webkit-border-radius:4px; }
/* style untuk elemen didalam overlay */
.details { position:absolute; top:15px; right:5px;
font-size:14px; color:#fff; width:200px;
background-color: #333333; }
.details h3 { color:#aba; font-size:15px;
margin:0 0 -10px 0; }
/* the overlayed element */
.simple_overlay { /* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:300px; border:2px solid #FFFFFF; -moz-border-radius:10px;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
height: auto; display: none; color: #FFFFFF;
padding: 10px; }
/* close button positioned on upper right corner */
.simple_overlay .close { background-image:url(http://3.bp.blogspot.com/-D2-EH8Tfd-k/TXFTTenSg5I/AAAAAAAAA_Q/-FujvLx9-w8/s1600/close.png);
position:absolute; right:-15px; top:-15px;
cursor:pointer; height:35px; width:35px; }
/* end overlay styling */
/* get rid of those system borders being generated for A tags */
a:active { outline:none; }
:focus { -moz-outline-style:none; }
</style>

<script type="text/javascript">
$(document).ready(function(){
$("img[rel]").overlay();
});
</script>

<div id="photos" style="position: fixed; bottom: 0; right: 100px; width:100px; font-size: 16px; font-weight:bold;" class="cumi">
<img src="http://3.bp.blogspot.com/-H4CzrduajM4/TXFTL9NYzdI/AAAAAAAAA_I/rNkraXC0dI4/s1600/komentar.png" width="130" height="25" rel="#mies1"></div>

<div class="simple_overlay" id="mies1"><div class="close"></div>
<script style="text/javascript" src="http://amen24.googlepages.com/showrecentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://pujangga-adhitya.co.cc/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

Ganti alamat http://pujangga-adhitya.co.cc dengan milik anda.

Lalu tekan tombol SAVE

recent comment