• 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".

    Widget Recent Comment atau Komentar Terbaru(Ind) adalah salah satu widget yang dibutuhkan para admin-admin blog untuk mengetahui siapa saja yang baru berkomentar diblognya beberapa saat yang lalu. Widget ini diakui sebagai widget pembangun Blog User Friendly, yang artinya blog yang menggunakan widget ini akan lebih mudah digunakan karena widget ini menjadikan blog kita menuju Full Content.
    Dengan adanya widget Recent Comment/Komentar Terbaru ini maka lebih memudahkan kita untuk melihat-lihat artikel/posting mana yang baru saja dikomentari oleh para visitors/pengunjung blog tersebut.
    Widget ini sudah saya modifikasi sedemikian rupa, sehingga widget ini tidak mencolok dengan kata lain sangat elegant dan dinamis.

    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

      Code
      <style type="text/css">
      ul.lavixta_recent_comments{list-style:none;margin:0;padding:0;}
      .lavixta_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;}
      .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;}
      .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:0px;position:relative;overflow:hidden;display:block;}
      .lavixta_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  = 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://lavixtastar.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.
      • lavixtastar.blogspot.com → untuk menentukan blog/web mana yang akan ditampilkan komentar terbarunya, sobat bisa mengganti lavixtastar.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 -LAVIXTA STAR~BLOG- God Blees U.

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

      1. haiiii, makasih yah, berkat tutorial ini akhirnya recent commentku bisa update, alias bisa muncul lagi. dulu ada tp akhir-akhir ini nggak muncul, hehe..

        happy blogging, salam kenal :)

        ReplyDelete
        Replies
        1. iya, terima kasih kembali..
          salam kenal juga :)

          Delete
      2. Desainnya simple dan dinamis gan..thank's codenya

        ReplyDelete
      3. KEREN BANGET BRO!!! THANKS YA! 8-)

        JOS998.blogspot.com

        ReplyDelete
      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