25 February 2013

Membuat Recent Comments Lebih Elegan

Do you want to share?

Do you like this story?

recent comments eleganMembuat Recent Comments atau Komentar Terbaru sebenarnya banyak sekali caranya dari mulai menggunakan Widget Creator, Alamat Feed maupun Javascript

Fungsi dari widget ini sudah jelas yakni untuk menampilkan komentar terbaru pada blog. Dan sobat Info Dari Om pernah menanyakan cara membuat widget seperti ini, pada kesempatan ini, saya akan mencoba memberikan Tutorialnya.

Dan tergantung kreatifitas Anda saja untuk membuat widget seperti ini, bisa diotak-atik sendiri kode-kodenya sesuai dengan selera Anda masing-masing :)

O.K gak usah panjang lebar langsung saja jika Anda ingin membuat widget seperti ini, silahkan terapkan Tutorial berikut

Langkah-langkah Membuat Recent Comments Lebih Elegan
1. Masuk ke account Blogger sobat
2. Pilih Tata Letak >> Tambah Gadget/Widget >> Tambahkan HTML/JavaScript
<style type="text/css">
#komentar {
font:normal 11px Comic Sans MS,Verdana,Arial,Sans-Serif;
background-color:#597624;
margin:0px 0px;
padding:10px 10px;
color:#000;
border:2px 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 = 10,
jmlkarakter = 25,
home_page = "http://www.indolaron.com";
</script>
<script src="http://indolaron-js.googlecode.com/svn/trunk/elegan_rc.js" type="text/javascript"></script>
3. Save template

Keterangan:
- http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png
bisa diganti dengan url icon sesuai selera Anda inginkan
- angka 10 : jumlah komentar yang ditampilkan
- angka 25 : jumlah karakter
- http://www.indolaron.com ganti dengan alamat blog anda

SELAMAT BERKREASI....!!!! :)

ARTIKEL TERKAIT :

17 komentar :

  1. wokkeh gan, thanks yah...
    permintaan ane di penuhi...

    thanks!!

    Admin InfoDariBlogspot

    ReplyDelete
  2. Makasih atas infonya. langsung dipakai mas !
    Salam, baleatikan.blogspot.com

    ReplyDelete
  3. info yg menarik dan bermanfaat, terimakasih..

    salam.

    ReplyDelete
  4. Thanksbro Dapet Ilmu Lagi NIh... :wa:

    ReplyDelete
  5. Kelihatannya jadi lebih simple ya penampilan nya! NICE bro :)

    ReplyDelete
  6. @Daniel Benny Simanjuntak
    Iya sobat, kliatan simple aja dan menurut saya pribadi enak diliatnya \o/

    ReplyDelete
  7. pas banget warnanya dengan warna blog saya mas.. thx udh share..

    ReplyDelete
  8. sipp,,tinggal kitanya aja yang mau kreatif,,hehe

    ReplyDelete
    Replies
    1. Iya sobat,pernak-pernik widget blogger tinggal seberapa kemauan+kreatifitas dari pengelola blog :-d

      Delete
  9. segera daftar dan bergabung bersama situs resmi SARANAPELANGI dan dapatkan keuntungan ratusan juta rupai setiap hari

    ReplyDelete
SILAHKAN TULIS KOMENTAR ANDA, DENGAN CATATAN :
* Komentator "Anonymous" tidak diprioritas-kan, jadi gunakan salah satu Profile untuk respon lebih cepat
* Jika anda tidak memiliki akun Google anda bisa gunakan Name/URL
   - isi Name dengan Nama Anda
   - isi URL dengan link/url profile Facebook Anda atau Twitter Anda atau yang lainnya
* Mohon jangan menyisipkan Link Hidup..!!!
* Please do not insert Live Links ....!!!

Advertisements

Advertisements

 

Membuat Recent Comments Lebih Elegan Oops ! | Error 404