Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Εμφάνιση αναρτήσεων με την ετικέτα Widget

Simple Login Form

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

CODE: CSSHTML

<style>
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

/* FoulsCode.com */

::selection {
color: #fff;
background: #f676b2; /* Safari */
}
::-moz-selection {
color: #fff;
background: #f676b2; /* Firefox */
}

/*******************
BODY STYLING
*******************/

* {
margin: 0;
padding: 0;
border: none;
outline: none;
}

body {
background: url('http://www.demo.amitjakhu.com/login-form/images/bg.png');
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
height: 500px;
}

#wrapper {
/* Center wrapper perfectly */
width: 300px;
height: 400px;
margin: 70px auto;
}

/* Download Button (Demo Only) */
.download {
display: block;
position: absolute;
float: right;
right: 25px;
bottom: 25px;
paddin…

Clean login form with CSS

DEMO

HTML:

ΚΩΔΙΚΑΣ:



<section class="login">
<div class="titulo">Staff Login FoulsCode.com</div>
<form action="#" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" required title="Username required" placeholder="Username" data-icon="U">
<input type="password" required title="Password required" placeholder="Password" data-icon="x">
<div class="olvido">
<div class="col"><a href="#" title="Ver Carásteres">Register</a></div>
<div class="col"><a href="#" title="Recuperar Password">Fotgot Password?</a></div>
</div>
<a href="#" class="enviar">Submit</a>
</form>
</section>

CSS:

ΚΩΔΙΚΑΣ:

/* website: http://foulscode.com */

body {
background: -w…

Most Commented Posts Widget for Blogger

Γεια σε όλους τους μπλόγκερ! Εδώ έχω βρει μια εμφάνιση ενός widget για τα σχόλια από τους επισκέπτες του site σας.
Για να το εφαρμόσετε στο blog σας κάνετε αντιγραφή επικόλληση τον παρακάτω κώδικα!



<style>
/* www.foulscode.com */
.commentbubble {
background: #292D30;
width: 49px;
float: left;
margin: 2px 20px 35px 0px;
font-weight: bold;
font-size: 1.3em;
text-align: right;
font-family: georgia,Helvetica;
padding: 0px 0px 5px 0px;
text-align: right;
color: #FFF;
text-shadow: 4px 1px #202022;
position: relative;
top: 5px;
}
.commentbubble:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 0px;
top: 100%;
border-width: 5px 8px;
border-style: solid;
border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
top: 34px;
right: 6px;
}
</style>
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ul style="list-style:none; ">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items…

Social Media

Ένα όμορφο και καινούριο Widget για το blog και το site σας.

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


<style>
/* www.foulscode.com */
body {
  background-color:#BFBFBF;
  font-family: Helvetica, Arial;
  padding-top: 100px;
  text-align:center;
}
a {
  background: #D2D7D3;
  color:#222;
  display: inline-block;
  text-align:center;
  text-decoration:none;
  position: relative;
  width:40px;
  height:28px;
  margin:0 2px;
  padding-top:12px;
  -webkit-transition: all .5s;
  transition: all .5s;
}
a.facebook {
  background: #D2D7D3 url(http://i.imgur.com/yflN00F.png) no-repeat center;
}
a.twitter {
  background: #D2D7D3 url(http://i.imgur.com/ewQqTB1.png) no-repeat center;
}
a.github {
  background: #D2D7D3 url(http://i.imgur.com/n3bmN8f.png) no-repeat center;
}
a.dribbble {
  background: #D2D7D3 url(http://i.imgur.com/8c5A1ay.png) no-repeat center;
}
a.pinterest {
  background: #D2D7D3 url(http://i.imgur.com/s8bNLol.png) no-repeat center;
}
a span {
  background:#fff;
  color:#222;
  font-size:14px;
  font-weight: bold…

Πρωτοσέλιδα Αθλητικών Εφημερίδων

Κάτι πολύ απλό αλλα για κάποιους πολύ χρήσιμο.
                                 αντιγραφή επικόλληση τον παρακάτω κώδικα! 

<iframe scrolling="no" width="320" frameborder="0" style="border:0; width: 320px; height: 550px; margin:0 auto; padding:0;" src="http://services.wedia.gr/gazzettafpwidget/" height="550"></iframe>

DEMO

Recent Post Widgets for Blogger

Γεια στους αναγνώστες αν και λίγο περασμένη η ώρα για εμενα πρώτα ήθελα να σας δείξω αυτό να ομορφύνει το blog σας. Το μονο που πρέπει είναι να ανοίξετε ένα καινούριο   1

2



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

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://foulscode.blogspot.com">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?f…

Greeklish-το-Greek στο blog/site σας!

Γιατί να τα ενσωματώσει κανείς;
Για έναν και βασικό λόγο: Για να διατηρήσετε τον ιστότοπό σας "καθαρό" από Greeklish! Έτσι, όχι μόνο ο ιστότοπός σας είναι πιο ελκυστικός, αλλά και πολύ πιο λειτουργικός, αφού καμία μηχανή αναζήτησης δεν μπορεί να δεικτιοδοτήσει αποτελεσματικά σελίδες που περιέχουν Greeklish.


Χαρακτηριστικά
Τα Gadgets που διατίθενται ενσωματώνουν την τεχνολογία αυτόματης μετατροπής από Greeklish σε Ελληνικά με μοναδικό περιορισμό το μήκος του κειμένου να μην ξεπερνάει τους 1000 και τους 3000 χαρακτήρες για το μικρό και το μεγάλο μέγεθος αντίστοιχα.

Ποιος μπορεί να τα χρησιμοποιήσει;
Η απάντηση είναι: Οποιοσδήποτε! Μπορείτε να το ενσωματώσετε είτε σε αρχική προσωπική σελίδα όπως είναι το iGoogle ή το NetVibes, σε ιστοσελίδα που διατηρείτε, σε blog, σε forum ή ακόμα και σε εταιρικό ιστότοπο.


Μεγάλο μέγεθος 485x335


<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100191708549727820875/Greeklish2GreekLarge.xml&u…

Αριθμημένες Δημοφιλή Αναρτήσεις για το Blogger

Όπως βλέπετε στην εικόνα παραπάνω είναι ένα όμορφο widget για της δημοφιλές αναρτήσεις αριθμημένες.
Πάμε να δούμε πως θα το βάλουμε στο μπλόγκερ μας!
Πηγαίνουμε : Πρότυπο > Επεξεργασία HTML και κάνουμε αναζήτηση πατώντας Ctrl + F  τον κώδικα  ]]></b:skin>  και ακριβώς πάνω από το ]]></b:skin> προσθέστε τον παρακάτω κώδικα:

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
/* foulscode.blogspot.gr */
}
.popular-posts ul li a:hover {
 …

Social Subscribe widget

Ένα όμορφο Social Subscribe widget για το site και το blog σας που τον τελευταίο καιρό μπορεί να το είδατε σε άλλες σελίδες, τώρα μπορείτε να το βάλετε και εσείς στην δικη σας σελίδα η blog.

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


<style>
/* foulscode.blogspot.gr */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
html, body {
    min-height: 100%;
}
body {
    background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
   margin: 0;
  }
#buttons {
    padding: 2px 2px;
    width: 330px;
    overflow: hidden;

}

.button {
    background: #DCE0E0;
    position: relative;
    display: block;
    float: left;
    height: 40px;
    margin: 4px;
    overflow: hidden;
    width: 156px;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -…

Ο episod μας ανακοινώνει για το Floating Twitter

API v1 Retirement is Complete - Use API v1.1


Τον τελευταίο καιρό έχετε παρατήρηση τον έχει κάνει φτερά το Floating Twitter από όλα τα site/blog που το είχαν εφαρμόσει, είδα να το συζητάτε και να ρωτάτε γιατί συμβαίνει αυτό δείτε παρακάτω και τα καταλάβετε.
DEMO


Κλικ στην εικόνα για μεγένθυση.





@episod Taylor Singletary Καταχωρήθηκε στις Τρι, 06/11/2013 15:19 Σήμερα, είμαστε συνταξιοδοτούνται API v1 και την πλήρη μετάβαση στο API v1.1. Λαμβάνοντας υπόψη την ποικιλία των δοκιμών συσκότισης, blog θέσεις, tweets και άλλες ενημερώσεις, αυτό θα πρέπει (ελπίζω) δεν είναι μια έκπληξη. Πριν μπει στην πληθώρα των διαθέσιμων πόρων για εσάς, επιτρέψτε μου πρώτα να σας ευχαριστήσω για τη συνεργασία σας κατά τη διάρκεια των τελευταίων μηνών.
Με βάση τις δοκιμές συσκότισης και κοιτάζοντας τους αριθμούς, μπορούμε να δούμε ότι η συντριπτική πλειονότητα των αιτήσεων έχουν μεταβεί στα API v1.1. Αν ακόμα δεν έχετε ενημερώσει app σας και θέλετε οι άνθρωποι να είναι σε θέση να συνεχίσουν να χρησιμοποιούν αυτό…

Floating Social Media Widget για τον Blogger

Ένα όμορφο Widget για οποιους δεν θέλουν να διαθέσουν πολύ χώρο.
Για την εγκατάσταση του κάντε αντιγραφή επικόλληση τον παρακάτω κώδικα:



<style type="text/css">
/* foulscode.blogspot.gr */
ul#social {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#social li {
    width: 100px;
}
ul#social li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;  
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
     background:#0F96C6 url(http://3.bp.blogspot.com/-1wb-O4GG6DQ/UP…

Πρόσφατες δημοσιεύσεις Widget Για Blogger

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


<!-- foulscode.blogspot.gr -->
<script style='text/javascript' src='https://widcraft.googlecode.com/svn/recent-posts-with-titles-only.js'></script>
<script>
var numposts = 20;
var showpostdate = false;
var showpostsummary = false;
var standardstyling = true;
</script>
<div class="scrollableContainer">
  <div class="scrollingArea">
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
<hr />
<div style="text-align:center;">Powered By: <a href="http://foulscode.blogspot.gr/2013/04/widget-blogger.html" rel="nofollow" target="_blank" >foulscode</a></div>
</div></div>
<style>
div.scrollableContainer {
    width: 100%;
    border: 1px solid #999;
    overflow:hidden;
}
  div.scrollingArea {
    height: 240…

Customizing Facebook Like Box Widget

Ένα Widget για το facebook διαφορετικό από τα αλλα για το blog και το site σας!

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



<style>
/* foulscode */
.facebookOuter {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.facebookOuter:before, .facebookOuter:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
.facebookInner {
height:155px;
overflow:hidden;
}
/* foulscode.blogspot.gr */
</style>
<div class="facebookOuter" style="float:left;">
<div class="facebookInner">
  <div class="fb-like-box"
      data-width="300" data-height="179"
      data-href="https://www.facebook.com/pages/Fouls-Code/54816492186388…

Δημιουργία Widgets για τα Πρόσφατα άρθρα

Γεια σας μπλόγκερ και κουράγιο σε αυτούς που τους χτύπησε η οικονομική κρίση! Και τώρα που λέω κρίση μήπως με την κρίση όλοι στρέφουμε το κεφάλι μας πολλές ώρες μπροστά στην οθόνη/ές για πολλές ώρες;

Και για πάμε τώρα στον τίτλο του θέματος!


Ένα Widget που μας δείχνει τα πρόσφατα θέματα από το blog μας δείτε το demo και θα καταλάβετε!

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



<style>
/* foulscode.blogspot.gr */
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-1…