Sobat Blogger....
Jika sebelumnya
Hendsoe Personal Blog pernah membahas tentang "
Cara Membuat Widget Recent Comments Keren" saat ini saya ingin share cara membuat
Widget Recent Comment Versi 2.0 yang tentunya lebih keren dari widget sebelumnya. Contohnya kira-kira seperti gambar dibawah ini, atau silahkan lihat live demonya di halaman blog demo saya.
Widget ini merupakan hasil karya dari Seorang Blogger Indonesia, yang kalau bisa dibilang merupakan guru saya secara otodidak juga dalam dunia blogging. Blogger yang saya maksud adalah
Mas Hendriyono. untuk artikel versi aslinya, anda bisa
lihat disini.
Salah satu kelebihan dari Widget Recent Comment Versi 2.0 ini adalah dari segi tampilan yang cukup menarik. Selain mampu menampilkan avatar komentator, ketika kita mengarahkan mouse pada avatar tersebut maka akan muncul tooltips cantik yang menampilkan nama komentator.
Langsung saja ke tutorialnya, silahkan di praktekkan jika anda memang berniat menanmbah Widget Recent Comment Versi 2.0 pada sidebar anda.
- Login ke Blogger Dengan Google Akun Anda
- Jika sudah di dashboard Pergi Ke Rancangan » Tambah Gadget » HTML/JavaScript
- Masukkan kode berikut dalam kolom HTML/JavaScript :
<style type="text/css"> #komentar {background:#3eb5da;margin:0;padding:0;border:1px solid #0971C8;} #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 #222222;} #komentar ul li div.ismen {color:#ffffff;text-shadow:-1px -1px 1px #0971C8;} #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: #212121;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 = 7; var jmlkarakter = 60; //]]></script> <script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script> <script type="text/javascript" src="http://hendsoe.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script> </ul></div>Simpan dan lihat hasilnya. Keterangan : - Ubahlah alamat blog (http://hendsoe.blogspot.com) sesuai dengan alamat blog anda.
- var jmlkomentar = 7; ubah nilai 7 untuk menentukan jumlah komentar yang akan ditampilkan.
- var jmlkarakter = 60; ubah nilai 60 untuk menentukan jumlah karakter yang akan ditampilkan (termasuk spasi).
Dan semoga saja hasil yang anda dapatkan sesuai dengan tutorial yang telah saya berikan diatas....Amin
Happy Blogging....
{ 0 komentar... read them below or add one }
Posting Komentar