Search

Memuat...

Berlanggan Via Email

Enter your email address:

My Friend

Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog



Gak bisa tidur ni sob.... dari pada timbul pikiran yang negatif nanti bisa merugikan diri sendiri dan orang lain lebih baik berbagi artikel dengan sesama sahabat yang berkunjung ke blog ini mungkin ini bisa membawa manfaat sekalian beramal membantu orang lain melalui sebuah artikel ini he....he....

Kali ini saya coba pilih judul yaitu Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog kenapa saya memilih judul seperti itu ? karena yang akan saya bahas tentang cara pasang gambar atau foto seperti yang bisa sobat lihat contoh screen shot nya seperti diatas tulisan ini , Langsung ja ya sob ....!! nanti kalau kelaman jadi basi

Buat sobat yang mau mencoba untuk blog sobat cara agak gampang-gampang susah alias gasus , tapi kalau sobat teliti cara nya cukup mudah yaitu copy paste kode di bawah ini kehalaman HTML Postingan blog

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
       $('#BUS-slider').s3Slider({
          timeOut: 3000
       });
    });
    </script>
    <style>
    #BUS-slider {
       width: 550px; /* Keep it 20px-40PX greater than ACTUAL Image size */
       height: 335px;
       position: relative;
       overflow: hidden;
       margin-left: 0;
    }
    #BUS-sliderContent {
       width: 550px;
       position: absolute;
       top: 0;
       margin-left: 0;
    }
    .BUS-sliderImage {
       float: left;
       position: relative;
       display: none;  top: 0;
       border:1px solid #ddd;
    }
    .BUS-sliderImage span {
    position: absolute;
        font: 10px/15px sans-serif,Arial, Helvetica;
        padding: 10px 10px;
        background-color: #000;
        color: #fff;
        filter:'alpha(opacity=70)';
        -moz-opacity: .5;
        -khtml-opacity: .5;
        opacity: .5;
        text-align:justify;
    }
    .BUS-sliderImage span a {
    text-decoration:underline;
    color:#FE6602;
    }
    .clear {
       clear: both;
    }
    .top {
        top: 0;
        left: 0;
        width: 550px !important;
        height: 70px;
    }
    .bottom {
        bottom: 0;
        left: 0;
        width: 550px !important;
        height:90px;
    }
    .left {
        left: 0;
        top: 0;
        width: 110px !important;
        height: 335px;
    }
    .right {
        right: 0;
        bottom: 0;
        width: 110px !important;
        height: 315px;
    }
    </style>
    <br />
<div id="BUS-slider">
<ul id="BUS-sliderContent">
<li class="BUS-sliderImage">
    <img height="335" src="http://3.bp.blogspot.com/-1nqN2n-bxqc/UOlEiGJN40I/AAAAAAAAE9A/dCelZ2rCb2E/s1600/Untitled-2.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3> Mother And Rangga</h3>
The road to the lake Singkarak west sumatera all back home</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <img height="335" src="http://1.bp.blogspot.com/-jKNi9EeXeEk/UOlEudoq3hI/AAAAAAAAE9U/0lnuoRGv6UQ/s1600/Untitled-6.jpg" width="550" /><a href="http://blog-rangga.blogspot.com/"><span class="top"><h3>
Mother And Rangga</h3>
Rangga photo on the bridge leighton III</span></a><span class="short_text" id="result_box" lang="en"><span class="hps"></span></span>
    </li>
<li class="BUS-sliderImage">
    <a href="http://blog-rangga.blogspot.com/"><img height="335" src="http://1.bp.blogspot.com/-haXpszup8FE/UOlsZL5WxTI/AAAAAAAAE-A/XUGrXP7vviA/s1600/Untitled-1.jpg" width="550" />
    <span class="top"><h3>
Rangga photo</h3>
Rangga in the Clock Tower Bukitinggi West Sumatera</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="http://blog-rangga.blogspot.com/"><img height="335" src="http://1.bp.blogspot.com/-HTT6ExcljAU/UOmTXLaInDI/AAAAAAAAE-Q/UNJRmGExphE/s1600/Untitled-1.jpg" width="550" />
    <span class="bottom"><h3>
Rangga Photo</h3>
Rangga posing overpass Kelok sembilan west sumatera</span>
    </a></li>
<li class="BUS-sliderImage">
    <a href="http://blog-rangga.blogspot.com/"><img height="335" src="http://4.bp.blogspot.com/-387pM5uD_yo/UOmTjcug3rI/AAAAAAAAE-c/eZv82I8P1Bo/s1600/Untitled-2.jpg" width="550" />
    <span class="bottom"><h3>
Rangga , Father and Mother</h3>
Rangga with beloved family</span>
    </a></li>
<div class="clear BUS-sliderImage">
</div>
</ul>
</div>
<br />

Keterangan  :
  • Kode yang berwarna Orange atau kuning adalah URL yang bisa sobat ganti dengan URL blog sobat.
  • Kode warna merah adalah URL Gambar , ganti dengan URL blog yang mau sobat tampilkan 
  • Tulisan warna hijau atau green Ganti dengan judul yang sobat inginkan kan 
  • Tulisan warna biru ganti dengan deskripsi 
Kalau ada salah kata mohon dimaafkan dan kalau ada salah kode atau tidak berfungsi mohon di tinggalkan pesan di form komentar di bawah ini , selamat malam dan terima kasih .....
Klik tombol berbagi :

106 komentar:

Arita Karawang mengatakan...

wah mantap gan, saya coba yah,tenkyu

aryuda mandraguna mengatakan...

jazakallohu khoiron akhi(semoga Alloh membalas kebaikan mu)... kodenya berhasil ana terapkan di blog ane stelah byk dari postingan2 laennya gak berhasil..

hengki saelah mengatakan...

Amin.....alhamdulillah dan saya ucapkan terima kasih karena sobat telah menyempatkan diri mampir ke blog ini ...

rumah yogyakarta mengatakan...

terimakasih tutorialnya, kalau ingin pakai tanda panah kanah / kiri untuk melihat foto bagaimana caranya?

hengki saelah mengatakan...

terima kasih atas kunjungan nya gan , kalau menggunakan tanda panah yang sobat maksud nanti akan saya posting secepat nya , sekali lagi saya ucapkan terima kasih atas komentar nya

Agung Prabowo mengatakan...

gan ada ngak yg otomatis bisa nampilin gambar pada setiap postingan kita,,,

Jhoey Noviyana mengatakan...

g bisa gan, gmana ya...apa ada yang diganti lagi...

hengki saelah mengatakan...

terima kasih atas komentar nya , cara nya masukan semua kode tanpa ada yang di ganti ke halaman html postingan blog agan , kalau kode nya baru agan ubah satu persatu URL photo yang mau dipasang dan LINK yang mau di tautkan sesuai dengan kode yang di warnai seperti kode di atas dan untuk mempermudah sebaik nya gunakan Ctrl + F untuk menyamakan kode diatas....

agung aryo mengatakan...

mksh bos atas info y.

hengki saelah mengatakan...

Sama-sama juga mas atas kunjunganya nya dan komentar nya

Grey Fannani mengatakan...

ini dia yang saya cari.
keren pak. terima kasih infonya.

hengki saelah mengatakan...

sama-sama juga pak atas komentar dan kunjungannya....

Ahkmad Bastian mengatakan...

di taruh di mana gan ?

hengki saelah mengatakan...

kode nya bisa di taruh di mana saja gan , di postingan blog juga bisa dan di sidebar blog bisa di pasang gan , asal kan di tempatkan di halaman HTML kode nya akan berfungsi gan.....

Dian Rent Car Cirebon mengatakan...

salam blogger

mantaaap ommm...siippp slide shownya bagus
mau dum kaya gini

Tq

royana boy mengatakan...

mntep x brow..... thanks ya.... dri dlu aq psing bwat slide show... tp kode yg pling pas hnya di blog ini......

hengki saelah mengatakan...

terima kasih komentar dan kunjungan nya gan....

Kibas Nyimas mengatakan...

ko gambarnya g muncul, halaman HTML yang bagaimana trus apakah ada seting lgi leain merubah compose ke HTML??? mohon jawannya

hengki saelah mengatakan...

coba dulu di halaman postingan blog gan masukan dulu kode lengkap nya tanpa dirubah dulu , kalau sudah berhasil gambar yang seperti diatas tampil silahkan edit sesuai dengan keterangan diatas gan , sebaik nya kode dipasang di halaman html postingan blog gan karena ukuran nya ini terlalu besar untuk di pasang di sidebar blog , kalau masih tidak bisa saya akan coba cross cek ulang , dan terima kasih atas pertanyaan dan kunjungan nya , semoga berhasil .....

foto cewek mengatakan...

thanks gan,, mantap..

Foto Bugil dan Seksi mengatakan...

mantap mas bro... thanks yo...

hengki saelah mengatakan...

terima kasih kembali atas kunjungan dan komentar nya ....

Alief Qusaini mengatakan...

thx info bermanfaat bget nih postingnya
kunjungi balik http://romeozstudio.blogspot.com

Pulsa Murah Jakarta mengatakan...

nice gan....

investasi online mengatakan...

top markotop, recomend banget!

dhika mengatakan...

keren turorialnya sob, ga harus pake pihak ketiga

AtoinMeto mengatakan...

siip kawan... patut di coba... maklum neeh Blog baru n msh butuh masukan....
skli lgi nice info....
C_back http://djonazareno.blogspot.com/
n fllw ea kwan skalian nmbh mentor..he,e,,,
tq

Ofic Sam mengatakan...

om, kalo ngerubah posisi gimana?
bisa benahin a?


udah ane pasang cuman posisinya kurang pas.. ngeditnya dimana?? mohon bantuannya..
disini www.aremawallpaper.com

hengki saelah mengatakan...

sesuaikan tinggi/height dan lebar/width dengan gambar punya osobat

Sugeng Riyanto mengatakan...

JOS

Punyaknya PAUD UAD mengatakan...

MAAF Punya saya kok tidak bisa keluar potonya ya

Rachel mengatakan...

Assalam
saya sudah coba copy vaste bagus gan
kalo mau pakai link gambarsaya, nyimpannya ke
3.bp.blogspot.com mohon pencerahan gan
tank,s banyak Gan

hengki saelah mengatakan...

waalaikum salam , di upload dulu photo nya gan dan ambil url photo tersebut untuk menggantikan link url di atas , thanks ....

asli kocakkonyol mengatakan...

tnk's sob,infonya mantap menambah ilmu ane...

mampir and follow juga lapak ane gan http://aslikocakkonyol.blogspot.com/

hengki saelah mengatakan...

Sama-sama juga gan atas kunjungan dan komentar nya gan , insya Allah akan saya follow back gan .....

Iwan Is mengatakan...

makasih gan artikelnya sangat membantu saya . saya baru belajar di dunia bloger
http://go-detik.blogspot.com/

Wahyoe Msc mengatakan...

thanks :)

hengki saelah mengatakan...

sama-sama gan atas kunjungan dan komentar nya .....

Reza mengatakan...

thanks banget sob source kodenya

Arif Mustofa mengatakan...

Asikkk

takur cuy mengatakan...

wahh....pas banged nie gan ane lagi nyari pas ane coba krenzz gan
tapi kalau mau ngilangin titik yg ada di samping gambar...
code'a yg mana gan
thnks ya gan

apkandroid.us

Anna Zebua mengatakan...

terimakasih ya mas..........atas infonya.
100% berhasil............

Terryus Gunawan mengatakan...

Kalau saya mau posting slide foto, tapi saya upload foto tanpa link url gimana tuh?

Eko Estillo mengatakan...

Infonya menarik nie dan mudah di kerjakan,,
thanks infonya :)

hengki saelah mengatakan...

sama-sama gan atas kunjungan dan komentar nya.......

hengki saelah mengatakan...

Terryus Gunawan@ bisa gan di upload lalu ambil URL gambar yang telah mas upload tadi

Kwartir Cabang Probolinggo mengatakan...

_Sipppp Bosssssssssssssssssssss,,,, ne yg saya cari...!!! thanks banget ya....

Anonim mengatakan...

pusing...(-_-)
masi awammm..

Rino Prantama mengatakan...

ass uda rangga. iko bana nan awak cari dari tadi. tarimo kasih banyak ko a da, salam kenal.

sci-mathmaster mengatakan...

ane lagi jalan2 ketemu slideshow wah...okey

JPD Publishing mengatakan...

Dear Hengky, Trims atas Ilmunya, Alhamdulillah saya berhasil melakukanya di blog saya

wisnu tes mengatakan...

gag bisa kang di tempat saiia :(

Oma Supartana mengatakan...

Kabar gembira buat anda Bisnis bersama ust.Yusuf Mansur menghasilkan uang halal kunjungi website ini copas lalu search di google http://leadervsi.com/VP3782

Deka Fradesyah mengatakan...

Terima kasih banyak mas atas tutorialnya!!!!
shiippp!!! de,,,

SMK YPI DARUSSALAM 2 CERME mengatakan...

makasih agan, mantap bgt postingannya, salam kenal

nunik winarni mengatakan...

gan cara upload fotonya gmn yach...

thanks gan :)

muhammad hasan mengatakan...

thanks banget info ya gan
tapi agan tahu gx cara buat slide show yg kayak gini
=>http://dn.gemscool.com/index.php

klo tahu bagi donk tutor ya :P

salam blogger

. mengatakan...

Terima kasih bos, langsung kita coba di
http://kontesrobotpnl.blogspot.com/

Falah Bilayudha mengatakan...

gan, berarti tiap kali ada postingan baru n fotonya mau kita tampilin di slide berarti harus di ganti terus ya ?

Lukman Nul Hakim mengatakan...

Slideshownya jalan gan... trims tutornya.. :)

Ernaz Siswanto mengatakan...

Terima kasih bos... Like This

baser mengatakan...

ijin pungut gan hehe

rie savingwear mengatakan...

makasih ya kawan....
jalan - jalan sob ke blog aye...http://rsavingwear.blogspot.com/

kata kata mengatakan...

maksi banget..ahirnya bisa bikin slide show

pulau tidung mengatakan...

unik juga slide gambarnya

sdit ululalbab mengatakan...

gan kok punya q gx muncul yaaa

Arsy ToursTravel mengatakan...

Gan gimana ngatur letak posisi slidenya ? soalnya gak pas posisi. mohon solusinya.

Mellya Sekar Aprista Bagianto mengatakan...

gan , kalau misalnya mau dikasih kayak beranda dll..itu caranya gimana?

blogadit mengatakan...

Sudah saya coba dan berhasil gan, trims.

rahmat hidayat mengatakan...

terima kasih gan.
artikel anda sangat membantu.. :-)

Ahmad Safei mengatakan...

URL gambarnya ngambil dri mna gan? :-)

Kuat Kurniawan mengatakan...

Cakep gan...dari sekian ilmu slide slide yg ane temuin, cuma dari agan yang pas...ane coba pasang y gan...

ngurah artawan mengatakan...

Gan... setelah kodenya di copas, kok gak mau jalan slidenya gan, padahal di dashboard pada template, slidenya jalan ... ada yang salah gan?

ahza elkhair mengatakan...

trimakasih tutorialnya sob, tapi kalo untuk memperlebar atau menambah lebar ukuran gambar gimana caranya

rido prayogo mengatakan...

wah caranya mudah ya ternyata nanti saya coba deh, ? tapi kalo pengen ukuran gambarnya jadi kecil-kecil gmn ya

matematika motivasi mengatakan...

tidak jalan. coba dicek dimana yanga salah (y)...
perbaikannya ditunggu.

KAISARBET.COM AGEN BOLA TERPERCAYA PIALA DUNIA 2014 mengatakan...

kaya template megazine

Radhin mengatakan...

Alhamdulillah bisa gan.... ane barusan nyoba di xammp

jazakallah gan....

Rumput Kebar mengatakan...

wah.keren gan slide shownya..ijin copy scriptnya

Ikhwan Aziz mengatakan...

sangat menarik Gan..,
kunjungi balik blog saya > http://izokuichi-elk-354.blogspot.com/

Nurbatiksolo.com mengatakan...

Tanks sekali gan atas infonya ini

Muhammad M. Ulum mengatakan...

Terima kasih artikelnya sangat membantu saya. Salam kenal

Ali Greget mengatakan...

thanks infonya

My Pool mengatakan...

agar letaknya tepat ditengah gimana?

Rizky mengatakan...

thanks gan :)

Sentral klin mengatakan...

Makasih Mas Bro atas Tutorialnya. Biar Telat yang penting bisa prakteknya.

Danang Setyawan mengatakan...

iji praktek gan,ini yang ane cari
mampir jga gan di mari http://danangfebri.blogspot.com/

radja kolor mengatakan...

kalau slideshownya di homepage diatas judul postingan caranya gmn guru?

Jual Produk Unik mengatakan...

Ini baru keren pakai bangetz, terima kasih mas aku bookmark artikel yg bermanfaat ini ya!

Anonim mengatakan...

terimakasih, tutorial berhasil gan. dapat dimuat diwidget juga, ubah ukuran gambar, ganti angka di kode script menjadi heigh=200 dan width=500

Ibrahim M.Pd.I mengatakan...

Kalau boleh tanya, slide yang sobat paparkan berat ngak ya loadingnya, sebab jika berat tentu akan menggangu kinerja blog secara keseluruhan. Terima kasih sebelumnya dan salam kenal

Supri Prasetyo mengatakan...

Terima kasih atas infonya..

#Blogwalking

Harindo Mitra Usaha mengatakan...

gan setelah pasang kok slideshow bawaan template saya yg di beranda kok gk bisa jalan kenapa ya ? tp kalo postingannya saya hapus bisa jalan kembali , mohon bantuannnya

Amin Purwanto mengatakan...

gan, ane nyobain kok gagal, kenapa ya? penampakan bisa lihat dimari http://www.brownsugarexporter.com/2014/06/welcome-to-brown-sugar-exporter.html

itu bukan link jebakan betmen gan, buat nunjukin aja klo ane blom bisa masang triknya juragan.

billboard mengatakan...

trimakasih tutorialnya sob. ijin share

Marindo Palar Vinkoert mengatakan...

Saya berterima kasih sekali dengan sharing ini. Hanya Tuhan yg akan membalasnya.....

sejuta resep makanan mengatakan...

thanks gan infonya

Ade Putra mengatakan...

wah ini kontes seo ya.... Keren dah...

A.Sofyan mengatakan...

Terima Kasih gan Tutorialnya, bermanfaat sekali...kunjungan balik ya gan www.blesstea-ok.blogspot.com

Toni mengatakan...

terima kasih atas tutorial memasang slideshow ini, nanti akan saya pasang di blogspot milik saya

Cara Membuat Obat Bius mengatakan...

wow gooooooooood top makasih ya mas triknya. pokonya maknyus lah.

pulau ayer mengatakan...

good, i like it.

Wisata ke Belitung mengatakan...

Bagus Infonya Gan.. Trims yah:

untuk Informasi Gan, yang mau liburan ke Belitung, Kontak Ane yah :D

Travel Belitungku adalah Portal Informasi Wisata di Pulau Belitung. Anda bisa mendapatkan berbagai seputar Info Wisata Belitung, seperti: Objek Wisata di Belitung, meliputi: Wisata bahari Belitung, Wisata Alam di Belitung, Wisata Sejarah di Belitung, Wisata Religi di Belitung, Wisata Agrowisata Belitung, Wisata Ekologi di Belitung, Ekowisata di Belitung, Wisata Kuliner di Belitung, Wisata Minat Khusus di Belitung( Diving, Snorkling, Junggle Trekking, Outbond, Flying Fox). Dan Direktori Informasi Wisata Pulau Belitung, meliputi: Akomodasi (Hotel, Penginapan, Homestay), Transportasi (Sewa Mobil, Motor, Bus di Belitung), Tempat Makan di Belitung, Agen Travel di Belitung, Kesehatan, Entertainment/ Hiburan, Ekspedisi, Souvenir, Sanggar Seni di Belitung.

bali accomodation - travel bali mengatakan...

makasi abang... saya coba dlu...

berita madura mengatakan...

ty bos, sangat bermanfaat

nuke mengatakan...

akan di cb. tks