Percantik Sidebar Komentar Versi 2.0

METAL - XP - Pada kesempatan kali ini metal -xp akan memberikan cara untuk mempercantik tampilan komentar sobat blogger ....Beauty Recent JSON Comments Sidebar 2.0 adalah penyempurnaan dari widget sidebar sebelumnya, yang telah mampu menampilkan avatar pengunjung. Selain mampu menampilkan avatar pengunjung, ketika kita mengarahkan mouse pada avatar maka akan muncul tooltips cantik yang menampilkan nama komentator. Sebenarnya metal -xp sudah menerapkan cara ini kemarin tapi karena bentuk dan ukurannya yang tidak pas dengan widget yang ada disamping maka cara ini tidak lagi diterapkan tapi sobat dapat mencobanya kok....Tooltips ini tidak menggunakan jQuery tapi murni menggunakan CSS Level 3, dengan animasi yang tidak kalah menariknya dengan jQuery.....kalau sobat ingin melihat DEMONYA langsung aja DISINI sob.....

Memasang Widget Komentar Dengan Avatar 

 Dibawah ini langkah-langkah pemasangan widget komentar dengan avatar pada sidebar. Blogger Tune-Up menyedia 2 jenis style dan pada langkah ini style yang digunakan merupakan style dengan warna yang telah diset. Sedangkan untuk style yang tanpa warna (menyesuaikan dengan template) disediakan pada bagian bawah langkah ini.
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Tambah Widget/Gadget baru dengan type "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian "Konten":

<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><br /> <div id='komentar'><ul><script type='text/javascript'> //<![CDATA[ var jmlkomentar = 20; 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://modification-blog.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script> </ul></div>

Perhatian :

• Ubahlah alamat blog (modification-blog.blogspot.com) sesuai dengan alamat blog anda.
• var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar yang akan ditampilkan.
• var jmlkarakter = 60; ubah nilai 60 untuk menentukan jumlah karakter yang akan ditampilkan (termasuk spasi).

Langkah 5
Simpan Widget dan preview blog anda...

Widget Komentar Dengan Avatar Tanpa Style

Jika kode di atas (lihat Langkah 4) akan menghasilkan tampilan yang memiliki style tersendiri, maka kode dibawah merupakan kode yang tanpa style. Ketika dipasangkan pada sidebar maka bentuk dan posisi akan mengikuti style default yang digunakan oleh blog anda. Untuk menggunakan kode dibawah ini, ganti saja kode pada Langkah 4 dari tag <style type="text/css"> sampai dengan tag </style>. Berikut kode CSS Widget Komentar Dengan Avatar Tanpa Style:

<style type="text/css"> #komentar { margin:0; padding:0; } #komentar ul{ margin:0; padding:0px; list-style: none; } #komentar ul li { height:46px; margin:0 !important; padding:4px 0 !important; display:block; clear:both; list-style:none; } #komentar ul li:last-child { border-bottom:none; } #komentar ul li:hover { background-color:#ccc; } #komentar a, #komentar a:link, #komentar a:visited { clear:both; color:#222; display:block; text-decoration:none; text-shadow:0 1px 0 #ccc; } #komentar .gamen { display: block; float: left; height: 42px; left: 4px; margin-right: 15px; position: relative; width: 42px; } #komentar .gamen>img { border: 2px solid #fefefe; -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px; -webkit-box-shadow:0 1px 2px #222; -moz-box-shadow:0 1px 2px #222; box-shadow:0 1px 2px #222; } #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 #ccc; 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 #ccc; } #komentar .gamen:hover>span{ opacity: 0.9; bottom: 55px; } #komentar .ismen { display: block; font-size: 1em; line-height: 1.2; padding: 2px 4px 2px 0; } </style>

Selamat Mencoba dan Semoga berhasil gan....

Sumber : Blogger Tune Up

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Metal Xp. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Metal Xp dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Selasa, 20 Maret 2012