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

Cara Memasang Auto Post Slider Carousel di Blog

Cara Memasang Auto Post Slider Carousel di Blog Cara Memasang Auto Post Slider Carousel di Blog – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah satunya adalah Slider Carousel. Slider Carousel merupakan slider yang sudah tiga kali saya terapkan ke dalam template blog yang beberapa waktu lalu saya bagikan. Pada tutorial ini akan saya bahas penerapan Slider Carousel ke dalam template agar sewaktu siapa saja bagi yang ingin menggunakan slider untuk memodifikasi template blognya supaya lebih mudah. Slider Carousel merupakan slider bergaya horisontal yang menampilkan thumbnail dari setiap posting secara otomatis yang dapat kita set agar menampilkan posting terbaru atau bisa juga post by tag label. Agar lebih jelasnya, berikut tutorial Cara Memasang Auto Post Slider Carousel di Blog.

1. Pada Dashboard blog masuk ke Edit HTML template.
2. Kemudian taruh kode berikut ini diatas kode </head>
<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/>
3. Selanjutnya copy kode CSS berikut ini lalu taruh di atas kode ]]></b:skin>
#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}
#featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;}
.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}
.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}
.title-featured{text-align:center;position:relative;margin-top:-20px}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#111 url(https://lh5.googleusercontent.com/-fgJF4xfwZiI/Uo9o8L5lRLI/AAAAAAAAGnw/YItb5JVccVM/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{background-image:url(https://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}
4. Jika ingin membuat Slider Carousel tampil di bawah header seperti pada template Bluesforyou maka cari kode <div id='main-wrapper'> lalu taruh kode berikut ini tepat di atasnya.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>Loading...</span>
</div>
</div>
</b:if>
Jika ingin membuat Slider Carousel tampil di atas footer seperti pada template Bluesmulus maka cari kode <div id='footer-wrapper'> lalu taruh kode yang ada pada point 4 tepat di atasnya.

5. Langkah terakhir Simpan template.

Demikian akhir dari tutorial Cara Memasang Auto Post Slider Carousel di Blog, apabila ingin merubah tampilan slider maka ubah saja dan sesuaikan pada kode CSS.

Berlangganan artikel via email

71 Response to "Cara Memasang Auto Post Slider Carousel di Blog"

ditemplateku cocok gak master?

Balas

Mantap mas ,,mas andes kok jarang buat artikel + jarang blogwalking knapa mas

Balas

Selamat sore Mas Andes. wow Keren Mas-Andes artikelnya di blog
Saya keren kayanya kalau di pasang auto psts slider ini yah Mas?
ijin coba pasang Mas Terima kasih atas artikelnya salam sukses Mas :)

Balas

Ikut nyimak dan mencobar artikel kerenya Mas Andes
Kira-kira di template blog saya cocok gak yah Mas auto
Post slider ini..?

Balas

beuhhh ditungguin dari dulu akhirnya nongol lagi ni mas Andes, kamana wae mas :D

Balas

Lama gak posting langsung nyerang nih wkwkwk mantap mastah nih hehe
kemana aja euy ????

Balas

adminnya bingung jawab :D hehe

Balas

seperti biasa mas, banting tulang. ini baru mau mulai blogging lagi

Balas

adminnya ngucapin selamat mencoba aja yah kang :) hehe
sukses juga kang karrysta

Balas

ya nih mas udah ketinggalan start awal bulan :)

Balas

hehe pembukaan awal bulan nih kang..
adminnya keluyuran mengejar nafkah :D hoho

Balas

kayaknya slider ini sangat tepat buat blog portal ya mas.

Balas

Bikin berat blog g ya m,as kira2

Balas

jika ada js yang ditambahkan tentu akan ada nampak terhadap loading, apalagi slider ini menggunakan feed untuk membaca seluruh postingan. tentu ada nampak perubahan terhadap loading mas.

Balas

mungkin tepatnya begitu mbak :)

Balas

tuh udah ada yang bantu jawab.
desain web/blog tidak lepas dari coding mas, setiap menambahkan kode kedalam template beban untuk memuat pasti bertambah

Balas

Belum sempat ijin untuk memasang tamplate mas bro di blog saya
kali ini saya ingin minta ijin untuk memasang tamplate hasil tangan mas Andez ke blog saya, saya suka tamplatenya dan mas Andez bisa memeriksa di blog saya untuk memastikan bahwa tidak ada satu hal pun yang melanggar ketentuan
trimakasih mas Andez

Balas

kunjungan pagi :) keren tutorialnya Gan :) saya bookmark dulu....slidernya simple dan kelihatan cool !!

http://anaktimor-17.blogspot.com/

Balas

memang mas Andes ini penuh dngan stylist desainnya hehe

Balas

ijin coba sob, kl pas mantab saya pke deh hehehe

Balas

emanknya kerja apa mas

Balas

asal jangan banting setir aja mas Bro

Balas

Biasanya post slider ini dibawah header, karena akan lbih mudah dilihat oleh para pembacanya, mantab terus lanjutkan mas karyanya

Balas

jadi tambah kelihatan menarik ya mas kalau blog di pasang slider ini :)

Balas

wah udah lama nih mas Andes gak kelihatan, sekarang datang dengan artikel baru lagi nih, saya pengen nyoba auto post slidernya mas cuma belum sempet otak-atik lagi mas, kapan-kapan saya coba mas, makasih :)

Balas

saya juga sudah pakai slider mas, biar kayak situs berita beneran hehe

Balas

maksud keterangan nomor 5 itu apaan ya bg?

Balas

oh itu salah tulis mas, tuh udah saya perbaiki

Balas

ternyata master bisa salah tulis hehehehe..

Balas

haha saya mah jauh dari kategori master mbak, belum banyak menguasai dan masih perlu banyak belajar

Balas

hehe santai saja mas belom sempat berarti jangan dipaksakan :)

Balas

kalo masalah menarik apa tidak sih tergantung yang liat mbak :)

Balas

mayoritas begitu ya mas.. la wong umumnya begitu kok :D hohoho

Balas

Hohohoho, klu di footer kayaknya jarang ya mas

Balas

Emang udah berapa anak yang di nafkahi mas Andes ?????

Balas

masih buat menafkahi diri sendiri mas, kan nggak harus nunggu punya anak dulu. nikah aja belom :D hohoho..

Balas

saya test pasang di blog, kok loading melulu ya masbro :D

Balas

kodde div id='main-wrapper' & div id='footer-wrapper' saya cari gak ktemu.. gimana?

Balas

mas andes ko itunya loding saja..
http://www.ramabanten.info/
tapi mantep lah....

Balas

Mas Andes help me!
Blog saya kenapa ndak mau muncul slidershowny ya? saya pake template warmmag. Kalau dideskripsinya ada slideshownya, ppai pas dipake ndak bisa muncul.
minta pencerahannya mas andes, makasih banyak...

Balas

makasi gan..ane coba dulu.mampir ke blog jelek n ndeso ane gan
http://www.linksdonlot.blogspot.com

Balas

Kalo ditempat saya bagaimana master? Apakah bisa dibuat auto slide? Sementara ini saya cuma bisa manual slide T_T

www.etalasedunia.com

Balas

ane coba dulu gan ... trims udah bagi2 ilmunya

http://fx-berbagifile.blogspot.com/2014/07/musik-mp3.html

Balas

Saya akan coba kebetulan saya lagi mencari yang ini bosh..moga bisa atau mau cek disini hasilnya http://www.bisnis-forex.com tks

Balas

mas..ko punya ane kagak muncul ya..?
help me pliss

Balas

kok loading terus ga muncul muncul mas

Balas

bikin load page berat gak ya...tapi bisa dicoba dulu

Balas

oke mantappppppp....

Balas

mantapp banget boss...

http://barurumahku.blogspot.com/

Balas

Mas andes kalau mau buat slideshow di dalam postingan setiap di klik poto maka keterangan dari poto2 tersebut juga keluar bergantian seperti Blog portal gitu..gimana ya mas buatnya...

Balas

kunjungi juga http://ppbunm.blogspot.com

Balas

kunjungi juga http://ppbunm.blogspot.com

Balas

terimakasih atas kodenyan, semoga sukses slalu

Balas

share juga dong mas !! yg kyk di bluesmulus ;)

Balas

terimakasih infonya gan

intip blog saya gan era-wisata.blogspot.com

Balas

makasiiih...

baju4muslimah.blogspot.com

Balas

salam kenal .sambil menyimak posting anda
http://mas-andes.blogspot.com/2014/01/cara-memasang-auto-post-slider-carousel.html

Balas

kunjungi blog saya ya gan tempat-semua-berbagi.blogspot.com

Balas

aduh maaf cara gnti warna nya gmna g ccok sma blog sya mksi

Balas

aku ga nemu : main-wrapper ?

Balas

gak nemu gan, piye

Balas

kode div id main wrapper

Balas

struktur HTML masing2 template kan beda2, jadi sesuaikan aja #id yang di gunakan untuk membungkus konten misal menggunakan #content-wrapper atau #main-wrap, dll

Balas

kode masing2 template beda2 bisa di lihat dengan klik kanan Inspect Element lihat kode yang membungkus bagian konten atau bisa juga taruh di bawah #header-wrapper

Balas

Ttep gk nemu juga....

Balas

mas mau nanya. kalo mau ganti kecepatan gesernya per 1 gambar bisa gak yah ? dan punya ane ada 2 slot kosong udah coba utak utik tp gk bisa, biar semua slot ke isi gimana yah ? soalnya 2 slot yg kosong kalo di lihat rada ganjal..

makasih

Balas

bang klok nama templatenya yang ini apha yaaa... klok bisa tolong di share untuk kita yang masih pemula bang.... mohon di reaply.!!!! templatenya keren

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 "Cara Memasang Auto Post Slider Carousel di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode