<br><center><iframe src="http://www.free-blog-content.com/Calendars/calendar0024.htm" width="180" height="352"
marginwidth="0" marginheight="0" frameborder="no" scrolling=no allowtransparency="true"></iframe></center>
<center><a style="font-size: 3mm" href="http://www.free-blog-content.com/"></a></center></br>
<br><center><iframe src="http://www.free-blog-content.com/Calendars/calendar0025.htm" width="167" height="337"
marginwidth="0" marginheight="0" frameborder="no" scrolling=no allowtransparency="true"></iframe></center>
<center><a style="font-size: 3mm" href="http://www.free-blog-content.com/"></a></center></br>
marți, 4 decembrie 2012
Calendare pentru blog sau site
Generator de butoane pentru blog sau site
Cei care nu au habar in utilizarea programelor de grafica, ca mine, va sugerez un serviciu online care va poate ajuta in construirea butoanelor necesare unui blog sau site.
TheFreeWebStuff este un site ce are la baza un generator de butoane online cu ajutorul caruia poti face un buton in cateva secunde.
Utilitatea unui buton care incorporeaza o functie, de regula un link ,trebuie sa tina seama de particularitatile paginii pe care butonul sau bannerul trebuie incadrat, de care noi vom tine cont.
Aici gasesti Generator de butoane Web 2.0-gratuit The Free Web Stuff
Buton contor de vizite online
Sigur ca ai vazut un buton de genul acesta pe multe bloguri sau
site.Acest widget arata in timp real cati vizitatori sunt conectati pe
blog in orice moment si de asemenea ai posibilitatea de a urmari
statisticile 24h din 24h. Pentru a obtine codul html mergi WhosAmung
copiezal si il insertezi in blog unde doresti sa apara. Daca nu vrei un
wiget static atunci poti sa alegi alt model dintre cele oferite de WhosAmurg showcase.
Butoane, imagini, link-uri sau bannere in rotatie
Iata un scripts pentru butoane, imagini, link-uri sau bannere in rotatie
O modalitate de rotire intr-un timp prestabilit a unor bannere sau
imagini (cu lunk-urile aferente) pe un spatiu cat mai redus este
posibila folosint un script specializat.Un exemplu il poti vedea in
partea dreapta sus a blog-ului.
Acest lucru poate servi pentru a afişa o listă de link-uri de orice fel, fără a lua spaţiu prea mult şi fără a da prioritate unuia dintre ele: (un blogroll, un număr de bannere publicitare, butoane sau doar cateva imagini).
==============================================Acest lucru poate servi pentru a afişa o listă de link-uri de orice fel, fără a lua spaţiu prea mult şi fără a da prioritate unuia dintre ele: (un blogroll, un număr de bannere publicitare, butoane sau doar cateva imagini).
<script type="text/javascript">
var ban = new Array();
var enl = new Array();
var indice = 0;
ban[0] = new Image();
ban[0].src = "URL IMAGINE1";
enl[0] = "URL LINK1";
ban[1] = new Image();
ban[1].src = "URL IMAGINE2";
enl[1] = "URL LINK2";
ban[2] = new Image();
ban[2].src = "URL IMAGINE3";
enl[2] = "URL LINK3";
indice = Math.random() * (ban.length);
indice = Math.floor(indice);
function rota()
{if (indice == ban.length) indice = 0;
if (document.images) {
document.images.rotando.src = ban[indice].src;
}
else {
document.getElementById('rotando').src=ban[indice].src;
}
indice++;
setTimeout('rota()',2000);
}
function vete() {window.open(enl[indice-1]);}
</script>
<img id="rotando" style="cursor:pointer;" src="" onclick="vete();"/>
<script type="text/javascript">rota();</script>
====================================================
2000 este valoarea în timp în milisecunde (2 secunde)de aştepte înainte
de afişarea urmatoarei imagini. Aveţi posibilitatea să modificaţi
această valoare, cu alta pe care o doresti.
Si in ultimul rand trebuie sa schimbi URL IMAGINE1,URL IMAGINE2,URL IMAGINE3 cu url-urile de imagine care doresti sa fie afisate,de asemenea inlocuieste URL LINK1,URL LINK2,URL LINK3, cu cel care vrei sa insoteasca imaginea respectiva.
Acest script il poti folosi intr-un badget HTML
Si in ultimul rand trebuie sa schimbi URL IMAGINE1,URL IMAGINE2,URL IMAGINE3 cu url-urile de imagine care doresti sa fie afisate,de asemenea inlocuieste URL LINK1,URL LINK2,URL LINK3, cu cel care vrei sa insoteasca imaginea respectiva.
Acest script il poti folosi intr-un badget HTML
Butoane de retele sociale pe blog
Iata un gadget de retele socializare.
Penttru
instalarea gadget-ului pe bara laterala a blogul-lui tau trebuie doar
sa copiezi codul de mai jos si sa il adaugi intr-un nou element
HTML/Javascript.
inlocuieste ce apare in culoarea rosu cu url respectivelor retele
tot ce este in culoarea albastru inlocuiestel cu url fiecarei imagini ale retelei .
Penttru
instalarea gadget-ului pe bara laterala a blogul-lui tau trebuie doar
sa copiezi codul de mai jos si sa il adaugi intr-un nou element
HTML/Javascript.<div id="marcadores-sociales" style="text-align:center;">Modificari care trebuiesc realizate:
<a class="rss" href="URL_DE_FEED" target="_blank" title="Inscriete"><img src="URL_ICON_RSS" /></a><a class="twitter" href="URL_DE_LA_PAGINA_TA_IN_TWITTER" target="_blank" title="Vino in Twitter"><img src="URL_ICON_TWITTER" /></a><a class="facebook" href="URL_DE_LA_PAGINA_TA_IN_FACEBOOK" target="_blank" title="Sunt si in Facebook"><img src="URL_ICON_FACEBOOK" /></a><a class="technorati" href="http://technorati.com/account/signup/" target="_blank" title="Technorati Favorito"><img src="
URL_ICON_TECHNORATI" /></a><a class="youtube" href="URL_DE_LA_CANAL_IN_YOUTUBE" target="_blank" title="Mi canal en Youtube"><img src="URL_ICON_YOUTUBE" /></a></div>
<style type='text/css'>
a.rss img {opacity:0.8;}
a.rss:hover img {opacity:1;}
a.twitter img { opacity:0.8;}
a.twitter:hover img { opacity:1;}
a.facebook img { opacity:0.8;}
a.facebook:hover img { opacity:1;}
a.technorati img { opacity:0.8;}
a.technorati:hover img { opacity:1;}
a.youtube img { opacity:0.8;}
a.youtube:hover img { opacity:1;}
</style>
inlocuieste ce apare in culoarea rosu cu url respectivelor retele
tot ce este in culoarea albastru inlocuiestel cu url fiecarei imagini ale retelei .
Cum sa indexezi site-ul sau blog-ul in Google
Dupa ce "ne chinuim putin" sa facem un site nau, sau un blog nou, ne dorim ca motoarele de cautare sa-l indexeze
cat mai repede. Timpul de indexare variaza de la cateva ore pana la
cateva saptamani. Exista mai multe metode pentru
indexare a site-ului: comentarii pe bloguri, schimb de link, etc. Metoda
descrisa aici este una simpla. Va aduce un trafic bun.
URLOpener va deshide fiecare site intr-o fila noua, va trebui sa asteptam pana cand acestea sunt incarcate si vom obtine o evaluare a site-ului tau. Acum poti inchide toate filele.
Treaba este ca noi ne
„evaluam” site-ul nostru pe resurse ca DIRECTOARE WEB unde îi putem vedea valoarea: - valoarea sa, PR-ul, etc. Aceste resurse au PR (Page Rank) destul
de mare si sunt indexate destul de repede de catre Google. Prin urmare,
de fiecare data cand „evaluezi” site-ul tau pe aceste resurse, acestea
creeaza o noua pagina cu rezultate, cu un link catre site-ul tau, iar
datorita faptului ca resursa are o valoare mare, ea se indexeaza repede,
respectiv si link-ul catre site-ul tau se indexeaza repede. In acest
fel obtii rezultatul dorit – indexare rapida a site-ului.
Iata metoda:
Copiem din lista toate link-urile intr-un editor de text (Notepad sau
Word). Inlocuim „freeseodesign.blogspot.com” cu URL site-ului pe care
vrei sa-l indexezi.
websitevaluebot.com/www.freeseodesign.blogspot.com
|
Acum trebuie sa deschizi toate link-urile, dar daca vei deschide cate un link, o sa te apuce noaptea... sau dimineata. Mai bine mergem merge aici, copiem link-urile modificate din editorul de text in spatiu oferit si facem clic pe butonul Submit => Open all.
URLOpener va deshide fiecare site intr-o fila noua, va trebui sa asteptam pana cand acestea sunt incarcate si vom obtine o evaluare a site-ului tau. Acum poti inchide toate filele.
Cam asta e tot. Dureaza doar cateva minute, iar rezultatul nu se va lasa asteptat.
LIKE???
+1???
Blogroll slider
Acest Blogroll slider a fost realizat de un designer din Pakistan, autorul blogului My Blogger Tricks. El a creat o galerie slider, care consta dintr-un singur cod.
De fapt, fost creat un widget compatibil cu Blogger, pe care il puteti transforma in blogroll. In plus, acest slider poate avea multiple functionalitati.
Atunci cand punem cursorul mouse-ului pe imagine, in partea de sus a imaginii apare o eticheta. Fiecare imagine = un link activ catre o anumita pagina. Vizualizarea poate fi manuala sau automata.
INSTALARE
1. Intram in Tablou de bord - Design - Editati HTML
2. In fereastra oferita selectam “HTML/JavaScript”
in care inseram acest cod:
3. Facem modificari personale in cod (o sa vedeti mai jos) si salvam
4. Tragem widget-ul in locul dorit si iar salvam
Acum despre modificarile personale ale codului. Autorul a creat sliderul de dimensiuni 300 pixeli latime si 200 pixeli inaltime (se poate schimba). Recomand sa pregatesti imaginile in Photoshop. In cazul in care nu ai Photoshop poti sa te folosesti de alternative gratuite la Photoshop: Gimp, GIMPshop, Pixlr, Paint.net, Splashup, Pixia, Photoshop Express.
Apoi incarci imaginile intr-un serviciu gratuit de gazduire imagini (cum ar fi Picasa)
a) In loc de “IMAGE LINK” punem URL-ul imaginei
b) In loc de “#” URL-ul blogului
c) In loc de “DESKRIPTION” descrierea bloglui la care se face referire, care va fi vizibila cand se trece cu cursorul
d) Valoarea 2000 determina viteza de shimbare a imaginei (pui cat vrei: 3000, 4000, 5000)
Slider-ul are o multime de posibilitati. Putem, de exemplu, sa arata cititorilor cele mai bune articole ale noastre (postari, poze), sau alte proiecte.
Like???
+1???
De fapt, fost creat un widget compatibil cu Blogger, pe care il puteti transforma in blogroll. In plus, acest slider poate avea multiple functionalitati.
Atunci cand punem cursorul mouse-ului pe imagine, in partea de sus a imaginii apare o eticheta. Fiecare imagine = un link activ catre o anumita pagina. Vizualizarea poate fi manuala sau automata.
INSTALARE
1. Intram in Tablou de bord - Design - Editati HTML
2. In fereastra oferita selectam “HTML/JavaScript”
in care inseram acest cod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></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: 14px normal verdana, arial; } </style> <script type="text/javascript" > var simpleGallery_navpanel={ loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOHbFQ-JISO9USXjwF9_Kqya9t-ppbcGPXPqZh_Qqew-bXgSpAfxOJx8e-O7bXbZll9PwxIYD79Yv0_rBlP6NL3wOILbvsM0tBjpaaL8VaAcHvWhl1tNmHh4VjccUkPnG6ZMdeMSTig8/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/AVvXsEjX1W5qmaZ9z_6d0Ldo7EB1abL3PVv9wQVZN3qRMJ3TCMlh0tkTjkLkVGOCCoZ9LTEQeqFKfqmI0gX2jHNj_blB11GgByEW2_RrGCybMVCplYUD_PNBzG605SIM0E6snr9pNjyT_BCVZYI/s400/left.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBb7JwVgs2-6FUB6r35ic67pDso6Abv1vTDJ_m1MpzWQC6fXTkPWXWe30jlZjZrJmm4J2eaMLIwT6aMgHwbB-PvjxlUy0dk74b1XfvwpOTI76QHXqUZw2U9N3t6ME0ESKd-nUX6K-7ZK4/s400/play.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxxixVyhOkuRqAJFIV23L5tFVF-4HjdZ9C9GMssfcD2nB1IKHo0VRWIw-09dwc_ykP8So6MqEYuqkh9SM_x6Zc19ppXjUApFKdf0vpq8p1uS4qXLjk-OqpdMlSmC83Sw442Ct0TIK_pg/s400/right.gif', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGkGlQEytKN8KJ1WHrKqtHQQPc9oUhvH1AqK9CQeKOnkpV4BzRX2K71WL7Bck24RQyxKtg90ZYnOiclwDLfx264I4jHzHI17Wv56Pl0syAZlVgQCuCHLcszhGofj6wE4fH3KNDZ7ruK6M/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, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly imagearray: [ ["https://lh4.googleusercontent.com/-Q1AgZDuw7yI/Ty6RWtQzTFI/AAAAAAAABaA/6vy43bUCwig/s800/freeseodesign.JPG", "http://freeseodesign.blogspot.com/", "_new", "FreeSeoDesign"], ["IMAGE LINK 1", "#", "_new", "DESCRIPTION"], ["IMAGE LINK 2","#", "_new", "DESCRIPTION"], ["IMAGE LINK 3", "#", "_new", "DESCRIPTION"], ["IMAGE LINK 4", "#", "_new", "DESCRIPTION"] ], 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) } }) </script> <div id="simplegallery1"></div> |
3. Facem modificari personale in cod (o sa vedeti mai jos) si salvam
4. Tragem widget-ul in locul dorit si iar salvam
Acum despre modificarile personale ale codului. Autorul a creat sliderul de dimensiuni 300 pixeli latime si 200 pixeli inaltime (se poate schimba). Recomand sa pregatesti imaginile in Photoshop. In cazul in care nu ai Photoshop poti sa te folosesti de alternative gratuite la Photoshop: Gimp, GIMPshop, Pixlr, Paint.net, Splashup, Pixia, Photoshop Express.
Apoi incarci imaginile intr-un serviciu gratuit de gazduire imagini (cum ar fi Picasa)
a) In loc de “IMAGE LINK” punem URL-ul imaginei
b) In loc de “#” URL-ul blogului
c) In loc de “DESKRIPTION” descrierea bloglui la care se face referire, care va fi vizibila cand se trece cu cursorul
d) Valoarea 2000 determina viteza de shimbare a imaginei (pui cat vrei: 3000, 4000, 5000)
Slider-ul are o multime de posibilitati. Putem, de exemplu, sa arata cititorilor cele mai bune articole ale noastre (postari, poze), sau alte proiecte.
Like???
+1???
Abonați-vă la:
Postări (Atom)