Kατεβάσετε την εφαρμογή android του blog! DownLoad

FoulsCode: 2011-17

Translate

Πρόσφατα Σχόλια

Σύνολο αναρτήσεων

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

Simple Login Form

Written By Greek Port on Δευτέρα, 22 Μαΐου 2017 | Μαΐου 22, 2017



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

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>

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


Μαΐου 22, 2017 | 0 σχόλια | Διαβάστε περισσότερα

Clean login form with CSS

Written By Greek Port on Κυριακή, 21 Μαΐου 2017 | Μαΐου 21, 2017




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 */
Μαΐου 21, 2017 | 0 σχόλια | Διαβάστε περισσότερα

Most Commented Posts Widget for Blogger

Written By Greek Port on Παρασκευή, 22 Ιουλίου 2016 | Ιουλίου 22, 2016


Γεια σε όλους τους μπλόγκερ! Εδώ έχω βρει μια εμφάνιση ενός 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>


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





Ιουλίου 22, 2016 | 0 σχόλια | Διαβάστε περισσότερα

Social Media

Written By Greek Port on Δευτέρα, 6 Ιουλίου 2015 | Ιουλίου 06, 2015


Ένα όμορφο και καινούριο 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
Ιουλίου 06, 2015 | 0 σχόλια | Διαβάστε περισσότερα

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

Written By Greek Port on Δευτέρα, 8 Δεκεμβρίου 2014 | Δεκεμβρίου 08, 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>


Δεκεμβρίου 08, 2014 | 0 σχόλια | Διαβάστε περισσότερα

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>


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


Δεκεμβρίου 08, 2014 | 0 σχόλια | Διαβάστε περισσότερα

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

Written By Greek Port on Τετάρτη, 18 Δεκεμβρίου 2013 | Δεκεμβρίου 18, 2013




Γιατί να τα ενσωματώσει κανείς;
Για έναν και βασικό λόγο: Για να διατηρήσετε τον ιστότοπό σας "καθαρό" από 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>



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


Δεκεμβρίου 18, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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

Written By Greek Port on Δευτέρα, 2 Δεκεμβρίου 2013 | Δεκεμβρίου 02, 2013



Όπως βλέπετε στην εικόνα παραπάνω είναι ένα όμορφο 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;


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


Δεκεμβρίου 02, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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 μπορείτε να κάνετε αποθήκευση.
Δεκεμβρίου 02, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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

Written By Greek Port on Πέμπτη, 4 Ιουλίου 2013 | Ιουλίου 04, 2013


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 και να καταστήσει ακόμη πιο πολύτιμο για εσάς.
Ιουλίου 04, 2013 | 0 σχόλια | Διαβάστε περισσότερα

Floating Social Media Widget για τον Blogger

Written By Greek Port on Τρίτη, 2 Ιουλίου 2013 | Ιουλίου 02, 2013





Ένα όμορφο 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 και αυτό ήταν είστε έτοιμοι να κάνετε αποθήκευση.


Ιουλίου 02, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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

Written By Greek Port on Πέμπτη, 4 Απριλίου 2013 | Απριλίου 04, 2013




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


<!-- 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: 240px;
    overflow: auto;
}
.bbrecpost2{
    padding:5px 0 5px 5px;
}
.bbrecpost2 a{
    text-decoration:none;
</style>
<!-- foulscode.blogspot.gr -->



Αλλάζοντας το 20 ρυθμίζεται τον αριθμό τον δημοσιεύσεων.
Απριλίου 04, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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/548164921863886"
      data-border-color="#F4F4F4" data-show-faces="true"
      data-stream="false" data-header="false">
  </div>
 </div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>


DEMO

Και αφού αλλάξετε το URL από την σελίδα σας στο facebook είστε έτοιμη να κάνετε αποθήκευση!
Απριλίου 04, 2013 | 0 σχόλια | Διαβάστε περισσότερα

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

Written By Greek Port on Τρίτη, 2 Απριλίου 2013 | Απριλίου 02, 2013





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

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


Ένα 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:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
/* foulscode.blogspot.gr */
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://foulscode.blogspot.gr/";
var charac = 100;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

DEMO

Το μονο που πρέπει να κάνετε είναι να αλλάξετε το URL του blog με το δικό σας και μετά αποθήκευση!

Απριλίου 02, 2013 | 1 σχόλια | Διαβάστε περισσότερα
 
berita unik