Cara Pasang Slide Show di Blog
Cara Membuat dan Pasang Slide Show di Blog Website Adalah cukup keren jika blog terdapat slide show. Selain blog tersebut terlihat profesional, juga dapat memberikan kesan tersendiri bagi pemirsa blog. Meski banyak blogger yang kurang tertarik memasang widget ini di blog nya, tapi tidak sedikit juga yang suka dengan adanya slide show. Sebenarnya ada juga template yang didesain terdapat fitur slide show, tapi kebanyakan tidak ada. Oleh karena itu, mau tidak mau apabila kita suka dan tertarik dengan widget yang satu ini, kita harus memasang nya sendiri.
Caranya bagaimana? Jangan kawatir, caranya sangatlah mudah. Anda tidak perlu edit template dan atau harus daftar pada situs tertentu, melainkan anda harus pasang kode HTML/JavaScript pada widget blogspot anda.
Widget slide show yang terpasang di blog cukup bermanfaat untuk anda. Selain bermanfaat seperti yang sudah saya jelaskan diatas, manfaat yang lain adalah anda bisa menampilkan posting populer pada slide show ini. Karena slide show ini selain dilengkapi dengan gambar, ternyata di dalam nya ada link posting nya juga lho. Sehingga, apabila salah satu gambar pada slide show di klik, maka akan menuju posting tertentu.
Widget slide show yang terpasang di blog cukup bermanfaat untuk anda. Selain bermanfaat seperti yang sudah saya jelaskan diatas, manfaat yang lain adalah anda bisa menampilkan posting populer pada slide show ini. Karena slide show ini selain dilengkapi dengan gambar, ternyata di dalam nya ada link posting nya juga lho. Sehingga, apabila salah satu gambar pada slide show di klik, maka akan menuju posting tertentu.
 |
| Live Demo http://demo.helperblogger.com/js-image-slider.html |
Beberapa waktu yang lalu saya sudah menjelaskan tentang Cara Memasang Jam Cantik di Blog. Nah, sebagai salah satu cara untuk mendesain blog agar lebih interaktif dan menarik, dalam kesempatan kali ini saya akan memberikan tutorial tentang cara memasukkan dan menambahkan slide show di blog. Silahkan perhatikan baik-baik ya agar tidak keliru dalam mempraktekkannya.
Cara Membuat dan Pasang Slide Show di Blog Website
1. Silahkan log in ke Blogger
2. Silahkan masuk ke Dashboard > pilih menu Tata Letak > klik Tambah Gadget/Widget > pilih widget HTML/JavaScript > silahkan copy paste kode script berikut ini > klik Save. Lihat hasilnya.
<style type="text/css"> /* JavaScript Image Slider By http://www.helperblogger.com/ */ #mcis { display: none; } #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000; } #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOlgKBL6qREQVmkT6jRbI_pTj_yxI97FHUgR0TC2-WZj6m0sMKF7HyWL130vX_2dM040H8J77I_qaLPbTMtT6iigMm98_LzR8Y75DfNuq9M5da5uwEsa-YJpU0ZGUZCwNXUdwt0PUNgzE/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7; } #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZDj2ZR320TxjR1iUmSpiIdNJwu1A4I1-vCPdDwozcD4gCWg7psKjTKn5nz-cmNFWy96J7RaL-c5zZe46frfFe6eD7nVF8RYV0Po0iOHQ9BiHr8VTDjzrgfP00jhBh7ljgGTybcusi4c/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; } div.mc-caption-bg { background-color: black; } div.mc-caption { font: bold 14px/20px Arial; color: #EEE; z-index: 4; padding: 10px 0; text-align: center; } div.mc-caption a { color: #FB0; } div.mc-caption a:hover { color: #DA0; } div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; } div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPowsQDeMI2YNPTRqvLnEQlrE2KkAGpnuH_jfS82Plabubru1nYkG6lcblBx8Oy7cuxiRnvIh9EAS2vjvG9rwnqZMvZmeFLplBCuxP_UEDv__vKCyalZfRHmKAZbpQJhXHCBkzJpSNt4M/s1600/helperblogger.com-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative; } div.navBulletsWrapper div.active { background-position: 0 -11px; } #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style> <script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="Image Slider By helperblogger.com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a> </div>
</div>
Keterangan:
Kode yang perlu anda ubah adalah:
<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="Image Slider By helperblogger.com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a> </div></div>
Kode warna merah ganti dengan url postingan anda
Kode warna biru ganti dengan url gambar yang sudah anda upload di internet
Kode warna hijau ganti dengan judul postingan anda
Berikut adalah screenshoot widget Slide Show yang sudah pernah saya pasang di blog saya. Cukup cantik kan? hehehe :D
Bagaimana? apakah widget ini sudah berhasil anda pasang di blog? Jika sudah, saya ucapkan Selamat!! Oh iya, jangan lupa ya baca artikel saya terdahulu tentang Cara Memasang Kalender di Blog. Demikian informasi yang dapat saya sampaikan untuk anda tentang Cara Membuat dan Pasang Slide Show di Blog Website. Semoga dapat bermanfaat.
Categories:
Blogging
70 komentar:
Menarik mbak, saya dari dulu pengen nerapin cara ini. tapi belum kesampaian.. nanti saya coba di blog eksperimen saya :D
ini requestan mbak, "memasang iklan dibawah postingan tepat ditengah", kalau berhasil saya tunggu komentar nya..
http://danforblogg.blogspot.com/2013/05/cara-memasang-iklan-di-bawah-postingan.html
kalau ada slider-nya tampilan blog jadi kelihatan bagus, asal tidak menambah berat loading blog-nya.
menarik untuk dicoba:)
ternyata ada cara lain ya mbak, seep dah buat infonya.
mantep deh sob, thanks
sangat menarik tutonya.
sebenarnya saya sangat suka dengan gambar slide show. bisa mengenalkan artikel yang lainnya pada pengunjung. Pastinya blog akan tampak lebih menarik. Tapi apa daya, blogku sudah sangat berat loadingnya. Jadih hanya bisa berkhayal doang.
terima kasih sharingnya.. tapi terlalu banyak widget akan beratkan blog..
Keren Mbakk Tipsnya Saya Juga Udahh Pakeee Tuhh :D
saya pernah nyoba pake slide, lumayan bagus cuman loadingnya nambah hehe :D
wah cakep mbak, apalagi kalo CSSnya di pisah masukin template pasti lebih lengkap lagi dan tidak terjadi eror saat validasi html5 :)
apakah bikin berat blognya mbak, pengen nyoba sih cuma belum ada waktu hehe...
mnarik nih utk dicoba
makasih infonya mbak,,, ntar mau coba saya di blog satunya biar keren, hehehe :)
soalnya dari dulu blog saya gak ada hiasannya sama sekali :D
wah keren sob, kapan-kapan coba saya terapkan di blog jadul saya,makasih atas infonya
Daniel, iya silahkan dicoba aja mas, siapa tahu blog eksperimen nya bisa terlihat keren apabila dipasang widget slide show :)
Wah terimakasih mas posting nya tentang pemasangan iklan, tapi setelah saya terapkan di blog ternyata tidak berhasil, malah template saya jadi eror hehehe :D
Kang Ucup, iya donk. Kalau ada slide show nya, blog tersebut lebih terlihat profesional. Contohnya seperti web koran online :)
Mas Hasby, iya donk hehehe :D
Kang Budi, biasa aja kok :D
Mas Fadly, iya makasih mas :)
Pak Djangkaru, semoga khayalannya bisa diwujudkan ya pak :)
Mizz Aiza, iya bener juga ya mizz hehehe :) Lebih baik pasang widget yang penting-penting saja di blog :)
Mas Zygas, wah keren mas slide show nya :)
Mas Jocker, iya pastinya loading blog juga ikut bertambah mas kalau pasang widget ini :)
Mas Andes, saya terus terang nggak paham mas tentang validasi CSS. Tapi sepertinya bagus juga idenya mas andes. :)
Mas Anthonie, hehehe silahkan dicoba mas kalau ada waktu luang untuk memasang widget ini di blog anda :)
Mas Sigli, ok
Mbak Indri, silahkan dicoba mbak slide show nya. Semoga berhasil ya :)
Mas Arie, iya sob silahkan blog nya dikasih hiasan widget biar terlihat keren :)
apakah tampilan slide tidak membuat loading blog jadi lebih berat ya... kalo nggak...aku ingin mencobanya :-)
InsyaAllah slide show ini ringan pak. Karena sudah di desain sedemikian rupa oleh si pembuat nya agar widget ini tidak memperberat loading blog :)
blognya keren, artikelnya juga bagus.
keep sharing :)
biasa aja kok master, nggak keren-keren banget :)
Asyik nih mbak tanpa harus..perlu utak atik template ya.. &jd keliat sederhana dan simple cara masang nya..
Cuma harus rajin mengganti url post,gbr sama judul artikel nya aja ya...kalo mau terupdate..
Keren...mbak Rin :)
oh jadi tinggal ganti gambar sama url postingannya saja ya mbak.. wah simpel nih mbak caranya.. oke makasih saya save dulu ya mbak..?
Bisa dicoba nih mbak :) hebat bener blognya . Salut !
Jika ada waktu silahkan berkunjung 'kerumah' saya :)
hehe iya mbak saya dulu juga pernah gitu kok, template acak2an semrawut numpuk eror sampe keluar keringet dingin juga udah pernah mbak. tapi berkat itu semua akhirnya sedikit demi sedikit lama2 bisa paham juga.. keep spirit and continue to work mbak :)
wah mas Andes aja sempet keluar keringet dingin apalagi saya yang orang awam bisa stres kalau eror templatenya hehe...
Saya masih mikir mau pasang nggak yah slide show di blognya :)
Mas Budi, iya mas cukup mudah untuk pasang slide show di blog dengan menggunakan trik diatas. Kita hanya perlu ganti url nya saja. Sepertinya blog anda sudah ada slide show nya :)
Mas Nady, iya betul itu mas. Nge-save nya jangan lama-lama ya, nanti lamah jamuren hehehehe :D
Mas Wong, silahkan dicoba mas. Saya kira blog saya biasa aja kok. Nggak hebat banget. :P
Mas Andes, wah ngeri juga ya mas pengalamannya sampai keluar keringat dingin hehehe :D Salut pokoknya buat Master Andes :)
Mas Anthonie, jangan kebanyakan mikir mas. Tapi langsung praktek aja biar nggak lupa hehehe :D
sepertinya, ini menarik untuk diterapkan pada blog tutorial selain menghemat waktu menerbitkan artikel tapi juga bisa menghemat kata-kata...apakah bisa slide shownya di atur agar bisa bergerak otomatis?
saya sudah pernah menerapkan hal ini dahulu..
tetapi sekarang sudah gak pake slideshow2an segala, terlalu berat menurutku..
tetapi mau pasang/ tidak itu sesuai selera masing2...
nice share...
simple juga ya mba.. mudah di pahami, sangat membantu terutama bagi orang awam kayak saya... mungkin suatu saat saya butuh cara ini.... makasih udah share..
Mbakk Ririn : Iyaa Mbakk Makasiii Atas Pujiannya :D
Ohh iyaa Koq Mbakk Gk Pake Slide Show Sii?? Padahal Kand Mbakk Yang Pasang Cara"nya Hihii :D
Menarik sekali artikelnya ;)
kalau soal utak atik daleman blog saya kurang begitu paham, master... takut terjadi error lagi..
Mas Arham, iya slide show ini bisa bergerak secara otomatis. Anda tinggal memasukkan url postingan, url gambar, dan juga judul postingan. Nanti slide show tersebut akan bergerak sendiri, dalam artian gambarnya ber-ubah-ubah sendiri.
Mas JIM, memang ada slide show yang cukup berpengaruh terhadap loading blog. Namun, slide show yang satu ini saya kira cukup ringan untuk dipasang di blog. Karena sudah di desai sedemikian rupa oleh pembuatnya :)
Mas Zaelani, saya juga masih pemula mas. Jadi kita sama-sama belajar. Kemarin saya sudah mencoba pasang slide show ini di blog saya. Kini giliran anda yang mencobanya :)
Mas Zgas, kalau semua tutorial saya terapkan semua di blog ini, malah nanti blog saya jadi banyak widget mas. Konsekuensinya loading blog menjadi berat. Oleh karena itu, saya hanya pasang widget yang penting-penting saja, dalam artian yang bisa berguna dan bermanfaat untuk pemirsa blog saya. Jadi seperti itu alasannya mas :)
Mbak Tati, biasa aja kok sist. Thanks ya sudah mampir :)
Pak Mang Yono, master ini sukanya pura-pura nggak bisa dech wkwkwk :D
ijin share di blog saya mbak ..
Jangan lupa, link sumbernya juga di pasang ya :)
Ini ringan apa nggak mbak ?
Lumayan ringan mas. Silahkan dicoba kalau tertarik untuk Pasang Slideshow di Blog Anda :)
wah ini yg saya cari cari dari kemaren,
terima kasih tutorialnya
Iya sama-sama Mas Nobel :)
apa nggak bikin berat ini mb' kalau pasang slide, kan sudah ada alternative lain, misalnya pasang populer post atau rondompost. #Rizkyzone.com
Sepertinya widget SlideShow ini tidak begitu berat untuk loading blog mas. Memang cukup berpengaruh sih terhadap loading, tapi hanya sedikit saja :)
Iya dari segi tampilan memang lebih menarik widget Slide Show mas daripada widget yang lain. Karena alasan berupa gambar interaktif dan berganti-ganti gambar.
sangat membantu mbak,
saya sudah mencoba memasang dan memindahkannya,dan Alhamdulillah berhasil .
htpp://meutrap.blogspot.com
Ok sama-sama Mas Meutrap. Sukses blog nya ya :)
Berarti sama seperti saya mas, saya juga masih pemula kok hehehehe :)
Oke mbak sama-sama ,
mbak gak masang slide shownya lagi knp mbak? oya mbak mau tanya nih kalau upload gambarnya itu ukurannya berapa ya?
Mbak Agustina, blog saya sudah terlalu banyak widget yang terpasang mbak. Nanti kalau saya pasang slideshow malah jadi tambah berantakan blog nya hehe :) Terkait dengan size/ukuran gambar, sebaiknya jangan besar-besar ukurannya. Cukup 50 kb atau 100 kb saja mbak ukuran gambar/foto :)
very interested mbak postnya..
revisit http://qreisubs.co.vu/
Mas TKJ, thanks very much :)
Mas Warim, lumayan menambah berat loading mas. Tapi slide show ini yang paling ringan. Silahkan dicoba aja kalau tertarik ingin memasang di blog :)
yg terbaru
hackerfriendship.blogspot.com
Thanks Mas Iwan sudah singgah kemari :)
Sama-sama Mas Dandy :)
Bisa mas. Untuk setting lebar dan tinggi slideshow, anda bisa mengeditnya dengan cara mengubah angka yang ada di kode HEIGHT (tinggi) dan WIDTH (lebar). Good luck ya mas dandy :)
wah mantap..trims mbak..buat bagi2 ilmunya...saya utak atik...alhamdulillah bisarubah ukuran juga...trimakasih banyak...mampir kapan2 di blog saya boxjava.com tapi blom saya publish..tampilannya blum fix...
mantap mbak infonya
di tunggu kunjungan baliknya :D
Mas Box, alhamdulillah kalau sudah berhasil mas. Saya ikut merasa senang. Sukses untuk blog nya ya :)
Mas Hans, terimakasih ya atas kunjungannya :)
Untuk melakukan copy paste script, silahkan klik tombol select all dan kemudian silahkan tekan CTRL + C pada keyboard komputer anda. Terimakasih ya :)
Wah...Mantabpbek sekali nih tutorialnya, mau coba ah...:)
Salam kenal dari www.trainerbisnisonline.blogspot.com
Silahkan dicoba mas trainer :)
Terima kasih mbak Ririn, artikelnya bagus sekali....
Mohon ijin tuk mencoba ya??? maklum masih baru....
mohon bimbingannya
Sukses selalu....
nyeting untuk merubah ukuran slide yg mana ya.? ane udah coba sip dah pokoknya makasih sist
Badrus, silahkan dicoba mas. Thanks ya sudah singgah di blog saya :)
Barito. untuk edit ukuran, anda bisa cari kode HEIGHT untuk tinggi slide show dan WIDTH untuk lebar slide show. Silahkan ganti angkanya untuk mengubah tinggi dan lebar slide show. Thanks :)
Thanks mas aziz sudah singgah di blog saya :)
Waah ini yang sedang saya cari. makasih mbak tutorialnya....
Iya sama-sama mas muhib. Terimakasih atas kunjungannya ya :)
Newbie.. Ucapkan byk terimah kasit ats tutornya
wow, keren, bagus sekali ada slide shownya :)
gan cara sesuaikan ukuran gambarnya gmn,?
#Supri Yadi, silahkan tambahkan kode width="300px" height="250px" setelah url gambar nya mas :)
makasih bngt mbak, sangat bermanfaat tpi saya msih bingung setting slider nya, kunjungan ulang ya di http://wf-subs.blogspot.com download anime sm tokusatsu
Post a Comment