Memasang Image slider dengan Jquery tanpa edit HTML
24 Mei 2016
Add Comment
tampilannya yang oke, bisa di pertimbangkan untuk mempercantik blog agan pada..
kalau bingung silahkan lakukan langkahnya sesuai tutorial image berikut:
1. langkah pertama silahkan masuk ke blogger agan dan ke template
2. klik tambahkan widget di sidebar template agan (terserah)
3. lalu klik HTML/JavaSriptnya ya
Berikut Scriptnya :
<style type="text/css">
.slider-box {
background: none repeat scroll 0 0 #FAFAFA;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #333333;
margin: 0 auto;
width: 675px;
overflow: hidden;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
}
#jslider-container {
border: 2px solid #FFFFFF;
max-width: 550px;
position: relative;
text-align: left;
z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://tutorialmixs.blogspot.co.id"></a>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
<ul>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6MClovQ7nKMcjwhjnUjnmGZJoerkcBHyND0UvGxlGNEV28MR5WAQepWqEdTIHmLUWWDW-WvsEoJ4BwaORpDNFEDvWAtO_WA_eoQ0bQUn7ZNBZ6JG7Nm01UHnFwEKlg7z3jBoawUCUkzvZ/s1600/Avenger+500x309.jpg" title="Trailer Movie terbaru "avenger age of ultron"/>
</a></li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYbYzB42ikxX46VWcwEzM3fUdlHbTY85H7fKoqEnoqnljdZIo7OWuqHF83ENZRYc0VPbBZA2jmqR_i4yLD6B3tDZf2W4qItYhB-hrVHDtNIn6fOX9OLdCRckL1voZqZ8326GdeWLW6ESJy/s1600/sakitnya+tuh+disini+500x309.jpg" title="Goyangan Hot Asoy Geboy artis Dadakan"/>
</a></li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZzMT5MBiU88CaOoe0wW0qt9BSU4MVMnhjGL_SdklfBw-9BiNYY4IylQeygaGRihuqEbTj3ps3krIupacRrVkAvKNJtC68uWUt0ZG5YSJVzt0Mw4-lAfUh1-NkOgTludIclaEIZQ9Emib/s1600/Sasha+grey+550x309.jpg" title="Sasha Grey bintang mantan bintang video porna yang merambah dunia akting. dalam debut film terbarunya Open Windows"/>
</a>Sasha Grey Mantan Bintang Video Porno</li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3YYKah0o-4GtUvwBxPhTb3RLReQfmhgEPfBrvi8l7sHTCz8I5mX2U-cTNfEaYk-myczEJg9HRKKv8_E4EhdQGvtkqN1fgAUzvTQ0wheLTRYohvAFxz3P-evLRFaqnsYBokfv4zAE6iXUt/s1600/Gadis+man+menggila+550x309.jpg" title="Hoboh goyang erotis siswi MAN Aceh Utara Beredar"/>
</a>Goyang erotis sis MAN aceh utara</li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xPQmXizAUGL7ZY3SR4cekvxKaEHyO-LoFBT1Nf4DLBBNWStbf-SU-0CdaY75FXDAeLDJUtVTnGCciQY1c9PvHGg6Skh81_RBjzCiAog0asnpEXV2BsL4bNh3mwSOeZ1OeyjDJX9Yg5EO/s1600/lipsing+anak+smu+550x309.jpg" title="Goyang Hot Asoy Geboy sakitnya tuh disini"/>
</a></li>
<!---------------------------------------------->
<li><a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfHZ8_apRyV4ml69QEzKB4ByVNRvkj6K9WoFQQnL6_TjkwqzD-cT2A8fVDuSpaNsYVWtrTnJwnjgMEqQjY14YyZEJCwUQ-ipstBVq4D6lb207g4EFTDI3bTxhdrO-GxXHpTRMJfsp8sYq/s1600/sunny+leone+550x309.jpg" title="Sunny Leone New Album Pink Lips Full Video HOT Song"/>
</a></li>
<!---------------------------------------------->
</ul>
</div>
<div class="jslider_thumbs">
<div>
<a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="New Box Office Avenger Age of Ultron"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-y2NrnyYsr_ArUj45ofCeWTt8JDwhR_PsCJgwS6GlCntmRdi1BTIMftHM-qy-5tHIyOYjY0nTrAtqva226KMT1HaBU62dhmr5D3u4p6BJcHl79IkxAriBMaGkzI8lkQCk-6Gcv5nvnBD/s1600/Avenger+85x48.jpg"/></a>
<a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="Goyang Asoy Geboy"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim3hGgvZqV5k0ph96JMXmiWLVaRB-S1hwF6loWhWVa5MkqrcFDwz2bbpIG5z4XAgjUppSXCP9KAIw-2cUEfmawe6GlEHTE3FDYXKRNWLoA1qaEbfEoNfdfGK0GEzI-tZwnBnESNUGYYu3t/s1600/sakitnya+tuh+disini+85x48.jpg"/></a>
<a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="Hot Movie Sahsa Grey mantan bintang video porno"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfKBO6xKYw_YMfBqOazINIvUJJg7Vlk9llEC6VPmQ_p_wbXTms8qgbZexDfxh4SVwTMt2mmtL_HjJknbRj0QvWLZokT0ZBKad-smSP_EexTefoCtnDApYmGTgZL73zKtNkCAzv0h81LIdI/s1600/Sasha+grey+85x48.jpg"/></a>
<a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="Goyang Erotis siswi MAN aceh utara"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRA8RntZv8BV6ZtFTWr2A3Yosg2SqAgfbyMIaYaBchGMnJMiyW0-gRze6DUPJSVVQ-pUcRKmlDQ6HqHi4SYAwx29ZusEbIgCroPjR4cqIUC6EkrhPyOn-o8FQY-Sa6bmYfBX1q_t1_T29F/s1600/Gadis+man+menggila+85x48.jpg"/></a>
<a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html" title="Goyang Hot Asoy Geboy "sakitnya tuh disini""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtO9cDWO3dQWApWMjgi5NJV9Jqc6KgTWrhtaDC3iKEglmck_rtCL6vVlrtzs2c_v56Jj_Ss1FHK0LVEehDfrAtX8859NNvTmgomsZlPjFiaSR67059R7uD43zmYG2k_1YN5EVMupzzACmN/s1600/lipsing+anak+smu+85x48.jpg"/></a>
<a href="http://blogsmanado.blogspot.co.id/2016/05/10-template-keren-responsive-blogger.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8InWOHLKsW4kGsIRaYG6HmiWYOkQrFok0TX8imF_SwG-l6zJ1BrRlheZMqX-WLNPD4kBflSoodoZY0IPRvbpHpRDqCRY3ATgZvgOUyyppkQJRN-NlaMETBrwu_K5v4O_gscO5T12NOpU/s1600/sunny+leone+85x48.jpg"/></a>
</div>
</div>
</div>
</div>
</div>
5. Selesai, dan simpan
note: untuk ukuran image yang besar, aku gunakan ukuran 500x309, sedangkan image yang kecil aku gunakn ukuran 85x48, kalau besar kecilnya emage yang aku gunakan tidak sesuai dengan ukuran agan, silahkan edit sizenya.
semoga dapat membantu dan bermanfaat....
0 Response to "Memasang Image slider dengan Jquery tanpa edit HTML"
Posting Komentar
Jangan melakukan SPAM... Aturan tidak ada link dan bicara kotor dalam komentar Sobat.