Come copiare facilmente il codice javascript e css dal mio blog by Iole

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>