Menambahkan Image Slider dengan Jquery tanpa edit Template

Menambahkan Image Slider dengan Jquery tanpa edit Template, sanget simple dan praktis sekali, kagak usah pusing edit template

TutorialMixs - halo sobat blogger, kali ini aku mo share artikel terkait, pembuatan image slider dengan menggunakan JQuary, tanpa edit template agan yang bisa bikin mumet..
tampilannya yang oke, bisa di pertimbangkan untuk mempercantik blog agan pada..

oke langsung aja ke topik:

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

kalau bingung silahkan lakukan langkahnya sesuai tutorial image berikut:

4. setelah itu, copy script berikut di html/scriptnya:

Lihat DEMO nya disini

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://youtube-most-wanted.blogspot.com/2014/10/avengers-age-of-ultron-official-trailer.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbw6uNSKdzCfKD37MceqWIay7vGExv00smH3nIYaNSu7ql7vvYRsgLWDI6M9US-3BGVpKPfgj3Bh-4V-PDxQ2foo9Ircn8KxsfLEjQxQGqmiubXQzqJmPSIY9gHUJHazisBctLEfoCxjxJ/s1600/Avenger+500x309.jpg" title="Trailer Movie terbaru "avenger age of ultron"/> </a></li> <!----------------------------------------------> <li><a href="http://youtube-most-wanted.blogspot.com/2014/10/goyang-hot-asoy-geboy-sakitnya-tuh.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPCM-KSbosyQx4EtCthe7mj6SxO2CNZ9o8g6nCNV6JJJosOgMqCdCJzl0AUSOJ3c8YU17Mxbw2vrRg0vfKGO7av9wg3bwrhpd8MK_0wiSAf8N165JVJVc9op8t28efM398FwuUruiFSDiP/s1600/sakitnya+tuh+disini+500x309.jpg" title="Goyangan Hot Asoy Geboy artis Dadakan"/> </a></li> <!----------------------------------------------> <li><a href="http://youtube-most-wanted.blogspot.com/2014/09/trailer-film-sasha-grey-si-mantan.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghQcN00zCogrwOm__r086WQlYz6rpMoqECXBTvpmGMhGXnPzAKqKmsPsj-R7y-UTrQxV0Wbuk5xY4gmGlry6-dKUlDr7wlmQFFANZDaolQhOWZUMCzMkroHjh8-J7azKbwwaXCGMowVgeu/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://youtube-most-wanted.blogspot.com/2014/10/heboh-goyang-erotis-siswi-man-aceh.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglg9S9VMgO50jlEo42UKZalrmeP3Yn1YsNqZBjd-B-kEtrWD1OKXjQNNy_nL5KRBfv2osQIAhsewc0w3Bd3_jJJzRc0JCjzmr8hEsjaajQFytI3pj1HAWA8VHMGZbYVfh_zZlpQ-dD5LhW/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://youtube-most-wanted.blogspot.com/2014/10/goyang-hot-asoy-geboy-sakitnya-tuh.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv_FhXvIiIEvgDdiLeEovn70WYCkmHy_ze1GeglAoZjMRBNIz_bs5FAlEdM3y1dBiFMsM3HZe8oVdv7a9vzx3FOgPQEAkXztpgzp5n9u8e-SQyQeAHKW9JiUD5-IItJhqMxmh9B1I705TT/s1600/lipsing+anak+smu+550x309.jpg" title="Goyang Hot Asoy Geboy sakitnya tuh disini"/> </a></li> <!----------------------------------------------> <li><a href="http://youtube-most-wanted.blogspot.com/2014/10/sunny-leone-new-album-pink-lips-full.html"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtC768oUf6gOWJV4llK3Ac1hSN_8jB8MFmsrO3g1dLBu_My610YyFnJb444XixHTrqrUo6QlVfiuq9ecphh5Cc2SGj6jbeqaTv9fpPJjVy82SuJfcQe7YWOEh7RuNVa6OeXVxODGBHOFL9/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://youtube-most-wanted.blogspot.com/2014/10/avengers-age-of-ultron-official-trailer.html" title="New Box Office Avenger Age of Ultron"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCBcKyP6ZmD8CABAkJVf0QfQWS2grACaywGgVLmIilOeFnwXG4m1goqB6vtankiDxN2JflI7tjRLFU-F6JGQB6NrKCEXOJiF4wdppCE78ue7eS94_c86U4IJbpREYWPjpl9yBznbQPyqY/s1600/Avenger+85x48.jpg"/></a> <a href="http://youtube-most-wanted.blogspot.com/2014/10/goyang-hot-asoy-geboy-sakitnya-tuh.html" title="Goyang Asoy Geboy"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixkngDOeByGt0N1qjkRmjAWtMABeF7SCu2oigTWnQg5BKNW3HTFd6ATVwhmWls6Am6BUDI-IYA8wRjawPmU_Oifm6jW5Vql0Uv44_FlrIE1yo6pytO0ZEQh49n6QIkqXh62ar35iYs6UKb/s1600/sakitnya+tuh+disini+85x48.jpg"/></a> <a href="http://youtube-most-wanted.blogspot.com/2014/09/trailer-film-sasha-grey-si-mantan.html" title="Hot Movie Sahsa Grey mantan bintang video porno"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0i3Xxd9IFYk3AWnAt1k_ZDtQPZr5OUNASIagoRaBQASxwMva3A3RsIRnCraYqgIzq-e8X3LkgyyYzPFCnXI4oYIhSaTRyBHj15DD8zNywM8tJohyKSF1gU5yIoFFmU-wIAV2LS-5sJuVk/s1600/Sasha+grey+85x48.jpg"/></a> <a href="http://youtube-most-wanted.blogspot.com/2014/10/heboh-goyang-erotis-siswi-man-aceh.html" title="Goyang Erotis siswi MAN aceh utara"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjOri2Iuc589UJrTjrUYZiJZBKvLpN-DA4rFqIdabhMP2doFhB2CsuYR3V7I3UF6XshxEHHZ0HZWLbRcqY_wQQloL1j1nsIITWkQMqIFS9WLUrRM2aFM6mwFQhhZta8TpyBJU4SDSotRlC/s1600/Gadis+man+menggila+85x48.jpg"/></a> <a href="http://youtube-most-wanted.blogspot.com/2014/10/goyang-hot-asoy-geboy-sakitnya-tuh.html" title="Goyang Hot Asoy Geboy "sakitnya tuh disini""><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioc2W8cvs40XU166oyapr2crE6fN-Pxx6KpDjCYgTZkZqH_huKtQoD-srtvIObObxEBTopc9dZURdJr993h9B3hIu3Eg4t057rpSYyVBRbpBoT-fmURoyPGqMLhjGWDYjsFrKn921DD5x4/s1600/lipsing+anak+smu+85x48.jpg"/></a> <a href="http://youtube-most-wanted.blogspot.com/2014/10/sunny-leone-new-album-pink-lips-full.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjToKpxnKDk2Z0iLuNKy_ZH2gYnPjilQ_qcAOxkt6mIN0v7bp1cfMc0-VEVEB-po5WbnInrVqIx_1vue2OVZwkCHLecGivbO__VSXCi8oLVVxvEmNHFMHSpi1eDN9WKRIPwbftd_uuKei-5/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

Share this

Related Posts