JavaScript Recent Comment/Komentar Terbaru dengan CSS

widget recent comment

Untuk membuat widget recent comment dengan tampilan yang luar biasa ganteng seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

<style type="text/css">
#komentar {
  font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  background-color:#597624;
  margin:0px 0px;
  padding:10px 10px;
  color:#000;
  border:4px solid #597624;
  -webkit-box-shadow:inset 0px 0px 2px #000;
  -moz-box-shadow:inset 0px 0px 2px #000;
  box-shadow:inset 0px 0px 2px #000;
}

#komentar ul {
  margin:0px 0px;
  padding:0px 0px;
  border-top:1px solid #455F20;
  border-bottom:1px solid #799D1A;
}

#komentar ul li {
  border-top:1px solid #799D1A;
  border-bottom:1px solid #455F20;
  padding:3px 0px;
  list-style:none;
}

#komentar ul li b a,
#komentar ul li b a:link,
#komentar ul li b a:visited,
#komentar ul li b {
  color:#D7E5FD;
  text-shadow:0 1px 1px rgba(0,0,0,0.4);
}

#komentar ul li b:before {
  content:url(http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);
  margin:0px 4px 0px 0px;
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}
</style>
<script type="text/javascript">
var jmlkomentar = 14,
    jmlkarakter = 200,
    home_page   = "http://hompimpaalaihumgambreng.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-rc-comments.js" type="text/javascript"></script>

Tentukan jumlah komentar yang akan ditampilkan pada var jmlkomentar dan jumlah karakter pada var jmlkarakter. Ganti kode yang Saya beri warna merah dengan alamat blogmu sendiri.
Klik Simpan dan lihat hasilnya:

Lihat Demo

JSON disederhanakan kembali dari versi aslinya di Blog Tune-Up

Komentar

Posting Komentar

Postingan populer dari blog ini

Demo for Blogger Customized Native Functional Threaded Commenting System

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum . Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica , quam nunc putamus parum claram, ant...
Baca selengkapnya

StackOverflow Like Pagination

Gambar
Some while ago, I built a pagination system in PHP to display a long list of pagination links. The pagination system showed at most 5 links at a time and additional links were represented by ellipsis (...). However, I was not able to deal with certain edge cases, so I drew some inspiration from the pagination system used on StackOverflow to tackle them. This is what the end result looked like: The first and last page links are always visible The previous and next page links (numeric ones) are always visible At most n page links excluding first and last page links are visible; rest are represented by ellipsis The pagination for first and last n - 1 pages is handled a bit differently Complete PHP source code below. DEMO DISINI Pagination Function <?php /** * Displays pagination links based on given parameters * * @param int $currentPage - current page * @param int $itemCount - number of items to paginate, used to calculate total number of pages * @param int $items...
Baca selengkapnya

AdSense Responsive Ads - Why Not?

Gambar
Google telah secara konstan menambahkan fitur-fitur baru ke AdSense, menawarkan penerbit lebih banyak kontrol atas bagaimana iklan ditampilkan di situs web mereka. Berikut adalah beberapa fitur yang terkait dengan penerapan kode iklan yang diluncurkan selama 12 bulan terakhir: Introduction of Asynchronous Ads — July 2013 Introduction of Responsive Ads — July 2013 Introduction of Custom-Sized Ads — December 2013 At this moment, publishers can choose from standard, responsive and custom-sized ad units when creating one. If you have not chosen the ad code implementation method or you are looking forward to change it, I suggest going for responsive ads. The Problem With Standard and Custom-Sized Ads Both standard and custom-sized ads are fixed size which means they do not adapt to fluid or responsive website layout. Web designers understand that fixed size ads influence the layout of a website; and likewise, the website layout dictates the ad sizes to display. For...
Baca selengkapnya