- Home>
- Tips & Trick Blogger , Widget & Gadget >
- Cara Membuat Recent Comments Dengan Efek Bergerak
Posted by : ANS-Home
May 31, 2013
Cara Membuat Recent Comments Dengan Efek Marque/Bergerak
SELAMAT DATANG DI -LAVIXTA STAR~BLOG-
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 Recent Comment Keren - SEO".
Pada artikel/posting saya sebelumnya, saya sudah mengshare bagaimana Cara Membuat Recent Comment Keren - SEO. Diposting tersebut saya memberikan efek lingkaran pada avatar/gambar profil sipengomentar. Dan saya memberikan juga efek dengan javascript SEO - agar tidak menambah berat blog sobat.
Kali ini saya akan merubah efeknya dengan menambahkan efek marque, yang artinya widget Recent Commentsnya akan bergerak dari bawah ke atas. Widget ini akan terlihat lebih keren karena ada efek marque tersebut, widget ini bukan seperti widget yang sebelumnya yang hanya terdiam, tetapi widget ini akan bergerak terus.
Penasaran? Berikut ulasannya untuk anda.
Feature
►View Demo
Kali ini saya akan mengshare satu tips yang sangat membantu yaitu "Cara Membuat Recent Comment Keren - SEO".
Pada artikel/posting saya sebelumnya, saya sudah mengshare bagaimana Cara Membuat Recent Comment Keren - SEO. Diposting tersebut saya memberikan efek lingkaran pada avatar/gambar profil sipengomentar. Dan saya memberikan juga efek dengan javascript SEO - agar tidak menambah berat blog sobat.
Kali ini saya akan merubah efeknya dengan menambahkan efek marque, yang artinya widget Recent Commentsnya akan bergerak dari bawah ke atas. Widget ini akan terlihat lebih keren karena ada efek marque tersebut, widget ini bukan seperti widget yang sebelumnya yang hanya terdiam, tetapi widget ini akan bergerak terus.
Penasaran? Berikut ulasannya untuk anda.
Feature
- Membantu admin untuk meninjau komentar yang baru
- Membantu visitors untuk seberapa menariknya artikel tersebut sehingga ramai komentar
- Sangat user friendly ( tidak merepotkan siapapun dalam menggunakannya )
requirements
- Koneksi yang lancar
- Internet Browser yang memadai
- Berpengalaman dalam mengedit HTML atau sejenisnya
- Sediakan minuman segar dan cemilan ringan untuk merilekskan pikiran
screenshot & Demo
Screen Shot General Mode |
Screen Shot Hover Mode |
- 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'>
#LVkomen{background:aqua;box-shadow:0px 0px 30px 0px black, 0px 0px 20px 0px blue;color:black;text-shadow:0px 0px 0px 15px white;padding: 4px 4px 4px 4px;border-radius: 15px;}
#LVkomen:hover {background:black;box-shadow:0px 0px 30px 0px aqua, 0px 0px 20px 0px blue, 1px 1px 10px 1px black; color:white; text-shadow: 1px 1px 15px aqua, 2px 2px 10px white;}
.rcw-comments a {text-transform: capitalize;color:white; text-shadow:1px 0px 10px red, 0px 0px 10px violet;}
.rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;box-shadow: 0px 0px 5px 0px white;}
</style><div id="LVkomen">
<marquee align='left' direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'><script style=text/javascript src=http://lavixtastar-code.googlecode.com/files/lavixtastar-moving-recent-comments.js></script><script style=text/javascript >var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src=http://lavixtastar.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></marquee></div></script></marquee></div>
<script>
document.write("<div style=\"display:scroll;position:fixed;top:0;left:0;color:black;font-size:1px;\"><a href=\"http:\/\/lavixtastar.blogspot.com\">.<\/a><\/div>");
</script>
#LVkomen{background:aqua;box-shadow:0px 0px 30px 0px black, 0px 0px 20px 0px blue;color:black;text-shadow:0px 0px 0px 15px white;padding: 4px 4px 4px 4px;border-radius: 15px;}
#LVkomen:hover {background:black;box-shadow:0px 0px 30px 0px aqua, 0px 0px 20px 0px blue, 1px 1px 10px 1px black; color:white; text-shadow: 1px 1px 15px aqua, 2px 2px 10px white;}
.rcw-comments a {text-transform: capitalize;color:white; text-shadow:1px 0px 10px red, 0px 0px 10px violet;}
.rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;box-shadow: 0px 0px 5px 0px white;}
</style><div id="LVkomen">
<marquee align='left' direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'><script style=text/javascript src=http://lavixtastar-code.googlecode.com/files/lavixtastar-moving-recent-comments.js></script><script style=text/javascript >var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=100;</script>
<script src=http://lavixtastar.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></marquee></div></script></marquee></div>
<script>
document.write("<div style=\"display:scroll;position:fixed;top:0;left:0;color:black;font-size:1px;\"><a href=\"http:\/\/lavixtastar.blogspot.com\">.<\/a><\/div>");
</script>
height='300' → berfungsi untuk mengatur tinggi widgetnya, sobat bisa mengganti 300 dengan sesuka sobat.
width='100%' → berfungsi untuk mengatur lebar widgetnya, sobat bisa mengganti 100% dengan sesuka sobat.
var a_rc=10 → berfungsi untuk mengatur banyaknya komentar yang akan ditampilkan, sobat bisa mengganti 10 dengan sesuka sobat.
var o_rc=100 → berfungsi untuk mengatur banyaknya karakter yang akan ditampilkan, sobat bisa mengganti 100 dengan sesuka sobat.
Ganti lavixtastar.blogspot.com dengan URL/alamat blog/web sobat.
SEBAIKNYA KETERANGAN KE-1 - 4 TIDAK PERLU DIRUBAH, AGAR HASILNYA LEBIH MEMUASKAN.
- Jika sudah, klik "Simpan" untuk menyimpan gadget/widget yang telah dibuat.
- Coba sobat buka blog sobat, dan... TAADDAAA... selamat, widgetnya sudah terpasang diblog sobat!
Kerusakan template dan teknis lainnya tidak menjadi tanggung jawab Lavixta Star ~ Blog's.
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
*jangan lupa komentarnya ya gan.. :D
{ 5 comments... read them below or Comment }
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 Hide Emoticon
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 Hide Emoticon
Subscribe to:
Post Comments (Atom)
nice artikel gan ,, sangat membantu bwt blog saya ne .. :-q
ReplyDeletefollow balik ya gan my blog baru bwt gan ,, http://blogharun26.blogspot.com/
Asyik brow hasilnya, cuma mau tanya gimana cara ngilangin bayangan pada kotaknya.....
ReplyDeletesangat bermamfaat gan,,,
ReplyDeleteInfo yang bermanfaat gan...
ReplyDeleteThanks gan...
gimana caranya kalo komennya gak pake muter alias tetep diem + ngasih scroll gimana ya mas?
ReplyDeletebiar lebih ga ribet gitu ngeliat komennya :|