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
requirements
screenshot & Demo
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 :
- Slide
- Round Image
- Hover Ready
- Dinamic Color and Style
- 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 |
- 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 :
- 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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/s320/No+Image.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/s320/No+Image.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/s320/No+Image.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/s320/No+Image.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/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>
</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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/s320/No+Image.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/s320/No+Image.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/s320/No+Image.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/s320/No+Image.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_flig1SdNaHM20BEluoyAdRWstqlEJhPz73To27rXvVH5ehrktHc0LMlvKO0eftmAK0oBfCeKX4PeygxCq11XfFPYAqxfSzrrIeb-_u9U_OTd1VrhJqBhA4nyTlk9fuSFF03vJ3w3Ys/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
See you in my next pages..
Bye gan..!!
*jangan lupa komentarnya ya gan.. :D
{ 9 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
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
Subscribe to:
Post Comments (Atom)
wah keren nih mas ..tapi terlalu rame kelihatan nya mas ..
ReplyDeletemhon kerjasamanya jga ya mas .. promosi social bookmark punya ku bukan bermaksud spam .. silahkan chechk di http://seplintir.com/ , terimakasih.
sudh saya pasang gan makasih infonya . . .
ReplyDeletemantab gan tutorialnya dan template blog agan ane suka..
ReplyDeletebtw agan tau cara pakai googlecode gak? ane minta tutorial tentang bagaimana cara pakai googlecode terbaru dong.. makasih gan,, balas di blog ane yah
Keren Widget nya.. Mantap deh, Makasih ilmunya
ReplyDeleteKalau dengan gambar besar di awal judul dan kecil untuk yg selanjutnya ada gan? :-?
ReplyDeleteThk's..
makasih mas,saya ingin mencoba siapa tau cocok diterapkan di blog ane
ReplyDeleteOke mas, dengan senang hati saya persilahkan :D
Deletemakasih infonya mas
ReplyDeletewww.kingsnews.net
makasih gan, biar ane coba y,
ReplyDeletejgn lpa untuk visit dan follow back.
http://belajar-dasar-seo(dot)blogspot(dot)com