Breaking News
Loading...
Tuesday, 21 April 2015

Cara Gampang bikin Recent Comment Putar

Majalah Blog kali ini akan membagikan tips-trik tentang Cara Gampang bikin Recent Comment Putar yang agak berbeda dibandingkan dengan widget recent comment yang lainnya. Widget Recent Comment yang akan kita buat kali ini memiliki keunikan tersendiri yaitu avatar komentatornya dapat berputar 360 derajat dan kemudian berubah bentuk menjadi bujur sangkar. Untuk demonya silahkan menuju ke widget comment di samping. Screen-shootnya seperti terlihat di bawah ini.

Majalah Blog Recent Comment Putar

Dalam screen-shoot di atas jelas terlihat bahwa avatar komentator ke dua memiliki posisi yang berbeda dengan avatar komentator-komentator yang lainnya. Hal inilah yang menunjukkan bahwa avatar komentator akan otomatis berputar bilamana didekati oleh mouse komputer kita. Setelah berputar 360 derajat, maka berikutnya avatar tersebut akan berhenti dan berubah bentuk menjadi bujur-sangkar.

Widget Recent Comment ini pada dasarnya akan menginformasikan kepada pengunjung blog tentang siapa-siapa yang telah bersedia meninggalkan komentarnya dalam satu atau beberapa artikel blog. Selanjutnya, bilamana kita klik avatar komentator tersebut, maka kita akan langsung di bawa ke halaman artikel yang dikomentari tersebut. Widget Recent Comment ini setidaknya baik untuk blog karena memberikan kesan keterbukaan atau keramahan sebuah blog (dalam hal ini admin blog). Dengan menampilkan Widget Recent Comment pada halaman homepage, diharapkan akan mampu merangsang minat pengunjung untuk ikut berpartisipasi dengan kesediaannya meninggalkan komentarnya pada sebuah atau beberapa halaman artikel yang dirasanya cukup menarik untuk diberikan komentar.

Bagaimanakah cara membuatnya ? Cara membuatnya cukup mudah, tinggal anda mengcopy script di bawah ini, kemudian melakukan sedikit penyesuaian dengan kondisi blog anda, dan selesai sudah. Langkahnya adalah : pertama masuk ke blog anda, kemudian pilih Tata Letak, pilih Tambahkan Gadget, terakhir pilih menu HTML/JavaScript, dan jendela munculannya seperti gambar di bawah ini.

Majalah Blog Jendela HTML

Langkah selanjutnya adalah, copykan script di bawah ini pada jendela HTML/JavaScript tersebut.

S c r i p t ? :

<style type="text/css">
ul.mojoblog_recent_comments{list-style:none;margin:0;padding:0;}
.mojoblog_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.mojoblog_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;
border-radius:999px;
-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;}
.mojoblog_recent_comments li .avatarImage:hover{
-o-transform: scale(1) rotate(360deg); -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg);
border-radius:1px;
}
.mojoblog_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.mojoblog_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 7,
showAvatar = true,
avatarSize = 40,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/8512057551/mojoblogspin.js"></script>
<script type="text/javascript" src="http://majalahblog67.blogspot.com/feeds/comments/default?alt=json&callback=mojoblog_recent_comments&max-results=9999"></script>


Langkah berikutnya adalah : Ganti url yang dicetak tebal dengan url halaman blog anda, simpan template anda, dan lihat hasilnya. Kode numComments  = 7, menunjukkan jumlah komentar yang akan anda tampilkan, anda dapat mengubahnya sesuai keinginan anda.

Akhir kata, selamat mencoba, semoga berhasil, dan bilamana telah berhasil, jangan lupa untuk meninggalkan komentar anda.


Next
This is the most recent post.
Older Post

0 komentar:

Post a Comment

==> Berkomentarlah secara santun dan tidak OOT
==> Jangan meletakkan link aktif ataupun spam
==> Komentar jangan mengandung unsur SARA atau pornografi
==> Jangan promosi produk atau menggunakan modus Anonim

 
Toggle Footer