Web Analytics Made Easy - StatCounter
FoulsCode

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

9 Νοεμβρίου 2017

Πώς θα βάλετε το κουμπί του Pinterest στις εικόνες σας




Όλοι έχουμε λιώσει με τις ώρες στο Pinterest χαζεύοντας υπέροχες εικόνες που μας ταξιδεύουν σε μέρη μαγικά κι ονειρεμένα!
Μπορούμε όμως να μοιραστούμε και τις δικές μας εικόνες στο site αυτό και κυρίως να δώσουμε την ευκαιρία και σε άλλους να το κάνουν με ένα μόνο κλικ!
Αν θέλετε να εμφανίζεται μέσα σε κάθε φωτογραφία σας το κουμπάκι Pin it όταν κάποιος περνάει από πάνω της το ποντίκι του, όπως στις δικές μου, ακολουθήστε τα εξής βήματα.



Πηγαίνετε Πρότυπο.
Πρώτα δημιουργήστε ένα αντίγραφο ασφαλείας.
Επεξεργασία HTML.
Κάντε κλικ μέσα στον κώδικα, και πληκτρολογήστε Ctrl+F. Θα σας βγάλει ένα πλαίσιο αναζήτησης. Μέσα στο πλαίσιο αυτό, πληκτρολογήστε
. Θα σας πάει αυτόματα στο σημείο όπου υπάρχει αυτός ο κώδικας.
Ακριβώς επάνω από το , επικολλήστε τον παρακάτω κώδικα:




Αυτό ήταν!
Κάνετε φυσικά Αποθήκευση προτύπου και στο blog σας θα εμφανιστεί άμεσα το διακριτικό αυτό κουμπάκι που έχω κι εγώ!
Η θέση του είναι πάνω αριστερά και δυστυχώς δε μπορείτε να την αλλάξετε.
Εμφανίζεται μόνο στις εικόνες των αναρτήσεων, και όχι στις υπόλοιπες εικόνες του blog μας, κάτι που φυσικά είναι καλό!
Δε χρειάζεται να έχετε λογαριασμό στο Pinterest για να το κάνετε αυτό. Απλά διευκολύνετε τους χρήστες του Pinterest να σας καρφιτσώσουν.


Πώς θα αφαιρέσω το Pin It από κάποιες συγκεκριμένες εικόνες;


Πολύ σημαντικό είναι το γεγονός ότι μπορείτε να αποκλείσετε (χειροκίνητα) όποιες εικόνες δε θέλετε να έχουν το κουμπί. Αυτό γίνεται με τον εξής τρόπο:
Καθώς επεξεργάζεστε την ανάρτηση, κάνετε κλικ στο κουμπί HTML δίπλα από τη Σύνθεση.













Εκεί, θα βρείτε τον κώδικα της εικόνας σας. Θα μοιάζει κάπως έτσι:




Ακριβώς στο σημείο που έχω την κόκκινη κουκκίδα, προσθέστε τον εξής κώδικα:

nopin="nopin"


Μην ξεχάσετε να κάνετε Ενημέρωση, αν πρόκειται για παλιότερη ανάρτηση.
Με αυτό τον τρόπο, θα αφαιρέσετε από τη συγκεκριμένη εικόνα το κουμπάκι Pin It.
Αυτό μπορεί να σας φανεί χρήσιμο αν η εικόνα αυτή δεν είναι δική σας και προέρχεται από άλλο blog ή site.

via: bloggotip.blogspot.gr
Διαβάστε Περισσότερα »

4 Φεβρουαρίου 2015

Ελληνικό ημερολόγιο στο blog και site σας




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

<script>
/* foulscode.blogspot.com */
setCal()

function getTime() {
// initialize time-related variables with current time settings
var now = new Date()
var hour = now.getHours()
var minute = now.getMinutes()
now = null
var ampm = ""

// validate hour values and set value of ampm
if (hour >= 12) {
hour -= 12
ampm = "Μμ"
} else
ampm = "Πμ"
hour = (hour == 0) ? 12 : hour

// add zero digit to a one digit minute
if (minute < 10)
minute = "0" + minute // do not parse this number!

// return time string
return hour + ":" + minute + " " + ampm
}

function leapYear(year) {
if (year % 4 == 0) // basic rule
return true // is leap year
/* else */ // else not needed when statement is "return"
return false // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12)
ar[0] = 31 // Ιανουάριος
ar[1] = (leapYear(year)) ? 29 : 28 // Φεβρουάριος
ar[2] = 31 // Μάρτιος
ar[3] = 30 // Απρίλιος
ar[4] = 31 // Μάιος
ar[5] = 30 // Ιούνιος
ar[6] = 31 // Ιούλιος
ar[7] = 31 // Αύγουστος
ar[8] = 30 // Σεπτέμβριος
ar[9] = 31 // Οκτώβριος
ar[10] = 30 // Νοέμβριος
ar[11] = 31 // Δεκέμβριος

// return number of days in the specified month (parameter)
return ar[month]
}

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12)
ar[0] = "Ιανουάριος"
ar[1] = "Φεβρουάριος"
ar[2] = "Μάρτιος"
ar[3] = "Απρίλιος"
ar[4] = "Μάιος"
ar[5] = "Ιούνιος"
ar[6] = "Ιούλιος"
ar[7] = "Αύγουστος"
ar[8] = "Σεπτέμβριος"
ar[9] = "Οκτώβριος"
ar[10] = "Νοέμβριος"
ar[11] = "Δεκέμβριος"

// return name of specified month (parameter)
return ar[month]
}

function setCal() {
// standard time attributes
var now = new Date()
var year = now.getYear()
if (year < 1000)
year+=1900
var month = now.getMonth()
var monthName = getMonthName(month)
var date = now.getDate()
now = null

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1)
var firstDay = firstDayInstance.getDay()
firstDayInstance = null

// number of days in current month
var days = getDays(month, year)

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year)
}

function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
var headerHeight = 50 // height of the table's header cell
var border = 2 // 3D height of table's border
var cellspacing = 4 // width of table's border
var headerColor = "midnightblue" // color of table's header
var headerSize = "+3" // size of tables header font
var colWidth = 60 // width of columns in table
var dayCellHeight = 25 // height of cells containing days of the week
var dayColor = "red" // color of font representing week days
var cellHeight = 40 // height of cells representing dates in the calendar
var todayColor = "red" // color specifying today's date in the calendar
var timeColor = "green" // color of font representing current time

// create basic table structure
var text = "" // initialize accumulative variable to empty string
text += '<CENTER>'
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings
text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header
text += monthName + ' ' + year
text += '</FONT>' // close table header's font settings
text += '</TH>' // close header cell

// variables to hold constant settings
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>'
openCol += '<FONT COLOR="' + dayColor + '">'
var closeCol = '</FONT></TD>'

// create array of abbreviated day names
var weekDay = new Array(7)
weekDay[0] = "Κυρ"
weekDay[1] = "Δευτ"
weekDay[2] = "Τρι"
weekDay[3] = "Τετ"
weekDay[4] = "Πεμ"
weekDay[5] = "Παρ"
weekDay[6] = "Σαβ"

// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">'
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol
}
text += '</TR>'

// declaration and initialization of two variables to help with tables
var digit = 1
var curCell = 1

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (digit > lastDate)
break
if (curCell < firstDay) {
text += '<TD></TD>';
curCell++
} else {
if (digit == date) { // current cell represent today's date
text += '<TD HEIGHT=' + cellHeight + '>'
text += '<FONT COLOR="' + todayColor + '">'
text += digit
text += '</FONT><BR>'
text += '<FONT COLOR="' + timeColor + '" SIZE=2>'
text += '<CENTER>' + getTime() + '</CENTER>'
text += '</FONT>'
text += '</TD>'
} else
text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>'
digit++
}
}
text += '</TR>'
}

// close all basic table tags
text += '</TABLE>'
text += '</CENTER>'

// print accumulative HTML string
document.write(text)
}
/* foulscode.blogspot.com */
</script>



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

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

Χιονια στο blog σας v2


Τώρα που έρχονται η γιορτές μπορεί να θέλετε να στολίσετε και το site, blog, forum σας!

θα σας δώσω ένα κώδικα για χιονια στο blog σας, πέρσι σας είχα δώσει άλλον έναν όπου μπορείτε να τον βρείτε παρακάτω!



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

<script src="http://scriptsrb.googlecode.com/files/snoweffect1.js" type="text/javascript"></script>



Και αποθήκευση και αυτό ήταν!
Διαβάστε Περισσότερα »

27 Νοεμβρίου 2013

PopUp FanBox Gadget for Blog/site

Καλημέρα σε όλους τους μπλόγκερ και όχι μονο. Μετά από τόσο καιρό είμαστε και πάλι εδώ να μοιραστώ μαζί σας πολλά για το blog/site σας.

Πάμε να ξεκινήσουμε σε ένα PopUp FanBox Gadget.
Και το συγκεκριμένο λειτουργεί με τα cookies.




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


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<style>
/* foulscode.blogspot.gr */
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:64%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #3b60aa;
-moz-box-shadow: inset 0 0 50px 0 #3b60aa;
box-shadow: inset 0 0 50px 0 #3b60aa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(http://4.bp.blogspot.com/-inGOONYeB8s/UZd3aY5bJHI/AAAAAAAATro/-YuTHmVLh8s/s1600/popup_exit.png) no-repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
/* foulscode.blogspot.gr */
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=https://www.facebook.com/pages/Fouls-Code/548164921863886&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; margin-left:10px; width: 402px; height: 230px;'></iframe>
<p style=" float:right;  margin-right:12px; margin-top:-10px;" > <a style=" font-size:7px; color:#777; text-decoration:none;" href="http://www.foulscode.blogspot.gr" target='_blank'>by FoulsCode</a></p>
</div></div>


DEMO LIVE


Αντικαταστήστε το URL και κάντε αποθήκευση.

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

4 Μαρτίου 2013

Polaroid Collage





Ένα πολύ όμορφο εργαλείο για της φωτογραφίες σας με την κίνηση του ποντικιού οι φωτογραφίες γίνονται έγχρωμες δείτε το demo.

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


<style>
/****
FoulsCode.blogspot.gr
****/
body { background-color: #eee; }
.collage {
    width: 500px;
margin: 100px auto;
    position: relative;
}
    .collage a {
        position: absolute;
        max-width: 220px;
        padding: 10px;
        background-color:rgb(255,255,255);
 
            transform:rotate(-7deg);
        -ms-transform:rotate(-7deg);
        -moz-transform:rotate(-7deg);
        -webkit-transform:rotate(-7deg);
        -o-transform:rotate(-7deg);
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        transition: all 0.2s linear;
/*** Fix for Webkit to resolve the flickering issue
          Suggested by erikhatfield ***/
-webkit-transform-style: preserve-3d;
 
        -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        box-shadow:1px 1px 3px rgba(0,0,0,0.2);
        -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#33000000,Positive=true)";
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1,OffY=1,Color=#33000000,Positive=true);
    }
    .collage a:nth-child(2) {
            transform:rotate(7deg);
        -ms-transform:rotate(7deg);
        -moz-transform:rotate(7deg);
        -webkit-transform:rotate(7deg);
        -o-transform:rotate(7deg);
        margin-left: 30%;
    }
    .collage a:nth-child(3) {
            transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
        -moz-transform:rotate(-15deg);
        -webkit-transform:rotate(-15deg);
        -o-transform:rotate(-15deg);
        margin-left: 60%;
    }
    .collage a:nth-child(4) {
            transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
        -moz-transform:rotate(-15deg);
        -webkit-transform:rotate(-15deg);
        -o-transform:rotate(-15deg);
        margin-top: 150px;
        margin-left: 15%;
    }
    .collage a:nth-child(5) {
            transform:rotate(7deg);
        -ms-transform:rotate(7deg);
        -moz-transform:rotate(7deg);
        -webkit-transform:rotate(7deg);
        -o-transform:rotate(7deg);
        margin-left: 50%;
        margin-top: 150px;
    }
 
        .collage a img {
            max-width: 100%;
            max-height: 100%;
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
            filter: gray;
            -webkit-filter: grayscale(100%);
        }
        .collage a:hover {
            z-index: 999;
                transform:rotate(0deg);
            -ms-transform:rotate(0deg);
            -moz-transform:rotate(0deg);
            -webkit-transform:rotate(0deg);
            -o-transform:rotate(0deg);
         
            -webkit-transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }
        .collage a:hover > img {
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
            -webkit-filter: grayscale(0%);
        }
</style>
<div class="collage">
                    <!-- Top Set -->
                    <a href="URL">
                        <img src="http://tympanus.net/Development/Stapel/images/6/7.jpg" alt="Collage Photo">
                    </a>
                    <a href="URL">
                        <img src="http://tympanus.net/Development/Stapel/images/4/14.jpg" alt="Collage Photo">
                    </a>
                    <a href="URL">
                        <img src="http://dribbble.s3.amazonaws.com/users/41738/screenshots/659951/dad-faces.jpg" alt="Collage Photo">
                    </a>
                    <a href="URL">
                        <img src="http://tympanus.net/Development/Stapel/images/7/8.jpg" alt="Collage Photo">
                    </a>
                    <a href="URL">
                        <img src="http://tympanus.net/Development/Stapel/images/3/4.jpg" alt="Collage Photo">
                    </a>
                </div>

DEMO




  • Το πράσινο είναι το url της εικόνα σας.



  • Το URL σας.


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

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

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


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

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


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


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

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

Προσθέτοντας ένα Feedburner και Φόρμα e-mail




Πριν προχωρήσετε, θα πρέπει να έχετε καεί τροφή σας με Feedburner και έχουν έτοιμο το url. Αν δεν έχετε, εγγραφείτε για FeedBurner Google με το λογαριασμό σας και ακολουθήστε τα παρακάτω βήματα:
1. Συνδεθείτε στο Feedburner και στην αρχική σελίδα, τροφή σας κάψει. Αν είστε στο Blogger, διεύθυνση ζωοτροφών σας θα πρέπει να είναι http://your-site.com/feeds/posts/default και αν είστε σε WordPress, είναι http://your-site.com/feed
2. Στην επόμενη σελίδα, ρυθμίστε την τροφή, δώστε Επιθυμητό όνομα σας και σημειώστε τη διεύθυνση. Ακολουθήστε τα επόμενα δύο βήματα για να ενεργοποιήσετε την τροφοδοσία.
Πώς να Προσθέστε τα e-mail / Social Media για Bloggers
Για να προσθέσετε το widget παρακάτω θέσεις blog σας:
1. Συνδεθείτε στο Blogger
2. Πηγαίνετε στο Template> Edit HTML (νέο blogger UI) ή Σχεδιασμός> Edit HTML (παλιά blogger UI)
3. Ελέγξτε το "Επέκταση προτύπων γραφικών στοιχείων" κουτί
4. Αναζήτηση για <data:post.body/>
Αν έχετε περισσότερες από μία σε αυτό το πρότυπο σας και σύγχυση σχετικά με το ποια από αυτά θα χρησιμοποιηθεί, για την αναζήτηση <div class='post-footer-line post-footer-line-1'/> αντ 'αυτού.
5. Ακριβώς κάτω από αυτό, επικολλήστε αυτόν τον κώδικα:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(http://3.bp.blogspot.com/-pl1ECUAcVEQ/T4YS7ZgR_uI/AAAAAAAAB_k/R92yDhiO65Q/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.dcsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=foulscode&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='foulscode'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='dcstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='dcsubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/foulscode' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://3.bp.blogspot.com/-ShqPVqX-vhs/TqgOXX5m9WI/AAAAAAAAFCg/WFRLxQ4yjuM/s1600/rss-30×43.png'/></a>
<a href='http://twitter.com/foulscode' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/-eVZSNf1mj_E/TqgOX_ldq1I/AAAAAAAAFCk/2wDDaA8esG8/s1600/twitter-30×43.png'/></a>
<a href='https://www.facebook.com/pages/Fouls-Code/548164921863886' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/-sT9lHle5N54/TqgOWhi-amI/AAAAAAAAFCU/MwoQL3ZhEy4/s1600/facebook-30×43.png'/></a>
<a href='https://plus.google.com/11705762/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://3.bp.blogspot.com/-icT9kVFhtOs/TqgOXLJCbBI/AAAAAAAAFCY/pU4wo8HyHNI/s1600/googleplus-30×43.png'/></a>
</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://foulscode.blogspot.gr/2013/01/feedburner-e-mail.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>


Αλλάξτε τα κόκκινα γράμματα με τα δικά σας!

καλή επιτυχία παιδιά!


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

Πώς να προσθέσετε gadgets σε Προβολή του Blogger Mobile




Όλοι οι χρήστες Blogspot, αν δεν κάνω λάθος θέλουν πραγματικά έναν τρόπο να επεξεργαστείτε blogspot κινητό άποψή τους. Αυτός είναι ένας από τους λόγους που οι περισσότεροι χρήστες του blogspot κινούνται σε Wordpress, επειδή επιτρέπουν στους χρήστες τους να προσαρμόσετε το κινητό άποψή τους χρησιμοποιώντας Mobilepress. Λοιπόν, blogger έχει ενεργοποιήσει αυτή την επιλογή και πιστεύω ότι όλοι οι bloggers θα πρέπει να είναι ευτυχισμένος τώρα.

Εδώ σε αυτό το σεμινάριο, θα σας δείξει πώς μπορείτε να προσαρμόσετε τις Widgets προεπιλογές και να προσθέσετε gadgets στην ιστοσελίδα κινητού σας. Εδώ είναι οι προεπιλεγμένες widgets στην ιστοσελίδα κινητού σας:
Header
Blog
Adsense
PageList
προφίλ
απόδοση

Για να εμφανίσετε ή να αποκρύψετε αυτά τα widgets, πρέπει πρώτα να αλλάξετε το κινητό σας άποψη σε Custom.
Από το ταμπλό του αυτοκινήτου σας&gt; Σχέδιο&gt; Πρότυπο.
Κάντε κλικ στο σύμβολο γρανάζι κάτω Κινητό προεπισκόπηση του δικτυακού σας τόπου.
Με πρότυπο το κινητό σας οριστεί σε Ναι, κάντε κλικ στο Επιλογή κινητού πρότυπο αναπτυσσόμενο μενού και επιλέξτε Προσαρμογή.
Πατήστε το κουμπί Αποθήκευση.
Ενώ ακόμα στο Πρότυπο, στη συνέχεια, κάντε κλικ στο Επεξεργασία HTML Proceed.
Τώρα βασικά το μόνο που έχετε να κάνετε σε αυτό το σημείο είναι η αναζήτηση για την ετικέτα του widget (με Ctrl + F) και απλά προσθέστε το κινητό mobile= μέσα σε αυτό μαζί με ένα yes Η no





Τώρα ας προσπαθήσουμε να κρύψει το widget προφίλ αλλιώς το gadget την εμφάνιση του κινητού site σας.

Αυτός είναι ο αρχικός κώδικας για την ετικέτα widget προφίλ:


<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

Για να αποκρύψετε την εμφάνιση του κινητού άποψη προσθέσετε το χαρακτηριστικό mobile='no'

<b:widget id='Profile1' locked='false' mobile=’no’ title='About Me' type='Profile'/>     

Αποθηκεύστε το πρότυπό σας και να κάνετε προεπισκόπηση με ένα τηλέφωνο.
Μετάφραση Google




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

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

Slide Open Gadget σελιδοδείκτη αυγό για το Blogger




Μετάβαση στο Blogger >> Σχεδιασμός >> Επεξεργασία HTML.
Επιλέξτε το πλαίσιο δίπλα στο "Widgets Ανάπτυξη προτύπου".
Τώρα βρείτε </ head>
Αντιγράψτε και Επικολλήστε τον παρακάτω κώδικα ακριβώς πάνω </ head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>


5. Τώρα βρείτε </ body>
6. Αντιγράψτε και Επικολλήστε τον παρακάτω κώδικα ακριβώς πάνω από το </ body>.


<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://www.foulscode.blogspot.gr/">FoulsCode</a>


7. Αποθηκεύστε το πρότυπό σας και είστε έτοιμοι!
Αν έχετε οποιοδήποτε πρόβλημα ή οποιαδήποτε απορία, απλά πτώση τους στο πλαίσιο σχόλιο παρακάτω. :)


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

27 Δεκεμβρίου 2012

Related Posts με εικόνες




Ένα χρήσιμο Gadget σε όλα τα Blogs. Δείτε παρακάτω  πώς μπορείτε να το βάλετε στη δικιά σας σελίδα.
  • Σύνδεση στο λογαριασμό σας Blogger
  • Σχεδίαση / Επεξεργασία HTML
  • Κλικ στο Επέκταση γραφικών στοιχείων
  • Ctrl + F για να βρούμε το </head> 
  • Επικολλούμε πριν από αυτόν τον παρακάτω κώδικα:





    <!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script type='text/javascript'> var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://best2know.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
    • Τώρα βρίσκουμε τον παρακάτω κώδικα:
    <div class='post-footer-line post-footer-line-1'>
    • Μετά από αυτόν επικολλούμε τον παρακάτω κώδικα:
    <!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <br/> <a href="http://xmlcodesynthesis.blogspot.com/2011/06/related-posts.html" target="_blank"><b>Κάντε το δικό σας!</b></a> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->
    • Μπορείτε να αλλάξετε τις παραμέτρους στους παρακάτω κώδικες με αυτές που σας βολεύουν
    var defaultnoimage=http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png;
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    • Αποθήκευση προτύπου και είμαστε έτοιμοι!
    Διαβάστε Περισσότερα »

    26 Δεκεμβρίου 2012

    Προσθέστε ημερομηνία στο blog

    Ψάχνοντας μια μέρα τον κώδικα μιας σελίδας βρήκα το ακόλουθο widget. Πρόκειται για ημερομηνία σε μια σελίδα. Πώς θα το βάλετε στο blog σας; Είναι απλό. 

    1. Συνδεθείτε στο λογαριασμό σας Blogger.
    2. Πίνακας Ελέγχου / Σχεδίαση στη συνέχεια.
    3. Προσθήκη gadget και επικολλήστε τον παρακάτω κώδικα:

    <script type='text/javascript'>
    //<![CDATA[
    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym="0"+daym
    var dayarray=new Array("Κυριακή","Δευτέρα","Τρίτη","Τετάρτη","Πέμπτη","Παρασκευή","Σάββατο")
    var montharray=new Array("Ιανουαρίου","Φεβρουαρίου","Μαρτίου","Απριλίου","Μα'ί'ου","Ιουνίου","Ιουλίου","Αυγούστου","Σεπτεμβρίου","Οκτωβρίου","Νοεμβρίου","Δεκεμβρίου")
    document.write("<p>"+dayarray[day]+", "+daym+" "+montharray[month]+", "+year+"</p>")
    //]]></script>


    Ο παραπάνω κώδικας μπορεί να μπει και μέσα στον HTML κώδικα της σελίδας. Αν προσέξετε στο πάνω αριστερά μέρος της σελίδας μου θα το δείτε.Γι' αυτό θα ακολουθήσει άλλη ανάρτηση. Αν για κάποιο λόγο η σελίδα σας βγάζει κεφαλαία γράμματα, απλά ξαναγράψτε τις Ελληνικές λέξεις χωρίς τόνο. 

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

    23 Δεκεμβρίου 2012

    Αυτόματα Tabbed section στο sidebar σας

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

    Τυχαία Ανάρτηση - Random Post Gadget




    Είναι σαν το "Αισθάνομαι Τυχερός" της Google !!! :)

    Άμα είναι τυχερός ο επισκέπτης μας, θα βγεί στην ανάρτηση που έψαχνε.

    Ακολουθήστε τα παρακάτω βήματα:

    1) Σύνδεση στον blogger
    2) Σχεδίαση
    4) Προσθήκη Gadget
    5) HTML/JavaScript
    6) Στην βάλτε τον παρακάτω κώδικα στο κουτάκι
    <div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Νιώθεις τυχερός? Πάτα εδώ και θα δεις ένα τυχαίο post!Που ξέρεις ,μπορεί να είναι αυτό που ζητάς!'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script><noscript><a href="http://FoulsCode.blogspot.gr/" target="_blank">FoulsCode</a></noscript>

    Μπορείς να αλλάξεις τα μπλέ γράμματα και να βάλεις ότι θέλεις!


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

    Gadget με αποτελέσματα αγώνων ποδοσφαίρου




    Gadgets #1 για τα Αποτελέσματα των αγώνων ποδοσφαίρου (από το KingBet.gr)

    Σήμερα θα σας παρουσιάσω ένα πολύ όμορφο Gadget αγώνων για το blog σας!
    Περιέχει τα Live Scores και όλες τις λεπτομέρειες των αγώνων που παίζονται!

    Δείτε τα αναλυτικά:
    • Όλα τα Leagues!!!
    • Καρτέλα αγώνα
    • Ώρα του αγώνα
    • Γηπεδούχος
    • Σκορ
    • Κατάσταση
    • Ημίχρονο
    • Τελικό
    • Συμβάντα αγώνα
    Και όλα αυτά μπορείς να τα δεις, και για την προηγούμενη, και για την επόμενη μέρα!

    Δείτε το Demo
     
    1) Σύνδεση στον Blogger
    2) Σχεδίαση
    3) Προσθήκη Gadget
    4) HTML/JavaScript
    5) Στο δεύτερο κουτάκι προσθέτουμε τον παρακάτων κώδικα:
    <iframe src="http://www.kingbet.gr/live_widget.php" name="childframe" id="childframe" frameborder="0" width="600" height="2500"></iframe><div style="font-family: arial, sans-serif; font-size: 9px;" id="rcdr">Powered by <a target=_blank href=http://www.bloggertricks.gr/>Blogger Gadgets</a></div><noscript>Your browser does not support JavaScript!</noscript>
    <style type=text/css>
    .rcw-comments a {text-transform: capitalize;}
    .rcw-comments {border-bottom: 1px #cccccc dotted; padding-top: 7px!important; padding-bottom: 7px!important;}
    #rcdr {background: url(http://3.bp.blogspot.com/-wsIqUGbMUyk/TchLsqCK3QI/AAAAAAAACmU/udeV22bGZ78/s400/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
    #rcdr, #rcdr a {color:#808080;}
    </style>

    Αλλάξτε το μέγεθος του Gadget, βάζοντας τα κατάλληλα για το δικό σας blog


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

    Πως να αλλάξεις την εμφάνιση του Gadget "Δημοφιλείς Αναρτήσεις" στον Blogger



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

    Πρόκειται για μια μικρή αλλαγή ή οποία όμως θα "προσφέρει" αρκετά στο blog σας!

    Πως γίνεται λοιπόν να αλλάξει η εμφάνιση του Gadget "Δημοφιλείς Αναρτήσεις" ?

    Η απάντηση είναι εύκολη αρκεί να ακολουθήσετε τα παρακάτω βήματα:

    1) Σύνδεση στον Blogger
    2) Σχεδίαση
    3) Επεξεργασία HTML
    4) Με την βοήθεια του CTRL + F ψάξτε για το:

    ]]></b:skin>

    5) Ακριβώς απο πάνωβάλτε τον παρακάτω κώδικα:

    .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFFurl(http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #ddd;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    }
    .popular-posts ul li:hover {
    border:1px solid #6BB5FF;
    }
    .popular-posts ul li a:hover {
    text-decoration:none;
    }

    Τώρα, αν θες, μπορείς να αλλάξεις το #FFF βάζοντας το χρώμα της επιλογής σου.

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