• Posted by : Ariel Nicho Jun 3, 2013

    Cara membuat widget komentar terbaru keren, bergerak, sliding, slide, no marque, dinamic style, recent post slide.
    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 Sliding Recent Post With Dinamic Style".

    Recent post adalah sebuah fitur yang memang sudah disediakan oleh pihak Blogger, untuk mempermudah para pengunjung untuk mengetahui posting/artikel yang baru dipublikasi beberapa saat yang lalu. Widget ini diperlukan sekali, agar blog kita menjadi lebih full content, dan lebih SEO, karena widget ini bukan sekedar pernak-pernik yang hanya untuk dilihat-lihat, melainkan untuk membantu para visitor/pengunjung blog tersebut.

    Widget ini sangat bermutu sekali, karena ketika banyaknya posting kita yang diklik/dikunjungi oleh pengunjung yang sama, maka pihak Google sekaligus Alexa akan memberikan apresiasi berupa bertambahnya ke-SEO-an blog kita, karena pihak Google dan Alexa telah merubah pemikiran mereka yang tadinya widget tersebut hanya dikira sebagai pernak-pernik, namun ketika widget tersebut sangat membantu, maka pihak Google dan Alexa mengakui bahwa widget tersebut sangat bermanfaat sehingga blok kita semakin SEO, dan Alexa kita pun semakin menurun yang mungkin tadinya hanya ranking 2,110,042 lama kelamaan akan menurun hingga bisa mencapai dibawah 1 juta bahkan bisa lebih. Ini dikarenakan widget tersebut yang sangat membantu.


    Nah, jika sobat penasaran, berikut ulasannya untuk anda.

    Feature
    • Membantu pengunjung untuk mengetahui posting/artikel yang baru diterbitkan.
    • Membantu blog agar lebih SEO
    • Membantu agar Alexa blog semakin menurun.
    • Membantu agar jumlah visitor/penunjung bertambah
    • Widget Recent Post dengan Efek :
    1. Slide
    2. Round Image
    3. Hover Ready
    4. Dinamic Color and Style
    5. 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
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
    </script>
    <style media="screen" type="text/css">
    <!--
    #LVslideRC {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:343px;
    }
    #LVslideRC ul{
    width:300px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #LVslideRC li {
    width:286px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
    border:1px solid #ddd;
     -moz-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #LVslideRC li:hover {
    background:aqua;border-color:blue;border-radius:10px;
     -moz-transition: all 0.3s ease-in;
        -ms-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    text-shadow:0px 0px 10px black;
    }
    #LVslideRC li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #LVslideRC li a:hover {
    text-shadow:0px 0px 10px blue;
    }
    #LVslideRC li img {
    float:left;
    margin-right:7px;
    margin-top:-3px;
    background:#EFEFEF;
    border-top:2px solid black;border-bottom:2px solid black;border-left:2px solid red;border-right:2px solid red;
    border-radius:90px;
    -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;
    }
    #LVslideRC li img:hover{ -o-transform: scale(1) rotate(360deg); -moz-transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg);
    border-radius:1px;
    }
    .lavixtadate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }
    .lavixtacomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }
    -->
    </style>
    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://3.bp.blogspot.com/-L_fnDOHu6nk/Uaww6Aa_PtI/AAAAAAAABqI/VVtSQJ4QN8o/s320/No+Image.jpg";
    imgr[1] = "http://3.bp.blogspot.com/-L_fnDOHu6nk/Uaww6Aa_PtI/AAAAAAAABqI/VVtSQJ4QN8o/s320/No+Image.jpg";
    imgr[2] = "http://3.bp.blogspot.com/-L_fnDOHu6nk/Uaww6Aa_PtI/AAAAAAAABqI/VVtSQJ4QN8o/s320/No+Image.jpg";
    imgr[3] = "http://3.bp.blogspot.com/-L_fnDOHu6nk/Uaww6Aa_PtI/AAAAAAAABqI/VVtSQJ4QN8o/s320/No+Image.jpg";
    imgr[4] = "http://3.bp.blogspot.com/-L_fnDOHu6nk/Uaww6Aa_PtI/AAAAAAAABqI/VVtSQJ4QN8o/s320/No+Image.jpg";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 70;
    thumbheight = 70;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://lavixtastar.blogspot.com/";
    limitlavixta=4
    intervallavixta=4000
    </script>
    <div id="LVslideRC">
    <script src="https://lavixtastar-code.googlecode.com/files/LavixtaStar%20Sliding%20Recent%20Comments.js" type="text/javascript">
    </script></div>

    • Kode yang berwarna merah berguna untuk menentukan lebar widgetnya, jika sobat ingin mengubahnya silahkan disesuaikan menurut originalnya
    • numposts = 10 → untuk menentukan jumlah postingan/artikel yang akan ditampilkan, sobat bisa mengganti angka 10 dengan sesuka sobat. (Untuk hasil yang memuaskan, angka 10 tersebut tidak perlu diubah)
    • lavixtastar.blogspot.com → untuk menentukan blog/web yang akan ditampilkan postingan/artikel terbarunya, sobat bisa ganti 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.

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

    1. wah keren nih mas ..tapi terlalu rame kelihatan nya mas ..

      mhon kerjasamanya jga ya mas .. promosi social bookmark punya ku bukan bermaksud spam .. silahkan chechk di http://seplintir.com/ , terimakasih.

      ReplyDelete
    2. sudh saya pasang gan makasih infonya . . .

      ReplyDelete
    3. mantab gan tutorialnya dan template blog agan ane suka..
      btw agan tau cara pakai googlecode gak? ane minta tutorial tentang bagaimana cara pakai googlecode terbaru dong.. makasih gan,, balas di blog ane yah

      ReplyDelete
    4. Keren Widget nya.. Mantap deh, Makasih ilmunya

      ReplyDelete
    5. Kalau dengan gambar besar di awal judul dan kecil untuk yg selanjutnya ada gan? :-?

      Thk's..

      ReplyDelete
    6. makasih mas,saya ingin mencoba siapa tau cocok diterapkan di blog ane

      ReplyDelete
      Replies
      1. Oke mas, dengan senang hati saya persilahkan :D

        Delete
    7. makasih infonya mas

      www.kingsnews.net

      ReplyDelete
    8. makasih gan, biar ane coba y,

      jgn lpa untuk visit dan follow back.
      http://belajar-dasar-seo(dot)blogspot(dot)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