2 Navigation codes

Nέοι bloggers γεια σας...σας παρουσιάζω 2 απλά navigation codes με HTML...θα τα βάλετε σαν gadget (αν δεν ξέρετε πως βάζουμε ένα gadget δείτε ΕΔΩ)...


Ο ΚΩΔΙΚΑΣ HTML για το Νο1:

<tbody><tr>
      <td valign="MIDDLE" align="CENTER"> <font face="ARIAL" color="#EE0000">
 <img alt="pick a category and click the CLICK button" border="0" height="24" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVBOtYISR7UwcbHQQ6Ua6cdZ5MdFKYqBz07SUOnIwXAmYWUQU4GEA7JWnD86emHvs9Sqiz6QiGyISSQpS31ULDO6QshNdCF66i9piI0xNOzSoJPYK2tc30saAwPAieQUVoIs9nF_foGXY/s174/navigation-img.gif " width="154"></font>
       </td>
 <td valign="MIDDLE" align="CENTER">
 <font color="#CCCCCC">
<form name="navform" method="POST">
  <select name="inchoice" size="1">

<option value="/index.html" selected="">ΔΙΑΛΕΞΤΕ ΚΑΙ ΠΑΤΗΣΤΕ ΤΟ ΚΟΥΜΠΙ
</option><option value="ΔΙΕΥΘΥΝΣΗ ΑΡΧΙΚΗΣ ΣΕΛΙΔΑΣ">ΑΡΧΙΚΗ ΣΕΛΙΔΑ
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 1">ΤΙΤΛΟΣ ΛΙΝΚ 1
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 2">ΤΙΤΛΟΣ ΛΙΝΚ 2
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 3">ΤΙΤΛΟΣ ΛΙΝΚ 3
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 4">ΤΙΤΛΟΣ ΛΙΝΚ 4
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 5">ΤΙΤΛΟΣ ΛΙΝΚ 5
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 6">ΤΙΤΛΟΣ ΛΙΝΚ 6
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 7">ΤΙΤΛΟΣ ΛΙΝΚ 7
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 8">ΤΙΤΛΟΣ ΛΙΝΚ 8
</option></select>
<input type="button" onclick="location = '' + document.navform.inchoice.options[ document.navform.inchoice.selectedIndex ].value;" value="CLICK HERE">
</form>
</font>
</td>
</tr>
</tbody>

Ο ΚΩΔΙΚΑΣ HTML για το Νο2: (ανοίγει τα link σε νέο παράθυρο)

<center>
<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 240px;" name="menu" size="1">

<option>ΤΙΤΛΟΣ ΤΟΥ NAVIGATION<!-- change the links with your own -->
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 1">ΤΙΤΛΟΣ ΛΙΝΚ 1
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 2">ΤΙΤΛΟΣ ΛΙΝΚ 2
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 3">ΤΙΤΛΟΣ ΛΙΝΚ 3
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 4">ΤΙΤΛΟΣ ΛΙΝΚ 4
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 5">ΤΙΤΛΟΣ ΛΙΝΚ 5
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 6">ΤΙΤΛΟΣ ΛΙΝΚ 6
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 7">ΤΙΤΛΟΣ ΛΙΝΚ 7
</option><option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ 8">ΤΙΤΛΟΣ ΛΙΝΚ 8
</option></select></form>
</center>

***για να επαναλάβετε και να αυξήσετε τα link, επαναλάβετε (και στους 2 κώδικες) τη φράση
<option value="ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ ">ΛΙΝΚ </option>
***όπου  ΔΙΕΥΘΥΝΣΗ ΛΙΝΚ βάλτε το LINK της σελίδας  και όπου  ΤΙΤΛΟΣ ΛΙΝΚ   τον τίτλο της σελίδας
DEMO (2)   δείτε τη σελίδα του Βαγγέλη πόσο ωραία το χρησιμοποιεί (εκεί που λέει "πιάτσες")...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Ευχές για τις γιορτές (gadget)

Νέοι bloggers γεια σας....Η κόρη μου, έφτιαξε χθες ένα πολύ όμορφο πρωτοχρονιάτικο μήνυμα, για το blog της, και σκέφτηκα οτι θα σας άρεσε να το έχετε κι εσείς στο blog σας....Το έφτιαξε στο  http://www.voki.com/  , όπου μπορείτε κι εσείς να φτιάξετε ένα αντίστοιχο δικό σας.....Σήμερα θα σας δώσω έτοιμο το κώδικα για τον Αη-Βασίλη που εύχεται καλά Χριστούγεννα και καλή πρωτοχρονιά !!! Μιλάει και κινείται...
Ο ΚΩΔΙΚΑΣ: (μπαίνει σαν gadget)


<center>Πατήστε play να σας ευχηθώ  <center></center>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMjQ*MTY5NTc5MzcmcHQ9MTMyNDQxNjk3Mzc3MiZwPTk3NTA3MiZkPTAwMCUyMC*lMjBWb2tpJTIwV2lkZ2V*Jmc9/MSZvPWQ3ZDdlYjg1Y2EwMDQ*ZDRiZWUwMDgxMmUzNGFhMzBlJm9mPTA=.gif" /><object height="267" width="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" id="widget_name"><param name="movie" value="http://vhss-d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2F%2Fvhss-d.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm%3Daecd6658bc194db0eb4b65f4f637df23%26sc%3D5072070" /><param name="quality" value="high" /><param name="allowScriptAccess" value="always" /><param name="width" value="200" /><param name="height" value="267" /><param name="allowNetworking" value="all"/><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><embed height="267" width="200" src="http://vhss-d.oddcast.com/vhss_editors/voki_player.swf?doc=http%3A%2F%2Fvhss-d.oddcast.com%2Fphp%2Fvhss_editors%2Fgetvoki%2Fchsm%3Daecd6658bc194db0eb4b65f4f637df23%26sc%3D5072070" quality="high" allowscriptaccess="always" allownetworking="all" wmode="transparent" allowfullscreen="true" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" name="widget_name"></embed></object></center>

ΚΑΛΑ ΧΡΙΣΤΟΥΓΕΝΝΑ ΚΑΙ ΚΑΛΗ ΠΡΩΤΟΧΡΟΝΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Κάθετο Μενου με Εικονίδιο / Vertical Menu with Icons

Νέοι bloggers γεια σας...βρήκα ένα κάθετο μενού με CSS, και κάνοντας μερικές μετατροπές, το έβλεπα να γίνεται χρήσιμο και αρκετά διαφορετικό από τα άλλα...έτσι σκέφτηκα οτι θα μπορούσε να έχει μια χρήσιμη εφαρμογή...στα φιλικά μας banner  !!!Κάτω από το μενού λοιπόν εμφανίζεται ένα εικονίδιο...και το ρύθμισα να βάζω τα φιλικά μου blogs ...Δείτε το
ΕΔΩ...

Ο ΚΩΔΙΚΑΣ  CSS:

<style type="text/css">
<!--
body {position: relative; background: none; margin: 0; padding: 0;}

div#FRIENDS {position: absolute; top: 10px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#FRIENDS a {display: block; text-align: center; font: bold 1em sans-serif;
   padding: 5px 10px; margin: 0 0 1px; border-width: 0;
   text-decoration: none; color: #FFC; background: #000000;
   border-right: 5px solid #505050;}
div#FRIENDS a:hover {color: #8A1C1C; background: #AAA;
   border-right: 5px double white;}

div#FRIENDS a img {height: 0; width: 0; border-width: 0;}
div#FRIENDS a:hover img {position: absolute; top: 190px; left: 55px; height: 70px; width: 80px;}

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: #BAA; background: #22232F;
   font: 13px Verdana, sans-serif; padding: 10px;
   border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #333; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>

Ο ΚΩΔΙΚΑΣ  HTML:

<div id="FRIENDS">
<a target="_blank"  href="ΔΙΕΥΘΥΝΣΗ BLOG">ΤΙΤΛΟΣ<img src="ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ"></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
</div>

***στο DEMO που σας δείχνω, έχω βάλει και τους 2 κώδικες μαζί, σαν gadget
***να σας εξηγήσω μερικά χρήσιμα πράγματα για να το ρυθμίσετε σύμφωνα με τις απαιτήσεις σας...
*τα μεγέθη   height: 70px; width: 80px;  είναι για το μέγεθος της εικόνας...
*το  target="_blank"  το έβαλα για να ανοίγει το λινκ σε νέο παράθυρο...
*στο  background: none  μπορείτε να βάλετε ένα χρώμα background...έβαλα τίποτα, για να μη μπερδευτείτε...
*το background: #000000;  είναι το χρώμα του button ...αλλάξτε και τα άλλα χρώματα
*εάν θέλετε να προσθέσετε κι άλλα banners θα επαναλάβετε τη φράση:
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>  και θα μεγαλώσετε το μέγεθος   top: 190px;   (να πάει πιο κάτω)........
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
Πηγή, Thanks to : meyerweb.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Christmas Gadgets for Blogs

Νέοι bloggers γεια σας!!!Λόγω των γιορτών έκατσα και σας έφτιαξα μερικά gadgets για το blog σας...είναι όλα στατικά, και "ντύνουν" όλες τις πλευρές του...σας δίνω έτοιμο κώδικα για τις επάνω-κάτω-δεξιά-αριστερή πλευρά του blog, και σας εξηγώ και πως να το ρυθμίσετε, για να μη σας κρύβει κουμπιά και link...
DEMO   &  DEMO και επίσης σας έχω μερικά περσινά ΕΔΩ
Μπαίνουν όλα σαν gadget στο  BLOGGER επεξεργασία διάταξης=>Σχεδίαση=>Στοιχεία Σελίδας=>GADGET=>HTML/JavaScript :

Οριζόντιο: επάνω
 <img style="display:scroll;position:fixed;top:-40px;left:-20px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdLIo474GekLDehn9EaTyZCBY4ZBtM8rBL-1_8NtzXaMz_X72Yc6rHJtFGrZFbAiDdXacsibV9CM6RPYkUl0mj1sBwLZiP46AkURhEbD0GELMx_kz-O8UNlZqUsnZmMCiFHp9wuXdYT1A/s1240/christmas%252520garl%2525203%252520horizontal.gif" />

Οριζόντιο: κάτω
<img style="display:scroll;position:fixed;bottom:-40px;left:-20px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdLIo474GekLDehn9EaTyZCBY4ZBtM8rBL-1_8NtzXaMz_X72Yc6rHJtFGrZFbAiDdXacsibV9CM6RPYkUl0mj1sBwLZiP46AkURhEbD0GELMx_kz-O8UNlZqUsnZmMCiFHp9wuXdYT1A/s1240/christmas%252520garl%2525203%252520horizontal.gif" />

Κάθετο δεξιά :

<img style="display:scroll;position:fixed;top:-40px;right:-50px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmeU6kjZRtodVDZwu1N79dp2BIIf0TVpj0JYxbm8no5K8B_8cbaTUiM5boGG2QTB8SdzZpnv8JcHGySc46c0dpv97n15Eq4iBV_kAH1PrEcOrSfxicUMwTC5A0fuKMpw94xvsTPMtpnVk/s1500/christmas%252520garl%2525203%252520vertical.gif" />

Κάθετο αριστερά:
<img style="display:scroll;position:fixed;top:-40px;left:-50px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmeU6kjZRtodVDZwu1N79dp2BIIf0TVpj0JYxbm8no5K8B_8cbaTUiM5boGG2QTB8SdzZpnv8JcHGySc46c0dpv97n15Eq4iBV_kAH1PrEcOrSfxicUMwTC5A0fuKMpw94xvsTPMtpnVk/s1500/christmas%252520garl%2525203%252520vertical.gif" />

***Σας εξηγώ και κάποια σημαντικά στοιχεία του κώδικα....top:-40px; σημαίνει ότι δεν θα φαίνεται κατά 40px...δηλαδή αν θέλετε να το εμφανίσετε περισσότερο μέσα στο blog θα το μειώσετε -30, -20, -10 (δηλ, το "έκρυψα" κατά 40px για να μη σας κρύβει σημαντικά θέματα στο blog...)
***το   left:-50px;   και  right:-50px;  δηλώνουν ότι το "έκρυψα" δεξιά (right) η αριστερά (left) κατά 50px  για να μη σας κρύβει σημαντικά θέματα στο blog...
...έτσι μπορείτε να τα ρυθμίσετε ώστε να κρύβονται λιγότερο η περισσότερο !!!
Κάντε μια δοκιμή και δοκιμάστε το κώδικα στο demo blog μου http://demobloghtml.blogspot.com/
Σας δίνω και μερικές γιρλάντες ακόμα....ΕΔΩ...ΕΔΩ....ΕΔΩ...
Φυσικά, μην τα βάλετε όλα μαζί και γίνει πανηγύρι το blog σας...
***ΕΠΙΣΗΣ=> Μπορείτε να βρείτε πολλά χριστουγεννιάτικα widgets ΕΔΩ
***ΕΠΙΣΗΣ=> Πάρτε και ένα κώδικα για 2 gadgets (χιόνι και χριστ. καμπάνες)(βάλτε το σαν gadget)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS3_bvFOLdQMf60_VTU3o7WZAGGNxl3OdT70h4vslzwsSGcqjkZKyHXEehAPzItk54yQzB72059hLNQ4fmupSdfCUoQAnuhf1kzC-cHKzhHS4dA6tS6kaHLPeT5g7GhkT7ysKBmRj-Vdg/s1600/christmas-bells-icon.png' style='position:absolute; top: 0px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzz8CG0tzgUUPeJ2gOEIprELxZLMWGsPfplwZ1JtXsMf1kXhz8ZmMJdFmCIxRbocFmK9gjMkl_K6szP9nhcRki-2iNBNP3_L8ozN_WmNrLlMcOhx43GqmOwcrYFFdQgNaNAxx7YU2gGE/s1600/christmas-bells-icon-right.png' style='position:absolute; top: 0px;right:0px;border:none;'/>")); </script> <script src='http://blogergadgets.googlecode.com/files/snowfall.min.jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script> 

ΠΡΟΣΟΧΗ !!! να τα σημαδέψετε που τα βάζετε (βάλτε τα gadgets πολύ χαμηλά, στο τέλος της σελίδας σας), για να τα βρείτε πάλι εύκολα και μετά τις γιορτές, όταν τα βγάλετε....
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Lightbox για Είσοδο στο Blog σας

Νέοι bloggers γεια σας !!!Χωρίς πολλά λόγια σας δίνω ένα κώδικα για εικόνα, η βίντεο η κείμενο (στατικό) που καλωσορίζει τον επισκέπτη στο blog σας...DEMO...την εικόνα που βλέπετε, μπορεί να είναι και βίντεο, η κείμενο, και να δείχνει η γράφει οτιδήποτε !!!Και βέβαια, αντί για καλωσόρισμα μπορείτε να βάλετε ότι μήνυμα εσείς θέλετε...Δεν μπαίνει ο επισκέπτης στο blog σας αν δεν το κλείσει....
Ο ΚΩΔΙΚΑΣ: (βάλτε τον σαν gadget-javascript)

<div class="widget-content">
<style type="text/css">
<!--#Layer1 {
    position:fixed;
    width:700px;
    height:414px;
    left:160px;
top:50px;
    z-index:1;
}
-->
</style>

<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>

<script language="JavaScript1.2">

isMouseover = false;
isDragging = false;

function MouseDownLayer(e)
{
   isIE = document.all;

   documentTag = isIE ? "BODY" : "HTML";
   srcElement = isIE ? event.srcElement : e.target;
   layerElement = isIE ? document.all.Layer1 : document.getElementById("Layer1");

   while (srcElement.id != "Layer1TitleBar" && srcElement.tagName != documentTag)
   {
      srcElement = isIE ? srcElement.parentElement : srcElement.parentNode;
   }
   if (srcElement.id == "Layer1TitleBar")
   {
      offsetX = isIE ? event.clientX : e.clientX;
      offsetY = isIE ? event.clientY : e.clientY;
      currentX = parseInt(layerElement.style.left);
      currentY = parseInt(layerElement.style.top);
      isDragging = true;
      document.onmousemove = MouseMoveLayer;
  }
}

function MouseMoveLayer(e)
{
   if (!isDragging) return;

   // Internet Explorer ?
   if (document.all)
   {
      layerElement.style.left = currentX+event.clientX-offsetX;
      layerElement.style.top = currentY+event.clientY-offsetY;
   }
   else
   {
      layerElement.style.left = currentX+e.clientX-offsetX + "px";
      layerElement.style.top = currentY+e.clientY-offsetY + "px";
   }
   return false;
}

document.onmousedown = MouseDownLayer;
document.onmouseup = Function("isDragging=false");

</script>

<div id="Layer1"> <table border="0" bgcolor="#103C7B" width="100%" cellspacing="0" cellpadding="2">
<tbody><tr>
   <td id="Layer1TitleBar" style="cursor:move" width="100%">
      <ilayer width="100%" onselectstart="return false">
      <layer width="100%" onmouseover="isMouseover=true" onmouseout="isMouseover=false">
      <font face="Arial" color="#FFFFFF" style="font-size:13px;text-decoration:none"><b></b></font>      </layer>
      </ilayer>
   </td>
   <td style="cursor:hand" valign="top">
      <a href="#" onclick="layerElement.style.visibility='hidden';return false">
      <font color="#FFFFFF" face="Arial" style="font-size:13px;text-decoration:none"><b>Κλείσιμο</b></font>
      </a>
   </td>
</tr>
</tbody></table><a href="#" style=""><center><img  height="550" width="700"  src="http://i972.photobucket.com/albums/ae206/RuSsiA_Bboy/Welcome-to-my-page.gif" /></div></center></a></div>

***τα χρωματιστά σημεία, σας δείχνουν τα μεγέθη, τις διαστάσεις και με το μπλε φόντο, σας δείχνω που θα βάλετε τη φωτογραφία, το βιντεο η το κείμενο
***ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ .....επειδή δεν πρέπει να λειτουργεί συνέχεια και σε όλες τις σελίδες του blog σας, (γιατί θα σπάσετε τα νεύρα στους επισκέπτες σας που θα πρέπει να το κλείνουν σε κάθε ανάρτηση σας που θα διαβάζουν), διαβάστε αυτην την ανάρτηση, ΚΑΝΤΕ ΤΑ WIDGETS ΟΡΑΤΑ/ΚΡΥΦΑ ΣΕ ΣΥΓΚΕΚΡΙΜΕΝΕΣ ΣΕΛΙΔΕΣ  για να βάλετε αυτό το gadget ΜΟΝΟΝ στην αρχική σελίδα....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!(για απορίες σας, στείλτε email η γράψτε σχόλιο)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Χριστουγεννιάτικη Ρουλέτα / Christmas Roulette

Νέοι bloggers γεια σας !!! Χριστούγεννα-Πρωτοχρονιά έρχονται, και όλοι θα παίξουμε λίγο τζόγο...γιατί να μη παίξουμε στο δικό μας blog ;Γι αυτό σας δίνω σήμερα έναν κώδικα, για να βάλετε μια ρουλέτα-(πιο πολύ τροχό της τύχης θα έλεγα) σαν gadget-javascript σε κάποια σελίδα σας....
DEMO ΕΔΩ
Ο ΚΩΔΙΚΑΣ: (Bάλτε τον σαν gadget-javascript)

<div class="demo-app"><div class="da da-center" style="width:600px;">
<!--[if IE]><script type="text/javascript" src="/sites/default/files/1010/source/excanvas.js"></script><![endif]-->
<input type="button" value="spin" onclick="spin();" style="float: left;">
<canvas id="wheelcanvas" width="500" height="500"></canvas>
<script type="application/javascript">
  var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
               "#2E2C75", "#673A7E", "#CC0071", "#F80120",
               "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
  var restaraunts = ["10 EURO", "20 EURO", "50 EURO", "100 EURO",
                     "200 EURO", "300 EURO", "500 EURO", "1.000 EURO",
                     "2.000 EURO", "5.000 EURO", "10.000 EURO", "20.000 EURO"];

  var startAngle = 0;
  var arc = Math.PI / 6;
  var spinTimeout = null;

  var spinArcStart = 10;
  var spinTime = 0;
  var spinTimeTotal = 0;

  var ctx;

  function draw() {
    drawRouletteWheel();
  }

  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = 200;
      var textRadius = 160;
      var insideRadius = 125;
   
      ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,500,500);
   
   
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
   
      ctx.font = 'bold 12px sans-serif';
   
      for(var i = 0; i < 12; i++) {
        var angle = startAngle + i * arc;
        ctx.fillStyle = colors[i];
     
        ctx.beginPath();
        ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
        ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();
     
        ctx.save();
        ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur    = 0;
        ctx.shadowColor   = "rgb(220,220,220)";
        ctx.fillStyle = "black";
        ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
        ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = restaraunts[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore();
      }
   
      //Arrow
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
      ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.fill();
    }
  }

  function spin() {
    spinAngleStart = Math.random() * 10 + 10;
    spinTime = 0;
    spinTimeTotal = Math.random() * 3 + 4 * 1000;
    rotateWheel();
  }

  function rotateWheel() {
    spinTime += 30;
    if(spinTime >= spinTimeTotal) {
      stopRotateWheel();
      return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawRouletteWheel();
    spinTimeout = setTimeout('rotateWheel()', 30);
  }

  function stopRotateWheel() {
    clearTimeout(spinTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    ctx.save();
    ctx.font = 'bold 30px sans-serif';
    var text = restaraunts[index]
    ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
    ctx.restore();
  }

  function easeOut(t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
  }

  draw();
</script></div></div>

DEMO ΕΔΩ
***Αλλάζουν τα χρώματα και τα νούμερα...
***Δεν νομίζω ότι θα λειτουργήσει με internet explorer...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ και ΚΑΛΑ ΚΕΡΔΗ !!!
Πηγή : thanks to switchonthecode.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Χριστουγεννιάτικη Ρουλέτα / Christmas Roulette

Νέοι bloggers γεια σας !!! Χριστούγεννα-Πρωτοχρονιά έρχονται, και όλοι θα παίξουμε λίγο τζόγο...γιατί να μη παίξουμε στο δικό μας blog ;Γι αυτό σας δίνω σήμερα έναν κώδικα, για να βάλετε μια ρουλέτα-(πιο πολύ τροχό της τύχης θα έλεγα) σαν gadget-javascript σε κάποια σελίδα σας....
DEMO ΕΔΩ
Ο ΚΩΔΙΚΑΣ: (Bάλτε τον σαν gadget-javascript)

<div class="demo-app"><div class="da da-center" style="width:600px;">
<!--[if IE]><script type="text/javascript" src="/sites/default/files/1010/source/excanvas.js"></script><![endif]-->
<input type="button" value="spin" onclick="spin();" style="float: left;">
<canvas id="wheelcanvas" width="500" height="500"></canvas>
<script type="application/javascript">
  var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
               "#2E2C75", "#673A7E", "#CC0071", "#F80120",
               "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
  var restaraunts = ["10 EURO", "20 EURO", "50 EURO", "100 EURO",
                     "200 EURO", "300 EURO", "500 EURO", "1.000 EURO",
                     "2.000 EURO", "5.000 EURO", "10.000 EURO", "20.000 EURO"];

  var startAngle = 0;
  var arc = Math.PI / 6;
  var spinTimeout = null;

  var spinArcStart = 10;
  var spinTime = 0;
  var spinTimeTotal = 0;

  var ctx;

  function draw() {
    drawRouletteWheel();
  }

  function drawRouletteWheel() {
    var canvas = document.getElementById("wheelcanvas");
    if (canvas.getContext) {
      var outsideRadius = 200;
      var textRadius = 160;
      var insideRadius = 125;
   
      ctx = canvas.getContext("2d");
      ctx.clearRect(0,0,500,500);
   
   
      ctx.strokeStyle = "black";
      ctx.lineWidth = 2;
   
      ctx.font = 'bold 12px sans-serif';
   
      for(var i = 0; i < 12; i++) {
        var angle = startAngle + i * arc;
        ctx.fillStyle = colors[i];
     
        ctx.beginPath();
        ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
        ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
        ctx.stroke();
        ctx.fill();
     
        ctx.save();
        ctx.shadowOffsetX = -1;
        ctx.shadowOffsetY = -1;
        ctx.shadowBlur    = 0;
        ctx.shadowColor   = "rgb(220,220,220)";
        ctx.fillStyle = "black";
        ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
        ctx.rotate(angle + arc / 2 + Math.PI / 2);
        var text = restaraunts[i];
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
        ctx.restore();
      }
   
      //Arrow
      ctx.fillStyle = "black";
      ctx.beginPath();
      ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
      ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
      ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
      ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
      ctx.fill();
    }
  }

  function spin() {
    spinAngleStart = Math.random() * 10 + 10;
    spinTime = 0;
    spinTimeTotal = Math.random() * 3 + 4 * 1000;
    rotateWheel();
  }

  function rotateWheel() {
    spinTime += 30;
    if(spinTime >= spinTimeTotal) {
      stopRotateWheel();
      return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawRouletteWheel();
    spinTimeout = setTimeout('rotateWheel()', 30);
  }

  function stopRotateWheel() {
    clearTimeout(spinTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    ctx.save();
    ctx.font = 'bold 30px sans-serif';
    var text = restaraunts[index]
    ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
    ctx.restore();
  }

  function easeOut(t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
  }

  draw();
</script></div></div>

DEMO ΕΔΩ
***Αλλάζουν τα χρώματα και τα νούμερα...
***Δεν νομίζω ότι θα λειτουργήσει με internet explorer...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ και ΚΑΛΑ ΚΕΡΔΗ !!!
Πηγή : thanks to switchonthecode.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

GADGET ΜΕ ΓΙΟΡΤΙΝΕΣ ΕΥΧΕΣ

Νέοι bloggers γεια σας!!!Χριστούγεννα έρχονται, και σας ξαναδίνω ένα gadget που έκανε πάταγο πέρισυ, τα Χριστούγεννα...Ο Αη-Βασίλης με ευχές...Βάλτε το κώδικα που σας δίνω, σαν gadget-javascript....O περσινός κώδικας ήταν εδώ
Αντιγράψτε τον παρακάτω κώδικα που σας δίνω και επικολλήστε τον σαν gadget στο BLOGGER επεξεργασία διάταξης=>Σχεδίαση=>Στοιχεία Σελίδας=>GADGET=>HTML/JavaScript :
Ο ΚΩΔΙΚΑΣ:
<!-- Begin christmas Floating by dr blogger---> <style type="text/css"> #daniFX{ position:fixed; top:70px; z-index:+1200; } * html #daniFX{position:relative;} .daniFXtab{ height:250px; width:117px; float:left; cursor:pointer; background:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Hz-jYWLmmSEUpTwKEw5o6S9ggg7L3L27zKMUuQ44iSbingvxJyNDhBJob8WK8Pj0aX98C8vYiTCIx7IQDodnRn4b_ua0HzZNJ1RDz7uC7kbRqJsbxSa_IS7zhwbUrX6AV-ra-gkflbwW/s227/santa2.gif ') no-repeat; } .daniFXcontent{ float:left; border:2px solid #000000; -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; background:#ffffff; padding:22px; } </style> <script type="text/javascript"> function showHidedaniFX(){ var daniFX = document.getElementById("daniFX"); var w = daniFX.offsetWidth; daniFX.opened ? movedaniFX(0, 40-w) : movedaniFX(40-w, 0); daniFX.opened = !daniFX.opened; } function movedaniFX(x0, xf){ var daniFX = document.getElementById("daniFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; daniFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movedaniFX("+x+", "+xf+")", 10);} } </script>
<div id="daniFX"><div class="daniFXtab" onclick="showHidedaniFX()"></div><div class="daniFXcontent"><br/><br/>MERRY <br/> CHRISTMAS  <br/> AND <br/> HAPPY <br/> NEW <br/> YEAR<br/><script type="text/javascript"> var daniFX = document.getElementById("daniFX"); daniFX.style.right = (30-daniFX.offsetWidth).toString() + "px"; </script><script type="text/javascript"> var daniFX =
document.getElementById("daniFX"); daniFX.style.right =
(110-daniFX.offsetWidth).toString() + "px"; </script>  <!-- End christmas Floating by dr blogger- --> <br /></div></div>

***Επειδή δεν βάζουμε πια τίτλους στα gadget μας, θυμηθείτε η σημειώστε που θα βάλετε το "κουτάκι" με αυτό το κώδικα, ώστε μετά τις γιορτές να το βγάλετε εύκολα !!!
***Βάλτε τη δική σας ευχή, αντικαθιστώντας τις μπλε φράσεις....(το <br/> σημαίνει οτι αλλάζουμε σειρά...κάνει ότι και το enter όταν γράφουμε κείμενο)
***Θ σας δώσω και κάποια tips των ρυθμίσεων του, μήπως θέλετε να τον τοποθετήσετε, κάπως διαφορετικά....1.εάν έχετε ευρεία οθόνη , η το επηρεάσει το css του blog σας, αλλάξτε τη τιμή (110-daniFX.offsetWidth) στο τέλος του κώδικα...αν αυξήσετε αυτή τη τιμή, θα βγει όλος ο Αη-Βασίλης μέσα στο blog σας.....2.το  top:70px;  είναι το ύψος που βρίσκεται το gadget ...σαν στατικό που είναι, αν μεγαλώσει η τιμή (πχ 170, 270, 320 κλπ) το gadget θα κατεβεί πιο κάτω.....3.το  border:2px solid #000000;   είναι το πάχος της κορνίζας και το χρώμα της.....4.το  background:#ffffff;  είναι το φόντο πίσω από τις ευχές.....
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

GADGET ΜΕ ΓΙΟΡΤΙΝΕΣ ΕΥΧΕΣ

Νέοι bloggers γεια σας!!!Χριστούγεννα έρχονται, και σας ξαναδίνω ένα gadget που έκανε πάταγο πέρισυ, τα Χριστούγεννα...Ο Αη-Βασίλης με ευχές...Βάλτε το κώδικα που σας δίνω, σαν gadget-javascript....O περσινός κώδικας ήταν εδώ
Αντιγράψτε τον παρακάτω κώδικα που σας δίνω και επικολλήστε τον σαν gadget στο BLOGGER επεξεργασία διάταξης=>Σχεδίαση=>Στοιχεία Σελίδας=>GADGET=>HTML/JavaScript :
Ο ΚΩΔΙΚΑΣ:
<!-- Begin christmas Floating by dr blogger---> <style type="text/css"> #daniFX{ position:fixed; top:70px; z-index:+1200; } * html #daniFX{position:relative;} .daniFXtab{ height:250px; width:117px; float:left; cursor:pointer; background:url('http://i1029.photobucket.com/albums/y353/pantelakos/santa2.gif') no-repeat; } .daniFXcontent{ float:left; border:2px solid #000000; -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; background:#ffffff; padding:22px; } </style> <script type="text/javascript"> function showHidedaniFX(){ var daniFX = document.getElementById("daniFX"); var w = daniFX.offsetWidth; daniFX.opened ? movedaniFX(0, 40-w) : movedaniFX(40-w, 0); daniFX.opened = !daniFX.opened; } function movedaniFX(x0, xf){ var daniFX = document.getElementById("daniFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; daniFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movedaniFX("+x+", "+xf+")", 10);} } </script>
<div id="daniFX"><div class="daniFXtab" onclick="showHidedaniFX()"></div><div class="daniFXcontent"><br/><br/>MERRY <br/> CHRISTMAS  <br/> AND <br/> HAPPY <br/> NEW <br/> YEAR<br/><script type="text/javascript"> var daniFX = document.getElementById("daniFX"); daniFX.style.right = (30-daniFX.offsetWidth).toString() + "px"; </script><script type="text/javascript"> var daniFX =
document.getElementById("daniFX"); daniFX.style.right =
(110-daniFX.offsetWidth).toString() + "px"; </script>  <!-- End christmas Floating by dr blogger- --> <br /></div></div>

***Επειδή δεν βάζουμε πια τίτλους στα gadget μας, θυμηθείτε η σημειώστε που θα βάλετε το "κουτάκι" με αυτό το κώδικα, ώστε μετά τις γιορτές να το βγάλετε εύκολα !!!
***Βάλτε τη δική σας ευχή, αντικαθιστώντας τις μπλε φράσεις....(το <br/> σημαίνει οτι αλλάζουμε σειρά...κάνει ότι και το enter όταν γράφουμε κείμενο)
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Lightbox για Προτεινόμενες Αναρτήσεις

Φίλοι bloggers γεια σας !!!Σας έχω σήμερα ένα lightbox για προτεινόμενα link !!!Το βρήκα σε μια σελίδα, μου άρεσε, το έβαλα στο blog μου, και επειδή μου το ζήτησαν κάποιοι φίλοι, σκέφτηκα οτι θα ήταν χρήσιμο και σε άλλους...Σας προτείνω να το βάλετε σαν gadget-javascript, όλο το κώδικα που σας δίνω (που περιέχει και CSS και SCRIPT και HTML) !!!

Ο ΚΩΔΙΚΑΣ:
<style>
#pscroller2{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvtKE_5N2i6KSETXhImkBo3mE18KPWXJZueRnAVaS5T_cbQg3MRYA3Gxho61O9lFfXspiCYpl257OKhh8gnlaqt4HMepUTu4yGSEgSeUCCQtUuPnfMASJVCUn2i3lAr-NoGVkbMrbt9cH/s30/look.png) no-repeat top left;
width: 430px;
height:20px;
Light border: 1px solid #ddd;
padding: 3px 3px 3px 40px;
margin:10px 0;
}


#pscroller2 a{
text-decoration: none;
color:#2ECCFA;
}


#pscroller2 a:hover{
text-decoration: underline;
color:#0080ff;
}


.someclass{
}
</style>


<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------


pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}


pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}


// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------


pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}


pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}


</script>
<script type="text/javascript">


//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent2, "pscroller2", "someclass", 4000)
</script>


<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent2=new Array()
pausecontent2[0]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 1">ΤΙΤΛΟΣ 1...</a>'
pausecontent2[1]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 2">ΤΙΤΛΟΣ 2...</a>'
pausecontent2[2]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 3">ΤΙΤΛΟΣ 3...</a>'
pausecontent2[3]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 4">ΤΙΤΛΟΣ 4...</a>'
pausecontent2[4]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 5">ΤΙΤΛΟΣ 5...</a>'
pausecontent2[5]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 6">ΤΙΤΛΟΣ 6...</a>'
pausecontent2[6]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 7">ΤΙΤΛΟΣ 7...</a>'
pausecontent2[7]='<a target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 8">ΤΙΤΛΟΣ 8...</a>'
pausecontent2[8]='<a target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 9">ΤΙΤΛΟΣ 9...</a>'
</script>

***Αλλάξτε ΟΠΩΣΔΗΠΟΤΕ τις ανάλογες διευθύνσεις με τις δικές σας και τους τίτλους των (τις φράσεις ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ   και  ΤΙΤΛΟΣ ) !!!
***Το 4000 είναι η ταχύτητα που αλλάζουν τα link...
*** Tο   width: 430px;   height:20px;   είναι οι διαστάσεις του πλαισίου (βλέπε εικόνα)
***Εάν ο κώδικας css συγκρουστεί με το css του blog σας, μην το χρησιμοποιήσετε ...(μάλλον δεν θα συμβεί αυτό)...
***Για όσους γνωρίζουν html, έχω αφήσει και τις επεξηγήσεις στα επί μέρους σημεία του κώδικα ...
***Οταν περνά το ποντίκι πάνω από το lightbox , σταματά να γυρνά...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Lightbox για Προτεινόμενες Αναρτήσεις

Φίλοι bloggers γεια σας !!!Σας έχω σήμερα ένα lightbox για προτεινόμενα link !!!Το βρήκα σε μια σελίδα, μου άρεσε, το έβαλα στο blog μου, και επειδή μου το ζήτησαν κάποιοι φίλοι, σκέφτηκα οτι θα ήταν χρήσιμο και σε άλλους...Σας προτείνω να το βάλετε σαν gadget-javascript, όλο το κώδικα που σας δίνω (που περιέχει και CSS και SCRIPT και HTML) !!!

Ο ΚΩΔΙΚΑΣ:
<style>
#pscroller2{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvtKE_5N2i6KSETXhImkBo3mE18KPWXJZueRnAVaS5T_cbQg3MRYA3Gxho61O9lFfXspiCYpl257OKhh8gnlaqt4HMepUTu4yGSEgSeUCCQtUuPnfMASJVCUn2i3lAr-NoGVkbMrbt9cH/s30/look.png) no-repeat top left;
width: 430px;
height:20px;
Light border: 1px solid #ddd;
padding: 3px 3px 3px 40px;
margin:10px 0;
}


#pscroller2 a{
text-decoration: none;
color:#2ECCFA;
}


#pscroller2 a:hover{
text-decoration: underline;
color:#0080ff;
}


.someclass{
}
</style>


<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------


pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}


pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}


// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------


pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}


pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}


</script>
<script type="text/javascript">


//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent2, "pscroller2", "someclass", 4000)
</script>


<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent2=new Array()
pausecontent2[0]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 1">ΤΙΤΛΟΣ 1...</a>'
pausecontent2[1]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 2">ΤΙΤΛΟΣ 2...</a>'
pausecontent2[2]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 3">ΤΙΤΛΟΣ 3...</a>'
pausecontent2[3]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 4">ΤΙΤΛΟΣ 4...</a>'
pausecontent2[4]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 5">ΤΙΤΛΟΣ 5...</a>'
pausecontent2[5]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 6">ΤΙΤΛΟΣ 6...</a>'
pausecontent2[6]='<a  target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 7">ΤΙΤΛΟΣ 7...</a>'
pausecontent2[7]='<a target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 8">ΤΙΤΛΟΣ 8...</a>'
pausecontent2[8]='<a target="_blank" href="ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ 9">ΤΙΤΛΟΣ 9...</a>'
</script>

***Αλλάξτε ΟΠΩΣΔΗΠΟΤΕ τις ανάλογες διευθύνσεις με τις δικές σας και τους τίτλους των (τις φράσεις ΔΙΕΥΘΥΝΣΗ ΑΝΑΡΤΗΣΗΣ   και  ΤΙΤΛΟΣ ) !!!
***Το 4000 είναι η ταχύτητα που αλλάζουν τα link...
*** Tο   width: 430px;   height:20px;   είναι οι διαστάσεις του πλαισίου (βλέπε εικόνα)
***Εάν ο κώδικας css συγκρουστεί με το css του blog σας, μην το χρησιμοποιήσετε ...(μάλλον δεν θα συμβεί αυτό)...
***Για όσους γνωρίζουν html, έχω αφήσει και τις επεξηγήσεις στα επί μέρους σημεία του κώδικα ...
***Οταν περνά το ποντίκι πάνω από το lightbox , σταματά να γυρνά...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Gif (Κινούμενη εικόνα) στο Blogger

Νέοι bloggers γεια σας !!! Ναι !!! ο θείος Blogger μισεί τα gif ...και για να γίνω πιο κατανοητός, το εξηγώ...ο θείος blogger, το "παρακλάδι" της google, αλλά και η μαμά google, μισούν τις κινούμενες εικόνες...Η ωραιότερη μορφή εικόνας, το gif, δεν έχει ακόμα συγκινήσει τον blogger, ώστε να μη παιδευόμαστε όλοι εμείς (τα εκατομμύρια) οι bloggers, και να "ανεβάζουμε" τις κινούμενες εικόνες μας κατ' ευθείαν από την ανάρτησή μας.....
Κατά καιρούς έγιναν κάποιες απόπειρες από τον blogger, αλλά (δεν γνωρίζω γιατί), ματαιώθηκαν μετά από λίγο καιρό...Αλήθεια τι φοβάται ο blogger, η μάλλον γιατί δεν ασχολείται (τεχνολογικά) ώστε να διορθώσει αυτό το βάσανο...Γιατί βάσανο είναι να πρέπει να ανεβάζουμε τα gif μας σε ένα host site εικόνων, και μετά να τα μεταφέρουμε στην κάθε ανάρτησή μας.....
Βέβαια, υπάρχει το piccasa ...ο χώρος που "ανεβαίνουν" όλες οι εικόνες μας που περιέχονται στα blog μας....αλλά η  διαδικασία είναι χρονοβόρα !!! Ανεβάζουμε τα gif στο piccasa,... και μετά κάνουμε copy-paste τη διεύθυνση (url) για να φαίνονται κινούμενα στις αναρτήσεις μας...Γιατί αυτός είναι ο δρόμος που ακολουθούμε όλοι...και επειδή πολλοί νέοι bloggers δεν το γνωρίζουν, τώρα σας το είπα έμμεσα...
Κάθε blog μας, έχει το χώρο του να φιλοξενεί τις εικόνες μας στο piccasa (ιδιοκτησίας google) !!!Οπότε, ψάξε νέε blogger  να βρεις τη διεύθυνση της φιλοξενίας των εικόνων της σελίδας σου, και να "ανεβάζεις" τις κινούμενες εικόνες σου εκεί...https://picasaweb.google.com/home
***Σας συστήνω να χρησιμοποιείτε το picassa και όχι άλλες host σελίδες όπως πχ το photobucket...
σας δίνει πολύ μεγάλο χώρο αποθήκευσης, και δεν πρόκειται ποτέ να σβηστούν η αποκλειστούν οι αγαπημένες σας εικόνες, ακόμα κι αν κλείσει το blog σας!!!Και πάντα Δωρεάν...
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Gif (Κινούμενη εικόνα) στο Blogger

Νέοι bloggers γεια σας !!! Ναι !!! ο θείος Blogger μισεί τα gif ...και για να γίνω πιο κατανοητός, το εξηγώ...ο θείος blogger, το "παρακλάδι" της google, αλλά και η μαμά google, μισούν τις κινούμενες εικόνες...Η ωραιότερη μορφή εικόνας, το gif, δεν έχει ακόμα συγκινήσει τον blogger, ώστε να μη παιδευόμαστε όλοι εμείς (τα εκατομμύρια) οι bloggers, και να "ανεβάζουμε" τις κινούμενες εικόνες μας κατ' ευθείαν από την ανάρτησή μας.....
Κατά καιρούς έγιναν κάποιες απόπειρες από τον blogger, αλλά (δεν γνωρίζω γιατί), ματαιώθηκαν μετά από λίγο καιρό...Αλήθεια τι φοβάται ο blogger, η μάλλον γιατί δεν ασχολείται (τεχνολογικά) ώστε να διορθώσει αυτό το βάσανο...Γιατί βάσανο είναι να πρέπει να ανεβάζουμε τα gif μας σε ένα host site εικόνων, και μετά να τα μεταφέρουμε στην κάθε ανάρτησή μας.....
Βέβαια, υπάρχει το piccasa ...ο χώρος που "ανεβαίνουν" όλες οι εικόνες μας που περιέχονται στα blog μας....αλλά η  διαδικασία είναι χρονοβόρα !!! Ανεβάζουμε τα gif στο piccasa,... και μετά κάνουμε copy-paste τη διεύθυνση (url) για να φαίνονται κινούμενα στις αναρτήσεις μας...Γιατί αυτός είναι ο δρόμος που ακολουθούμε όλοι...και επειδή πολλοί νέοι bloggers δεν το γνωρίζουν, τώρα σας το είπα έμμεσα...
Κάθε blog μας, έχει το χώρο του να φιλοξενεί τις εικόνες μας στο piccasa (ιδιοκτησίας google) !!!Οπότε, ψάξε νέε blogger  να βρεις τη διεύθυνση της φιλοξενίας των εικόνων της σελίδας σου, και να "ανεβάζεις" τις κινούμενες εικόνες σου εκεί...https://picasaweb.google.com/home
***Σας συστήνω να χρησιμοποιείτε το picassa και όχι άλλες host σελίδες όπως πχ το photobucket...
σας δίνει πολύ μεγάλο χώρο αποθήκευσης, και δεν πρόκειται ποτέ να σβηστούν η αποκλειστούν οι αγαπημένες σας εικόνες, ακόμα κι αν κλείσει το blog σας!!!Και πάντα Δωρεάν...
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}

Φτιάξτε Web-Radio Γρήγορα και Εύκολα

Νέοι bloggers γεια σας !!! Πριν καιρό, σας είχα δείξει πως να φτιάξετε web-radio για το blog σας...ήταν αρκετά δύσκολο, με κάποιες συγκεκριμένες απαιτήσεις, και  πολλές ερωτήσεις από εσάς !!! Σήμερα σας έχω μια πολύ πιο εύκολη λύση, να φτιάξετε web-radio μέσα σε 5' , και να αρχίσετε αμέσως το πρόγραμμά σας...
Η σελίδα που το παρέχει, είναι η http://now.in ...
1) Πρώτα κάντε έναν λογαριασμό με τα στοιχεία σας!!! (στο register), Βάλτε το όνομα που θα ονομάζετε το ράδιο σας, το email σας, και τον κωδικό σας (που πρέπει να σημειώσετε κάπου, γιατί θα πρέπει να το βάζετε κάθε φορά που θα κάνετε σύνδεση)....τσεκάρετε και το κουτάκι, οτι διαβάσατε και δέχεστε τους όρους συμμετοχής (μη φοβάστε, δεν έχει ύποπτα σημεία ούτε θα σας πάρουν το σπίτι....χαχα).....και πατήστε submit !!!Αμέσως θα σας έρθει ένα email που θα έχει το "activate your account" ...μπείτε στο λινκ που σας δίνει στο email, και ......είσαστε έτοιμοι...

2) Πατήστε στη μπάρα, ψηλά της αρχικής σελίδας, εκεί που λέει " Μr Dj " .......και κατεβάστε το πρόγραμμα που θα σας δίνει τη δυνατότητα να κάνετε τις εκπομπές σας....εγκαταστήστε το....είναι πολύ εύκολο και γρήγορη διαδικασία !!!!
3) Βλέπετε στη εικόνα από κάτω πως φαίνεται το πρόγραμμα που θα χρησιμοποιείτε για τις εκπομπές σας....

....στο δεξί μέρος του προγράμματος, θα κάνετε log in για να ξεκινήσετε.....
...επάνω , τέρμα αριστερά, πατάτε και διαλέγετε έναν φάκελο με τραγούδια που θέλετε (όσα θέλετε)...
...δείτε όλα τα κουμπιά τι κάνουν...(ένταση, πρόσθεση τραγουδιών, διαγραφή τραγουδιών, ρυθμίσεις για συνεχόμενη ροή , η random....) έχει πολλές και εύκολες ρυθμίσεις...(μη περιμένετε να σας τα πω όλα εγώ...ψάξτε και λίγο μόνοι σας....εύκολα είναι) !!!
***Μη ξεχάσετε: η σελίδα με το web-radio σας, έχει και τον κώδικα για το player του σταθμού σας !!! βάλτε το σαν gadget στο blog σας, και δώστε το και στα φιλικά σας blog να το χρησιμοποιούν, και να ακούν οι επισκέπτες τους !!!
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!!
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}