Jumat, 07 September 2012

Membuat Slide Gallery Foto Otomatis pada Blogspot

Advertisement
Advertisement

Kali ini saya akan sedikit berbagi CaraGampang untuk membuat Slide Otomatis berupa Gallery Foto , tutorial ini sengaja saya buat untuk memenuhi salah satu permintaan dari pengunjung CaraGampang.Com melalui FansPage.. Untuk contoh kurang lebih seperti Gallery Foto pada Sidebar Situs ini..
Gallery foto ini sudah otomatis berdasarkan Label atau kategory yang kita masukan, jadi sobat semua gak usah repot-repot masukin gambar dan ngasih judul.. Gimana ada yang berminat untuk dipasang di Blognya.?
Langsung saja simak langkah-langkah Membuat Slide Gallery Foto Otomatis pada Blogspot berikut :



  • Tentunya kudu masuk ke Blog masing-masing..
  • Masuk ke menu Rancangan/TataLetak.
  • Tambahkan Gadget Baru pilih HTML/Java Script.
  • Kemusian masukan Script Berikut.

<style>
#slides-outer {width:290px;height:200px;position:relative;margin:0 auto;background-color:#efefef;border: 5px #9a9a9a solid;-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);}

/* Menetralkan gambar */
#slides-outer img {margin:0px 0px;padding:0px 0px !important;background:transparent !important;border:none !important;outline:none !important;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
#slides .next,
#slides .prev {opacity:1 !important;}
/* Stop di sini */

#slides {position:absolute;z-index:100;font:normal 12px Arial,Sans-Serif;}
.slides_container {width:290px;overflow:hidden;position:relative;display:none;}
.slides_container div.slide, .slides_container div.slide img {width:290px;height:200px;display:block;overflow:hidden;}
.slides_container div.slide img {height:auto !important;}
.pagination{ display:none;}
#slides .next,
#slides .prev {position:absolute;top:70px;left:0px;width:24px;height:43px;display:block;z-index:101;}
#slides .next {left:266px;}
#slides .caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 10px 0 10px;background: #9a9a9a; opacity: 0.7;width:290px;font:normal 13px arial;color:#000;text-shadow:none;}
#slides .caption a {text-decoration:none;color:#000; font-size:12px; text-align: center;}
#slides .caption a:hover {text-decoration:underline;}
/* End SLIDES */
</style>

<!-- pake jquery-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://caragampangcom.googlecode.com/files/slides.min.jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            slideSpeed         : 350,
            slideEasing        : '',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>
</script>

<script type="text/javascript">
var showPostDate_g  = false,
    showComm_g      = false,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = true,
    slideLabelName  = "Ilmu Pertanian",
    pBlank          = "http://4.bp.blogspot.com/-NcHe2sSCqPE/T-BlAMKQb_I/AAAAAAAAAbQ/-3Qw0l_pv9A/s1600/no-image-caragampang.jpg",
    text            = "Komentar",
    numposts_g      = 6,
    home_page       = "http://aa-solah.blogspot.com/";
</script>
<div id="slides-outer">
    <div id="slides">
        <script src="http://caragampangcom.googlecode.com/files/autoContent4SLIDES.js" type="text/javascript"></script>
        <a href="#" class="prev">
            <img src="http://1.bp.blogspot.com/-nX7VdQVSNgA/UD2VCHITchI/AAAAAAAAARU/C9RbJQxyvNs/s1600/nav_left.png" width="24" height="43" alt="Arrow Prev" />
        </a>
        <a href="#" class="next">
            <img src="http://4.bp.blogspot.com/-4aDJC9Hh0tU/UD2VG9qN0vI/AAAAAAAAARc/Ih8fRMVRWyU/s1600/nav_right.png" width="24" height="43" alt="Arrow Next" />
        </a>
    </div>
</div>


  • Langkah terakhir tinggal Save.
UPDATE :
Jika scriptnya tidak bisa di copy , download scriptnya DISINI

KETERANGAN 
  1. Jika pada template sobat sudah ada kode jquery.min.js maka kode berwarna Biru di atas tidak usah ditambahkan..
  2. Ganti tulisan Ilmu Pertanian berwarna merah dengan label yang sobat inginkan..
  3. Jika sobat ingin Menampilkan Artikel Terbaru pada Slide ini silahkan ganti tulisan true berwarna Merah dengan False
  4. Ganti http://aa-solah.blogspot.com/ dengan alamat blog anda
Mungkin hanya ini yang dapat saya jelaskan jika , ada masalah atau ada yang ingin ditanyakan silahkan untuk berkomentar di bawah..
Semoga berhasil, Selamat mencoba Membuat Slide Gallery Foto Otomatis pada Blogspot

50 komentar

assalamualaikum aa solah,,,mau nanyak nih,,gimana ya caranya buat menu sharing yang ada di blog ini yang ada gambarnya youtube,g+.twitter itu bang?

@Berita Bola Waalaikumsalam.. owh yang di atas ya.? tapi itu bukan buat Sher, tapi cuma sebatas icon Social Network..
Tapi kalo mau nanti kapan-kapan dibuatkan tutorialnya...

mas aa sholeh, saya mau tanya cara elemen yang disamping kanan header itu bagaimana ya? tolong dong kasih tau..
Saya request, kalo bisa artikelnya jadi sebelum tgl 14 bulan ini. tolong banget :|.. mau saya pasang buat di template yang saya gunakan buat lomba..

@Smada Blog Contest elemen yang mana ya mas.?? apakah yang anda maksud itu elemen menu Pencarian yg gede itu.?

kasih tau donk gmna cara membuat navbar kayak yang di atas itu ??

@Rekzy WiranataOke,, nanti kapan-kapan saya bagikan tutorialnya.. ditunggu ya bro.. :D

@aa Solah
Pasti saya Tunggu Om,,
jgn lma2 ya Om ??

@aa SolahYap, betul sekali mas. Mohon segera di share ya mas.. #PLEASE.. :|

@Smada Blog Contest Sippp ,, besok juga udah nongol Tutorialnya disini... :) hehe

@Smada Blog ContestUdah muncul tuh,, tinggal liat artikel terbaru.. hehe

http://www.caragampang.com/2012/09/membuat-form-search-aga-mirip-yahoo.html

. . blog aq udah berat. huhh. ntar makin berat aja. huhh . .

@ptikunm Cari kode yang belakangnya seperti ini jquery.min.js di tempalte agan ,, kalo kode seperti itu udah ada, berarti kode warna biru di atas hapus aja..

@♥VPie◥♀◤MahaDhifa♥hehe kalo sudah berat gak usah dipasang mba.. terimakasih atas kunjungannya, sukses juga buat blog mba.. :D

ko gak bsa di copy sih kodenya :(

@Aditia Novithmm,, ko gak bisa sih ,, coba copy nya pas saat blog masih loading (pas saat tampilan blog ini blum sempurna) kalo nggak nanti script nya saya kirim lewat email.. tinggalin email aja.

kok gag bisa di copas gan,,, bisa tolong kasih sharing nya di email ane,, wawansley@gmail.com||
maksih,,,

kog g bisa dicopas y? gmn caranya mas? ijin copas code nya mas (^^)

waw gak bisa copay coding nya bro kalau ngetik ulang ampun dah.. tapi toplah berbagi ilmu tentanta gadget blonya thanks bro.... www.aguskurniawan.com

Salam kenal mas, tadi saya lagi cari di google. Eh nyasar sampai sini. Saya coba untuk buat gambar dalam bentuk slider kok jadinya aneh ya. Mampir mas

Wah..patut di coba nih..tapi saya bingung mau naroh dimana yach..

gan..ko yg muncul gambar2 dri situs ini??

@Rama silahkan ganti dulu http://aa-solah.blogspot.com/ dengan alamat blog sobat..

gan udah di coba n udah baca saran dri komentar, tapi kok belum muncul ya gambar slide nya?

@Majalah Gudeg coba Pakenya URL blogspot mas ,, jangan yang TLD..

jangan yang http://www.majalahgudeg.com/ tapi URL blog yg aslinya...

mending gak usah posting gan, gak bisa di kopi gtu!!!!!
keat

@jancok Kan sudah saya update gan.. scriptnya bisa donlod Disini

@Mutakbir Demonya sudah ada di sidebar blog ini .. yang tulusannya GALLERY FOTO

trimakasih Aa Solah.....saya izin copas skripnya...cuma masalahnya setelah saya pasang di blog ...kok jadi transparan alias putih semua ndak ada gambar2nya,gimana ya caranya biar muncul gambar2 yang saya inginkan ???ditunggu ilmunya..terima kasih...hehehe..

@Anonim Coba Http://aa-solah.blogspot.com ganti dengan URL blogspot agan ,, (pakenya alamt blogspot , jangan pake yang TLD)

ko ga bisa yaah di weblog saya www.dealerindovision.com
thanks

ok..terima kasih..... sudah saya coba A' ....sayang ndak berhasil juga....hehehee....apa betul semua skripnya dicopas di HTML ???? atau ada yang di ganti gitu..selain yang Aa' sebutkan yang diatas ???ditunggu ilmunya.....hehehe

Assalamualaikum Izin Copas Script nya gan..! buat aku pasang di blog saya maklum di bagian sidebar masih banyak yang bolong....(Wassalam)

Trima kasih banyak templatenya saya pakai di blog saya www.puantamanipi.com . Tapi ada satu yang perlu saya tanyakan Mas. Gimana caranya mengganti Join visitornya menjadi milik saya di kolom komentar (muncul saat tulisan dibaca)...mohon jawabann Mas ya...

@andi rachmat cari ID ini mas 9020141741934212060 ,, ganti dg ID blogger'y mas..

Gan ko g bisa di copy y codenya mohon pencerahan'y
titip ini y gan : http://world7musik.blogspot.com

MAKASIH COY INFONYA MANTAP BANGET.

Mas saya mau tanya saya bikin slide galery foto dan saya copy kode html dan saya masukkan ke gadget sudah nongol tapi gambar belum ada, petunjuk sudah saya ikuti. dan kalau ganti foto bisa juga tidak, trims mas.

@gebyar basuki Udah diganti blum aa-solah.blogspot.com dengan URL blognya mas (jangan yang TLD).
trus ketika buat postingan berupa "gambar" usahakan jangan copy URL dari Blog orang lain, melainkan di upload sendiri.
semoga berhasil.. :)

ling gambar yang saya mu pajang di simpennya di mana kk?

thx info'y sob
http://duniagame7.blogspot.com/

mas kok di pasang di template saya gak bisa ya ....mohon tutornya cara yang atas itu

@agvnk awanmungkin ada kode yang bentrok, coba cari kode yang belakangnya jquery.min.js ,, kalo sudah ada, kode yang warna biru di atas jangan di masukan.

mas yang ini kn tutorialnya udah bisa, tapi gmn ya cara ngatur tingginya ?...coz bordernya aq tinggiin tp gambarnya gk bs auto ngikutin gtu mzz...ma tombol navigasinya jg gk bs ikut turun kbwah....mhon tutornya y mazz

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

Komentar anda sangatlah berarti bagi kami, silahkan berkomentar dengan bijak dan sopan. Komentar dengan mencantumkan Link aktif akan kami hapus.
EmoticonEmoticon