Css3 Green Cloud Label Widget For Blogger 2013

Αλλάξτε την εμφάνιση τον κατηγοριών σας στον μπλόγκερ πάμε να δούμε πως.

Πηγαίνετε στο πρότυπο

και μετά επεξεργασία HTML

Πατήστε Ctrl+F και κάντε αναζήτηση το ]]></b:skin> και πριν αυτό επικόλληση τον παρακάτω κώδικα:

/* The CSS Code for the menu starts here foulscode.blogspot.gr */

#Label1 a{outline: 1px rgba(255,255,255,0.4) dashed;
    border: 1px rgba(0,0,0,0.3) dashed;
    padding: 4px 10px 4px 20px;
    text-decoration: none;
    color:#000000;
    white-space: nowrap;
font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    position: relative !important;
    background: #8dc63f;
    float: left;
    padding: 5px 3px;
    margin: 0 5px 5px 0;
   border-radius:4px 4px; -moz-border-radius:4px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover{color: rgba(0,0,0,0.5);}
.label-size{line-height:1.5;align:left;}

Μπορείτε να το διαμορφώσετε στα μετρα του blog σας αλλάζοντας τον κώδικα css.

Αποθήκευση και αυτό ήταν.

Διαβάστε περισσότερα »

Css3 Smooth Slideout Menu Bar For Blog 2013

Γεια σας παιδιά! Εδώ θα μοιραστώ μαζί σας ένα πολύ ωραίο menu και πολύ βολικό εμφανίζεται μονο όταν το βελάκι περνάει από πάνω. Μπορείτε να δείτε και το DEMO και θα καταλάβετε.


Αντιγράψτε τον παρακάτω κώδικα:

<style>
/* The CSS Code for the menu starts here foulscode.blogspot.gr */
ul.nav8 {
    list-style:none;
    height:120px;
    margin:0;
    padding:0;
}
ul.nav8 table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px 0 -5px -1px;
}
ul.nav8 > li {
    float:right;
    height:120px;
    width:40px;
    position:relative;
    overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}
* html ul.nav8 > li {
    width:auto;
}
ul.nav8 > li a.ie6 {
    float:left;
    height:120px;
    width:39px;
    position:relative;
    overflow:hidden;
}
ul.sub {
    list-style:none;
    height:120px;
    width:600px;
    background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
}
ul.sub li {
    float:left;
}
ul.sub li:first-child {
    margin-left:45px;
}
ul.sub li a {
    display:block;
    width:110px;
    height:120px;
    float:left;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:#000;
}
ul.sub li a b {
    font-size:14px;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a b:hover {
    font-size:16px;
    color:#FF0000;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a p {
    font-size:12px;
    display:block;
    margin:0;
    padding:0 10px;
}
ul.sub li a p:hover {
    font-size:13px;
    display:block;
    margin:0;
    padding:0 10px;
}
ul.nav8 > li:hover {
    width:600px;
}
ul.nav8 > li a.ie6:hover {
    direction:ltr;
    width:600px;
}
ul.sub li a:hover i {
    opacity:1.0;
}
</style>
<ul class="nav8">
        <li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <ul class="sub">
                <li><a href="http://www.foulscode.blogspot.gr"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.foulscode.blogspot.gr"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.foulscode.blogspot.gr"><b>Support</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.foulscode.blogspot.gr"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.foulscode.blogspot.gr"><b>Back</b><p>custom description here</p><i></i></a></li>
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>

DEMO



Αλλάξτε το URL, τον τίτλο, και το κείμενο σας.

Αποθήκευση και είναι έτοιμο.

θα μας βοηθήσετε αν το μοιραστείτε με τους φίλους σας!

Διαβάστε περισσότερα »

Wordpress like Email Subscription widget for Blogger/Blog

Ένα όμορφο widget για όλα τα blog για την εγγραφη e-mail.

Αντιγραφή τον παρακάτω κώδικα:

<center>
<div align="center" id="digitalhubinc-Subscribe-wrapper">
<div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;">
<h3 id="digitalhubinc-title-text" style="color: white; font-size: 20px;">
GET FREE EMAIL UPDATES</h3>
<div id="digitalhubinc-sub-title-txt" style="color: white; font-size: 14px;">
Join us for free and get valuable content delivered right through your inbox.</div>
<br />
<form action="http://feedburndigiter.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FoulsCode', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="name" id="digitalhubinc_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br />
<input class="email" id="digitalhubinc_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="FoulsCode" /><input name="loc" type="hidden" value="en_US" /> <input id="digitalhubinc_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form>
</div>
</div>
</center>
<style>#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(http://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}</style></div>

 DEMO

Αποθήκευση και είστε έτοιμοι.

Διαβάστε περισσότερα »

New Hower Ice Cubes Social Sharing Widget CSS code For Blogger 2013

Αντιγραφή τον παρακάτω κώδικα:

<style>
/* New Hower Ice Cubes Social Sharing Widget FoulsCode.blogspot.gr*/
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.linkedin.com/Username"><img src="http://1.bp.blogspot.com/-AcupQv732F8/UQ46xHyFkKI/AAAAAAAAPjY/ktgyTNLhnDM/s1600/linkedin.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/digitalhubinc"><img src="http://2.bp.blogspot.com/-HZZhpw_GAMQ/UQ46wOtamhI/AAAAAAAAPjQ/7CcjKXZ8pY4/s1600/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/username"><img src="http://1.bp.blogspot.com/-BcPT9z7l5oE/UQ46uKktsiI/AAAAAAAAPjI/O9kie3KdNBc/s1600/stumbleupon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/bloggertrix"><img src="http://2.bp.blogspot.com/-9kt-TSM18DU/UQ46z9cluUI/AAAAAAAAPjg/HEWdTi3zsWU/s1600/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/digitalhubinc"><img src="http://4.bp.blogspot.com/-DbLmkXNP3y4/UQ462N-3H0I/AAAAAAAAPjo/pen--m4_ZY4/s1600/RSS.png" title="Add RSS Feed" /></a></li>
</ul>
</center>

DEMO 

Διαβάστε περισσότερα »

Attractive Css3 Sleek Menu Bar For Blog

Ένα πολύ όμορφο menu για το blog σας και έρχονται και αλλα.

Αντιγραφή τον παρακάτω κώδικα:

<style>
#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam1] li a{background:#606060;}
ul[rel=sam1] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
</style>
</br>
</br></br></br></br>
<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://foulscode.blogspot.gr">Home</a></li>
<li><a href="http://foulscode.blogspot.gr">About</a></li>
<li><a href="http://foulscode.blogspot.gr">Blog</a></li>
<li><a href="http://foulscode.blogspot.gr">Services</a></li>
<li><a href="http://foulscode.blogspot.gr">Support</a></li>
<li><a href="http://foulscode.blogspot.gr">Sales</a></li>
<li><a href="http://foulscode.blogspot.gr">Contacts</a></li>
</ul>
</div>

Αλλάξτε το url και τον τίτλο και είσατε έτοιμη!

DEMO LIVE

Διαβάστε περισσότερα »

New Blue Square Social Media Icon Widget For Blog 2013

Αντιγραφή επικόλληση τον παρακάτω κώδικα:

<style>
/* Social Icons FoulsCode.blogspot.gr */
a.social-icons {
 margin-right: 5px; /*Adjust This Value As Needed*/
height:45px;
width:45px;
}
a.social-icons:hover {
 opacity: .7;
 filter:alpha(opacity=70); /* For IE8 and earlier */
}   height:45px;
width:45px;
</style>
<a class="social-icons" href="https://www.facebook.com/pages/Fouls-Code/548164921863886"><img src="https://lh6.googleusercontent.com/-pFz1iGgJ3No/USdl3prQKNI/AAAAAAAASFg/agHmIp1Tx2I/h120/digitalhubinc-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/foulscode"><img src="https://lh5.googleusercontent.com/-RJyfL5U1MM4/USdl4J7582I/AAAAAAAASFs/IzEgcVcaHP0/h120/digitalhubinc-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/userId"><img src="https://lh4.googleusercontent.com/-rCLwgQYA_N8/USdl3FcEU5I/AAAAAAAASFU/BBwRj_nEeH8/h120/digitalhubinc-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/foulscode"><img src="https://lh6.googleusercontent.com/-dJqM-3Ng2eI/USdl3WoV-5I/AAAAAAAASFY/ss7btXejP0U/h120/digitalhubinc-Rss.png" /></a>
<a class="social-icons" href="http://pinterest.com/foulscode"><img src="https://lh4.googleusercontent.com/-jpxZywNyKyI/USdl4RlvepI/AAAAAAAASFw/0bj8rPvZyu0/h120/digitalhubinc-pinterest.png" /></a>

Αντικαταστήστε τα παραπάνω url με τα δικά σας και κάντε αποθήκευση και είσατε έτοιμη.
DEMO LIVE

Διαβάστε περισσότερα »

audio backlinks

Όσοι γνωρίζουμε το τι είναι ένα backlink συνήθως ασχολούμενοι επαγγελματικά ή ερασιτεχνικά με την προώθηση ιστοσελίδωνπάντα αναζητούμε τρόπους για την δημιουργία ενός backlink. Σίγουρα θα έχετε ακούσει για backlinks από forum profiles, forum posts, forum signatures, blog comments, guest blogging και πολλές άλλες μεθόδους. Πιθανότατα θα γνωρίζετε για το πως μπορείτε να πάρετε backlinks μέσα από το ανέβασμα εικόνων ( pinterest κ.α.) , βίντεο ( youtube κ.α.) αλλά μπορεί να μην έχετε ακουστά τα audio backlinks .

Τα audio backlinks είναι απλά links που μπορείτε να κερδίσετε ανεβάζοντας αρχεία ήχου σε κάποια αντίστοιχα web sites. Φυσικά ίσως να σας προβληματίζει το γεγονός ότι ενώ φωτογραφίες μπορείτε να τραβήξετε με μια απλή φωτογραφική μηχανή ή να βρείτε στο διαδίκτυο απλά σερφάροντας  όπως και βίντεο φυσικά αναρωτιέστε πως μπορείτε να βρείτε και να επεξεργαστείτε ηχητικά αρχεία. Υπάρχουν φυσικά αναρίθμητες μέθοδοι για να το επιτύχετε αλλά θα σας αναφέρω μια ιδιαίτερα απλή.

Δημιουργώντας ένα audio file

 Επισκεφτείτε το ispeech.org και δημιουργήστε ένα λογαριασμό σε αυτό. Συνδεθείτε (χρησιμοποιήστε το  free version) και πηγαίνετε στο  ‘enter text’. Συμπληρώστε το κείμενο που θέλετε να εκφωνηθεί στο audio file. Σας συνιστώ η διάρκεια του να μην είναι μεγαλύτερη του ενός λεπτού.  Έχετε την επιλογή να επιλέξετε την χρήση γυναικείας ή αντρικής φωνής, διαφορετικών διαλέκτων όπως και να επιλέξετε την ταχύτητα της ομιλίας. Θα έχετε όμως πρόβλημα με την ελληνική γλώσσα. Τα κείμενα σας θα πρέπει να είναι στα αγγλικά για να έχουμε ένα σωστό ηχητικό αρχείο. Φυσικά ηχογράφηση της φωνής σας μπορείτε ενδεχομένως να κάνετε και με απλή χρήση του κινητού σας τηλεφώνου και να περάσετε το mp3 συνήθως στον υπολογιστή σας.

Με την χρήση του Audacity το οποίο μπορείτε να κατεβάσετε από το ακόλουθο url

Audacity.googlecode.com/files/audacity-win-2.0.1.exe

θα μπορείτε να εισάγετε με την χρήση του ένα mp3 σε συνδυασμό με το φωνητικό σας αρχείο. Πολλές φορές έχω χρησιμοποιήσει το audacity για να πάρω ένα μουσικό αρχείο με ομιλία και να αφαιρέσω την ομιλία και να προσθέσω δικά μου λεγόμενα. Ακόμα και αυτό είναι πάρα πολύ εύκολο με το audacity που ομολογουμένως εκτός από δωρεάν είναι ένα πολύ αξιόλογο πρόγραμμα με πολλές δυνατότητες στην επεξεργασία του ήχου.

Απλά προσέξτε την διάρκεια των δυο ηχητικών αρχείων , μουσική και φωνητικό, σταθμίστε την ένταση τους σωστά και έχετε μια πλήρη ηχητική παρουσίαση για οποιοδήποτε θέμα σας ενδιαφέρειΌταν τελειώσετε την επεξεργασία απλά κάντε εξαγωγή και σώστε το κατά προτίμηση σαν .wave file.

Έχετε λοιπόν πλέον ένα audio file έτοιμο για  upload στην λίστα των websites που σας παραθέτω ακολούθως. Εκεί μπορείτε να βάλετε το url στο προφίλ σας και στις περισσότερες περιπτώσεις στην περιγραφή του audio file. Φυσικά νομίζω ότι είναι ευκολονόητο ότι ένα ολοκληρωμένο audio file με π.χ. την επεξήγηση ενός θέματος αποτελεί μια θαυμάσια προσθήκη κατά τηνδημιουργία της ιστοσελίδας σας ή απλά στην ανανέωση του περιεχομένου της

Καλά backlinks σας εύχομαι!

• Soundcloud.com
• Yourlisten.com
• Audiofarm.org
• Unsigned.com
• Audioboo.fm
• Tweewoo.com
• Sutros.com
• Muziboo.com
• Purevolume.com
• Last.fm
• Audiosharescript.com
• Musopen.org
• Reverbnation.com
• Sharemyplaylists.com
• Alonetone.com
• Wearehunted.com
• Hypem.com
• Artistserver.com
• Mixcloud.com
• Weloveyoursongs.com
• Mobypicture.com
• Fiql.com
• Chirbit.com
• F3music.com
• Buzznet.com

ΠΗΓΗ

Διαβάστε περισσότερα »

Κουμπί μπλόγκερ για το site σας!

Σε αυτό το σημείο θα σας δώσω ένα κουμπί που το έχετε συνάντηση σίγουρα στην μπλόγκερ πλατφόρμα.

<a class="blogg-button" href="http://foulscode.blogspot.com/" role="button" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; -webkit-transition: all 0ms; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(248, 248, 248)), to(rgb(241, 241, 241))); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px; color: #222222; cursor: pointer; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; line-height: 27px; margin: 0px 14px 0px 0px; padding: 0px 10px; position: relative; text-align: center; text-decoration: initial; vertical-align: middle; white-space: nowrap;" target="_blank">FoulsCode</a>

Αλλάξτε το URL με το δικό σας και το τίτλο.

Διαβάστε περισσότερα »

Περισσότερα Από 1800 Flat Icons Σε Όλα Τα Χρώματα – Icons DB

Μερικές φορές θα βρείτε ένα εικονίδιο που σας αρέσει ο σχεδιασμός του, αλλά τα χρώματα δεν ταιριάζουν με το έργο σας.

Με το  Icons DB , μια ελεύθερη και αυξανόμενη συλλογή flat icons, με την οποία είναι δυνατόν να πάρουμε όλα τα στοιχεία σε οποιοδήποτε χρώμα προτιμάμε.

Το σετ περιλαμβάνει 1800 items+ σε πολλαπλές μορφές (ICO, PNG, JPG, GIF) και 8 μεγέθη από 16 * 16px έως 512 * 512px.

Υπάρχουν πολλές εικόνες που μπορούν να δουλέψουν πολύ καλά σε εφαρμογές web και σχεδόν κάθε είδος έχει πολλές παραλλαγές που μπορούν να ικανοποιήσουν κάθε γούστο.

Μόνο μειονέκτημα είναι ότι δεν μπορείτε να κατεβάσετε το σύνολο, δεδομένου ότι οι εικόνες προσφέρονται μόνο μια -προς- μια.

Website: http://www.iconsdb.com/

ΠΗΓΗ

Διαβάστε περισσότερα »

Περιγραφή εικόνας με την χρήση CSS3

Γεια σας μπλόγκερ! Χρονια πολλά σε όλους που γιόρταζαν του αγίου βαλεντίνου ;)
Πάμε στο θέμα μας τώρα.

Αντιγραφή επικόλληση τον παρακάτω κώδικα.

<style>
/*================ Sliding Description Panel For Images By FoulsCode ================*/
.imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 13px;
}
.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a {
    color: white;
}
.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}
/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
.imagepluscontainer div.rightslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    right: 0;
    left: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}
.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
.imagepluscontainer div.leftslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    left: 0;
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}
.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}
.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
/*================ Sliding Description Panel For Images By FoulsCode ================*/
</style>
<center><div class="imagepluscontainer" style="width:263px;">
<img src="URL ΕΙΚΌΝΑΣ">
<div class="desc downslide">
TO KIMENO</div>
</div></center>

Δείτε το DEMO.

Αποθήκευση και είστε έτοιμη!

Διαβάστε περισσότερα »

WIDGET για κοινωνικά δίκτυα με στυλ wid8

Ένα WIDGET για τα κοινωνικά δίκτυα του blog σας που μοιάζει μετά γραφικά τον windows 8


Αντιγραφή επικόλληση τον παρακάτω κώδικα.

<style>
.seconds{
text-align:right;
color:#000;
font-size:10px;
}
.supportive a:active{position:relative;top:1px}
 .widget-item-control a{display:none;}
    .widget-item-control a{display:none;}
    #supportive{width: 300px;
    float: left;margin-top: 10px;}
    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}
    #supportive .facebook, .googleplus, .rss, .twitter{
    position: relative;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 5;
    display: block;
    float: left;
    margin: 1px;}
    #supportive .icon{}
    #supportive .facebook{width: 147px;
    height: 150px;
    background: rgba(59,89,152,1) url("https://lh4.googleusercontent.com/-6tuOBGcpzGc/URPO_I2Yj9I/AAAAAAAAC_0/qBm56PAG1yY/h120/facebook.png") no-repeat center center;}
    #supportive .twitter{width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url("http://3.bp.blogspot.com/-hak4MMDUFy0/UQNWX7ZFzVI/AAAAAAAAFME/1-6Kt65O5Xk/s1600/Twitter.png") no-repeat center center;}
    #supportive .googleplus{width: 148px;
    height: 74px;
    background: rgba(59,89,152,1) url("http://2.bp.blogspot.com/-jeIkKF52wSU/UQNX5OwGt-I/AAAAAAAAFMc/xlLSwvc24nk/s1600/google+plus.png") no-repeat center center;}
    #supportive .rss{ width: 299px;
    height: 74px;
    background: rgba(59,89,152,1) url("http://4.bp.blogspot.com/-Ebrw9duZtTI/UQNTcS_wDHI/AAAAAAAAFLk/XPBiCPYENEg/s1600/rss.png") no-repeat center center;}
    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://lh6.googleusercontent.com/-gp5q_y7kibQ/URPO_I6-sKI/AAAAAAAAC_w/twhFzlX2p1c/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://lh6.googleusercontent.com/-5-00TE6gtvM/URPO_ALyNwI/AAAAAAAAC_4/A4Dr7Hg7C6A/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://lh4.googleusercontent.com/-NjlbntNHzFI/URPPCHuQ_XI/AAAAAAAADAI/S2lzrz6uZ0c/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;}
</style>
<ul id='supportive'>
<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage'/></a></li>
<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUser/PageID/'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>
<div class="seconds">
<a href="http://www.foulscode.blogspot.gr">Get This</a>
</div></ul>

DEMO

Αντικαταστήστε με τα δίκασα url  και πατήστε αποθήκευση.

Διαβάστε περισσότερα »

Fancy CSS3 και jQuery Μενού Lavalamp Για Blogger

Μετάβαση στο Blogger Template ταμπλό>
Κάντε κλικ στο Επεξεργασία HTML
Πατήστε Συνέχεια
Βρείτε παρακάτω κώδικα στο πρότυπό σας

</head>

Προσθέσετε παρακάτω κώδικα ακριβώς από πάνω.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

Τώρα βρείτε παρακάτω κώδικα,

]]></b:skin>

προσθέσετε παρακάτω κώδικα CSS αμέσως πριν,

/*LAVALAMP MENU BY http://www.foulscode.blogspot.gr/ START*/
.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}
.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;

}
.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;

}
.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;

}
.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;

}
.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;

}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}
.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
.lavalamp ul li {
    list-style: none;
    float:left;
    text-align: center;
    }
.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }
.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}
/*LAVALAMP MENU BY http://www.foulscode.blogspot.gr/ END*/ 

Τώρα έρχονται στο Διάταξη σελίδας
Κάντε κλικ στο Προσθήκη Gadget
Επιλέξτε HTML / JavaScript
Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα

<div class="lavalamp dark"> <ul>  <li class="active"><a href="">Home</a></li>  <li><a href="URL">About</a></li>  <li><a href="URL">Blog</a></li>  <li><a href="URL">Services</a></li>  <li><a href="URL">Portfolio</a></li>  <li><a href="URL">Contacts</a></li>  <li><a href="URL">Back to Article</a></li>  <li><<a href="URL">How it Works?</a></li> </ul> <div class="floatr"></div></div>

Αλλάξτε το <div class="lavalamp dark"> επιλέγοντας επο τα παρακάτω αυτό που σας ταιριάζει!

DEMO

<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">

Διαβάστε περισσότερα »

3η Έκθεση & Συνέδριο Web World Expo

Πάρε την προβολή της επιχείρησης σου στο internet σοβαρά!!!

Επισκέψου τους ειδικούς.

Με γοργούς ρυθμούς προχωρούν οι εργασίες για την διοργάνωση της 3^ηςWebWorldExpo 2013. Η διοργάνωση έχει τεθεί υπό την αιγίδα των συμβατικότερων φορέων του κλάδου και έχει την υποστήριξη σημαντικών μέσων για την προβολή της.

Η WebWorldExpo είναι η έκθεση & συνέδριο που στα πρότυπα αντίστοιχων διοργανώσεων του εξωτερικούσκοπεύει στην επικοινωνία μεταξύ των εταιρειών που παρέχουν υπηρεσίες για το διαδίκτυο & εφαρμογές και των επιχειρήσεων που βλέπουν πια την παρουσία τους στο διαδίκτυο ως απαραίτητη για την εξωστρέφεια και ανάπτυξη τους.

Εκθέτες είναι εταιρείες που:

• Κατασκευάζουν ιστοσελίδες & ηλεκτρονικά καταστήματα
• Οργανώνουν & διαχειρίζονται διαφήμιση στο internet & και τα Social Media
• Αναπτύσσουν εφαρμογές για έξυπνα κινητά & Social Media
• Καταχωρούν domain names & παρέχουν υπηρεσίες Hosting
• Κατασκευάζουν ή εμπορεύονται συσκευές όπως Smart Phones, Tablets, Servers, κ.α.
  
  

Επισκέπτες είναι επιχειρήσεις από όλους τους κλάδους της οικονομίας όλων των μεγεθών που θέλουν να βελτιώσουν την παρουσία τους στο Internet. Ιδιαίτερη βαρύτητα θα δοθεί σε κλάδους με δεδομένη ανάπτυξη από την παρουσία τους στο internet όπως: Τουριστικές επιχειρήσεις, Εξαγωγικές επιχειρήσεις, e-shops, κ.α.

Το συνέδριο που θα διεξαχθεί στα πλαίσια της έκθεσης είναι πελατοκεντρικό και θα παρουσιάσει βέλτιστες πρακτικές εταιρειών του κλάδου και παρουσιάσεις από πελάτες τους, για τα οφέλη που αποκόμισαν από τηνπροβολή τους στο διαδίκτυο.

Για περισσότερες πληροφορίες επισκεφθείτε το www.webworldexpo.gr ή επικοινωνήστε με το 210.924.5577 ή info@verticom.gr

ΠΗΓΗ

Διαβάστε περισσότερα »

Animated Drop Down Navigation Menu With Css3 For Blogs & web site

Ένα όμορφο menu για το site σας η το blog σας!

Αντιγραφή τον παρακάτω κώδικα.

<style>
#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
#cssmenu > ul > li {
    float: left;
    margin-left: 15px;
    position: relative;
z-index:9999999;
}
#cssmenu > ul > li > a {
    color: rgb(160,160,160);
    font-family: Verdana, 'Lucida Grande';
    font-size: 15px;
    line-height: 70px;
    padding: 15px 20px;
-webkit-transition: color .15s;
   -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: rgb(250,250,250); }
#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}
#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
        transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}
#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
    background-color: rgb(205,44,36);
    color: rgb(240,240,240);
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='/'><span>Home</span></a></li>
   <li class='has-sub'><a href='URL'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='URL'><span>Product 1</span></a>
            <ul>
               <li><a href='URL'><span>Sub Item</span></a></li>
               <li class='last'><a href='URL'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='URL'><span>Product 2</span></a>
            <ul>
               <li><a href='URL'><span>Sub Item</span></a></li>
               <li class='last'><a href='URL'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='URL'><span>About</span></a></li>
   <li class='last'><a href='URL'><span>Contact</span></a></li>
</ul>
</div>

DEMO


Και αφού αντικαταστήσετε το url με το δικό σας κάντε το αποθήκευση και τελειώσατε!


Και μπορείτε επίσης να διαμορφώσετε το CSS όπως θέλετε εσείς.

Διαβάστε περισσότερα »

10 Beautiful Page Navigation Widgets For Blogger

Πρώτα απ 'όλα θα πρέπει να συνδεθείτε στο λογαριασμό σας Blogger

Επιλέξτε ένα στυλ από 10 στυλ

Προσαρμόστε τις ρυθμίσεις όπως επιθυμείτε

Πατήστε το κουμπί Δημιουργία

Τέλος πατήστε το κουμπί Προσθήκη στο Blogger.

Διαβάστε περισσότερα »

Τι είναι το cloud computing. Ανάλυση με απλά λόγια.

Στο σημερινό άρθρο θα προσπαθήσω να κάνω μία ανάλυση σε ένα όρο που χρησιμοποιούμε κατά κόρον στις ημέρες μας. Ο όρος αυτός είναι το “cloud computing”. To “cloud computing” είναι μία τεχνολογία που έχει αναπτυχθεί τα τελευταία χρόνια και πλέον πολλές εφαρμογές βασίζονται πάνω σε αυτό. Ας δούμε λοιπόν πώς ξεκίνησε η ανάπτυξη της τεχνολογίας αυτής και τι είναι και περιέχει ο όρος “cloud computing”.

Γιατί “cloud” και όχι κάποια άλλη λέξη;

Αυτή ήταν η πρώτη ερώτηση που μου ήρθε στο μυαλό όταν άκουσα τον όρο “cloud computing“. Βέβαια, στον προγραμματισμό συνηθίζεται να δίνονται περίεργα ονόματα σε διάφορες πτυχές του. Για παράδειγμα η γλώσσα “JAVA” ονομάστηκε έτσι από την τον καφέ Java. Στην περίπτωση του “cloud computing” η εξήγηση είναι πιο προφανής. Σε πολλά βιβλία τα οποία περιέχουν διαγράμματα και εξηγήσεις για το πώς λειτουργεί το ίντερνετ ,το απεικονίζουν σαν ένα σύννεφο στο οποίο συνδέονται τα router,οι webservers στους οποίους υπάρχουν οι web εφαρμογές κτλ και εν συνεχεία οι υπολογιστές που χρησιμοποιούν αυτές τις εφαρμογές. Με μια πρώτη ματιά θα μπορούσαμε να πούμε ότι αυτό το σύννεφο είναι το λεγόμενο “cloud”. Δεν είναι όμως ακριβώς έτσι τα πράγματα.

Απλή εξήγηση για το “cloud computing” με απλό παράδειγμα.

Με πολύ απλά λόγια το “cloud computing” είναι μία δομή, με την οποία μας δίνεται η δυνατότητα να έχουμε πρόσβαση και να χρησιμοποιούμε web εφαρμογές χωρίς να τις διαθέτουμε στον υπολογιστή μας ή σε κάποια άλλη συσκευή που είναι διασυνδεδεμένη με το ίντερνετ. Σε αυτή τη δομή η εφαρμογή βρίσκεται σε ένα server και εμείς τη χρησιμοποιούμε χωρίς να χρειάζεται να την εγκαταστήσουμε στον υπολογιστή μας.Ας κάνουμε ένα πολύ απλό παράδειγμα. Η Adobe, η γνωστή εταιρία, έχει δημιουργήσει μία online πλατφόρμα, την Adobe Creative Cloud. Αυτή η πλατφόρμα λειτουργεί ως εξής. Ένας χρήστης μπορεί με ένα αρκετά μικρό ποσό μηνιαίως να γίνει μέλος και να χρησιμοποιεί online εργαλεία όπως το Photoshop, Dreamweaver. Αυτό γίνεται χωρίς να χρειάζεται ο χρήστης να έχει κάποιο από αυτά τα προγράμματα στον υπολογιστή του. Όλα τα updates κλπ γίνονται από την ίδια την εταιρία και ο χρήστης πληρώνει ποσό ανάλογα με την “πακέτο” που έχει επιλέξει. Καταλαβαίνετε πόσο καλό είναι αυτό; Για παράδειγμα, το Photoshop κοστίζει πάνω από 1000 Ευρώ. Με αυτήν την cloud εφαρμογή ο χρήστης ενώ χρησιμοποιεί το πλήρες software πληρώνει μόνο λίγα ευρώ το μήνα για τη χρήση αυτή και το βασικότερο είναι ότι έχει πρόσβαση σε αυτό και στα αρχεία του από οποιονδήποτε υπολογιστή.

Πλεονεκτήματα cloud computing.

• Οικονομία.Αυτό είναι από τα πιο βασικά πλεονεκτήματα του cloud computing. Το κόστος που μπορεί να έχει ένα λογισμικό ίσως να είναι απαγορευτικό για μία μικρή εταιρία. Με το “cloud” τα δεδομένα αυτά αλλάζουν καθώς η εταιρία δεν πληρώνει την εφαρμογή αλλά πληρώνει την χρήση της. Συνήθως σε cloud δίκτυα υπάρχουν πολλές δυνατότητες και “πακέτα” για την πληρωμή της χρήσης κάποιας εφαρμογής.
• Μεγάλος Αποθηκευτικός Χώρος.Η αποθήκευση των διαφόρων πληροφοριών είναι θέμα υψίστης σημασίας. Με το cloud computing έχουμε συνήθως όσο αποθηκευτικό χώρο θα χρειαστούμε.
• Πρόσβαση από οποιαδήποτε συσκευή διαθέτει σύνδεση στο ίντερνετ.
• Πολύ μεγάλη ευελιξία.

Μειονεκτήματα του cloud computing.

• Ασφάλεια δεδομένων.Είναι λογικό κάποιες φορές να έχουμε συγκεκριμένα δεδομένα σε δικό μας τοπικό server και όχι στο cloud.
• Αυξημένη πολυπλοκότητα.Αυτό συμβαίνει όταν έχουμε μία εφαρμογή αποθηκευμένη κάπου τοπικά,σε ένα δικό μας webserverκαι προσπαθούμε να την κάνουμε να επικοινωνήσει με μία άλλη στο cloud. Τα πράγματα εκεί γίνονται αρκετά περίπλοκα και πολλές φορές η λύση εκτός ότι δεν είναι προφανής , αποτυγχάνει.

Ο όρος “υπηρεσία” στο cloud computing.

Αφού λοιπόν έχει αρχίσει να γίνεται κατανοητό τι είναι αυτό το “cloud computing” και πώς χρησιμοποιείται ας δούμε ένα βασικότατο όρο που χρησιμοποιείται μαζί. Τον όρο “υπηρεσία” ή στα αγγλικά “service”. “Υπηρεσία”, είναι η δυνατότητα που μας παρέχει το cloud σύστημα να χρησιμοποιούμε κάποιο software μέσα σε αυτό το δίκτυο. Αυτή η δυνατότητα ονομάζεται “υπηρεσία”. Ας δούμε λίγο κάποια βασικά είδη υπηρεσιών που μας προσφέρει το cloud computing. Θα χρησιμοποιήσω τους αγγλικούς όρους διότι έτσι αναφέρονται στην παγκόσμια βιβλιογραφία.

Software as Service (SasS)

Link φωτογραφίας: http://c.teamwox.com/articles/2010/4/SaaS_pic.png

Σε αυτό τον τύπο υπάρχει ένα application το οποίο βρίσκεται σε ένα cloud server και ο χρήστης μπορεί να έχει πρόσβαση σε αυτό μέσω μίας απλή σύνδεσης στο ίντερνετ. Το software αυτό ανήκει σε κάποιον κατασκευή και ο χρήστης το πληρώνει ανάλογα με την χρήση που του κάνει και τους πόρους που χρειάζεται. Το βασικό πλεονέκτημα του μοντέλου “software as service” είναι ότι ο κατασκευαστής αναλαμβάνει τα έξοδα συντήρησης του software καθώς και τη φιλοξενία του σε κάποιον cloud server. Ο χρήστης πληρώνει μόνο την χρήση που κάνε(αν και υπάρχουν και cloud applications που είναι δωρεάν).Επίσης το μοντέλο SasS είναι δημιουργημένο με βασικό γνώμονα τη σωστή λειτουργία του software με χρήση browser. Όσον αφορά την ασφάλεια των διαφόρων εφαρμογών, συνήθως χρησιμοποιείται SSL (Secure Sockets Layer) το οποίο είναι παγκοσμίως αναγνωρισμένο. Έτσι , οι χρήστες μπορούν με ασφάλεια να χρησιμοποιήσουν το cloud application.

Platform as Service (PasS)

Αυτό το μοντέλο μοιάζει πολύ με το προηγούμενο. Το βασικό του στοιχείο είναι ότιπαρέχει την πλατφόρμα την οποία χρησιμοποιεί ένας χρήστης για να δημιουργήσει κάτι, για παράδειγμα ένα web application, χωρίς να εγκαταστήσει τίποτα.Το “platform as service” μοντέλο χρησιμοποιείται πιο πολύ για δημιουργία web interfaces, web εφαρμογών κλπ. Ένα σημαντικό πρόβλημα που υπάρχει με αυτό το μοντέλο είναι ότι αυτή η εφαρμογή που δημιουργούμε βασίζεται σε ένα συγκεκριμένο framework και υπάρχει πιθανότητα αν θελήσουμε να την μεταφέρουμε σε άλλο παροχέα cloud υπηρεσιών αυτή να μη λειτουργεί σωστά.

Link φωτογραφίας:http://www.zoho.com/creator/images/subpages/paas.gif

Storage as a service (StaaS)

Στο μοντέλο αυτό υπάρχει κάποιος πάροχος αποθηκευτικού χώρου online ο οποίος στην ουσία τον νοικιάζει έναντι κάποιας αμοιβής. Ένα παράδειγμα απλό θα μπορούσε να θεωρηθεί το Dropbox.

Hardware as Service (HaaS)

Εδώ τα πράγματα έχουν ως εξής:Ο προμηθευτής αυτής της cloud υπηρεσίας παρέχει στον χρήστη έναντι “ενοικίου”-αμοιβής το hardware που χρειάζεται όπως web servers, μνήμη CPU ,αποθηκευτικό χώρο και ότι άλλο χρειάζεται ο χρήστης σε επίπεδο hardware. Τα χρήματα που πληρώνει κάποιος στο HaaS είναι αντίστοιχα της χρήσεως των πόρων του συστήματος που κάνει.

Database as Service (DaaS)

Σε αυτό το μοντέλο υπάρχει μία υπηρεσία online παρέχει την βάση δεδομένων την οποία μπορούμε να χρησιμοποιήσουμε με κάποιο web application. Σε αυτό το μοντέλο το βασικό πλεονέκτημα είναι ότι πληρώνουμε ανάλογα με την χρήση. Ουσιαστικά όσο πιο πολύ κόσμος χρησιμοποιεί την εφαρμογή μας τόσο περισσότερα χρήματα πληρώνουμε. Μία τέτοια υπηρεσία είναι η mongoDB.

Πασίγνωστες εταιρίες που παρέχουν υπηρεσίες cloud computing.

Οι πιο γνωστές εταιρίες είναι η amazon, η google και η microsoft. Η εταιρία amazon παρέχει βασικές υπηρεσίες όπως:

• Amazon Elastic Compute Cloud
• Amazon Simple Storage Service (S3) η οποία παρέχει αποθηκευτικό χώρο online.

Όσον αφορά την Microsoft , η πλατφόρμα που χρησιμοποιεί για να παρέχει cloud computing υπηρεσίες είναι η Azure. Η πλατφόρμα αυτή παρέχει μία μεγάλη ποικιλία από εργαλεία που εφαρμόζουν διάφορα μοντέλα cloud computing όπως το “HaaS” και το “PaaS”.
H google , τέλος , παρέχει την app engine.

Cloud Os και Cloud Applications.

Σε αυτό το σημείο θα ήθελα να προσθέσω μερικά πράγματα ώστε η τεχνολογία cloud computing να μας γίνει ακόμα πιο κατανοητή. Από τη στιγμή που ο χρήστης εκτελεί κάποιες εργασίες που απαιτούν CPU, μνήμη κλπ αυτά συντελούν στο να σκεφτούμε ότι στο cloud υπάρχει ένα λειτουργικό σύστημα όπως ακριβώς σε ένα τοπικό υπολογιστή. Αυτό θα μπορούσε να ονομαστεί cloud operating system.Ένα cloud application λοιπόν είναι μία εφαρμογή που χρησιμοποιεί τους πόρους του cloud Os με σκοπό την ανάπτυξη και τη λειτουργία της.

Βασικά μοντέλα εφαρμογών του Cloud Computing

Public Cloud

Αυτό το μοντέλο δημιουργείται από εκατοντάδες web servers που τρέχουν και πάρα πολλά datacenters σε διάφορα σημεία του πλανήτη. Αυτό έχει ως αποτέλεσμα να μπορεί κάποιος να χρησιμοποιήσει μία υπηρεσία διαλέγοντας την τοποθεσία που θα βρίσκεται η εφαρμογή. Κοινώς διαλέγει το datacenter που είναι πιο κοντά του. Για παράδειγμα μία εταιρία στην Αμερική θα διαλέξει ένα cloud server που βρίσκεται στην Ν. Αμερική. Εταιρίες που προσφέρουν το public cloud είναι οι: Google, Amazon, Rackspace κλπ. Αυτή η public εφαρμογή του cloud υποστηρίζεται από εταιρίες πολύ εύρωστες οικονομικά διότι η ανάπτυξη και συντήρηση των webserver και datacenter παγκοσμίως κοστίζει πολλά χρήματα.Μία εφαρμογή που χρησιμοποιεί το “public cloud” είναι τα CDN (content delivery networks) μέσα από τα οποία το περιεχόμενα ενός site αποθηκεύεται σε κάποια datacenters παγκοσμίως και τα προσφέρει στους χρήστες της ιστοσελίδας όταν τα ζητάνε με πολύ μεγάλες ταχύτητες.

Private Cloud

Αυτό το είδος της cloud τεχνολογίας εφαρμόζεται μέσα σε οργανισμούς-εταιρίες όπου δημιουργείται ένα cloud δίκτυο το οποίο όμως βρίσκεται στα όρια του οργανισμού αυτού. Το δίκτυο αυτό δημιουργείται κατά παραγγελία με βάση τις ανάγκες του οργανισμού.

Ο όρος “Virtualization” στο cloud computing.

Τον όρο “virtualization” θα προσπαθήσω να τον εξηγήσω με ένα απλό παράδειγμα και εν συνεχεία να τον συνδέσω με το cloud computing. Επίσης σας παραθέτω ένα καταπληκτικό βίντεο που εξηγεί τον παραπάνω όρο χρησιμοποιώντας lego.

Η τεχνολογία virtualization είναι η κινητήριος δύναμη του cloud computing. Στην τεχνολογία αυτή μπορούμε να χωρίσουμε ένα φυσικό hardware, ένα webserver , σε πολλά κομμάτια που το κάθε ένα τρέχει το δικό του λειτουργικό. Έτσι επιτυγχάνεται άριστη λειτουργικότητα , ταχύτητα και απόλυτη αξιοποίηση των πόρων του συστήματος. Αυτά τα κομμάτια είναι σαν εικονικοί servers και ονομάζονται “virtual machines” ή VMs. To cloudσυνδέεται με την έννοια virtualization γιατί ουσιαστικά είναι ένα σύνολο συνδεδεμένων virtual machines. Αυτός είναι ο λόγος που τα cloud δίκτυα έχουν τόσες πολλές δυνατότητες και επεκτασιμότητα διότι μοιράζονται του πόρους διάφορων συνδεδεμένων virtual machines. Δείτε εδώ ένα εκπληκτικό video που εξηγεί το virtualization στο cloud computing.

Περαιτέρω έρευνα για το cloud computing και πηγές.

Αφού είδαμε τα βασικά στοιχεία της τεχνολογίας cloud σας παραθέτω μερικές πηγές ώστε να ψάξετε , να διαβάσετε και να επεκτείνετε τις γνώσεις σας.

Καλά βιβλία για το cloud computing.

• Cloud computing για dummies.Ένα πολύ καλό βιβλίο για εντελώς αρχάριους που σας εισάγει στην τεχνολογία αυτή χωρίς δυσνόητες έννοιες.
• The cloud at your service.
• Securing the Cloud: Cloud Computer Security Techniques and Tactics.Το βιβλίο αυτό δίνει έμφαση στην ασφάλεια των cloud εφαρμογών και των cloud δικτύων.Πολύ καλό γι αυτούς που θέλουν να μάθουν για το πώς θα εφαρμόσουν κάποια τεχνολογία που παρέχει το cloud computing με μέγιστη ασφάλεια.

Άλλες πηγές για το cloud computing.

• Cloud Computing:Web based applications that change the way you work and collaborate online.Ένα άρθρο-βιβλίο 29 σελίδων για αρχάριους.
• Introduction to cloud computing
• Cloud Computing Online Training Knowledge Labs Course Online-Video στο Youtube.
• Above the Clouds: A Berkeley View of Cloud Computing
• Άρθρα για το cloud computing στο cmswire.com.

Επίλογος

Κάπου εδώ τελειώνει η μικρή ανάλυση που προσπάθησα να κάνω ώστε να γίνει κατανοητό τι είναι το cloud computing. Ελπίζω το άρθρο αυτό να σας άρεσε και να ήταν χρήσιμο στην αύξηση των γνώσεών σας.Σας ευχαριστώ πολύ για την ανάγνωση.

ΠΗΓΗ

Διαβάστε περισσότερα »