Cara Membuat Slider Carousel Otomatis Berdasarkan Label Kategori

Terlebih dahulu saya harus berterima kasih kepada Pemilik dari Desain Blog saya ini Johny Template yang telah memberi ilmu nya dari beberapa artikel beliau yang saya pelajari tentang cara memodifikasi Blog agar tampil lebih keren. Nah, Untuk sobat yang mau membuat blog sobat mempunyai beberapa slide dan fitur, sobat bisa langsung lari kesana deh, so pasti sobat bakalan punya blog yang keren dan enak dipandang mata. kalau sobat dan tertarik dari hasil karya Jhony sobat bisa uga kunjungi Blog tempat Kumpulan Tempaltenya Di MasTemplate. Disanalah saya belajar dan memperaktekkan hasil dari karya2 Beliau diantaranya yaitu tentang Cara Membuat Slider Carousel Otomatis Berdasarkan Label Kategori. Dan Artikel ini saya hadiahkan untuk seorang Sahabat Blog Saya Arifin Saputra.

Oce deh, kita kembali ke pembahasan Cara Membuat Slider Carousel Otomatis Berdasarkan Label Kategori. cara ini ebenarnya mudah lo bagi sobat yang sering mengotak atik bagian template sobat. untuk demonya click dibawah ini. dan kita lanjut ja terus ya kepembahasannya

DEMO

Login ke Blogger sobat
Terus jika sobat mempunyai beberapa blog, silahkan pilih blog mana yang mau kita kasih Slider tersebut.
Langsung Masuk ke Template => Edit HTML, jangan lupa centang pada kotak Expand Widget Tempalte.
Jangan lupa download dulu template sobat, untuk berjaga-jaga kalau tidak berfungsi sobat bisa mengembalikannya ke semula. tapi saya sudah tes lo.
Kalau sobat sudah silahkan sobat cari Kode ]]>

dan letakkan kode dibawah ini tepat diatas kode tersebut. untuk lebih mudah gunakan F3 untuk mencarinya.

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}

#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCC2TwlcN9tBget76Z6P0lnsITmg9sOWLC37Z7-U9qVSZitzklhKAVP9D1FlDCbgjWuD_-GZrJuITbTLRhT3HbLBRoH5ejHUuTkgX3XGBoWX8TGWAMrCdFOx3QudwgnZLIPy5r1L_GAV8/s1600/scroller-bg.png) repeat center}

#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXEfdPcGjYYsrRIYMyTVDNjhLTYOvGCChmdtp6Ea4HGIYzBiSLDKEvHglXLiFmzMVPdAkqAKwAHwmQPC06uhc9p878z2M043x6YIzRjYXy-_6anCZkiHOqNSRtjFQgg_QQeU864Jr2xC4/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}

#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji5yIkEDxseCJrjAqX80_S_nmtLz4hwRboa5GvegunuRXuUAX1zGBfwybczi_zIH95I2tAs_uwXWqo7o0dbgvYPZmSvr-OZAZl3VAibWREze9gqakcocrIXbqxrMSkaiRAOqJA5Me_RJk/s1600/prev.png) center}

#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3HA-Y65eSArAPhhD5jW8fzwPo878YWw7r1bu1kf91eHnSiLwiHENyOcsioX3qLUHNaZgm7A0yvaEhdgpCnNApALHOCa5EPC8_cUJEB-EygIqnmZQL6fnyzxObn4HBmQMMqghLlfQ3pzs/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}

#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh30xqErW8-1yNmnm1ZvmXffudLJC9vcAIXBQpHj-c8dyuc9x8DjZraFj8LoSY_geRYPxgYM3IjdSLAhv4fdTP-qJyYraxKv88mh_4cCXp7ERDPyyfUwVPgqbAIF-Rb71DSLN7VQUXazq0/s1600/next.png) center}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExNR1lPK1Gu0_dwB_OP_Cxeaq6gk36XAogd5oZCX9OyVJeWW4e8PPDJpJMVgHQv_j9APrD6JyKHwVECT5Z5ldqNn0zY-k2U51Fgdwwxms8YEAk292cs4X4PYOY6FWULaLkNY5a9D71t4/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}

#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}

#carousel ul li a.slider_title:hover{color:#cd1713}

#carousel a img{display:block;background:#fff;margin-top:0}

Note : pada kode yang berwarna merah diatas itu adalah lebar dan tinggi slider.

Masih di HTML ya sob... Cari Kode

dan masukkan kode dibawah ini diatas kode tersebut.

Note : Scrip yang berwarna orange diatas itu merupakan kode jQuery.min.js seri terbaru untuk digunakan di Slider tersebut. jika pada tempalte sobat kalau memang sudah ada jQuery.min.js tersebut ya tidak usah dipasang cukup hanya satu jQuery.min.js aja. dan kode yang berwarna biru tersebut 15 jumlah artikel yang ingin sobat slidekan serta News merupakan kategori yang sobat mau tampilkan.

Langkah selanjutnya yaitu kita harus memanggil jQuery yang kita pasang tadi, cari Kode
lalu letakkan kode dibawah ini tepat diatas kode tersebut.

Kode tersebut juga sobat bisa letakkan dibawah atau diatas navigasi menu sobat atau di footer.

terus langkah terakhir tinggal Save Tempalenya deh... moga berhasil.

Mudah bukan. . . jika sobat menerapkan dan menempelkan kode tempalate tersebut dengan benar pasti akan muncul di blog sobat.

Sumber Artikel : http://mitradecapri.blogspot.co.id/

Menu

Cara Membuat Slider Carousel Otomatis Berdasarkan Label Kategori