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

FoulsCode: 2011-17

Translate

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

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

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

Δείτε τη δραστηριότητα των χρηστών του Twitter σε πραγματικό χρόνο, με το Tweetping

Written By Greek Port on Σάββατο, 21 Δεκεμβρίου 2013 | Δεκεμβρίου 21, 2013



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


Όπως πολύ εύστοχα περιγράφει ο συντάκτης του The Atlantic, «μόλις παρακολούθησα την Δυτική Ακτή [σ.σ. των ΗΠΑ] να ξυπνάει. Στο Twitter».

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


Δεκεμβρίου 21, 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 σχόλια | Διαβάστε περισσότερα

Social: facebook, google+, twitter και rss

Written By Greek Port on Τρίτη, 18 Ιουνίου 2013 | Ιουνίου 18, 2013



Γεια σας μπλόγκερ! Τον τελευταίο καιρό δεν έχω και τόσο χρόνο να αλλα παρόλα αυτά βρήκα αυτό και θα το μοιραστώ μαζί σας.


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



<style>
@charset "utf-8";
/* CSS Document */
/* ---------- FoulsCode.blogspot.gr ---------- */

@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */

a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
left: 50%;
margin: -32px 0 0 -128px; /* -(height / 2) & -(width / 2) */
position: absolute;
top: 50%;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
/* ---------- FoulsCode.blogspot.gr ---------- */
</style>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body>
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/foulscode" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/109721759993422268214/posts" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/pages/Fouls-Code/548164921863886" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://foulscode.blogspot.com/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>


LIVE DEMO


Αφού πρώτα αντικαταστήσετε τα μαρκαρισμένα link με τα δικά σας είστε έτοιμη να κάνετε αποθήκευση.


Αν θέλετε να μας βοηθήσετε έστω και λίγο μοιραστείτε με τους φίλους σας στο facebook twitter και πάει λέγοντας!



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

Login with Twitter or Facebook

Written By Greek Port on Κυριακή, 10 Μαρτίου 2013 | Μαρτίου 10, 2013



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



<style>
@charset "utf-8";
/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://foulscode.blogspot.gr/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
/* ---------- GENERAL ---------- */
body {
background-color: #f4f4f4;
color: #5a5656;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5em;
}
a { text-decoration: none; }
h1 { font-size: 1em; }
h1, p {
margin-bottom: 10px;
}
strong {
font-weight: bold;
}
.uppercase { text-transform: uppercase; }
/* ---------- LOGIN ---------- */
#login {
margin: 50px auto;
width: 300px;
}
form fieldset input[type="text"], input[type="password"] {
background-color: #e5e5e5;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #5a5656;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
height: 50px;
outline: none;
padding: 0px 10px;
width: 280px;
-webkit-appearance:none;
}
form fieldset input[type="submit"] {
background-color: #008dde;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #f4f4f4;
cursor: pointer;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
height: 50px;
text-transform: uppercase;
width: 300px;
-webkit-appearance:none;
}
form fieldset a {
color: #5a5656;
font-size: 10px;
}
form fieldset a:hover { text-decoration: underline; }
.btn-round {
background-color: #5a5656;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #f4f4f4;
display: block;
font-size: 12px;
height: 50px;
line-height: 50px;
margin: 30px 125px;
text-align: center;
text-transform: uppercase;
width: 50px;
}
.facebook-before {
background-color: #0064ab;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
color: #f4f4f4;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}
.facebook {
background-color: #0079ce;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
color: #f4f4f4;
cursor: pointer;
height: 50px;
text-transform: uppercase;
width: 250px;
}
.twitter-before {
background-color: #189bcb;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
color: #f4f4f4;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
}

.twitter {
background-color: #1bb2e9;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
color: #f4f4f4;
cursor: pointer;
height: 50px;
text-transform: uppercase;
width: 250px;
}
</style>
<!doctype html>
<html lang="en-Us">
<head>
<meta charset="utf-8">
   
<title>Login with Facebook or Twitter</title>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="login">
<h1><strong>Welcome.</strong> Please login.</h1>
<form action="javascript:void(0);" method="get">
<fieldset>
<p><input type="text" required value="Username" onBlur="if(this.value=='')this.value='Username'" onFocus="if(this.value=='Username')this.value='' "></p> <!-- JS because of IE support; better: placeholder="Username" -->
<p><input type="password" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "></p> <!-- JS because of IE support; better: placeholder="Password" -->
<p><a href="#">Forgot Password?</a></p>
<p><input type="submit" value="Login"></p>
</fieldset>
</form>
<p><span class="btn-round">or</span></p>
<p>
<a class="facebook-before"><span class="fontawesome-facebook"></span></a>
<button class="facebook">Login Using Facbook</button>
</p>
<p>
<a class="twitter-before"><span class="fontawesome-twitter"></span></a>
<button class="twitter">Login Using Twitter</button>
</p>
</div> <!-- end login -->
</body>
</html>



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

Twitter Button Concept

Written By Greek Port on Παρασκευή, 8 Μαρτίου 2013 | Μαρτίου 08, 2013



Ένα κουμπί για το blog/site σας που όταν πάει το ποντίκι πάνω αποκαλύπτει το follow.

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





<style>

* { box-sizing: border-box; }
body {
  padding: 5rem;
  text-align: center;
  background-image: -webkit-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #D8DFE9 100%);
  background-image: radial-gradient(circle farthest-corner at center top, #FFFFFF 0%, #D8DFE9 100%);
}
section, .button, .cover, .innie, .spine, .outie, .shadow {
  /* See it in slo-mo, you can change this */
  transition: .6s;
}
section, button { transition-timing-function: ease; }
section {
  display: inline-block;
  position: relative;
  padding: .375rem .375rem 0;
  height: 2.5rem;
  background: #A9ADB6;
  border-radius: .25rem;
  perspective: 300;
  box-shadow: 0 -1px 2px #fff, inset 0 1px 2px rgba(0,0,0,.2), inset 0 .25rem 1rem rgba(0,0,0,.1);
}
.button { opacity: 0; }
.cover {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  font: 1.25em/2 "icon";
  color: white;
  text-align: center;
  pointer-events: none;
  z-index: 100;
}
.innie, .outie, .spine, .shadow { position: absolute; width: 100%; }
.innie, .outie {
  height: 100%;
  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.1) 100%);
  border-radius: .25rem;
}
.innie:after, .outie:after { content:"t"; }
.innie {
  background-color: #67E2FE;
  text-shadow: 0 -2px 4px rgba(0,0,0,.2);
}
.spine {
  top: .25rem;
  background: #20C7F3;
  height: .25rem;
  transform: rotateX(90deg);
  transform-origin: center top;
}
.shadow {
  top: 100%;
  left: 0;
  height: 3.5rem;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  z-index: 0;
  background-image: -webkit-linear-gradient(top, rgba(0,0,0,.6) 0%, transparent 100%);
  background-image: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, transparent 100%);
  border-radius: .4rem;
}
.outie {
  background-color: #2EC8FA;
  transform: translateZ(.25rem);
  text-shadow: 0 2px 4px rgba(0,0,0,.2);
}
section:hover { background: #EBEFF2; }
section:hover .button { opacity: 1; }
section:hover .cover, section:hover .innie, section:hover .spine, section:hover .outie, section:hover .spine { transition-timing-function: cubic-bezier(.2,.7,.1,1.1); }
section:hover .cover { transform: rotateX(-120deg);  }
section:hover .innie { background-color: #3ADAFC; }
section:hover .spine { background-color: #52B1E0; }
section:hover .outie { background-color: #2174A0; color: rgba(255,255,255,0); }
section:hover .shadow {
  opacity: 1;
  transform: rotateX(45deg) scale(.95);
}
small {
  display: block;
  padding: 5rem;
  font: .8rem/1 sans-serif;
  color: #777;
}
small a { color: #222; text-decoration: none; border-bottom: 1px solid #ccc; }
small a:hover { border-bottom-color: #222; }
/* Twitter font icon: http://codepen.io/bennettfeely/pen/GCAKJ */
@font-face { font-family:icon; src: url('http://bennettfeely.com/fonts/icons.woff'); }
</style>
<section>
  <div class="button">
    <a href="https://twitter.com/foulscode" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @FoulasCode</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  </div>
  <div class="cover">
    <div class="innie"></div>
    <div class="spine"></div>
    <div class="outie"></div>
</div>
  <div class="shadow"></div>
</section>
<small>Live version of Erik Deiner's <a target="_blank" href="http://foulscode.blogspot.gr">Twitter Button Concept</a> on Dribbble.</small>


Αλλάξτε τα πράσινα γράμματα το όνομα στο twitter με το δικό σας και κάντε αποθήκευση!


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

Twitter Badge Generator For Blogger

Written By Greek Port on Δευτέρα, 7 Ιανουαρίου 2013 | Ιανουαρίου 07, 2013


Twitter Badge Generator For Blogger


βήμα 1
αντιγράψετε και να επικολλήσετε το Url της εικόνας σας στο παραπάνω πλαίσιο συνέχεια, μεταβείτε στο βήμα 2.

βήμα 2
Τώρα Επιλέξτε Τοποθεσία Badge σας (όπου θέλετε το σήμα να εμφανίζεται στο blog σας).

Βήμα 3
Σε αυτό το βήμα, πληκτρολογήστε twitter id σας, στη συνέχεια, κάντε κλικ στην επιλογή δημιουργήσει τον κωδικό σας, και να το αντιγράψετε.

Αν δεν καταλάβατε κάτι αφήστε ένα σχολειό.





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

Floating Twitter Followers Box for Blogger

Written By Greek Port on Σάββατο, 5 Ιανουαρίου 2013 | Ιανουαρίου 05, 2013




Είναι πιστεύω ένα αρκετά χρήσιμο Gadget που πρέπει να έχει κάθε blog, αφού:
  • Κερδίζεις αρκετό χώρο στο siderbar σου που είναι σημαντικό για κάθε blogger.
  • Κερδίζεις Followers κάνοντας το twitter followers box πιο φανερό στους επισκέπτες.
Πάμε όμως να δούμε πως θα το εγκαταστήσετε στο blog σας:

1) Σύνδεση στον Blogger
2) Σχεδίαση
3) Προσθήκη Gadget
4) HTML/JavaScript

Και στο δεύτερο κουτάκι προσθέστε τον παρακάτω κώδικα:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".twitterboxot").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function()
{$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//--> </script>
<style type="text/css">
.twitterboxot{background: url("http://4.bp.blogspot.com/-Xw62XMgyLJw/T1B2MZneORI/AAAAAAAAAuc/_XTXkPESnS8/s1600/twitter_button.png")
no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 240px;
padding: 0 5px 0 29px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px; top:1%;}</style>
<div class="twitterboxot"><div>
<script type="text/javascript"
src="http://script-ot.googlecode.com/svn/twitterbox.js"></script><div
id="twitterfanbox"></div
id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("foulscode");</script><center><span style="font-size: xx-small;">Powered by <a href="http://foulscode.blogspot.gr/2013/01/floating-twitter-followers-box-for.html" target="_blank">FoulsCode</a></span></center></div>
DEMO


Αντικαταστήστε το foulscode με το δικό σας στο Twitter και πατήστε αποθήκευση.


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

Twitter Friends Widget ver 2.0 (jQuery Plugin)

Written By Greek Port on Σάββατο, 22 Δεκεμβρίου 2012 | Δεκεμβρίου 22, 2012







<!-- Include javascript and CSS once -->
<link href="http://twitter-friends-widget.googlecode.com/svn/v2/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script src="http://foulsblog.xtgem.com/blog/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

<!-- Required HTML -->
<div class="twitter-friends" data-options="{ username:'v_aios' }">
   <a class="tfw-info" href="http://foulscode.blogspot.gr/2012/12/twitter-friends-widget-ver-20-jquery_22.html" target="_blank">Twitter Friends/Followers Widget</a>
</div>
<!-- Required HTML -->

DEMO

αλλάξτε το όνομα και αυτό ήταν

ΠΗΓΗ

Δεκεμβρίου 22, 2012 | 0 σχόλια | Διαβάστε περισσότερα
 
berita unik