• Posted by : Ariel Nicho Jun 3, 2013

    Cara Membuat Widget Komentar Terbaru Dengan Avatar Berputar Keren Indah SEO terbaru Oke Punya

    SELAMAT DATANG DI -LAVIXTA STAR~BLOG-


    Hi sobat-sobat ku dimanapun anda berada.
    Berjumpa lagi di Lavixta Star Blog, blog sederhana saya.

    Kali ini saya akan mengshare satu tips yang sangat membantu yaitu 
    "Cara Membuat Widget Recent Comment Dengan Avatar Berputar/Spining".

    Kalau diposting saya sebelumnya saya sudah menjelaskan betapa pentingnya widget Recent Comment ini dengan versi Style 1, maka kali ini saya akan mengshare yang Style 2 nya.

    Penasaran? Berikut ulasannya untuk anda.

    Feature
    • Membantu pengunjung untuk mengetahui posting/artikel yang baru dikomentari.
    • Membantu blog agar lebih Full Content
    • Memungkinkan Alexa blog semakin menurun.
    • Memungkinkan jumlah visitor/penunjung bertambah
    • Widget Recent Comment ini dilengkapi Efek :
    1. Round Image
    2. Dinamic Color and Style
    3. Spining Image Hover, etc.
      requirements
      • Koneksi yang lancar
      • Internet Browser yang memadai
      • Berpengalaman dalam mengedit HTML/CSS atau sejenisnya
      • Sediakan minuman segar dan cemilan ringan untuk merilekskan pikiran
      screenshot & Demo

      Screen Shot General Mode
      Screen Shot Hover Mode

      View Demo


      • Loggin di blogger.com
      • Tentukan blog yang akan dimodifikasi
      • Dari Dasbor, pilih "Tata Letak"
      • Pastikan terlebih dahulu dimana widget akan ditampilkan.
      • Jika sudah, klik "Tambah Gadget"
      • Pilih "HTML/JavaScript"
      Lihat gambar untuk lebih jelas :
      Gambar 1 : Pilihan menu "Tata Letak" pada dasbor
      Gambar 2 : Pilihan "Tambah Gadget" pada halaman Tata Letak
      Gambar 3 : Pilihan "HTML/JavaScript" pada halaman Tambah Gadget,
      klik kotak biru tsb untuk menambah Widget/Gadget baru.
      • Copy dan letakkan kode dibawah ini pada kotak kontennya

       <style type="text/css">
      ul.lavixta_recent_comments{list-style:none;margin:0;padding:0;}
      .lavixta_recent_comments li{background:#eee;margin:5px 0 0 !important;padding:5px 0 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
      .lavixta_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; background:#ddd;}
      .lavixta_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;}
      .lavixta_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block;background:#ddd;}
      .lavixta_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;border-bottom:1px dotted grey;padding-bottom:8px;background:#ddd;}
      </style>
      <script type="text/javascript">
      //<![CDATA[
          // Recent Comments Settings
          var
      numComments  = 5,
      showAvatar  = true,
      avatarSize  = 50,
      characters  = 60,
      defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
      hideCredits = true;
      //]]>
      </script>
      <script type="text/javascript" src="https://lavixtastar-code.googlecode.com/files/LavixtaStar%20Spining%20Recent%20Comments.js"></script>
      <script type="text/javascript" src="http://ans-home.blogspot.com/feeds/comments/default?alt=json&callback=lavixta_recent_comments&max-results=9999"></script>

      • numComments  = 5 → untuk menentukan jumlah komentar yang ditampilkan, sobat bisa mengganti angka 5 dengan sesuka sobat. Untuk hal ini saya sarankan maximal 7 saja, agar widgetnya tidak terlalu tinggi/panjang.
      • avatarSize  = 50 → untuk menentukan ukuran gambar avatar, sobat bisa mengganti angka 50 dengan sesuka sobat. Untuk hasil yang sempurna, code ini tidak perlu diubah.
      • characters  = 60 → untuk menentukan jumlah karakter yang akan ditampilkan pada setiap komentar, sobat bisa mengubah angka 60 dengan sesuka sobat. Saya sarankan maximal 100.
      • ans-home.blogspot.com → untuk menentukan blog/web mana yang akan ditampilkan komentar terbarunya, sobat bisa mengganti ans-home.blogspot.com dengan URL/Alamat blog/web sobat.

      • Selanjutnya, klik "Simpan" untuk menyimpan widget/gadget yang sudah dibuat.
      • Coba, lihat blog sobat, jika widgetnya sudah muncul, berarti misi sudah selesai.. ^_^



      Kerusakan Template atau teknis lainnya tidak menjadi tanggung jawab Lavixta Star ~ Blog's. Silahkan berkomentar jika widgetnya berjalan dengan baik maupun jika widgetnya bermasalah.






      Sekian dulu pemberitahuan dari saya..
      See you in my next pages..
      Bye gan..!!


      *jangan lupa komentarnya ya gan.. :D

      Terima Kasih atas kunjungannya DI -ANS Home- God Blees U.

      { 8 comments... read them below or Comment }

      1. Dah nyoba tapi pic (foto komentator) gak muncul, kenapa yea?

        ReplyDelete
      2. thanks Gan infonya , izin pake yah :)

        ReplyDelete

      3. Terima kasih telah berbagi..Great topic and great post! Just want to say your article is as surprising.
        jangan lupa singgah ke blog saya yang menyediakan:
        Download Software psikotest, Download soal-soal CPNS gratis, Download ebook dan audio TOEFL gratis, Cara menyelesaikan soal warteg test dan, Contoh surat lamaran kerja-CV

        ReplyDelete
      4. widget ini buatan anda sendiri ya mas?

        ReplyDelete
        Replies
        1. sebetulnya script untuk recent comment itu sama semua 95%, disini saya hanya memberikan sedikit polesan style yang belum ada di buat orang lain.. :)

          Delete
      Peraturan yang harus diikuti ketika membuat komentar :
      1. Tidak Membuat Link Aktif
      2. Tidak SPAM
      3. Menggunakan Bahasa Yang Sopan
      4. Tidak Berhubungan Dengan SARA, Seks, dan Judi

      Selamat Berkomentar..
      Terima Kasih Atas Kerjasamanya.. ^_^

      Show Konversi KodeHide Konversi Kode Show Emoticon

    • Copyright © 2013 - Nisekoi - All Right Reserved

      ANS Home Powered by Blogger - Designed by Johanes Djogan