9 febbraio 2009

11 commenti Condividi il post Facebook Twitter Google+

Come copiare facilmente il codice javascript e css dal mio blog

Qualche giorno fa ho pubblicato un post su Come inserire il numero di pagine in Blogger contenente il codice javascript e css da utilizzare per far apparire nel vostro blog il numero di pagine per una facile navigazione.
Per evitare di scrivere un post chilometrico incollando i due listati di codice, ho preferito creare due file, caricarli su Yahoo e pubblicare solo i link dei file.

Il post appariva in questo modo:

...basta inserire il codice css che trovate in questo file...

In molti però mi avete contattato per segnalarmi che non riuscivate ad aprire i file in quanto Yahoo era temporaneamente non disponbile. Temporaneamente si fa per dire... è stato così tutta la settimana!

Ho pensato allora di inserire i due listati di codice all'interno della pagina, in questo modo:

.showpageArea { margin-top: 12px; margin-bottom: 10px; }
.showpageArea a { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #9B0021 solid; color: #9B0021; padding: 3px; margin-left: 5px; background: #F9D6DD;}
.showpageArea a:hover { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #F9D6DD solid; color: #F9D6DD; padding: 3px; margin-left: 5px; background: #9B0021; }
.showpageNum a { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #9B0021 solid; color: #9B0021; padding: 3px; margin-left: 5px; background: #F9D6DD; }
.showpageNum a:hover { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #F9D6DD solid; color: #F9D6DD; padding: 3px; margin-left: 5px; background: #9B0021; }
.showpagePoint { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; border: 1px #F9D6DD solid; color: #F9D6DD; padding: 3px; margin-left: 5px; background: #9B0021; }
.showpageTot { font-size: 12px; font-weight: normal; text-align: center; text-decoration: none; color: white; }

Questa soluzione era solo provvisoria: ho notato che non era molto semplice copiare il codice. Ecco qual è quella che adotterò nei prossimi post e che rimpiazzerà quella dei post già pubblicati: ogni listato di codice (javascript, css, ...) presente nella pagina potrà essere facilmente copiato dal popup che si apre cliccando sul pulsante .

Css Code
  • .showpageArea {
  • margin-top: 12px;
  • margin-bottom: 10px;
  • }
  • .showpageArea a {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #9B0021 solid;
  • color: #9B0021;
  • padding: 3px;
  • margin-left: 5px;
  • background: #F9D6DD;
  • }
  • .showpageArea a:hover {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #F9D6DD solid;
  • color: #F9D6DD;
  • padding: 3px;
  • margin-left: 5px;
  • background: #9B0021;
  • }
  • .showpageNum a {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #9B0021 solid;
  • color: #9B0021;
  • padding: 3px;
  • margin-left: 5px;
  • background: #F9D6DD;
  • }
  • .showpageNum a:hover {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #F9D6DD solid;
  • color: #F9D6DD;
  • padding: 3px;
  • margin-left: 5px;
  • background: #9B0021;
  • }
  • .showpagePoint {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • border: 1px #F9D6DD solid;
  • color: #F9D6DD;
  • padding: 3px;
  • margin-left: 5px;
  • background: #9B0021;
  • }
  • .showpageTot {
  • font-size: 12px;
  • font-weight: normal;
  • text-align: center;
  • text-decoration: none;
  • color: white;
  • }

Javascript Code
  • <script type="text/javascript">
  • function showpageCount(json) {
  • var thisUrl = location.href;
  • var htmlMap = new Array();
  • var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
  • var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
  • var isPage = thisUrl.indexOf("/search?updated")!=-1;
  • var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
  • thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
  • var thisNum = 1;
  • var postNum = 1;
  • var itemCount = 0;
  • var fFlag = 0;
  • var eFlag = 0;
  • var html= '';
  • var upPageHtml = '';
  • var downPageHtml = '';
  • var pageCount = 5;
  • var displayPageNum = 3;
  • var firstPageWord = '<<';
  • var endPageWord = '>>';
  • var upPageWord = '<';
  • var downPageWord = '>';
  • var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
  • for(var i=0, post; post = json.feed.entry[i]; i++) {
  • var timestamp = post.published.$t.substr(0,10);
  • var title = post.title.$t;
  • if(isLablePage) {
  • if(title!='') {
  • if(post.category) {
  • for(var c=0, post_category; post_category = post.category[c]; c++) {
  • if(encodeURIComponent(post_category.term)==thisLable) {
  • if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
  • if(thisUrl.indexOf(timestamp)!=-1 ) {
  • thisNum = postNum;
  • }
  • postNum++;
  • htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
  • }
  • }
  • }
  • }
  • itemCount++;
  • }
  • }
  • else {
  • if(title!='') {
  • if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
  • if(thisUrl.indexOf(timestamp)!=-1 ) {
  • thisNum = postNum;
  • }
  • if(title!='') postNum++;
  • htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
  • }
  • }
  • itemCount++;
  • }
  • }
  • for(var p =0;p< htmlMap.length;p++) {
  • if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)) {
  • if(fFlag ==0 && p == thisNum-2) {
  • if(thisNum==2) {
  • if(isLablePage) {
  • upPageHtml = labelHtml + upPageWord +'</a></span>';
  • }
  • else {
  • upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
  • }
  • }
  • else {
  • upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
  • }
  • fFlag++;
  • }
  • if(p==(thisNum-1)) {
  • html += ' <span class="showpagePoint">'+thisNum+'</span>';
  • }
  • else {
  • if(p==0) {
  • if(isLablePage) {
  • html = labelHtml+'1</a></span>';
  • }
  • else {
  • html += '<span class="showpageNum"><a href="/">1</a></span>';
  • }
  • }
  • else {
  • html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
  • }
  • }
  • if(eFlag ==0 && p == thisNum) {
  • downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
  • eFlag++;
  • }
  • }
  • }
  • if(thisNum>1) {
  • if(!isLablePage) {
  • html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
  • }
  • else {
  • html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
  • }
  • }
  • html = '<div class="showpageArea"><span class="showpage">Pagina '+thisNum+' di '+(postNum-1)+': </span>'+html;

  • if(thisNum<(postNum-1)){
  • html += downPageHtml;
  • html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
  • }
  • if(postNum==1) postNum++;
  • html += '</div>';
  • if(isPage || isFirstPage || isLablePage) {
  • var pageArea = document.getElementsByName("pageArea");
  • var blogPager = document.getElementById("blog-pager");
  • if(postNum <= 2) {
  • html ='';
  • }
  • for(var p =0;p< pageArea.length;p++) {
  • pageArea[p].innerHTML = html;
  • }
  • if(pageArea&&pageArea.length>0) {
  • html ='';
  • }
  • if(blogPager) {
  • blogPager.innerHTML = html;
  • }
  • }
  • }
  • </script>
  • <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
  • <div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

Come al solito si accettano consigli e suggerimenti!
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

11 commenti

  1. Ciao fragolina....sono passata per augurarti con tutto il cuore una dolce notte...uniamoci tutti per una preghiera ad Eluana..baci.

    RispondiElimina
  2. Finalmente Eluana è libera! e anche la sua famiglia!

    RispondiElimina
  3. grazie per il programmino, è molto utile!!

    RispondiElimina
  4. margaretThatcher10 febbraio 2009 10:25

    Concordo pienamente con Anonimo!

    RispondiElimina
  5. puoiCancellareQuestoCommento10 febbraio 2009 12:04

    Carissima, stai tranquillamente tranquilla!

    RispondiElimina
  6. @Alessio: eh già FastStone Capture è veramente utile!
    @tutti i lettori: si prega di lasciare commenti inerenti al post. Per domande, dubbi, saluti ecc potete contattarmi via email!

    RispondiElimina
  7. mi spieghi per piacere come fai a far aprire quelle finestre pop up contenente il codice? Grazie in anticipo!

    RispondiElimina
  8. @Onoff: utilizzando uno script javascript. Di recente ho pubblicato un post su come aprire una finestra popup dal blog, prova a dargli un'occhiata. Se hai bisogno di chiarimenti contattami pure.

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy