Web Analytics Made Easy - StatCounter
Ιανουαρίου 2013

30 Ιανουαρίου 2013

Δωρεάν chat scripts για το site σας





Πρόκειται για μια συλλογή από δωρεάν chat widgets που μπορείτε να εγκαταστήσετε στις ιστοσελίδες σας.

1. Chatango

Chatango

2. Meboo.me

Meboo.me

3. JWChat

JWChat

4. CBox

CBox

5. Mibew Web Messenger

Mibew Web Messenger

6. AjaxChat for WordPress

AjaxChat for WordPress

7. AJAX Chat

AJAX Chat

8. phpFreeChat

phpFreeChat

9. iJab

iJab

10. Ajax IM

Ajax IM


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

Open Source Chat App Για Web Developers – Kandan



Το Kandan είναι ένα open source app chat για τους web developers. Είναι εύκολο να αναπτύξει CloudFoundry, Heroku, dotCloud, κλπ. Υποστηρίζει Συνεργατική συνομιλία ομάδας ( Collaborative team chat), Απεριόριστα κανάλια, Ενσωμάτωση για τις εικόνες και τα βίντεο στο youtube με αιτήσεις για τους άλλους και πολλά ακόμα.




Απαιτήσεις: -
Downloadhttp://kandan.me/
Άδεια: AGPL License
Διαβάστε Περισσότερα »

27 Ιανουαρίου 2013

Γενικά / Εισαγωγή στην Επιστήμη των Υπολογιστών book





ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ
Σχολή Θετικών Επιστημών και Τεχνολογίας
Πρόγραμμα Σπουδών
ΠΛHPOΦOPIKH
Θεματική Ενότητα
EΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ
Τόμος A'
Εισαγωγή
στην Επιστήμη των Υπολογιστών
ΗΛΙΑΣ ΛΥΠΙΤΑΚΗΣ
Καθηγητής Τμήματος Πληροφορικής
Οικονομικού Πανεπιστημίου Αθηνών
ΠATPA 2000
ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ
Σχολή Θετικών Επιστημών και Τεχνολογίας
Πρόγραμμα Σπουδών
ΠΛHPOΦOPIKH
Θεματική Ενότητα
EΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ
Τόμος A'
Εισαγωγή στην Επιστήμη των Υπολογιστών
Συγγραφή
ΗΛΙΑΣ ΛΥΠΙΤΑΚΗΣ
Καθηγητής Τμήματος Πληροφορικής Οικονομικού Πανεπιστημίου Αθηνών
Κριτική Ανάγνωση
EΛΠI∆A KEPAYNOY
Kαθηγήτρια Tμήματος Πληροφορικής Πανεπιστημίου Kύπρου
Ακαδημαϊκός Υπεύθυνος για την επιστημονική επιμέλεια του τόμου
ΠANAΓIΩTHΣ ΠINTEΛAΣ
Καθηγητής Tμήματος Mαθηματικών Πανεπιστημίου Πατρών
Επιμέλεια στη μέθοδο της εκπαίδευσης από απόσταση
ΓEPAΣIMOΣ KOYΣTOYPAKHΣ
Γλωσσική Επιμέλεια
ΛΟΥΪΖΑ ΜΠΑΝΤΗ
Τεχνική Επιμέλεια
ΕΣΠΙ ΕΚ∆ΟΤΙΚΗ Ε.Π.Ε.
Καλλιτεχνική Επιμέλεια – Σελιδοποίηση
TYPORAMA
Συντονισμός ανάπτυξης εκπαιδευτικού υλικού και γενική επιμέλεια των εκδόσεων
ΟΜΑ∆Α ΕΚΤΕΛΕΣΗΣ ΕΡΓΟΥ ΕΑΠ / 1997–1999
ISBN: 960–538–078–1
Kωδικός Έκδοσης: ΠΛH 10/1
Copyright 2000 για την Ελλάδα και όλο τον κόσμο
ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ
Οδός Παπαφλέσσα & Υψηλάντη, 26222 Πάτρα – Τηλ: (0610) 314094, 314206 Φαξ: (0610) 317244
Σύμφωνα με το Ν. 2121/1993, απαγορεύεται η συνολική ή αποσπασματική αναδημοσίευση του βιβλίου αυτού
ή η αναπαραγωγή του με οποιοδήποτε μέσο χωρίς την άδεια του εκδότη.






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

Πώς να αυξήσετε τη φήμη σας σαν web designer




Διαβάστε παρακάτω 9 συμβουλές για αυτό το σκοπό.
1. Βγάλτε μπροστά τον καλό σας εαυτό
Αυτό σημαίνει να έχετε καλή εμφάνιση, να είστε ευγενείς και θετικοί και να μιλάτε σε όλους όμορφα. Ποτέ δεν ξέρεις ποιός μπορεί να σε βλέπει.
2. Κρατάτε τις υποσχέσεις σας
Εαν λέτε κάτι, κάντε το . Εαν κάποιο πρόβλημα σας εμποδίζει δώστε την δουλειά σε κάποιον συνεργάτη σας.Μάλλον, δεν θέλετε οι πελάτες σας να σας κολλήσουν την ταμπέλα του φαφλατά.
3. Επικοινωνείτε πολύ
Κρατάτε συνέχεια επαφή. Ακόμα και εαν δεν έχετε προχωρήσει το project του πελάτη σας στείλτε του ενα μήνυμα. Έτσι, οι πελάτες ή οι αγοραστές σας δεν θα ανησυχούν ότι τους ξεχάσατε. Φυσικά, δεν χρειάζεται να στέλνετε μήνυμα κάθε μια ώρα.
4. Βελτιώστε την ιστοσελίδα σας
Οι πελάτες σας θέλουν να γνωρίζουν για εσάς. Φτιάχνοντας μια ιστοσελίδα για την επιχείρησή σας κάνετε ενα βήμα για την διαδικτυακή φήμη σας. Βεβαιωθείτε ότι είναι καλοσχεδιασμένο, ότι ενημερώνει για εσάς και τις υπηρεσίες σας και ότι οι επισκέπτες μπορούν να επικοινωνήσουν μαζί σας.
5. Χρησιμοποιήστε την κοινωνική δικτύωση
Φτιάξτε σελίδα στο facebook, λογαριασμό twitter και σελίδα στο Linkedin. Οι χρήστες του διαδικτύου χρησιμοποιούν πολύ τα social media για να επικοινωνήσουν με μια επιχείριση ή να μάθουν λεπτομέρειες για αυτή.
6. Μην σπαμάρετε
Το συγκεκριμένο σημείο είναι πολύ σημαντικό εαν έχετε λίστα e-mail των πελατών σας. 1 e-mail την εβδομάδα αρκεί για να μην γίνεται ενοχλητικοί.
7. Ζητήστε αξιολόγηση
Το να ρωτήσετε τους πελάτες σας πως βλέπουν εσάς και τις υπηρεσίες σας είναι ενα τρόπος να τους δείξετε ότι η γνώμη τους μετράει. Ενθαρρύνετε τους στην αξιολόγηση και την κριτική.

8. Απαντήστε στην αξιολόγηση

Ευχαριστήστε τους πελάτες με την θετική αξιολόγηση. Δουλέψτε με όσους έχουν παράπονο.H κατασκευή ιστοσελίδων είμαι αμφίδρομη διαδικασία μην το ξεχνάτε ποτέ αυτό όπως και κάθε συνεργασία εξάλλου. Στα παράπονα που αφορούν εσάς ή τις υπηρεσίες σας αναρωτηθείτε εαν όντως είναι αληθινά. Εαν ναί, εργαστείτε για να ξεπεράσετε το πρόβλημα. Για να κερδίσετε πόντους ζητήστε την γνώμη του πελάτη για το πως πιστεύει ότι πρέπει να βελτιώσετε το πρόβλημα .
9. Παρακολουθείτε τη φήμη σας
Ένας απο τους λόγους που η φήμη μιας επιχείρησης μπορεί να πέσει είναι γιατί δεν μπόρεσε να ανταποκριθεί άμεσα και σωστά σε κάποιο πρόβλημα που προέκυψε. Εφόσον έχετε ξεκινήσει, το να παρακολουθείτε τη φήμη σας δεν είναι δύσκολο.Καθώς η επιχείρησή σας και η δημοτικότητα της αυξάνει, η ανάγκη αυτή είναι πιο επιτακτική.Εαν δεν μπορείτε να το κάνετε οι ίδιοι, αναθέστε το σε μια εταιρεία. Συνήθως όσοι ασχολούνται με προώθηση ιστοσελίδων αναλαμβάνουν και την υπεράσπιση της δικτυακής σας φήμης. Αξίζει τα λεφτά.Δεν μπορείτε να είστε τέλειοι 100% πάντα. Με τα παραπάνω βήματα όμως μπορείτε να περάσετε εύκολα αυτή την εικόνα.

ΠΗΓΗ

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

25 Ιανουαρίου 2013

Beautiful share widget to add below posts for blogger



Πώς να προσθέσετε αυτό το widget:
Βήμα 1: Μετάβαση πρότυπα του blog σας και να δημιουργήσετε αντίγραφα ασφαλείας ένα αντίγραφο του προτύπου σας.

Βήμα 2: Κάντε κλικ στο "Επεξεργασία HTML".

Βήμα 3: Κάντε κλικ στο widget επεκτείνει το πλαίσιο ελέγχου στην κορυφή της HTML.

Βήμα 4: Πατήστε το πλήκτρο "Ctrl + F" και την αναζήτηση για τον κωδικό.


<div class='post-footer-line post-footer-line-1'/>


Βήμα 5: Ακριβώς πάνω από τον κώδικα, επικολλήστε τον παρακάτω κώδικα.


<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://lh3.googleusercontent.com/-AK_TNwyWxJw/T8XDa2Q6TpI/AAAAAAAAB04/UCczorSYj0s/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}
.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            </script>
        </div>
        <div class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='promote_google'>
            <g:plusone annotation="none" size='medium'></g:plusone>
            <script type='text/javascript'>
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>
        </div>
    </div>
</b:if>


Βήμα 6: Τώρα αποθηκεύσετε το πρότυπό σας και το widget θα εμφανιστεί.

DEMO

ΠΗΓΗ 
Διαβάστε Περισσότερα »

Top 8 εναλλακτικές λύσεις Adsense




1. Buysell ads 


Ελάχιστη πληρωμή: $ 50
Αυτός είναι ένας από τους πιο έμπιστους διαφημίσεις δίκτυο στο διαδίκτυο μετά το Google adsense για το blogging. BSA δεν δέχεται τοποθεσίες χωρίς αναθεώρηση και την παρακολούθηση των πολιτικών τόσο αυστηρά όσο adsense. Η ελάχιστη απαίτηση είναι ότι πρέπει να πάρετε 50 χιλ. - 100 χιλ. προβολές σελίδων ανά μήνα και το περιεχόμενο της ιστοσελίδας σας πρέπει να είναι ζωντανά και επιπλωμένο. BSA δεν δέχεται sites με αντιγραφή ή παράνομο περιεχόμενο. Μοναδικότητα έχει σημασία να πάρει BSA. Ένα άλλο πλεονέκτημα με αυτό το δίκτυο τις διαφημίσεις είναι ότι μπορείτε να πάρετε το 75% των εσόδων που παράγουν. Και αυτό μπορεί να χρησιμοποιηθεί παράλληλα με το Google AdSense. Εδώ διαφημιζόμενοι μπορούν να επιλέξουν από τη λίστα των τόπων είναι διαθέσιμα που ταιριάζει στις απαιτήσεις τους και Roomates Σύμφωνα με τους προϋπολογισμούς διαφήμισης. Ο εκδότης μπορεί να καθορίσει το ρυθμό για τις ενότητες διαφημίσεών τους πριν από την πώλησή τους.

2. Chitika



Ελάχιστη πληρωμή: $ 10
Το δίκτυο λειτουργεί στα συμφραζόμενα διαφημίσεις και έχει ένα ευρύ φάσμα των εκδοτών. Chitika είναι μια από τις αναδυόμενες διαφημίσεις τοποθεσίες δίκτυο εμπορίας ότι πολλοί προτιμούν να διαφημιστείτε μαζί. Το δίκτυο παρέχει υψηλή CPM





Ελάχιστη πληρωμή: $ 25
Ήμουν χρησιμοποιώντας adhitz διαφημίσεις σε αυτό το blog για αρκετό διάστημα. Το μεγαλύτερο μειονέκτημα με adhitz διαφημίσεις είναι ότι δεν υπάρχουν διαφημίσεις και διαφημιστές διαλογής μπορούν να δημοσιεύουν κάθε είδους διαφημίσεις adhitz εκτός από τις διαφημίσεις με πορνό. Έτσι, αυτό που συμβαίνει είναι το αποτέλεσμα του φθηνού μάρκετινγκ, αυξάνεται διαφημιστές θέση να προβάλλουν τις διαφημίσεις τους σε αυτό το δίκτυο συνεργατών του δικτύου που οδηγεί σε χαμηλό CPC






Ελάχιστη πληρωμή: $ 25
Clicksor είναι ένα δίκτυο διαφημίσεων με λιγότερη προσοχή στις διαφημίσεις banner. Clicksor έχει τέσσερα είδη των διαφημίσεων, pop-ups είναι Roomates, συμφραζόμενα, inline. Αυτό που θα ήθελα είναι να καθορίσετε για το pop up διαφημίσεις, Roomates έχει υψηλά ποσοστά αμοιβής. Εάν έχετε ένα blog με τα μέρη της κυκλοφορίας, αλλά δεν google adsense (Ένα blog Roomates δεν έχει αρχικό μοναδικό περιεχόμενο ή blogs με εποχιακή δημοτικότητα) μπορούν να χρησιμοποιήσουν αυτό το δίκτυο για να διαφημίσετε. Αλλά υποθέτω ότι αυτό μπορεί να μειώσει την ευρετηρίαση σελίδες σας στην αναζήτηση του Google. Ωστόσο, ένα άλλο δίκτυο διαφημίσεων που θα θέλατε να πειραματιστείτε με.



5. Ad dynamo



Ελάχιστη πληρωμή: $ 20
Μόλις υπογράψει με το δίκτυο και άρχισε να εξυπηρετούν τις διαφημίσεις. Μόνο μειονέκτημα που βρήκα ήταν, το δίκτυο αυτό δεν έχει πολλούς διαφημιστές και χρειάζεται χρόνος για να εξυπηρετήσει τις διαφημίσεις. Αλλά αυτό το δίκτυο έχει ένα υψηλό CPC της μέχρι € 0,50.




Ελάχιστη πληρωμή: $ 10
Αυτό είναι ένα εντελώς διαφορετικό δίκτυο. Οι διαφημιστές μπορούν να υποβάλλουν προσφορές για διαφημιστικό χώρο σας και θα πάρετε σχετικές διαφημίσεις Σύμφωνα με τις προσφορές που κάνουν οι διαφημιστές.




Ελάχιστη πληρωμή: 5 €
Αυτό δεν είναι διαφημιστικά banner και πάλι. Υπάρχουν δύο είδη των διαφημίσεων εδώ. Ένα είναι γεμάτη διαφημίσεις σελίδα και πάνω διαφημίσεις banner. Αν τοποθετήσετε το σενάριο στη σελίδα σας, μια νέα σελίδα της adf.ly θα εμφανιστεί στην οθόνη για 5 δευτερόλεπτα και στη συνέχεια, οι χρήστες μπορούν να goto το περιεχόμενο του ιστοτόπου σας. Πολλές περιπτώσεις, αυτό θα είναι ενοχλητικό για τους αναγνώστες. Θα πληρωθείτε $ 4 ανά 1000 pageviews, Roomates είναι αρκετά όμορφος.


8. Infolinks



Ελάχιστη πληρωμή: $ 50
Διαθέτει ενσωματωμένο διαφημίσεις κειμένου και το δίκτυο αυτό είναι καλύτερο σε αυτή την πτυχή. Μπορείτε να χρησιμοποιήσετε αυτό παράλληλα με το Google AdSense


Μετάφραση Google

ΠΗΓΗ




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

10 Best Blogging Templates of 2012


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

Και κάπου εδώ έφτασε η στιχμή να βάλω και θέματα για τον blogger

Είναι τα πρώτα θέματα που βάζο για blogger ελπίζω να σας αρέσουν!


10 πολύ όμορφα θέματα για μπλόγκερ για το blog σας!

10. Norma Blogger Template

Download | Demo



9. TheStyle Blogger Template

Download | Demo



8. Cloudy Sea Template

Download | Demo



7. London Creative Blogger Template

Download | Demo



6. Exelencia Blogger Template

Download | Demo



5. Johny Sompret

Download | Demo



4. Western Blogger Template

Download | Demo



3. Leatherbound Blogger Template

Download | Demo



2. June Blogger Template

Download | Demo



1. Inspiration Blogger Template

Download | Demo


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

Pure CSS Expanded "Social Network" Widget

Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε μέσα στο «κουτί Περιεχομένου".


<!--Pure CSS Expanded "Social Network" Widget By FoulsCode.blogspot.gr-->
<style>
#MoreBlogTools-SNS {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#MoreBlogTools-SNS li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#MoreBlogTools-SNS .icon {
background: #D91E76 url('http://3.bp.blogspot.com/-unjaHZfdU1k/UK7b1J4pfOI/AAAAAAAAAzA/r7ccqS2FovU/s1600/MoreBlogTools-SNS.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #141414;
float:none;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 90px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 48px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;
}
#MoreBlogTools-SNS span:hover {
visibility: hidden;
}
#MoreBlogTools-SNS span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#MoreBlogTools-SNS .icon {
color: #fafafa;
overflow: hidden;
}
#MoreBlogTools-SNS .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#MoreBlogTools-SNS .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#MoreBlogTools-SNS .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#MoreBlogTools-SNS .pint {
background-color: rgba(204, 0, 0, .42);
background-position: 0 -526px;
}
#MoreBlogTools-SNS .linked {
background-color: rgba(0, 87, 114, .42);
background-position: 0 -574px;
}
#MoreBlogTools-SNS .deviant {
background-color: rgba(76, 122, 74, .42);
background-position: 0 -622px;
}
#MoreBlogTools-SNS .ytube {
background-color: rgba(170, 0, 0, .42);
background-position: 0 -670px;
}
#MoreBlogTools-SNS .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#MoreBlogTools-SNS li:hover .icon {
width: 250px;
}
#MoreBlogTools-SNS li:hover .icon {
background-color: #d91e76;
}
#MoreBlogTools-SNS li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#MoreBlogTools-SNS li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#MoreBlogTools-SNS li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#MoreBlogTools-SNS li:hover .pint {
background-color: #C00;
background-position: 0 -142px;
}
#MoreBlogTools-SNS li:hover .linked {
background-color: #005772;
background-position: 0 -190px;
}
#MoreBlogTools-SNS li:hover .deviant {
background-color: #4C7A4A;
background-position: 0 -238px;
}
#MoreBlogTools-SNS li:hover .ytube {
background-color: #A00;
background-position: 0 -286px;
}
#MoreBlogTools-SNS li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#MoreBlogTools-SNS .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<ul id="MoreBlogTools-SNS">
<li ><a href="Facebook URL" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li ><a href="Twitter URL" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li ><a href="Google+ URL" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li ><a href="Pinterest URL" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span>
</li>
<li ><a href="Linkedin URL" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span>
</li>
<li ><a href="DeviantArt URL" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span>
</li>
<li ><a href="YouTube URL" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span>
</li>



DEMO

Κάντε κλικ στο κουμπί "Αποθήκευση".



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

Facebook popup like box. Μια άλλη παραλλαγή





Ας ακολουθήσουμε τα παρακάτω βήματα για να το βάλετε στη Σελίδα σας:
  • Σύνδεση στον Blogger
  • Διάταξη / Προσθήκη gadget
  • Επιλέξτε HTML/JavaScript
  • Επικολλήστε τον παρακάτω κώδικα:

<script type="text/javascript" src="http://yourjavascript.com/342152315/[www.bloggertipsandtricks.net]slidboxordinary.js"></script>
<div style="bottom: 50px; right: 0px; background-image: url(http://2lolz.com/tocka.png); background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: transparent; border-top-left-radius: 15px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 15px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(0, 0, 0); border-right-color: rgb(0, 0, 0); border-bottom-color: rgb(0, 0, 0); border-left-color: rgb(0, 0, 0); border-image: initial; position: fixed; display: block; overflow-x: hidden; overflow-y: hidden; width: 342px; background-position: 0% 0%; background-repeat: repeat repeat; " id="fbslidebox">
 
    <div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">
 
<a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>
         
        <strong style="color:blue;">Μείνετε ενημερωμένοι κάνοντας ένα Like</strong>  <p style=" float:right;  margin-right:10px;" > <a style=" font-size:5px; color:trasparent; text-decoration:none;" href="http://foulscode.blogspot.gr/2013/01/facebook-popup-like-box.html" target='_blank'>FoulsCode</a></p>
<iframe src="//www.ΤΟ LINK ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK&amp;width=292&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowtransparency="true"></iframe>
        </div></div>


  • Αντικαταστήστε ΤΟ LINK ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK με το δικό σας και πατήστε αποθήκευση.







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

    21 Ιανουαρίου 2013

    Αλλάξτε το χρώμα στο gadget "Follow by email"


    • Σύνδεση στον Blogger
    • Σχεδίαση / Επεξεργασία HTML
    • Βρείτε την ]]></b:skin>
    • Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

    .FollowByEmail .follow-by-email-inner .follow-by-email-address{color:#4DA6FE !important; width:100%;height:22px;font-size:13px;border:1px inset} .FollowByEmail .follow-by-email-inner .follow-by-email-submit{width:60px;margin:0;border:0;border-radius:4px !important;-moz-border-radius:4px !important;background:#4DA6FE !important;background:rgba(0,0,0,.6);color:#fff;font-size:13px;height:24px;z-index:0} .follow-by-email-inner .follow-by-email-submit:hover{background:#FF7700 !important;}


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


     ΠΗΓΗ
    Διαβάστε Περισσότερα »

    Drop down menu σε στυλ Facebook


    Κάποιοοι από εσάς θα το ψάχνατε ;)


    ΔΕΊΤΕ ΤΟ ΕΔΏ
    Διαβάστε Περισσότερα »

    Όλο το περιεχόμενο σε μια ανάρτηση

    Όλο το περιεχόμενο σε μια ανάρτηση μπορείτε να το δείτε και στο blog μας

     DEMO


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



    <script src="http://betafouls.xtgem.com/allposts.txt.js">
    </script>
    <script src="http://ΤΟ ΟΝΟΜΑ ΤΟΥ BLOG ΣΑΣ.gr/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>

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

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

    PopUp Fan Box with Timer




    Μια άλλη μορφή σε PopUp Like Box. Σε παλιές αναρτήσεις παρουσιάσαμε πολλές μορφές τέτοιου τύπου. Ήταν όλες τους πετυχημένες. Σε σχέση με Σελίδες με καλό περιεχόμενο είχαν μεγάλο αποτέλεσμα στο να αποσπάσουν ένα Like από τους αναγνώστες. Η νέα παραλλαγή θα εμφανίζεται διαρκώς σε κάθε ανανέωση της Σελίδας, αλλά έχει τη δυνατότητα να εξαφανίζεται μόνο του μετά από ένα χρονικό διάστημα που θα επιλέξετε εσείς.

    Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη Σελίδα σας:
    • Σύνδεση στον Blogger
    • Διάταξη / Προσθήκη gadget
    • Επιλέξτε HTML/JavaScript
    • Επικολλήστε τον παρακάτω κώδικα:



    <script type='text/javascript'>//<![CDATA[ KNFBFansPRO='Your FanPage'
    //]]>
    </script>
    <style>
    #fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 8*/width:450px;border:10px solid #900000;z-index:200;-moz-border-radius: 9px;-webkit-border-radius:
    9px;margin:0pt;padding:0pt;color:#900000;text-align:left;font-family:arial,sans-serif;font-size:13px;
    }
    #fblikepop body{background:#FFF none repeat scroll 0%;line-height:1;margin:0pt;height:100%;
    }
    .fbflush{cursor:pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;
    }
    #fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 8*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;
    }
    #fblikepop #closeable{float:right;margin:7px 15px 0 0;
    }
    #fblikepop h1{background:#900000 none repeat scroll 0 0;border-top:1px solid #900000;border-left:1px solid #900000;border-right:1px solid #900000;color:#FFFFFF !important;font-size:14px !important;font-
    weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
    }
    #fblikepop #actionHolder{height:30px;overflow:hidden;}
    #fblikepop #buttonArea{background:#FFFFFF;border-top:1px solid #9000000;padding:10px;minCCCCCCght:50px;
    }
    #fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;
    }
    #fblikepop #buttonArea a:hover {color:#900000 !important;text-decoration:none !important;border:0 !important;
    }
    #fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#333 !important;
    }
    #fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;
    }
    </style>
    <script type='text/javascript' src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
    <script type="text/javascript" src="http://betafouls.xtgem.com/global_stylesheet.js"></script>
    <script language='javascript'>
    //<![CDATA[
     $(document).ready(function(){    
      $().KNFBFansPRO({
       timeout: 10,   wait: 0,
       url: 'ΤΟ LINK ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK',   closeable: true  });
     });
    //]]>
    </script>
    <div id='fbtpdiv'></div>



    • Αντικαταστήστε ΤΟ LINK ΤΗΣ ΣΕΛΙΔΑΣ ΣΑΣ ΣΤΟ FACEBOOK και πατήστε αποθήκευση.
    • Στη θέση του Your FanPage βάλτε το όνομα της Σελίδας σας ή ό,τι σας κατέβει.
    Αν θέλετε να αλλάξετε την χρονοκαθυστέρηση  "timeout: 10," , βάλτε τον αριθμό που επιθυμείτε. Αντιστοιχεί σε δευτερόλεπτα.



    ΠΗΓΗ

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

    Πλαίσιο αναζήτησης CSS3


    Ένα πλαίσιο αναζήτησης που όταν κάνετε κλικ ανοίγει εμπνευσμένο από την apple.com

    Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα στο HTML



    <style type="text/css">
    #search{}#search input[type="text"]{background:url(http://2.bp.blogspot.com/-Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/_p6u9Xpgs7c/s20/Search-icon.png) no-repeat 5px 5px #444; border:0 none; font:bold 12px Arial,Helvetica,Sans-serif; color:#d7d7d7; width:150px; padding:6px 15px 6px 35px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; text-shadow:0 2px 2px rgba(0,0,0,0.3); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset; -webkit-transition:all 0.7s ease 0s; -moz-transition:all 0.7s ease 0s; -o-transition:all 0.7s ease 0s; transition:all 0.7s ease 0s}#search input[type="text"]:focus{ background:#fcfcfc; color:#6a6f75; width:200px; -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(0,0,0,0.9) inset; text-shadow:0 2px 3px rgba(0,0,0,0.1)}
    </style>
    <center><form method="get" action="/search" id="search">
    <input name="q" type="text" size="50" placeholder="Search Here..." />
    </form></center>

    Αλλάζοντας τα width:150px  width:200px  προσαρμόζεται όπως το θέλετε!

    Αφήστε τα σχόλιά σας εδώ κάτω.
    Διαβάστε Περισσότερα »

    CSS3 κάθετο αναδιπλωμένο μενού πλοήγησης

    Ένα μενού αναδιπλωμένο όταν σέρνεται το βελάκι πάνω του όμορφο μπορώ να πω ας ξεκινήσουμε!





    Ένα Εγκατάσταση Βήμα Για Blogger / Blogspot Blogs
    Αυτό το βήμα για αρχάριους Bloggers και Blogger / Blogspot χρήστες. Όχι ο καθένας έχει συμβατότητα με την κωδικοποίηση.

    Για να προσθέσετε αυτό το μενού για να blogger blog σας ακολουθήστε τα παρακάτω βήματα:

    1. Μετάβαση στο Blogger ταμπλό> Διάταξη
    2. Προσθέστε ένα HTML / Javascript widget και να επικολλήσετε τους κωδικούς παρακάτω:



    <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
    }
    nav {
      font-family: Helvetica, Arial, sans-serif;
      line-height: 1.5;
      margin: 50px auto; /*for display only*/
      width: 200px;
      -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
         -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
              box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    }
    .menu-item {
      background: #fff;
      width: 200px;
    }
    /*Menu Header Styles 1*/
    .menu-item h4 {
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      padding: 7px 12px;
      background: #a90329;
    }
    .menu-item h4 a {
      color: white;
      display: block;
      text-decoration: none;
      width: 200px;
    }
    /*Menu Header Styles 2*/
    .menu-item h4 {
      border-bottom: 1px solid rgba(0,0,0,0.3);
      border-top: 1px solid rgba(255,255,255,0.2);
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      padding: 7px 12px;
      background: #a90329; /* Old browsers */
      background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
      background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    }
    .menu-item h4:hover {
      background: #cc002c; /* Old browsers */
      background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
      background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    }
    .alpha p {
      font-size: 13px;
      padding: 8px 12px;
      color: #aaa;
    }
    /*ul Styles*/
    .menu-item ul {
      background: #fff;
      font-size: 13px;
      line-height: 30px;
      list-style-type: none;
      overflow: hidden;
      padding: 0px;
    }
    .menu-item ul a {
      margin-left: 20px;
      text-decoration: none;
      color: #aaa;
      display: block;
      width: 200px;
    }
    /*li Styles*/
    .menu-item li {
      border-bottom: 1px solid #eee;
    }
    .menu-item li:hover {
      background: #eee;
    }
    /*ul Styles*/
    .menu-item ul {
      background: #fff;
      font-size: 13px;
      line-height: 30px;
      height: 0px; /*Collapses the menu*/
      list-style-type: none;
      overflow: hidden;
      padding: 0px;
    }
    /*ul Styles*/
    .menu-item ul {
      background: #fff;
      font-size: 13px;
      line-height: 30px;
      height: 0px;
      list-style-type: none;
      overflow: hidden;
      padding: 0px;
      /*Animation*/
      -webkit-transition: height 1s ease;
         -moz-transition: height 1s ease;
           -o-transition: height 1s ease;
          -ms-transition: height 1s ease;
              transition: height 1s ease;
    }
    .menu-item:hover ul {
      height: 115px;
    }
    </style>
    <nav>
        <div class="menu-item alpha">
          <h4><a href="http://www.foulscode.blogspot.gr/">Home</a></h4>
          <p>Lorem ipsum dolor sit...</p>
        </div>
        <div class="menu-item">
          <h4><a href="#">Portfolio</a></h4>
          <ul>
            <li><a href="#">Web</a></li>
            <li><a href="#">Print</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </div>
        <div class="menu-item">
          <h4><a href="#">About</a></h4>
          <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Meet The Owners</a></li>
            <li><a href="#">Awards</a></li>
          </ul>
        </div>
        <div class="menu-item">
          <h4><a href="#">Contact</a></h4>
          <ul>
            <li><a href="#">Phone</a></li>
            <li><a href="#">Email</a></li>
            <li><a href="#">Location</a></li>
          </ul>
        </div>
    </nav>



    DEMO


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

    Ελπίζω να σας άρεσε!

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

    12 απλά, αλλά χρήσιμα online εργαλεία για developers !





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

    Εισαγωγή

    Σαν Web Developer, πάντα βάζω στα αγαπημένα μου, σελίδες που είναι πραγματικά χρήσιμες και μπορούν να αυξήσουν την παραγωγικότητα μου. Οι περισσότερες από τις σελίδες που ακολουθούν κάνουν λίγα πράγματα αλλά μου εξοικονομούν πολύ χρόνο.

    Preloaders

    Έχω φτιάξει αρκετές ιστοσελίδες που χρησιμοποιούν AJAX. Κάθε φορά που χρειάζομαι ένα GIF για να δείχνει πως η σελίδα κάνει εργασίες στο παρασκήνιο, επισκέπτομαι αυτή την ιστοσελίδα και παίρνω όποιο GIF μου αρέσει. Έχει αρκετές επιλογές και ρυθμίσεις που σας επιτρέπει να κάνετε ότι αλλαγές θέλετε.

    Δημιουργός προστατευτικών συνδέσμων κατά των Spambot για e-mail

    Λοιπόν, θέλετε να βάλετε την διεύθυνση του e-mail σας στην ιστοσελίδα σας αλλά φοβάστε τα spam; Μπορείτε να χρησιμοποιήσετε Javascript για να το ενσωματώσετε στη σελίδα σας. Αυτή η ιστοσελίδα μπορεί να σας βοηθήσει να μετατρέψετε το e-mail σας σε Javascript και μετά να το εμφανίσει, σε μορφή αναγνωρίσιμη από το άνθρωπο.

    Μορφοποίηση και επικύρωση κώδικα JSON

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

    Οδηγός για την υποστήριξη των CSS

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

    Δημιουργός κωδικών πρόσβασης

    Δεν μπορείτε να φανταστείτε πόσες φορές έχω δημιουργήσει κωδικούς πρόσβασης για σελίδες στις οποίες δουλεύω. Λοιπόν, ένα πολύ χρήσιμο εργαλείο, το password generator, θα σας βοηθήσει σε αυτό το κομμάτι.

    Εργαλεία για τα αρχεία .htaccess

    Δεν είναι και από τους εμπειρότερους στο λειτουργικό σύστημα Linux / Unix αλλά γνωρίζω μερικές εντολές σε Linux που μου επιτρέπουν να στήσω ένα web site πάνω σε ένα Server. Ένα από τα πράγματα που πραγματικά συχαίνομαι είναι η δημιουργία των αρχείων .htaccess για αναγνώριση χρηστών. Δεν μπορώ ποτέ να θυμηθώ την εντολή για τη δημιουργία του αρχείου htpasswd. Ευτυχώς όμως που υπάρχει και το Internet, βρήκα αυτή τη σελίδα και με έχει βοηθήσει πάρα πολύ.

    Code Beautifier

    Σε αυτή την υπηρεσία θα μπορέσετε να μορφοποιήσετε και να βελτιστοποιήσετε τον CSS κώδικα σας. Είναι αρκετά δυνατό εργαλείο για να μορφοποιήσετε τον κώδικα σας, έτσι ώστε να είναι ποιο ευανάγνωστος, καθώς επίσης θα μετατρέψεις μερικές εντολές CSS στις ανάλογες συντομογραφίες τους έτσι ώστε να μικρύνει λίγο το συνολικό μέγεθος του αρχείου.

    W3C Validator


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

    Δημιουργός Favicon

    Δημιουργήστε τα δικά σας favicons εύκολα και γρήγορα.

    Βρείτε σπασμένους συνδέσμους με τη βοήθεια της W3C

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

    PC Names

    Το PC Names είναι η αγαπημένη μου μηχανή αναζήτησης για domain names. Μου αρέσει γιατί είναι βασισμένη σε AJAX και έτσι επιστρέφει τα αποτελέσματα άμεσα.

    Δημιουργός XML χαρτών για ιστοσελίδες.

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


    Διαβάστε Περισσότερα »
    Related Posts Plugin for WordPress, Blogger...