Mini Galeria Profissional Para Blogger

Nesta postagem compartilho com vocês está mini galeria com imagens. Esta mini galeria pode facilitar muito a divulgação de algumas imagens das suas postagens, assim você pode divulgar as postagens mais conhecidas do seu site. Acho até interessante você colocar alguns banners de site parceiros, ficaria também muito legal.

Espero que gostem!!!

Para colocá-la no blogger, entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrado a tag, cole ACIMA dela o seguinte código

/*Mini Galeria Profissional By DicasHot*/
#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;
}

Tendo colado o código, salve e fecha a parte e edição HTML.

Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<script type="text/javascript" >

var simpleGallery_navpanel={
 loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRTRDErAASCzO76JsEWu5fMs_-T5QwuOXHELNH62A9YeGwL_wxiDr7ILa9Oxcmxulg9Qvor9DPlm0wwn5BjX-6yZpEAsRRZx0t3ebT56gPJFhCt9QvwxsUcoJHeWggNc2vuuI70rhm3U/s400/ajaxload.gif', //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: [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkqTwPlKfpgppO_S6juOCmibZCj9RiztOr-pO4beGA7YGlJCFvxLZbk0kX3Gni5aakw5R4SNnhXAnZggjGyoqE28aa4hkV1uKSrZdDjBqlggMbe1Eldn5nEcC7EfB5EuX5dQNMhLu_nlY/s400/left.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZG0rpWR79KSv2v-1IaIFmONw01XU-bl7B3IFs23NLMEHtMoExMMb8Fz6tROvpmAh1zMlS0KElqkE6La6XGKAqapobIvBZFab5Z5rL_HKwB1fMra3mvuQo8yOTv6faySsl5pEQwxs0RDw/s400/play.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV8HRTfdVhMC_MOVr8z8KwFRKK9Dw-jg1jFBbkUbyeDKFGdaG8oTUbENKqRFXZTidv6jwyaVPq1TRbnM4jo6QkbbpH4Omsvq3P9zryGvLjR_C5W1-nvSATzmWLhmEDruAMpmahYH2p8f4/s400/right.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi23Hr5LfkRPmFhFXJlb6cnAMuVZAnrvu9SARCO5YYNW-uLviwvPTAk7cLiZbuU6r-X6vfoQCy8b0UPM8AGghBjtDZHuysypGtWfX-d6agcA5ZLXDLllceQKRs3L5LlBHLSZbyiNmNRRvY/s400/pause.gif'], //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){
 this.setting=settingarg
 settingarg=null
 var setting=this.setting
 setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)
 setting.fadeduration=parseInt(setting.fadeduration)
 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()
  loadgif.src=simpleGallery_navpanel.loadinggif
  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()
  preloadimages[i].src=setting.imagearray[i][0]
  if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
   setting.longestdesc=setting.imagearray[i][3]
  jQuery(preloadimages[i]).bind('load error', function(){
   loadedimages++
   if (loadedimages==setting.imagearray.length){
    dfd.resolve() //indicate all images have been loaded
   }
  })
 }
 var slideshow=this
 jQuery(document).ready(function($){
  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.")
   return
  }
  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})
   .appendTo(setting.$wrapperdiv)
  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)
   setting.descdiv=simpleGallery.routines.adddescpanel(setting)
  $(setting.navbuttons).filter('img.navimages').css({opacity:0.8})
   .bind('mouseover mouseout', function(e){
    $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})
   })
   .bind('click', function(e){
    var keyword=e.target.title.toLowerCase()
    slideshow.navigate(keyword) //assign behavior to nav images
   })
  dfd.done(function(){ //execute when all images have loaded
   setting.$loadinggif.remove()
   setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})
   setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})
   slideshow.showslide(setting.curimage) //show initial slide
   setting.oninit.call(slideshow) //trigger oninit() event
   $(window).bind('unload', function(){ //clean up and persist
    $(slideshow.setting.navbuttons).unbind()
    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
        slideshow.setting[k][i].innerHTML=null
       slideshow.setting[k][i]=null
      }
     }
     if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
      slideshow.setting[k].innerHTML=null
     slideshow.setting[k]=null
    })
    slideshow=slideshow.setting=null
   })
  }) //end deferred code
 }) //end jQuery domload
}

simpleGallery.prototype={

 navigate:function(keyword){
  clearTimeout(this.setting.playtimer)
  this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number 
  if (!isNaN(parseInt(keyword))){
   this.showslide(parseInt(keyword))
  }
  else if (/(prev)|(next)/i.test(keyword)){
   this.showslide(keyword.toLowerCase())
  }
  else{ //if play|pause button
   var slideshow=this
   var $playbutton=$(this.setting.navbuttons).eq(1)
   if (!this.setting.ispaused){ //if pause Gallery
    this.setting.autoplay[0]=false
    $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})
   }
   else if (this.setting.ispaused){ //if play Gallery
    this.setting.autoplay[0]=true
    this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])
    $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]})
   }
   slideshow.setting.ispaused=!slideshow.setting.ispaused
  }
 },

 showslide:function(keyword){
  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[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex])
  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:
    clearTimeout(setting.playtimer)
    setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)
    try{
     setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage)
    }catch(e){
     alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
    }
    setting.currentstep+=1
    if (setting.autoplay[0]){
     if (setting.currentstep<=setting.totalsteps)
      setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])
     else
      slideshow.navigate("play/pause")
    }
   }) //end callback function
  setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background
  setting.fglayer=setting.bglayer
  setting.bglayer=(setting.bglayer==0)? 1 : 0
  setting.curimage=imgindex
  setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length
  if (setting.imagearray[imgindex][3]){ //if this slide contains a description
   setting.$descpanel.css({visibility:'visible'})
   setting.descdiv.innerHTML=setting.imagearray[imgindex][3]
  }
  else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)
   setting.descdiv.innerHTML=null
   setting.$descpanel.css({visibility:'hidden'})

  }
 },

 showhidenavpanel:function(state){
  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)
   this.showhidedescpanel(state)
 },

 showhidedescpanel:function(state){
  var setting=this.setting
  var endpoint=(state=="show")? 0 : -setting.descpanelheight
  setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)
 }
}

simpleGallery.routines={

 getSlideHTML:function(imgelement){
  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
 },

 addnavpanel:function(setting){
  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'})
   .appendTo(setting.$wrapperdiv)
  $('<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
   .appendTo(setting.$navpanel)
  return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects
 },

 adddescpanel:function(setting){
  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
   .eq(2).html(setting.longestdesc).end().end()
   .appendTo(setting.$wrapperdiv)
  var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')
  setting.descpanelheight=$gallerydesctext.outerHeight()
  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
 },

 getCookie:function(Name){ 
  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>

<script type="text/javascript">

var mygallery=new simpleGallery({
 wrapperid: "simplegallery1", //ID of main gallery container,
 dimensions: [300, 222], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [


["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKWtSTy-saWcqgzrPtXDXLuGQPiHOyH3G0rsxS2ojNK6XWGfEs5ExBpl3v-cBm0W82sIOIZvDhnBQj38uQwMuc_Jd3MI7VC3JBtPzoGBr99sy74zPbdH8oCUYPPFOT7Jp8MBP5d4DkFU/s1600/DicasHot+Compartilhe.png","http://dicashot.blogspot.com", "_new", "DicasHot"],

["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfONhszloG6Z8r20FpmpNAVuu_q6IQylXGAANiqw7CT1a79K-JXbS_iLEJaX0gu1XJnFDFHot7Z0VqjhXKfx0-p2JTiOB20qH1g5OTAoJtkGRPzQ8PzVcUjdfi6jxhznEnVhItercvbc/s1600/DicasHot+2.png","http://dicashot.blogspot.com.br/", "_new", "DicasHot"],


["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0PgOe137eZ5dneHzxPNO0IRUqgosM9qiMWk26scnCHVXPBvev_o0a9Pm6vE-g81BfrUjvanpYyGCPK2gVT_u_MKmf1sTQcpXcK5IfaahoHokkOXstPeRYOeliy3KzMyVPcK6zd-NbeQ/s1600/DicasHot+3.png","http://dicashot.blogspot.com.br/", "_new", "DicasHot"],


["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0hnuGO7t7kF0hsQ9oeIwer9YZc6uwacEvXlybJ0MLFA4nYoXSGFAOSKqb4VnKvS26M6gtmh6NLzygwtuH1wF4WW4LOHyfli5vTeUX98qhXIBHdAJdjEJPP0yEFg-CEN7XCSJayH9WlwQ/s1600/DicasHot+4.png","http://dicashot.blogspot.com.br/", "_new", "DicasHot"],


  ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxYk9opUsN1pgQnoJeeDzM00MprWb7RrLWsoesO5PhVsLqizuQ-4xX1qDA7usgV6uh0gylyrC8GUN-vr9-2B2_hhxND9G0KXPc5MJCeKQEtWw6jub98EnHgsqtVt3EqJ_mg2mELH2gf0/s1600/DicasHot+5.png", "http://dicashot.blogspot.com.br/", "_new", "DicasHot"],


["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3H5lUqE3hjr93i6WAaQMPjz3VseB6paomR6jZVc2tjgL8WzuI8y957ls8i8iRRbOmftiCkE8HWa7CDSHxMeS7vlPy8LWEXdeY6A_FWBdZjGrsjcBhR5u2hF44MoSohMCyL0LPzqJK3is/s1600/DicasHot+6.png","http://dicashot.blogspot.com.br/", "_new", "DicasHot"],


 ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkbUfkLjXfOYamrFFS23SHij83Mnqw4_7oCLJAWQl_dTmdr7VtItHw6KnypSXBDCsZxKPDwDoIFq05ErM5rMiwbd5iQh21R5RSnXHZgELVYo4n_1-s7ZGJY_GW9JNkkFl9M-dp74hLAZY/s1600/DicasHot+8.bmp", "http://dicashot.blogspot.com.br/", "_new", "DicasHot"],

  ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3H5lUqE3hjr93i6WAaQMPjz3VseB6paomR6jZVc2tjgL8WzuI8y957ls8i8iRRbOmftiCkE8HWa7CDSHxMeS7vlPy8LWEXdeY6A_FWBdZjGrsjcBhR5u2hF44MoSohMCyL0LPzqJK3is/s1600/DicasHot+6.png","http://dicashot.blogspot.com.br/", "_new", "DicasHot"],


["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0hnuGO7t7kF0hsQ9oeIwer9YZc6uwacEvXlybJ0MLFA4nYoXSGFAOSKqb4VnKvS26M6gtmh6NLzygwtuH1wF4WW4LOHyfli5vTeUX98qhXIBHdAJdjEJPP0yEFg-CEN7XCSJayH9WlwQ/s1600/DicasHot+4.png", "http://dicashot.blogspot.com.br/", "_new", "DicasHot"],

  ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxYk9opUsN1pgQnoJeeDzM00MprWb7RrLWsoesO5PhVsLqizuQ-4xX1qDA7usgV6uh0gylyrC8GUN-vr9-2B2_hhxND9G0KXPc5MJCeKQEtWw6jub98EnHgsqtVt3EqJ_mg2mELH2gf0/s1600/DicasHot+5.png","", "_new", "DicasHot"],



  ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0PgOe137eZ5dneHzxPNO0IRUqgosM9qiMWk26scnCHVXPBvev_o0a9Pm6vE-g81BfrUjvanpYyGCPK2gVT_u_MKmf1sTQcpXcK5IfaahoHokkOXstPeRYOeliy3KzMyVPcK6zd-NbeQ/s1600/DicasHot+3.png", "http://dicashot.blogspot.com.br/", "_new", "DicasHot"]

 ],
 autoplay: [true, 2000, 50], //[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)
 }
})

</script>

<div id="simplegallery1"></div>

Tendo colado o código, faça as modificações colocando as imagens de sua preferência.

Tendo feito isto, está pronto!!!

Veja uma breve demonstração:

Deixe seu comentário.