Cari Artikel Blog Ini

Total Tayangan Halaman

PASANG RECENT COMMENT VERSI 4

Tampilan recent coment (komentar terbaru) ini punya kelebihan dibanding recent coment sebelumnya. Dilihat dari setiap point yang tampil pada kode Css, tips ini bersumber dari sakahayang.com yang juga merupakan situs yang menampilkan post tentang tutorial.
Kelebihan yang ada pada recent comment ini  yaitu pada tampilan avatar yang bentuknya bulat, tulisan komentar yang dapat kita atur serta kelebihan-kelebihan lainya. Anda akan melihat kelebiha itu setelah dipasang pada blog anda.
Selain menggunakan kode Css, recent comment ini juga dibantu dengan sebuah file javascript.
Bagi anda yang ingin menggunakan file javascript milik sendiri agar proses loadingnya tidak tergantung dari file javascript milik EPG Studio. Anda dapat download javascript-nya disini.
Sebagai contoh, coba anda perhatikan gambar dibawah ini.


Sekarang kita langsung ke tips cara memasang  recent commet versi 4.

LANGKAH PERTAMA
  1. Masuk ke Dasbor blog anda.
  2. Pilih menu template pada blog yang akan dipasang recent coment.
  3. Download template blog anda terlebih dulu, jika takut gagal dengan cara klik Cadangkan/Pulihkan yang berada di bagian atas kanan.
  4. Setelah proses download selesai, klik Edit Template.
  5. Cari kode ]]></b:skin> pada template blog anda.
  6. Gunakan CTRL+F untuk mempercepat pencarian.
  7. Copy kode Css dibawah ini, kemudian paste tepat dibawah kode  ]]></b:skin>
    <style type='text/css'>
    ul.sakahayang_recent_comments{
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
    list-style-type:none
    }
    .sakahayang_recent_comments li{
    width: auto;
    list-style-type:none;
    float:none;
    height:auto;
    overflow:hidden;
    background:transparent;
    border:1px dotted #1d1d1d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    margin:0 0 5px;
    padding:5px;
    }
    .sakahayang_recent_comments li .avatarImage{
       padding:3px;
       float:left;margin:0 6px 0 0;
       position:relative;overflow:hidden}
     .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-

    radius:100px}
     .sakahayang_recent_comments li img{
       padding:0;
       position:relative;
       overflow:hidden;display:block}

     .sakahayang_recent_comments li span{
       margin-top:4px;
       color:orange;
       display:block;
       font-size:12px;
       font-style:italic;
       line-height:1.4}

    </style>
    1. Kode border:1px dotted #1d1d1d;  : merupakan kode garis yang tampil, anda dapat mengganti ukuran, style dan warna border sesuai keinginan.
    2. Kode color:orange;  : merupakan warna tulisan yang tampil, anda dapat mengganti dengan warna kesukaan anda.
    3. Kode font-size:12px;  : merupakan ukuran huruf yang tampil. Anda dapat mengganti ukuran huruf sesuai keinginan.
    4. Kode font-style:italic;  : menunjukan tulisan yang tampil miring, kode itu dapat anda buang atau diganti dengan bold atau apa saja yang penting kodenya untuk mengatur tampilan huruf.
  8. Setelah selesai pengeditan kode Css, klik tombol Simpan Template.
LANGKAH KEDUA
  1. Masuk menu Tata Letak
  2. Klik tambah gadget pada bagian dimana anda akan meletakan recent comment.
  3. Pilih HTML/JavaScript.
  4. Copy script dibawah ini kemudian paste pada kolom yang tersedia.
    <script type="text/javascript">
    //<![CDATA[
        // Recent Comments Settings
        var
     numComments  =3,
     showAvatar  = true,
     avatarSize  = 30,
     roundAvatar = true,
     characters  = 107,
     defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
     hideCredits = true;
     maxfeeds=50;
    //]]>
    </script>

    <script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/java-script-admin/rcwaupack1.js.txt"></script>

    <script type="text/javascript" src="http://ades-sambas.blogspot.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&max-results=10">

    </script>
    1. Kode numComments  =3,  : merupakan jumlah tampilan komentar terbaru. Dapat anda ganti dengan jumlah yang ingin ditampilkan.
    2. Kode characters  = 107,  : merupakan jumlah kata yang tampil pada setiap komentar . Dapat anda ganti sesuai keinginan.
    3. Kode https://sites.google.com/site/epgstudiosite/java-script-admin/rcwaupack1.js.txt  : merupakan file javascript simpanan EPG Studio. Dapat anda ganti dengan file javascript simpanan anda.
    4. Ganti url blog ini http://ades-sambas.blogspot.com   dengan url blog anda
    5. Setelah selesai pengeditan, klik tombol Simpan.
    6. Lihat Komentar terbaru pada blog anda.
Selamat mencoba, semoga bermafaat...

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
4 Comments

4 komentar :

Suwardi Unggit mengatakan...

keren kawan, Caranya dibuat mudah yach dengan CSS udah sejengkal panjangnya dengan perpaduan javascript hingga bisa membuat lingkaran yang memukau, ijin ctrl+D dulu kawan, sekalian amankan posisi pertamaaaaaax

mira mengatakan...

salam

wah senang bisa ketemu blog ini, makasih atas tutorialnya nya..

Eko Budis Santoso mengatakan...

Wih manteb nih! :D

Komentar balik ya sob :D

www.ekooe.blogspot.com

NABILA-SAIRA-SHOP mengatakan...

MAAF NUMPANG PROMO HARGA SPESIAL TERBARU 2015 BERBAGAI MACAN MEREK HENDPHONE
SAMSUNG>BLACKBERRYNOKIA>ASUS>LENOVO>ADVAN>SMARTFREN>OPPO>ACER>TOSHIBA>NIKON>DELL>CANON>XIOMI>DLL TERPERCAYA>100% BEBAS RESIKO BEBAS PENIPUAN (Info Pemesanan)CALL/SMS:085757299675>PIN BBM: (24C4A399)
WEB>WWW.NABILA-SAIRA-SHOP.BLOGSPOT.COM

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!