Web Analytics Made Easy - StatCounter
FoulsCode

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

15 Νοεμβρίου 2017

Πως να βάλεις widget στην έκδοση κινητών Blogger


Όπως βλέπετε τα widget που υπάρχουν στην πλήρη προβολή του blog εμφανίζονται και στην έκδοση κινητών.
Μπορείτε να ακολουθήσετε τον παρακάτω σύνδεσμο http://www.foulscode.com/?m=1 Όπως εμφανίζεται στο κινητό.



Επιλέγεται το Widget που θέλετε από το blogger σας και κάνετε αντιγραφή το τίτλο που έχετε επιλέξει.

Αφού πάτε στον HTML κώδικα του blog σας πατήστε τα κουμπιά Ctrl+F και κάνετε αναζήτηση τον τίλτο του widget.

Όταν τον εντοπίσουμε προσθέστε το mobile='yes' μπροστά από το title=' όπως το βλέπετε στην φωτογραφία ακριβώς κάτω.

Προσοχή: στα κενά που θα αφήσετε δεν πρέπει να είναι παραπάνω από 1

Κλικ πάνω στην εικόνα για πιο μεγάλη




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

Σύντομα και άλλη οδηγεί σχετικά με πρότυπα σε Blogger.com!


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

30 Οκτωβρίου 2017

Σημερα γιορταζουν Widget



Εύκολη προσαρμογή καθώς η διαδικασία που ακόλουθη είναι αντιγραφή επικόλληση!

Μπορείτε να ρυθμίσετε της διάστασης!


<div style="text-align:center; width:225px;background-color:#fff"><iframe src ="http://hmerologio.gr/giortes/iframe" frameBorder="0" width="225px" height="220px" style="border:medium none; margin-bottom:-10px; overflow:hidden;"><p>Ο browser σας δεν υποστηρίζει iframes. <a href="http://hmerologio.gr">hmerologio</a>.</p></iframe><p style="background-color:#ccc;color:#fff;text-align:right;"><a style="color:#fff;text-decoration:none;margin-right:4px;font-size:12px;padding-top:3px;" href="http://hmerologio.gr" target="_blank" title="hmerologio">ημερολογιο</a></p></div>

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

22 Μαΐου 2017

Simple Login Form



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

CODE: CSS HTML

<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;
padding: 5px;

font-weight: bold;
font-size: 11px;
text-align: right;
text-decoration: none;
color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}

.download:hover {
color: rgba(0,0,0,0.75);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}

.download:focus {
bottom: 24px;
}

/*
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;

background: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png) no-repeat;
}
*/

.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
z-index: -2;

/* Fallback */ 
background-image: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png); 
background-repeat: no-repeat; 
/* FoulsCode.com */
/* CSS3 Gradient */
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}

/*******************
LOGIN FORM
*******************/

.login-form {
width: 300px;
margin: 0 auto;
position: relative;

background: #f3f3f3;
border: 1px solid #fff;
border-radius: 5px;

box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* FoulsCode.com */

.login-form .header {
padding: 40px 30px 30px 30px;
}

.login-form .header h1 {
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 28px;
line-height:34px;
color: #414848;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
margin-bottom: 10px;
}

.login-form .header span {
font-size: 11px;
line-height: 16px;
color: #678889;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}

/*******************
CONTENT
*******************/
/* FoulsCode.com */
.login-form .content {
padding: 0 30px 25px 30px;
}

/* Input field */
.login-form .content .input {
width: 188px;
padding: 15px 25px;

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

background: #fff;
border: 1px solid #fff;
border-radius: 5px;

box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}

/* Second input field */
.login-form .content .password, .login-form .content .pass-icon {
margin-top: 25px;
}

.login-form .content .input:hover {
background: #dfe9ec;
color: #414848;
}

.login-form .content .input:focus {
background: #dfe9ec;
color: #414848;

box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

.user-icon, .pass-icon {
width: 46px;
height: 47px;
display: block;
position: absolute;
left: 0px;
padding-right: 2px;
z-index: -1;

-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}

.user-icon {
top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/user-icon.png) no-repeat center;
}

.pass-icon {
top:201px;
background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/pass-icon.png) no-repeat center;
}

.content input:focus + div{
left: -46px;
}

/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}

/*******************
FOOTER
*******************/

.login-form .footer {
padding: 25px 30px 40px 30px;
overflow: auto;

background: #d4dedf;
border-top: 1px solid #fff;

box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}

/* Login button */
.login-form .footer .button {
float:right;
padding: 11px 25px;

font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;

box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}

.login-form .footer .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);

box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.login-form .footer .button:focus {
position: relative;
bottom: -1px;

background: #56c2e1;

box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}

/* Register button */
.login-form .footer .register {
display: block;
float: right;
padding: 10px;
margin-right: 20px;

background: none;
border: none;
cursor: pointer;

font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #414848;
text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}

.login-form .footer .register:hover {
color: #3f9db8;
}

.login-form .footer .register:focus {
</style>
<div id="wrapper">

<form name="login-form" class="login-form" action="" method="post">

<div class="header">
<h1>Login Form</h1>
<span>www.FoulsCode.com

Fill out the form below to login to my super awesome imaginary control panel.</span>
</div>

<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" />
<div class="pass-icon"></div>
</div>

<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
<input type="submit" name="submit" value="Register" class="register" />
</div>

</form>

</div>
<div class="gradient"></div>

Ενώ πρώτα βάλετε τις ρύθμισις σας είστε έτοιμη για αποθήκευση!


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

21 Μαΐου 2017

Clean login form with CSS




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: -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-color: #840b2a;
background: -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-color: #840b2a;
background: -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -o-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
background-size: 1000px 1000px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 1000px 1000px;
background-color: #840b2a;
}

.login {
width: 300px;
height: 285px;
overflow: hidden;
background: #1e1e1e;
border-radius: 6px;
margin: 50px auto;
box-shadow: 0px 0px 50px rgba(0,0,0,.8);
}

.login .titulo {
width: 298px;
height: 14px;
padding-top: 13px;
padding-bottom: 13px;
font-size: 14px;
text-align: center;
color: #bfbfbf;
font-weight: bold;
background: #121212;
border: #2d2d2d solid 1px;
margin-bottom: 30px;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
font-family: Arial;
}

.login form {
width: 240px;
height: auto;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}

.login form input[type=text], .login form input[type=password] {
width: 200px;
font-size: 12px;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 40px;
border: none;
color: #bfbfbf;
background: #141414;
outline: none;
margin: 0;
}
/* website: http://foulscode.com */
.login form input[type=text] {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top: #0b0b0b solid 1px;
background: #141414 url(http://dev.dhenriquez.com/test-img/icons/111-user.png) 10px center no-repeat;
}

.login form input[type=password] {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: #0b0b0b 1px solid;
border-bottom: #353535 1px solid;
background: #141414 url(http://dev.dhenriquez.com/test-img/icons/54-lock.png) 10px center no-repeat;
}

.login form .enviar {
width: 240px;
height: 12px;
display: block;
padding-top: 14px;
padding-bottom: 14px;
border-radius: 6px;
border: none;
border-top: #4eb2a8 1px solid;
border-bottom: #161616 1px solid;
background: #349e92;
text-align: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFF;
text-shadow: 0 -1px #1d7464, 0 1px #7bb8b3;
font-family: Arial;
}

.login .olvido {
width: 240px;
height: auto;
overflow: hidden;
padding-top: 25px;
padding-bottom: 25px;
font-size: 10px;
text-align: center;
}

.login .olvido .col {
width: 50%;
height: auto;
float: left;
}

.login .olvido .col a {
color: #fff;
text-decoration: none;
font: 12px Arial;
}

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers greekport.gr */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

body { line-height: 1 }

ol, ul { list-style: none }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/* website: http://foulscode.com */
Διαβάστε Περισσότερα »

23 Ιουλίου 2016

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[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = + feed.value.items[i].commentcount;
var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important;border-bottom: 1px dashed #dedede; line-height:2em; "> <div class="commentbubble">' +pComment + "&#160;&#160;</div>" + "<a href="+ href + '" target="_blank">' + pTitle ;
document.write(pList);
//to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ul>');
}

/* www.foulscode.com */

</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.foulscode.com&ShowHowMany=6&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>


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





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

6 Ιουλίου 2015

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;
  position:absolute;
  bottom:0;
  left:-25px;
  right:-25px;
  padding:5px 7px;
  visibility:hidden;
  opacity:0;
  -webkit-transition: all .4s;
  transition: all .4s;
}

/* bottom arrow */
a span:before {
  content:'';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position:absolute;
  bottom:-5px;
  left:40px;
}
a:hover span {
  bottom:50px;
  visibility:visible;
  opacity:1;
}
/* colors */
a.facebook:hover {
  background-color: #4183D7;
  color: #BFBFBF;
}
a.facebook span {
  color:#4183D7;
}
a.twitter:hover {
  background-color: #19B5FE;
  color: #fff;
}
a.twitter span {
  color:#19B5FE;
}
a.github:hover {
  background-color: #000;
  color: #fff;
}
a.github span {
  color:#000;
}
a.dribbble:hover {
  background-color: #F62459;
  color: #fff;
}
a.dribbble span {
  color:#F62459;
}
a.pinterest:hover {
  background-color: #F22613;
  color: #fff;
}
a.pinterest span {
  color:#F22613;
}
/* www.foulscode.com */
</style>
<div>
     <a href="www.foulscode.com" class="facebook"><span>Facebook</span></a>
     <a href="www.foulscode.com" class="twitter"><span>Twitter</span></a>
     <a href="www.foulscode.com" class="github"><span>GitHub</span></a>
     <a href="www.foulscode.com" class="dribbble"><span>Dribbble</span></a>
     <a href="www.foulscode.com" class="pinterest"><span>Pinterest</span></a>
 </div>



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

9 Δεκεμβρίου 2014

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


Κάτι πολύ απλό αλλα για κάποιους πολύ χρήσιμο.

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


<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>


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

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?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>


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


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

19 Δεκεμβρίου 2013

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&up_Greeklish_to_Greek=0&synd=open&w=485&h=335&title=Greeklish+to+Greek+by+innoetics&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>


Μικρό μέγεθος 250x335


<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100191708549727820875/Greeklish2GreekSmall.xml&up_Greeklish_to_Greek=0&synd=open&w=250&h=335&title=Greeklish+to+Greek+by+innoetics&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>


Μικρότερο μέγεθος 150x455


<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/100191708549727820875/Greeklish2GreekSmaller.xml&up_Greeklish_to_Greek=0&synd=open&w=150&h=455&title=Greeklish+to+Greek+by+innoetics&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>



Και αφού κάνετε αντιγραφή επικόλληση τον κώδικα είστε έτοιμη να κάνετε αποθήκευση!


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

2 Δεκεμβρίου 2013

Αριθμημένες Δημοφιλή Αναρτήσεις για το 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 {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;


Τώρα μπορείτε να κάνετε αποθήκευση!


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

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;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.icon {
    display: block;
    float: left;
    position: relative;
    z-index: 3;
    height: 100%;
    vertical-align: top;
    width: 38px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    text-align: center;
}
.icon i {
    color: #fff;
    line-height: 42px;
}
.slide {
    z-index: 2;
    display: block;
    margin: 0;
    height: 100%;
    left: 38px;
    position: absolute;
    width: 118px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
}
.slide p {
    font-family: Open Sans;
    font-weight: 400;
    border-left: 1px solid #fff;
    border-left: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 16px;
    left: 0;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
}
.button .slide {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.facebook iframe {
    display: block;
    position: absolute;
    right: 23px;
    top: 10px;
    z-index: 1;
}
.twitter iframe {
    width: 90px !important;
    right: 5px;
    top: 10px;
    z-index: 1;
    display: block;
    position: absolute;
}
.google #___follow_0 {
    width: 70px !important;
    top: 10px;
    right: 45px;
    position: absolute;
    display: block;
    z-index: 1;
}
.youtube #___ytsubscribe_0 {
    top: 10px;
    right: 1px;
    position: absolute;
    display: block;
    z-index: 1;
}
.facebook:hover .slide {
    left: 180px;
}
.twitter:hover .slide {
    top: -40px;
}
.google:hover .slide {
    bottom: -40px;
}
.youtube:hover .slide {
    left: -150px;
}
.facebook .icon, .facebook .slide {
    background: #305c99;
}
.twitter .icon, .twitter .slide {
    background: #00cdff;
}
.google .icon, .google .slide {
    background: #d24228;
}
.youtube .icon, .youtube .slide {
    background: #b31217;
}
/* foulscode.blogspot.gr */
</style>
<div id="buttons">
  <div class="facebook button">
    <i class="icon">
      <i class="fa fa-facebook"></i>
  </i>
  <div class="slide">
    <p>
      Facebook
    </p>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FFoulscode&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowTransparency="true">
  </iframe>
  </div>


  <div class="google button">
    <i class="icon">
      <i class="fa fa-google-plus"></i>
  </i>
  <div class="slide">
    <p>
      Google+
    </p>
  </div>
  <!-- Place this tag where you want the +1 button to render. -->
  <div class="g-follow" data-annotation="bubble" data-href="https://plus.google.com/u/0/109721759993422268214/" data-rel="publisher"></div>

  <!-- Place this tag after the last +1 button tag. -->
  <script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
  </div>
  <div class="youtube button">
    <i class="icon">
      <i class="fa fa-youtube"></i>
  </i>
  <div class="slide">
    <p>
      YouTube
    </p>
  </div>
  <div class="g-ytsubscribe" data-channel="techpingo" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
    <script src="https://apis.google.com/js/platform.js"></script>
<script>
  function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
      // Add code to handle subscribe event.
    } else if (payload.eventType == 'unsubscribe') {
      // Add code to handle unsubscribe event.
    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>
</div>
<div class="twitter button">
    <i class="icon">
      <i class="fa fa-twitter"></i>
  </i>
  <div class="slide">
    <p>
      Twitter
    </p>
  </div>
  <a href="https://twitter.com/foulscode" class="twitter-follow-button" data-show-count="false" data-via="mariuCSS">
    Tweet
  </a>
  <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
  </script>
  </div>

DEMO LIVE


Και αφού πρώτα αντικαταστήσετε τα μαρκαρισμένα γράμματα με τα δικάσας link μπορείτε να κάνετε αποθήκευση.
Διαβάστε Περισσότερα »

5 Ιουλίου 2013

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


API v1 Retirement is Complete - Use API v1.1



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


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



https://dev.twitter.com/blog/api-v1-is-retired






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

Με βάση τις δοκιμές συσκότισης και κοιτάζοντας τους αριθμούς, μπορούμε να δούμε ότι η συντριπτική πλειονότητα των αιτήσεων έχουν μεταβεί στα API v1.1. Αν ακόμα δεν έχετε ενημερώσει app σας και θέλετε οι άνθρωποι να είναι σε θέση να συνεχίσουν να χρησιμοποιούν αυτό, δεν είναι πολύ αργά! Η τεκμηρίωση είναι διαθέσιμη εδώ.

Επιπλέον, εδώ είναι άλλοι πόροι που έχουμε τράβηξε μαζί για να βοηθήσει να γίνει αυτή η μετάβαση πιο ομαλή:

Είμαστε ενθουσιασμένοι για να φέρει αυτή τη διαδικασία σε μια στενή και να συνεχίσουν την οικοδόμηση μιας ισχυρής πλατφόρμας & οικοσύστημα API v1.1 και να καταστήσει ακόμη πιο πολύτιμο για εσάς.
Διαβάστε Περισσότερα »

3 Ιουλίου 2013

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/UPFOe03M-lI/AAAAAAAAA4g/1015-y7FaYU/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a      {
    background:#D73D27 url(http://3.bp.blogspot.com/-1mYMKQENXdI/UPFOeK31VzI/AAAAAAAAA4k/w2Qk48tpleQ/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a      {
    background:#1A4B97 url(http://1.bp.blogspot.com/-3M1F3Y29Yoc/UPFOeAAUFvI/AAAAAAAAA4c/ALvfOPDwJ-g/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a      {
    background:#FAAE17 url(http://4.bp.blogspot.com/-twR0g7wotpE/UPFOfFtFOuI/AAAAAAAAA4o/uJMUf9hjRco/s1600/rss.png)no-repeat;
background-position:center center;
}

ul#social .pinterest a   {
    background:#963336 url(http://2.bp.blogspot.com/-xgOrG4ysqyM/UPFOeKFKMtI/AAAAAAAAA4Y/i_jnKpHsK24/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(function () {
    $('#social a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);

    $('#social > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
/* foulscode.blogspot.gr */
</script>
<br />
<ul id="social">
<li class="twitter"><a href="URL" title="Twitter"></a></li>
<li class="googleplus"><a href="URL" title="Google Plus"></a></li>
<li class="facebook"><a href="URL" title="Facebook"></a></li>
<li class="rss"><a href="URL" title="Rss"></a></li>
<li class="pinterest"><a href="URL" title="Pinterest"></a></li>
</ul>
LIVE DEMO


Βάλτε τα URL και αυτό ήταν είστε έτοιμοι να κάνετε αποθήκευση.


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