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

FoulsCode: 2011-17

Translate

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

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

Ένα όμορφο και εύκολο Tab Widget για το blog σας

Written By Greek Port on Δευτέρα, 31 Δεκεμβρίου 2012 | Δεκεμβρίου 31, 2012

Tab Widget  (widget πλοήγησης με καρτέλες) είναι ένα widget που πρέπει να υπάρχει σε κάθε blog , γιατί δεν είναι μόνο όμορφα , αλλά είναι και πολύ χρήσιμα  !
Πρώτα απ’ολα εξοικονομεί πολύ  χώρο στην πλαϊνή σας μπάρα και δεύτερων είναι κατά πολύ πιο εύκολος τρόπος να οργανώσετε τα gadget σας .
Υπάρχουν εκατοντάδες διαθέσιμα Tab Widget στο internet , τα οποία περιλαμβάνουν CSS και  javascrpts αλλά αυτό που θα δούμε τώρα  είναι  ο πιο σίγουρος και ο πιο απλός τρόπος να το βάλετε στο blog σας .
Για να το δείτε σε λειτουργία , απλά ρίξτε μια μάτια στην πλαϊνή μπάρα του blog μου , στο“MY STATS” .
Λοιπόν ας ξεκινήσουμε …….

ΟΔΗΓΙΕΣ :


1 . Πηγαίνετε Διάταξη – > Στοιχεία Σελίδας  - > Προσθήκη gadget –> HTML/JavaScript
έπειτα , αντιγράφετε τον παρακάτω κώδικα και τον κολλάτε εκεί 
<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i   = 0;
  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i    = 0;
  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
</script>
<style type="text/css">
div.TabView div.Tabs
{
    height: 24px;
    overflow: hidden;
}
div.TabView div.Tabs a
{
    float: left;
    display: block;
    width:  90px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid black;     border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Serif;
    font-weight: 900;
   color: #000000; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
    background-color:#404040; 
    color: #ffffff; }
div.TabView div.Pages
{
    clear: both;
    border: 1px solid #404040;     overflow: hidden;
}
div.TabView div.Pages div.Page
{
    height: 100%;
    padding: 0px;
    overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
    padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 310px;">
<a>ΟΝΟΜΑ ΤΑΒ 1</a> <a>ΟΝΟΜΑ TΑΒ 2</a> <a>ΟΝΟΜΑ ΤΑΒ 3</a> </div>
<div class="Pages" style="width: 310px; height: 250px;">
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1 
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2 
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3 
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
    tabview_initialize('TabView');
</script>

2 . Επεξεργαστείτε το ανάλογα με τις ανάγκες σας :
border: 1px solid black;  - είναι το χρώμα και το πάχος περιγράμματος / frame γύρο από τα links του  Tab Widget , το επιλεγμένο χρώμα πλαισίου σε αυτήν την περίπτωση είναι τομαύρο και το πάχος είναι τι 1px
color: #000000;  - είναι το χρώμα της γραμματοσειράς , το προεπιλεγμένο χρώμα είναι το μαύρο  
background-color:#404040;   - είναι το hover χρώμα  του περιγράμματος / frame του Tab Widget , όταν από πάνω  περνάμε το ποντίκι μας 
color: #ffffff; - είναι το hover χρώμα της γραμματοσειράς του Tab Widget , όταν από πάνω  περνάμε το ποντίκι μας 
border: 1px solid #404040; – είναι το χρώμα περιγράμματος / frame γύρο από το κύριος σώμα του  Tab Widget , το επιλεγμένο χρώμα πλαισίου σε αυτήν την περίπτωση είναι τομαύρο και το πάχος είναι τι 1px
Μπορείτε να αλλάξετε τα χρώματα ανάλογα με τις ανάγκες σας , για να δείτε όλα τα χρώματα πατήστε εδώ  
ΟΝΟΜΑ ΤΑΒ 1, ΟΝΟΜΑ ΤΑΒ 2 , ΟΝΟΜΑ ΤΑΒ 3  Αντικαταστήστε τα με τους τίτλους των tab σας 
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1 , ΤΑΒ 2 , ΤΑΒ 1 Εδώ πηγαίνουν οι κωδικοί περιεχομένου σας / widgets, τα οποία μπορει να ειναι  widget πρόσφατων  αναρτήσεων  σας , κάθε γραπτό κείμενο, κλπ….

Για παράδειγμα, μπορείτε να προσθέσετε widget πρόσφατα  σχόλια στην πρώτη καρτέλαΟΝΟΜΑ ΤΑΒ 1 θα γίνει  Σχόλια και θα αντικαταστήσετε ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1 με τον κώδικα HTML του widget πρόσφατα  σχόλια .

Καλή επιτυχία σε όλους smile_teeth
Αν έχετε ερώτηση η  κάποιο πρόβλημα , αφήστε τα σχόλια σας !



                                                                        ΠΗΓΗ
Δεκεμβρίου 31, 2012 | 0 σχόλια | Διαβάστε περισσότερα

Χρησιμοποιήστε Firebug για εύρεση των κωδικών στο πρότυπό σας

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

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


Για να εντοπίζετε οποιοδήποτε κώδικα των σελίδων σας (και άλλα), σας συνιστώ τοFirebug , ένα add-ons που χρησιμοποιώ για να μετατρέψω ακόμα και τα θέματα Wordpress σε  Blogger.


Μετά την εγκατάσταση του Firebug, μεταβείτε στη σελίδα στην οποία θέλετε να τροποποιήσετε τον κώδικα (αν είναι το δικό σας blog , να πάτε στην κεντρική σελίδα και οχι στην σελίδα επεξεργασίας του κώδικα ), κάντε κλικ στην μπάρα του  browser Εργαλεία -Firebug – Επιτήρηση Αντικείμενου , όπως φαίνεται παρακάτω : 


Θα παρατηρήσετε ότι ανοίγει ένα παράθυρο στο κάτω μέρος της οθόνης , στη δεξιά πλευρά θα δείτε τον κώδικα CSS (που δίνει στυλ στη σελίδα) και στα αριστερά HTML.



Για να βρείτε τον κωδικό που αντιστοιχεί σε ένα συγκεκριμένο στοιχείο στη σελίδα, απλά τοποθετήστε το ποντίκι πάνω από αυτό (στη επικεφαλίδα του πρότυπο , για παράδειγμα) και θα παρουσιάστουν οι δύο αντίστοιχοι κώδικες:




κάντε κλικ για μεγέθυνση και δείτε τις λεπτομέρειες.

Δείτε την εικόνα που εμφανίζεται στα αριστερά έχει ήδη τονίσει τις αρχές του HTML κώδικα που αντιστοιχεί στην περιοχή του #main-wrapper  που έχω επιλέξει και στο κώδικα  CSS.


Μπορείτε να βρείτε κάθε λεπτομέρεια: κωδικός χρωμάτων , γραμματοσειρά, πλάτος  ,κάποιο  div, κ.λ.π.  απλά περνώντας  τον κέρσορα πάνω από το στοιχείο του πρότυπου που σας ενδιαφέρει . 

Αυτός είναι ένας εξαιρετικός τρόπος για να επεξεργαστείτε  τους  κώδικες και να κατανοήσετε  καλύτερα τη δομή του προτύπου σας.


Επισκεφτείτε και κατεβάστε τα add-ons εδώ :
Δεκεμβρίου 31, 2012 | 0 σχόλια | Διαβάστε περισσότερα

Recent posts widget για blogger με thumbnails

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



Αυτό το συγκεκριμένο widget είναι βασισμένο στο Mlxperience's -- "Recent Posts Widget" .
Στο οποίο όμως έχουν προστεθεί μερικά χαρακτηριστικά , όπως το  Read More ,Comment Bubble και  Ημερομηνία ανάρτησης .


Παρακάτω είναι ο πλήρες κώδικας.

Μπορείτε να το δείτε σε λειτουργία εδώ : 

Για να το βάλετε στο blog σας :

Πηγαίνετε  Στοιχεία Σελίδας –> Προσθήκη Gadget –> HTML/JavaScript και απλά αντιγράψτε και επικολλήστε αυτόν τον κώδικα στο περιεχόμενο widget , σε όποιο σημείο  εσείς θέλετε να εμφανιστεί .


<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
imgr[1] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
imgr[2] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
imgr[3] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
imgr[4] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
showRandomImg = true;
tablewidth = 300; cellspacing = 5; borderColor = "#f3f3f3";
bgTD = "#f3f3f3";
imgwidth = 40;
imgheight = 40;
fntsize = 12;
acolor = "#073763";
aBold = true;
icon = " ";
text = "";
fsize= "11";
showPostDate = true;
summaryPost = 60;
summaryFontsize = 11;
summaryColor = "#0b3e61";
icon2 = " ";
numposts = 5;
home_page =
"http://yourblog.blogspot.com/";
</script>
<script type="text/javascript" src="http://sites.google.com/site/mybloggerscripts/js/recentposts.js"></script>
<span style="font-size:10px;float:right;"> <a href="http://foulscode.blogspot.gr/2012/12/recent-posts-widget-blogger-thumbnails.html" target="_blank">Take This widget</a></span>

Πριν αποθηκεύσετε το widget σας ίσως θέλετε να το επεξεργαστείτε :
  • Για να προσαρμόσετε το πλάτος (width) του widget  ανάλογα με το πλάτος (width) του sidebar  σας .
tablewidth = 300; 
  • Για να προσαρμόσετε το χρώμα του πλαισίου ( border ) και το χρώμα υπόβαθρου ( background ) του widget .
borderColor = "#f3f3f3"; 
bgTD = "#f3f3f3"; 
  • Για να προσαρμόσετε το width και το height από το thumbnail image .
imgwidth = 40; 
imgheight = 40; 
  • Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς Τίτλου .
fntsize = 12; 
acolor = "#073763"; 
  • Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς Σχολίων και Ημερομηνίας
fsize= "11"; 
  • Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς  Κειμένου .
summaryFontsize = 11; 
summaryColor = "#0b3e61"; 
  • Για να προσαρμόσετε το νούμερο των αναρτήσεων που θα εμφανίζονται
 numposts = 5; 
  • Και το πιο σημαντικό :  Μην ξεχάσετε να αλλάξετε τοhttp://yourblog.blogspot.com/  με το url του blog σας .
 Καλή επιτυχία σε όλους :)  


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

100% CSS οριζόντιο Drop Down Menu



Πρώτα ας δούμε το  HTML.

Σημείωση : Τοποθετήστε τον παρακάτω κώδικα  μέσα στο  </body> ετικέτα της ιστοσελίδας σας, όπου θέλετε να εμφανιστεί το μενού η πηγαίνετε Προσθήκη gadget >>HTML/JavaScript και εισάγετε τον κώδικα εκεί :  

<!-- Αρχίζει το Menu -->
<ul id='topnav'>
<li class='current_page_item'><a href='/'>Home</a></li>

<li><a href='http://foulscode.blogspot.gr/' title='Fouls Code'>Blogger Tricks</a></li>
<li><a href='http://loneeagle110.blogspot.com/' title='Στάλες στο γαλάζιο'>Στάλες στο γαλάζιο</a>
</li>
<li><a href='http://foulscode.blogspot.gr/' title='Blogger Templates'>Templates</a>
<!-- Εδώ αρχίζει το SubMenu -->
<ul>
<li><a href='#' title='Τιτλος 1'>Τιτλος 1</a></li>
<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>

<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>

<li><a href='#' title='Τιτλος 8'>Τιτλος 8</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu -->
</li>
<li><a href=http://foulscode.blogspot.gr/' title='fouls code'>Tips</a>
<!-- Εδώ αρχίζει το SubMenu -->
<ul>
<li><a href='http://foulscode.blogspot.gr/' title='Image Effects'>Image Effects</a></li>

<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>
<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>
<li><a href='#' title='Τιτλος 8'>Τιτλος 8</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu -->
</li>
   <li><a href='http://foulscode.blogspot.gr/' title='Widgets'>Widgets</a>

<li><a href='#' title='Τιτλος 1'>Τιτλος 1</a></li>
<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>
<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu --></li>
</ul>
<!-- Τελειώνει το Menu -->


Μπορείτε να προσθέσετε όσες ετικέτες  και οσα  Drop Down στοιχεία υπομενού εσείς θέλετε  .


Το επόμενο βήμα είναι να γράψουμε  το CSS , για να πάρει σχήμα το μενού μας .

Ο βασικός μας CSS κώδικας :

#topnav {
margin: 0px;
padding: 5px 5px 5px 5px;
float: left;
z-index:8;
background-color:#000;
}

#topnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#topnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;

}

#topnav li a, #topnav li a:link {
color: #FFFFFF;
display: block;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
font-weight: bold;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
text-transform: uppercase;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}

#topnav li a:hover {
background-color: #F76C10;
color: #FFFFFF;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}

#topnav li li a, #topnav li li a:link, #topnav li li a:visited {
background-color:#000;
width: 150px;
color: #FFFFFF;
float: none;
margin: 0px 0px 0px -1px;
padding: 7px 10px 7px 10px;
border-bottom: 1px dashed #222;
border-left: 1px dashed #222;
border-right: 1px dashed #222;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

#topnav li li a:hover {
background:#f08c34;
color: #FFFFFF;
margin: 0px 0px 0px -1px;
padding: 7px 10px 7px 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-khtml-border-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

#topnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0px;
padding: 0px;
}

#topnav li li {
}

#topnav li ul a {
width: 150px;
}

#topnav li ul a:hover, #topnav li ul a:active {

}

#topnav li ul ul {
margin: -30px 0 0 171px;
}

#topnav li:hover ul ul, #topnav li:hover ul ul ul{
left: -999em;
}

#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul{
left: auto;
}

#topnav li:hover {
position: static;
}

#topnav .current_page_item a {
background-color: #F76C10;
color: #FFFFFF;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

Σημείωση : Εισάγετε τον παραπάνω CSS κώδικα πάνω από την ετικέτα ]]></b:skin> στο πρότυπο σας .

Δείτε το μενού σε λειτουργία

 Κατανόηση του κώδικα που μπορείτε να επεξεργαστείτε :  

background-color:#000;  -> Το χρώμα υπόβαθρου από το μενού , το οποίο σε αυτή την περίπτωση είναι το μαύρο

 color: #FFFFFF; -> Το χρώμα της γραμματοσειράς

background-color: #F76C10; -> Το hover χρώμα κάθε στοιχείου li  του μενού , το οποίο είναι το πορτοκαλί . 

background:#f08c34;  -> Το hover χρώμα κάθε στοιχείου li  από το SubMenu  του μενού .

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

Καλή επιτυχία σε όλους  : ) 

ΠΗΓΗ
Δεκεμβρίου 29, 2012 | 0 σχόλια | Διαβάστε περισσότερα

Εισαγωγή στο CSS3 - Μέρος 1ο: Τι είναι το CSS3

Written By Greek Port on Πέμπτη, 27 Δεκεμβρίου 2012 | Δεκεμβρίου 27, 2012



Από καιρό ήθελα να γράψω ένα άρθρο με θέμα τις νέες δυνατότητες του CSS 3 και τώρα που τελείωσε η εξεταστική μου και έχω λίγο παραπάνω χρόνο ,νομίζω ότι είναι η πιο κατάλληλη στιγμή να το κάνω !

Το άρθρο αυτό σηματοδοτεί την αρχή για τα υπόλοιπα άρθρα που θα ακολουθήσουν, στα οποία θα δούμε τι είναι το νέο CSS3 πρότυπο το οποίο εδώ και λίγο καιρό έχει αντικαταστήσει το CSS2.

   Θα ξεκινήσουμε από την αρχή - για όλους αυτούς που μπορεί να μην έχουν καν ακούσει για CSS3, για να κατανοήσετε όλοι και δείτε με παραδείγματα αργότερα τι είναι και τι το διαφορετικό έχει το CSS3.

ΤΙ ΕΊΝΑΙ ΤΟ CSS3 .

CSS3 είναι η επόμενη γενιά του CSS το οποίο βρίσκεται σε μια συνεχή φάση ανάπτυξης και αναμένεται να αλλάξει όλο τον παγκόσμιο ιστό όταν οριστικοποιηθεί .
Είναι σε εξέλιξη από το 2002 και δεν έχει ακόμη ολοκληρωθεί.
Τα περισσότερα προγράμματα περιήγησης (με εξαίρεση το IE ) υποστηρίζουν σε μεγάλο βαθμό τις ιδιότητες του CSS 3.

Χρησιμοποιώντας CSS3 μπορούμε να δημιουργήσουμε όμορφα εφέ, που με τις κλασικές μεθόδους χρειαζόμαστε αρκετό κόπο, javascript και περισσότερο γράψιμο xHTML/CSS.
Αντί να χρησιμοποιήσουμε λοιπόν τις εικόνες και πολύπλοκο CSS μπορούμε να καθορίσουμε έναν νέο CSS3 κανόνα πχ. στρογγυλεμένες γωνίες και τα δεδομένα να παράγονται από τα browsers , μειώνοντας έτσι χρόνο φόρτωσης και sever requests.
CSS3 ιδιότητες  επιτρέπουν να γίνει μια πολύ καλύτερη διαδικασία το web design και αν ρίξετε μια μάτια σε ξένες ιστοσελίδες θα δείτε ότι ήδη οι περισσότεροι web designers βασίζονται αποκλειστικά η εν-μέρη στο CSS3 για την κατασκευή ιστοσελίδων .

   Οι περισσότερες CSS3 τεχνικές μπορεί ήδη να εφαρμόζονται στα πρότυπά σας .
Το σίγουρο είναι πάντως ,ότι τα καινούργια πρότυπα που διαθέτει το Blogger σίγουρα χρησιμοποιούν CSS3 .

ΤΟ CSS3 ΣΉΜΕΡΑ :


Αυτήν τη στιγμή - Safari, Chrome, Firfox, Opera 10.5 alpha και IE9 Preview υποστηρίζουν μεγάλη ποικιλία από συγκεκριμένες CSS3  μορφές.
Το μειονέκτημα με το CSS3 όπως με όλα τα web design είναι ότι IE δεν τα υποστηρίζει πλήρως . ( και τι υποστηρίζει να μου πείτε,αλλά άλλο κεφάλαιο αυτό )
Η τρέχουσα σταθερή έκδοση του IE8 browser έχει ελάχιστη υποστήριξη για CSS3 , Όμως το IE9 που είναι σήμερα σε εξέλιξη θα υποστηρίζει πλήρως το CSS3.
Το πρόβλημα με τα IE9 είναι ότι θα διατίθεται μόνο σε Vista λειτουργικά συστήματα και άνω και όχι για τα XP δυστυχώς  , τα οποία ένα μεγάλο ποσοστό εξακολουθούμε να χρησιμοποιούμε .

ΤΑ ΧΑΡΑΚΤΗΡΙΣΤΙΚΆ ΚΑΙ ΤΑ ΟΦΈΛΗ ΤΟΥ CSS3


CSS3 προσφέρει κάποια σπουδαία  νέα  selectors , τα  οποία θα δώσουν στους web designers, όχι μόνο καλύτερη εμφάνιση από τις εικόνες, αλλά και πολλές δυνατότητες εξοικονόμηση χρόνου  για να έχουν το επιθυμητό τελικό αποτέλεσμα .
Τα κύρια οφέλη του CSS3 είναι ότι επιτρέπει την δημιουργία  λειτουργιών  του στυλ  Javascript , χωρίς όμως να χρησιμοποιείται .
Ένα άλλο συν στο CSS3 είναι η δυνατότητα δημιουργίας απίστευτων γραφικών,που μέχρι τώρα χωρίς το Photoshop ήταν αδύνατον να δημιουργηθούν .

ΤΙ ΜΠΟΡΟΎΜΕ ΝΑ ΚΆΝΟΥΜΕ ΜΕ CSS3


Εδώ είναι μια μικρή λίστα από CSS3 selectors   

  • Στρογγυλεμένες  γωνίες  (rounded corners) 
  • Gradients
  • Σκιά σε κείμενο (text shadow)
  • Animations
  • Διαφάνεια (Opacity)
  •  Box shadow
  • Χρήση πολλαπλών εικόνων φόντου (Multiple background images )
  • RGB τιμές χρωμάτων (RGB color values)
  • Χρήση οποιαδήποτε γραμματοσειράς επιθυμούμε με  @font-face  
  • Border image  και Multiple borders  
  • Opacity  
  • User interfaces,όπως box sizing και  resizing
  • Multi –column
Και αρκετά άλλα .

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

ΜΕΊΝΕΤΕ ΣΥΝΤΟΝΙΣΜΈΝΟΙ


Στα μελλοντικά άρθρα σε αυτή τη σειρά θα δούμε κάθε φορά και μια διαφορετική ενότητα προδιαγραφών  και εντολών του CSS3 , καθώς και τα νέα χαρακτηριστικά. Θα ανακαλύψετε νέες τεχνικές που θα σας λύσουν τα χέρια στην κυριολεξία και θα τα λατρέψετε πραγματικά.


Στην επόμενη ανάρτηση θα δούμε εντολές για  Στρογγυλεμένες  γωνίες  (rounded corners) .

Γι 'αυτό μείνετε συντονισμένοι και δεν θα χάσετε !

Ένα πολύ καλο post από το bloggertrics.blogspot.gr που χωρίζεται σε 3 μέρη δείτε τα στην πορεία

ΠΗΓΗ
Δεκεμβρίου 27, 2012 | 0 σχόλια | Διαβάστε περισσότερα

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";
    • Αποθήκευση προτύπου και είμαστε έτοιμοι!
    Δεκεμβρίου 27, 2012 | 0 σχόλια | Διαβάστε περισσότερα

    Adsense διαφημίσεις μέσα στα posts




    Εάν δε θέλετε να σπαταλάτε το χώρο σας στην αρχική σελίδα και οι διαφημίσεις σας να εμφανίζονται μόνο στις αναρτήσεις ακόμη και μέσα στο κείμενο τότε ακολουθήστε τα εξής βήματα:
    • Πάρτε τη διαφήμιση από το λογαριασμό σας Adsense και μετατρέψτε τον με τον Adsense-Parser για να μπορεί να διαβαστεί κανονικά από τη συγκεκριμένη πλατφόρμα.
    • Συνδεθείτε στο λογαριασμό σας Blogger.
    • Σχεδίαση / Επεξεργασία HTML.
    • Κλικ στο "Επέκταση γραφικών στοιχείων
    • Ctrl + F για να βρείτε την ετικέτα <data:post.body/>
    • Αντικαταστήστε την παραπάνω ετικέτα με τον παρακάτω κώδικα:


      <div expr:id='"aim1" + data:post.id'></div> <div style="clear:both; margin:10px 0"> <!-- Your AdSense code here --> </div> <div expr:id='"aim2" + data:post.id'> <data:post.body/> </div> <script type="text/javascript"> var obj0=document.getElementById("aim1<data:post.id/>"); var obj1=document.getElementById("aim2<data:post.id/>"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script>
      Αντικαταστήστε το <!-- Your AdSense code here --> με τον κώδικα που θα πάρετε απ' τον Adsense Parser.
      • Αποθηκεύστε το πρότυπό σας.
      • Σε κάθε ανάρτηση, εκεί που θέλετε να εμφανίζεται διαφήμιση μέσα στο κείμενό σας προσθέστε την ετικέτα: <!-- adsense --> όχι όμως στη σύνθεση, αλλά στην Επεξεργασία HTML ακριβώς δίπλα. Ή αφού έχετε τελειώσει τη συγγραφή σας, πηγαίνετε στην Επεξεργασία HTML και τοποθετείτε τη συγκεκριμένη ετικέτα όπου εσείς νομίζετε.
      Δεκεμβρίου 27, 2012 | 0 σχόλια | Διαβάστε περισσότερα
       
      berita unik