Sesuai janji saya mengenai jquery. Berikut saya ingin berbagi tips membuat rescent post (artikel terbaru) menggunakan efek slide jquery.
Berikut langkah-langkahnya.
1. Login ke blog anda
2. Klik Rancangan > Elemen Laman > Tambah Gadget > pilih HTML/JavaScript
3. Kemudian copas kode Javascript dan jquery dibawah ini
<script src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#rpslider {
overflow:hidden;
margin:5px auto;
padding:0px 0px;
height:400px;
font:10px Georgia,"Times New Roman", Times, serif;
}
#rpslider ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#rpslider li {
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background-color:#fff;
border:1px solid #FF0000;
}
#rpslider li a {
text-decoration:none;
color:#FF0000;
height:16px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#rpslider li .news-text {
display:block;
padding:5px;
text-align:justify;
color:#000000;
}
#rpslider li img {
float:left;
margin-right:5px;
background:#800080;
border:0;
width:50px;
height:50px;
}
.spydate{
overflow:hidden;
padding:2px 0px;
margin:1px 0px 0px 0px;
}
</style>
<script language="Javascript" type="text/javascript">//<![CDATA[
jmlrepos = 10;
tampilspy = 4;
durasispy = 5000;
alamatblog = "http://mariozoner.blogspot.com";
eusiartikel = true;
jmlkarpos = 100;
//]]></script>
<div id="rpslider">
<script src='https://sites.google.com/site/mariozoner/gb-mario/spysidemod.min.js' type='text/javascript'></script>
</div>
Sedikit keterangan mengenai kode berwarna merah di atas
- #rpsidebarspy {
height:400px; -> tinggi widget
font:10px Georgia,"Times New Roman", Times, serif; -> ukuran dan jenis font
}
- #rpsidebarspy ul{
width:100%; } -> lebar widget. 100% artinya lebar widget mengikuti lebar halaman. soba bisa menggantinya sesuai lebar halman blog sobat
- #rpsidebarspy li {
height:50px; -> tinggi item widget
background-color:#fff; -> warna background
border:1px solid #FF0000; -> warnar border
}
- #rpsidebarspy li .news-text {
color:#000000; - > warna text konten
}
- #rpsidebarspy li img {
float:left; -> letak gambar konten. apabila ingin dikanan ganti menjadi right
width:50px; -> lebar foto yg tampil
height:50px; -> tinggi foto yg tampil
}
tampilspy = 4; -> Jumlah artikel yang ditampilkan
durasispy = 5000; -> kecepatan pergantian slide
alamatblog = "http://mariozoner.blogspot.com"; -> ganti dengan url blog sobat
4. Klik simpan dan lihat hasilnya.
Semoga bermanfaat.
Berikut langkah-langkahnya.
1. Login ke blog anda
2. Klik Rancangan > Elemen Laman > Tambah Gadget > pilih HTML/JavaScript
3. Kemudian copas kode Javascript dan jquery dibawah ini
<script src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#rpslider {
overflow:hidden;
margin:5px auto;
padding:0px 0px;
height:400px;
font:10px Georgia,"Times New Roman", Times, serif;
}
#rpslider ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#rpslider li {
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background-color:#fff;
border:1px solid #FF0000;
}
#rpslider li a {
text-decoration:none;
color:#FF0000;
height:16px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#rpslider li .news-text {
display:block;
padding:5px;
text-align:justify;
color:#000000;
}
#rpslider li img {
float:left;
margin-right:5px;
background:#800080;
border:0;
width:50px;
height:50px;
}
.spydate{
overflow:hidden;
padding:2px 0px;
margin:1px 0px 0px 0px;
}
</style>
<script language="Javascript" type="text/javascript">//<![CDATA[
jmlrepos = 10;
tampilspy = 4;
durasispy = 5000;
alamatblog = "http://mariozoner.blogspot.com";
eusiartikel = true;
jmlkarpos = 100;
//]]></script>
<div id="rpslider">
<script src='https://sites.google.com/site/mariozoner/gb-mario/spysidemod.min.js' type='text/javascript'></script>
</div>
Sedikit keterangan mengenai kode berwarna merah di atas
- #rpsidebarspy {
height:400px; -> tinggi widget
font:10px Georgia,"Times New Roman", Times, serif; -> ukuran dan jenis font
}
- #rpsidebarspy ul{
width:100%; } -> lebar widget. 100% artinya lebar widget mengikuti lebar halaman. soba bisa menggantinya sesuai lebar halman blog sobat
- #rpsidebarspy li {
height:50px; -> tinggi item widget
background-color:#fff; -> warna background
border:1px solid #FF0000; -> warnar border
}
- #rpsidebarspy li .news-text {
color:#000000; - > warna text konten
}
- #rpsidebarspy li img {
float:left; -> letak gambar konten. apabila ingin dikanan ganti menjadi right
width:50px; -> lebar foto yg tampil
height:50px; -> tinggi foto yg tampil
}
tampilspy = 4; -> Jumlah artikel yang ditampilkan
durasispy = 5000; -> kecepatan pergantian slide
alamatblog = "http://mariozoner.blogspot.com"; -> ganti dengan url blog sobat
4. Klik simpan dan lihat hasilnya.
Semoga bermanfaat.
wew...
ReplyDeletepatut dicoba nich, mantap gan. . .
owh ya, fol sukses, folback y. . .
mainpedia.blogspot.com
@Mainpedia Admin'z : thanks. siip, segera ke tkp :)
ReplyDelete