Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Widget Galeri Gambar Dilengkapi Dengan Tombol Kontrol

by Irsyad Aslam , at 3/30/2013 , has 27 komentar
Widget Galeri Gambar digunakan untuk menyimpan berbagai gambar yang dapat anda simpan pada widget ini. Widget Galeri Gambar ini berfungsi hampir sama dengan slider gambar, Melainkan Galeri Gambar Terdapat pada Sidebar dan slider gambar terdapat di atas poting atau sidebar dan menyimpan gambar yang cukup besar. Widget ini dibutuhkan bagi anda yang mempunyai blog yang bertujuan untuk bisnis yang banyak menampilkan beberapa produk yang anda jual. Apa Kelebihan dari widget ini?, Widget ini mudah untuk anda pasang, dan tidak perlu mengedit HTML template hanya menambahkan widget HTML, Tidak Banyak memakan tempat dan anda bisa atur ukuran dari widget Galeri ini, Widget ini Juga Dilengkapi dengan Tombol Kontrol, Dan mempunyai fitur berjalan seperti slide gambar. Widget ini memakai kode Jquery, JavaScript dan CSS, yang diramkum menjadi kode HTML yang mudah untuk dipakai yang dibuat oleh . Untuk melihat demonya klik gambar yang ada dibawah ini. Untuk Memasang Widget Galeri Gambar, Berikut Cara Untuk memasangnya:

  • Silahkan Login Ke Blogger Anda.
  • Setelah itu, Klik Menu Tata Letak, --> Klik Tombol Add Gadget, Lalu Tambahkan Widget HTML.
  • Masukan Kode Berikut ini :
<script type="text/javascript" src=""></script>
<style type="text/css">
/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 1px solid #666;
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font: 10px normal verdana, arial;
<script type="text/javascript" >
var simpleGallery_navpanel={
loadinggif: '', //full path or URL to loading gif image
panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container
images: [ '', '', '', ''], //nav panel images (in that order)
imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images
slideduration: 500 //duration of slide up animation to reveal panel
function simpleGallery(settingarg){
var setting=this.setting
setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)
setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0
setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery
setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play
setting.currentstep=0 //keep track of # of slides slideshow has gone through
setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles
setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
setting.oninit=setting.oninit || function(){}
setting.onslide=setting.onslide || function(){}
var preloadimages=[], longestdesc=null, loadedimages=0
var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it
setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
setting.$loadinggif=(function(){ //preload and ref ajax loading gif
var loadgif=new Image()
return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent()
for (var i=0; i<setting.imagearray.length; i++){ //preload slideshow images
preloadimages[i]=new Image()
if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
jQuery(preloadimages[i]).bind('load error', function(){
if (loadedimages==setting.imagearray.length){
dfd.resolve() //indicate all images have been loaded
var slideshow=this
var setting=slideshow.setting
setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV
if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
.css({position:'absolute', left:0, top:0})
setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif
setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects
setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects
if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
.bind('mouseover mouseout', function(e){
$(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})
.bind('click', function(e){
slideshow.navigate(keyword) //assign behavior to nav images
dfd.done(function(){ //execute when all images have loaded
setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})
setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})
slideshow.showslide(setting.curimage) //show initial slide //trigger oninit() event
$(window).bind('unload', function(){ //clean up and persist
if (slideshow.setting.persist) //remember last shown image's index
simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
jQuery.each(slideshow.setting, function(k){
if (slideshow.setting[k] instanceof Array){
for (var i=0; i<slideshow.setting[k].length; i++){
if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
}) //end deferred code
}) //end jQuery domload
this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number
if (!isNaN(parseInt(keyword))){
else if (/(prev)|(next)/i.test(keyword)){
else{ //if play|pause button
var slideshow=this
var $playbutton=$(this.setting.navbuttons).eq(1)
if (!this.setting.ispaused){ //if pause Gallery
$playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})
else if (this.setting.ispaused){ //if play Gallery
this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])
$playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]})
var slideshow=this
var setting=slideshow.setting
var totalimages=setting.imagearray.length
var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
: Math.min(keyword, totalimages-1)
setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
setting.gallerylayers[setting.bglayer].innerHTML=null //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)
try{, setting.gallerylayers[setting.fglayer], setting.curimage)
alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
if (setting.autoplay[0]){
if (setting.currentstep<=setting.totalsteps)
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])
}) //end callback function
setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background
setting.bglayer=(setting.bglayer==0)? 1 : 0
setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length
if (setting.imagearray[imgindex][3]){ //if this slide contains a description
else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)
var setting=this.setting
var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)
var setting=this.setting
var endpoint=(state=="show")? 0 : -setting.descpanelheight
setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'
layerHTML+=(imgelement[1])? '</a>' : ''
return layerHTML //return HTML for this layer
var interfaceHTML=''
for (var i=0; i<3; i++){
var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0)
var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next')
var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i]
interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> '
interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>'
setting.$navpanel=$('<div class="navpanellayer"></div>')
.css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'})
$('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})
.eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div
.eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div
return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects
setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>')
.css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})
.find('div').css({position:'absolute', left:0, top:0, width:'100%'})
.eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div
.eq(1).css({color:'white'}).end() //"gallerydescfg" div
var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')
setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'})
return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
setCookie:function(name, value){
document.cookie = name+"=" + value + ";path=/"
<script type="text/javascript">
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["URL Gambar Anda (1)", "URL Yang Akan Dituju", "_new", "Descripsi Gambar Anda"],
["URL Gambar Anda (2)", "URL Yang Akan Dituju", "_new", "Descripsi Gambar Anda"],
["URL Gambar Anda (3)", "URL Yang Akan Dituju", "_new", "Descripsi Gambar Anda"],
["URL Gambar Anda (4)", "URL Yang Akan Dituju", "_new", "Descripsi Gambar Anda"],
["URL Gambar Anda (5)", "URL Yang Akan Dituju", "_new", "Descripsi Gambar Anda"]
autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
<div id="simplegallery1"></div>

  1. Kode Yang Berwarna Merah adalah Ukuran Dari Galeri Gambar, 300 adalah lebar dari Galeri Gambar, Dan 200 adalah Tinggi Galeri Gambar.
  2. Kode Yang Berwarna Kuning adalah URL dari gambar galeri, dan ubahlah dengan url gambar anda.
  3. Kode Yang Berwarna Hijau adalah URL yang akan dituju, Ganti dengan URL dimana Gambar Berasal.
  4. Kode Yang Berwarna Biru adalah Descripsi dari Gambar atau Judul dari gambar.
  5. Jika Anda ingin mengubahkan Jenis dari Galeri Gambar tidak ingin berjalan otomatis ganti kode true dengan false , dan jika ingin mengubah waktu dari Gambar Berjalan ganti kode 2000 dengan yang waktu yang anda mau.
  6. Dan untuk menambahkan Kapasitas Gambar Tambahkan Kode Berikut ini dibawah kode imagearray: [ :
["URL Gambar Anda (1)", "URL Yang Akan Dituju", "_new", "Descripsi Gambar Anda"],
  • Setelah itu, Klik Tombol Simpan.

Selamat Mencoba,
Salam Sukses,

Irsyad Aslam
Cara Membuat Widget Galeri Gambar Dilengkapi Dengan Tombol Kontrol - written by Irsyad Aslam , published at 3/30/2013, categorized as Widget . And has 27 komentar
27 komentar Add a comment
mas agar gambarnya pas ditengah gimana caranya?
Untuk Gambar yang ingin dipasang,
Terlebih dahulu anda kecilkan atau besarkan agar sesuai dengan lebar widget galeri diatas agar posisinya ditengah,

Salam Sukses,
Reply Delete
mas contoh cara mengganti url gambar dan url yg dituju doong...masih bingung nich. trims
Maksud dari tulisan url gambar dan url yang dituju ini adalah alamat dari gambar dan alamat yang dituju dari gambar, seperti berikut :
["", "", "_new", "Ini Adalah Contoh Deskripsi"],

Semoga Berhasil,
Salam Sukses,

Reply Delete
bro,,, cm bisa di satu gadget yah? soal'a ane pasang di banyak gadget sidebar,, yg berfungsi cm 1.. gmn cara'a biar setiap nambah gadget, slideshow foto ini berfungsi,, yg ga hanya 1 aja..
mohon petunjuk.. :(
Iyah, masalah ini terjadi karena penulisan Kode CSS dan Javascript yang sama, Namun, Untuk Kedua-duanya bisa bekerja anda hanya mengganti nama simplegallery1 dengan simplegallery2, dan seterusnya, pada Kode CSS dan Javascript, Dengan Bantuan tools pencari (CTRL+F),

Selamat Mencoba dan semoga berhasil,
Salam Sukses,

Reply Delete
Salam silaturahmi, Trims, Sangat membantu saya (Bloger pemula. Foto yang ditampilkan baru 5, bagaimana cara menambah foto lagi
Tambahkan Kode berikut ini dibawah kode imagearray: [
["URL Gambar Anda", "URL Yang Akan Dituju", "_new", "Descripsi Gambar Anda"].

Selamat Mencoba, Semoga Berhasil,
Salam Sukses,

Reply Delete
guns kenapa yah kalau yang saya gambarnya gak muncul tapi slide nya ada cuman gak ada gambarnya doang
Mungkin karena Gambar yang terlalu besar, atau terdapat dua plugins Jquery, Jika terdapat dua hapus salah satunya.

Salam Sukses,

Reply Delete
Om gmn cara supaya slide hanya terputar di halaman tertentu ? Thanks info nya om
Reply Delete
Tambahkan Tags Conditional, pada kode diatas, dari atas hingga akhir kode, Tags Conditional bisa searching di google,

Salam sukses,

Reply Delete
Thanks infonya bro,setelah berkeliling kesana kemari mencari tampilan galery gambar untuk diterapkan di blog,akhirnya saya jatuh hati sama tampilan galeri seperti contoh diatas.
Reply Delete
thx infonya
salam kenal
Reply Delete
mantap mas..thanks infonya
Reply Delete

Visit :

Koleksi foto artis indonesia
Reply Delete
gambar url itu maksudnya gimana? kan gambarnya dari laptop gtu?
Reply Delete
makasih yah atas informasinya, jangan lupa kunjungi blog aku juga.
Reply Delete
Rekomendasi 2016:
Reply Delete
Sebenarnya tidak masalah dengan apa yang terjadi, tetapi menurut saya informasi seputar []
sangat bermanfaat.

Domino qq | Dominoqq Online | Agen Bandar Q | BandarQ Online |
Reply Delete
Terimakasih gan, berhasil slidenya
Reply Delete
sangat bermanfaat silahkan kunjungi Vrand Computer Bekasi - Solution Your IT Jasa Service Komputer di bekasi - Jasa Service Printer dibekasi - Instalasi Jaringan - LAN - WAN - MAN - Troubleshooting - Maintenance
Reply Delete
Terima kasih...
Sangat bermanfaat...
Reply Delete


• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Cancel Reply


Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger