Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Slider di Blog With CSS3

Slider di Blog With CSS3
Membuat Slider di Blog With CSS3 – sudah pernah saya bahas sebelumnya untuk membuat slider di blog dimana pada slider tersebut sekaligus sebagai widget recent post atau yang menampilkan artikel terbaru yang bisa di jumpai pada tutorial yang berjudul jQuery Widget Recent Post Automatic Slider. Seperti yang sudah diketahui, bahwa pada slider tersebut kita tidak perlu memasukkan gambar satu per satu karena tanpa melakukan hal itu slider sudah berjalan secara otomatis dengan menampilkan gambar yang terdapat pada artikel terbaru dari halaman posting. Namun berbeda dengan slider yang ini, bedanya pada slider ini kita harus terlebih dahulu memasukan gambar yang ingin ditampilkan kedalam slide secara manual. Hal serupa juga dapat anda jumpai pada jQuery Slider Futured Content Blog dimana pada slider tersebut terdapat thumbnail image yang terdapat dibawahnya, berbeda lagi dengan jQuery Headline Fitur Post Slider yang mempunyai ukuran lebih kecil dan ramping sehingga mungkin akan nampak lebih minimalis. Oke, sekarang tidak perlu menunggu waktu lebih lama lagi untuk berlanjut ke tutorial karena berikut adalah langkah-langkah sederhana Membuat Slider di Blog With CSS3.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).
#content-downslider {
width:100%;
height:265px;
margin:10px auto 0;
}
#downslider {
background:#000;
border:5px solid #52e052;
box-shadow:1px 1px 5px #52e052;
height:265px;
width:550px;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:265px;
}
#downslider ul {
margin:0;
padding:0;
position:relative;
}
#downslider li {
width:550px;
height:265px;
position:absolute;
top:-270px;
list-style:none;
}
#downslider li.firstanimation {
-moz-animation:cycle 25s linear infinite;  
-webkit-animation:cycle 25s linear infinite;      
}
#downslider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;      
}
#downslider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;      
}
#downslider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;      
}
#downslider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;      
}
#downslider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#downslider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#downslider li#first:hover .tooltip,
#downslider li#second:hover .tooltip,
#downslider li#third:hover .tooltip,
#downslider li#fourth:hover .tooltip,
#downslider li#fifth:hover .tooltip {
left:0px;
}
#downslider:hover li,
#downslider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.progress-bar {
position:relative;
top:-5px;
width:550px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}@-moz-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
}
3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Langkah selanjutnya copy kode dibawah ini.
<div id="content-downslider">
<div id="downslider">
<div id="mask">
<ul>
<li class="firstanimation" id="first">
<a href="http://mas-andes.blogspot.com/">
<img alt="" src="https://lh4.googleusercontent.com/-qllh7D9awTY/Uc5WfREE3jI/AAAAAAAAFMU/g2xCnz6cyR4/w680-h320-no/Faceblog+Evolutions+%25285%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Faceblog Evolutions</h1>
</div>
</li>
<li class="secondanimation" id="second">
<a href="http://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html">
<img alt="" src="https://lh4.googleusercontent.com/-tvu5hREpnTw/Uc5WeZHKjnI/AAAAAAAAFMM/pKTIoYYrCUc/w680-h320-no/Faceblog+Evolutions+%25283%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Thumbnail Gallery CSS3</h1>
</div>
</li>
<li class="thirdanimation" id="third">
<a href="http://mas-andes.blogspot.com/2013/06/membuat-gallery-photo-thumbnail-with.html">
<img alt="" src="https://lh3.googleusercontent.com/-tBzK3oI06oY/Uc5WdrGAxKI/AAAAAAAAFMA/wBvKjcJB28Y/w680-h320-no/Faceblog+Evolutions+%25284%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Thumbnail Photo jQuery</h1>
</div>
</li>
<li class="fourthanimation" id="fourth">
<a href="http://mas-andes.blogspot.com/2013/05/3-style-gallery-css3-photo-pinkbox-pada.html">
<img alt="" src="https://lh3.googleusercontent.com/-mmMeS9EWh9A/Uc5WdvPyBmI/AAAAAAAAFME/r_BpYrOEOUE/w680-h320-no/Faceblog+Evolutions+%25281%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Gallery CSS3 Pinkbox</h1>
</div>
</li>
<li class="fifthanimation" id="fifth">
<a href="http://mas-andes.blogspot.com/2013/05/10-gallery-css3-image-efek-hover-pada.html">
<img alt="" src="https://lh6.googleusercontent.com/-6KQTxjdk0Bg/Uc5WcNez4kI/AAAAAAAAFL0/mQsiEF16QYM/w680-h320-no/Faceblog+Evolutions+%25282%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Gallery CSS3 Image Hover</h1>
</div>
</li>
</ul></div>
<div class="progress-bar"></div>
</div>
</div>
Keterangan:
Untuk ukuran lebar dan tinggi silahkan sesuaikan dengan template blog anda.

5. Kemudian paste kode tersebut di widget, caranya klik Tata Letak >> HTML/Javascript lalu jika sudah klik simpan. Jika ingin dimasukan kedalam posting blog juga bisa, gunakan mode HTML bukan Compose lalu paste kode tersebut didalamnya.

DEMO:


  • faceblog evolutions

    Faceblog Evolutions

  • faceblog evolutions

    Thumbnail Gallery CSS3

  • faceblog evolutions

    Thumbnail Photo jQuery

  • faceblog evolutions

    Gallery CSS3 Pinkbox

  • faceblog evolutions

    Gallery CSS3 Image Hover

Berlangganan artikel via email

80 Response to "Membuat Slider di Blog With CSS3"

mantap slidernya nih, pengen pasang juga

Balas

Mau tanya nih mas Andes kalau pakai slider bikin berat apa nggak ya? dulu saya pernah pake slider tapi takut berat jadi saya buang slidernya...

Balas

kalau untuk memasang slide bar di bagian bawah atau di bagian footer bagaimana caranya Sob ???

Balas

kembali dengan gambar cewe cantik nih hehe
sip sobat tutornya mantap sakali

Balas

dia dapet model dari mana ya.. -__-

Balas

mau tanya nih.. :D
masih bingung tentang css
cara nyingkat biar gak pake masukin css ke template, tinggal di kasih style doang di dalam posting ya.

Balas

wah..keereen gan..ada loadingnya juga,kayak di ps2 gitu

Balas

BW Di hp jadi gak bisa lihat demonya mas. Haha..

Balas

dapet boleh bertapa...kali :)

Balas

beda sama sy dong mas Babol...kalo saya Bw pake ponsel... :)

Balas

wah keren nih mas...jd ga perlu repot2 ngerubah url posting sama gbrnya.. ya :)

otomatis....plus gratis...ngeditnya di saat gerimis...
harus optimis...biar hasilnya jd eksotis... :)

Balas

liat temen2 diatas kayak asik deh bisa bw pake hp/ponsel, aku nyoba pake kalkulator kok belum bisa2 yah kang.. gimana nih tipsnya

Balas

nahh.. tuh kan udah penter sekarang, pasti minumnya cerebrofit :)

Balas

hmm,, berat gaknya blog ini bisa jadi tolak ukurnya mas :)

Balas

darimana ya kira2 @_#

Balas

otomatis....plus gratis...ngeditnya di saat gerimis...
harus optimis...biar hasilnya jd eksotis..

luna maya pake kumis
pasti fantastis

Balas

htmlnya masukin widget footer mas

Balas

iya mungkin mas :D

Balas

selain selebrofit dia rajin berdo'a, biar Andes mau ngajarin CSS nya.

Balas

yang penting eksis, sambil mringis mringis.

Balas

holaaa mas andes,, nyimak lagi aja deh ya :D
btw mau nanya itu foto cwenya dapet dari mana ?
bening" bener . hihihihi

Balas

I want to thank you for a lovely morning visit. I wish you a nice day…http://fotisbazakas.blogspot.gr

Balas

waduh mantep mau masang belum paham , ... terutama photo ceweknya cakep bener....

Balas

saya klo mo nambah atau edit template, pertimbangan berat dan dampak pada SERP, kira2 gimana dengan slide ini mas...

Balas

wah pake css3 hebat juga, btw saya gemes liat demo nya :D

Balas

ini cocoknya widget diatas postingan atau dibawah laman menu.

Balas

makin maknyos aja nih mas :D

Balas

wah tambah mantap lagi ttorialnya gan, saya numpang nyimpan dulu nih, belum sempat dicoba, mungkin lain kali bisa dicona
terima kasih atas tutorialnya yg bermanfaat

Balas

MIz Tia memang sudah pinter, sayangnya gak bikin tutorialnya.. hehee..

Balas

wah mantep kang, maaf oot cara bikin tulisan author kyak akang gimana yah ?

Balas

saya mau bilang hebat buat admin blog ini.

Balas
avatar
Anonymous

mantap mas, apalagi gambar ceweknya. pengen kasih 4 jempol tapi 2 jempol lagi bingung mau pinjam sama siapa!!! hahaha

Balas

pada kotak author ada tulisan get this widget silahkan klik aja mas

Balas

selera masing2 mang, bisa dipertimbangkan dulu sebelum memasang :)

Balas

iya mang bisa dimasukin kulkas dulu, semoga bisa bermanfaat ya :)

Balas

survei membuktikan dari demo diatas mungkin bukan dari slidenya mas, tapi dari gambar wanitanya. dari sekian komentar bisa disimpulkan bahwa foto tersebut yang menjadi perhatian :)
untuk hubungan slide sama serp saya kurang tau akan hal ini mas, mungkin sahabat blogger ada yang mau menambahkan saran..

Balas

foto mana ah gak keliatan.
masih keliatan fotomu mbak, nampak bening dan jelas :D
hohoho

Balas

cakep mana sama yang dihati mang yono coba *hohoho

Balas

iya mang, katanya sih masih tunggu tanggal mainnya :D
hohoho
sekarang orangnya lagi otak_atik gambar mobil lhoo..

Balas

biar makin manis, liat tampangku ya miz

Balas

kayak baksonya mang ujang ya mas :)

Balas

kalo gemes boleh kok demonya di remes2 :D

Balas

keren sob. kebetulan ane belum paham tentang CSS. hehehe

Balas

lagi benerin rambutnya andes sticker.. biar idenya muncul :D

betewe kok saya pake html ada yg kurang, harusnya muncul 5 gambar loh tapi kok yang muncul cuma 4 sih, selalu kurang.. belum sempurna..
yg salah dimana ya .

Balas

modus area :D

ahaha.

Balas

kalo kamu pake kalkulator entar nulisnya jadi gini


*/

bL09w4Lk1n9 @nd35 R1zk1 Nu9r0h0.. ==> @L4y m0d30n .

Balas

semoga gak ngaruh :D

Balas

saya lewat lagi.. biar ikutan cantik kaya modelnya ^O^ .

Balas

hehehe bukan itu kang :D mksud nya pita yang di sebelah nama kyak punya akang itu loh :)

Balas

semoga gak ngefek kali...

Balas

wowww canggihnya.. :)

Balas

haha...saya BW make 3315 mas. Trnyata masih bisa.

Mas andes : kopinya udah basi mas, sudah waktunya gnti.

Balas

kalkulatornya di karetin dempet sama hp nya mas..hehe :)

Balas

susah emang kalo mirip artis

Balas

wah senjata nya mas andes keluar deh... :D
numpang bookmark dulu buat tutorial kelak... :)

Balas

taruh kode berikut ini diatas kode </body>

<script>
$(function() {
function highlight(){
$(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
.css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
.css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;http://i1327.photobucket.com/albums/u677/Andes_Rizky/author_zps379d7f3d.png&quot;) no-repeat top right&#39;)
.css(&#39;padding&#39;, &#39;10px&#39;);
}
$(document).bind(&#39;ready scroll click&#39;, highlight);
});
</script>

Balas

mas, liat foto di demo nya itu saya jadi inget waktu kemaren saya foto2, hahahaha... :D

Balas

sengaja kali gambarnya yang dimasukin cuma 4 *hahaha..
mau ngerjain nihyeee.

Balas

ajarin dong dari yang dari yang dasar hehe

Balas

makin manteb nih kang csssssnya ..waduh kepanjangan nulisnya css..pokoknya mantab dah

Balas

modus apaan sih?

Balas

kayanya yang ini gak ngaruh ke loading bro,biasa saja,kecuali jika lagi ada trauble,,,,bukankaH demikian Kang Andes RN,,,,,???

Balas

Ruly: apal wae ari kanu geulismah huahaha

Balas

memangnya ada perempuan bening??air kalee bening jiakakak

Balas

Hehe... mas Andes ada model baru nih :)

Balas

Saking semangatnya kali ya mas Virlyz hehe...

Balas

Wah bahaya donk mas kalau diremes2 hehe...

Balas

Sip mas Andes tutorialnya, sekalian belajar css3 nih hoho....

Balas

beneran deh , itu udah di kopi paste semua kodenya kan harusnya 5 gambar udah aku masukan 5 gambar tapi yg muncul 4, apa karena lebarnya kurang atau gimana.. cek disini ==>> http://goo.gl/RnnsD dan postingan yg pake gambar mobil transformers itu yg muncul cuma 4.

dan di sini =>> http://goo.gl/A6JB0 kenapa jadinya kayak gini coba, harusnya kan ada 4 baris, tapi ini cuma 2 baris. cek kesalahanya dimana


#bingung.. maap banyak tanya -__- .

Balas

yang tornado gambarnya bisa ditambah 2 lagi itu masih cukup, tapi ukuran width-nya ditambah/dihapus sekalian juga gapapa.
.ia-container {
width: 535px; -->> bisa ditambah/dihapus sekalian.

untuk yang kapal pesiar kalo mau tambah bayak lagi gambarnya, tinggal tambahkan saja kode:

<li>
<img alt="" class="mini" src="URL GAMBAR" height="100" width="100" />
<img alt="" class="pic" src="URL GAMBAR" />
</li>

sebelum kode </ul> (paling bawah).

yang saya masukin dipostingan emang segitu :) soalnya kirain udah tau buat nambah gambarnya biar banyak *hohoho

Balas

widthnya dihapus bisa menyesuaikan otomatis ya..

yang kapal pesiar itu udah ditambahkan tapi yang muncul tetep cuma 2 kolom doang, jadi yang salah dimana `,

Balas

gak ada yang salah, cuma kamu kurang aja masukin gambarnya. maksutnya biar ada 4 kolom, berarti kode diatas ditambah 8x. biar mudah nih di taruh atasnya </ul>

<li>
<img alt="" class="mini" src="http://3.bp.blogspot.com/-yiRKmNLjdMY/UbVZ7Hw2PpI/AAAAAAAAB6I/r6Xj3lsanSI/s1600/MT15.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://1.bp.blogspot.com/-oavzSwMb5lY/UbVZ8feCdxI/AAAAAAAAB6Q/MS31FLu0kio/s1600/MT16.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://1.bp.blogspot.com/-U8kDjRDcH0I/UbVZim9de3I/AAAAAAAAB4Y/_VBcb2JL_EY/s1600/MT20.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://4.bp.blogspot.com/-wJ6pzvzSg-A/UbVZnm2xXFI/AAAAAAAAB4o/U43FHI2_DDI/s1600/MT+3.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://2.bp.blogspot.com/-6SpAz7EuR9o/UbVZpPNgo1I/AAAAAAAAB4w/lYiLQEYlLx8/s1600/MT+4.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://3.bp.blogspot.com/-OpMSHnC-_c4/UbVZrkpYAFI/AAAAAAAAB44/E_dy7F0tA6E/s1600/MT+5.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://3.bp.blogspot.com/-IRXiSkwBfWM/UbVZtEdnSMI/AAAAAAAAB5A/Qu4019cbd18/s1600/MT+6.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://1.bp.blogspot.com/-AD07GjFjkhg/UbVZuIURdCI/AAAAAAAAB5I/tcrwccra7Iw/s1600/MT+7.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://2.bp.blogspot.com/-BzZVDDiGikE/UbVZwrnqZXI/AAAAAAAAB5Y/6gbHpwgasn4/s1600/MT+8.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://2.bp.blogspot.com/-1Yzuuepai2E/UbVZwEZlKsI/AAAAAAAAB5Q/POC_WsKEKQc/s1600/MT+9.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://4.bp.blogspot.com/-Rw_XDEHR8sM/UbVZzBD8z8I/AAAAAAAAB5g/n6ljCKbagDo/s1600/MT10.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://3.bp.blogspot.com/-ISPAEHRs4og/UbVZ0GFt3UI/AAAAAAAAB5o/RWTF9LCnizs/s1600/MT11.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://4.bp.blogspot.com/-xBfC__biLGA/UbVZ2FuQDyI/AAAAAAAAB5w/MzNTrWVUzsg/s1600/MT12.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://3.bp.blogspot.com/-AT-60pADyiI/UbVZ3njf5pI/AAAAAAAAB54/380RNfb6qOE/s1600/MT13.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://3.bp.blogspot.com/-WwvOuWgeaU0/UbVZ5eYsnhI/AAAAAAAAB6A/QgIl9egzJAI/s1600/MT14.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://3.bp.blogspot.com/-yiRKmNLjdMY/UbVZ7Hw2PpI/AAAAAAAAB6I/r6Xj3lsanSI/s1600/MT15.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://1.bp.blogspot.com/-oavzSwMb5lY/UbVZ8feCdxI/AAAAAAAAB6Q/MS31FLu0kio/s1600/MT16.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://4.bp.blogspot.com/-ma2FB8koeKc/UbVZ-GIdFwI/AAAAAAAAB6Y/_bnCRuSCEQI/s1600/MT17.jpg" />
</li>
<li>
<img alt="" class="mini" src="http://2.bp.blogspot.com/-RJTwy0-0oPQ/UbVaAKoe3kI/AAAAAAAAB6k/77KjaY0PApo/s1600/MT18.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://2.bp.blogspot.com/-bAxQ3iVNlS8/UbVZ__slKrI/AAAAAAAAB6g/JJXyzV4GCIg/s1600/MT19.jpg" />
</li>

Balas

artikel yang sangat bermanfaat thanks..

Balas

hahaha eeehh.. habis ngintip blog aku ya :D
keren!!, tapi males benerinnya.. biarin ajalah, entar kalo khilaf aku balik lagi buat komplen ke blog kamu :D

makasih udah bantu.

Balas

gan pas ane pasang background blog nya juga ikut gerak, gimana gan solusinya?
makasih

Balas

ijin coba ya mas... makasih atas tutorialnya

Balas

Coba dan langsung share mas

Balas

cara setting biar 2 gambar aja gimana ya? maksa banget 5 gambar pdhal udah aku utak atik mas..

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Slider di Blog With CSS3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode