Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Προβολή αναρτήσεων από Δεκέμβριος, 2012

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

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…

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

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

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


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


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


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

Recent posts widget για blogger με thumbnails

Αυτό το συγκεκριμένο 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…

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&l…

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

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

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

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

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

Χρησιμοποιώντας CSS3 μπορούμε να δημιουργήσουμε όμορφα εφέ, που με τις κλασικές…

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…

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("a…