Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Παρασκευή, Οκτωβρίου 30

0

Πως να βαλλετε στο blog σας πτυσσόμενο Slashdot Menu

Σε αυτό το tutorial θα δούμε πως να δημιουργήσουμε ένα όμορφο και κομψό πτυσσόμενο Slashdot sidebar  μενού .



1 )   Πρώτα απ’όλα θα κατεβάστε   sdmenu.zip , αμέσως μετά κάνετε Extract  στο rar και ανοίξτε το   αρχείο  .


  Μέσα στο φάκελο θα βρείτε κάποια  GIF εικονίδια , sdmenu.js  και sdmenu.css  αρχεια .

  Ανεβάστε όλα τα GIF εικονίδια  και το  sdmenu.js  στο δικό σας  Free file hosting and file sharing site

  Αμέσως μετά , ανοίγετε το  sdmenu.css  :


div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
   Ψάχνετε μέσα στο css script  τις εξής γραμμές :  bottom.gif  ,  title.gif  ,  toptitle.gif  , expanded.gif  ,  collapsed.gif  και  linkarrow.gif  και αντικαταστήστε τις με τα URL των αντιστοίχων εικονιδίων σας .

Αποθηκεύετε το css script και το ανεβάζετε κ’ αυτό στο δικό σας  Free file hosting and file sharing site


2)  Τώρα πηγαίνουμε  Διάταξη >> Επεξεργασία HTML >> Επέκταση προτύπων γραφικών στοιχείων  και ψάχνουμε στο  πρότυπο μας το  <head>  και κολλάμε ακριβώς κατω από το  <head>  τον παρακάτω κώδικα :


<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
    <script type="text/javascript" src="sdmenu/sdmenu.js">
        /***********************************************
        * Slashdot Menu script- By DimX         * Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
        * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code         ***********************************************/     </script>
    <script type="text/javascript">
    // <![CDATA[
    var myMenu;
    window.onload = function() {
        myMenu = new SDMenu("my_menu");
        myMenu.init();
    };
    // ]]>
    </script>


  Αλλάζετε τα sdmenu.css   και  sdmenu.js  με τα URL των αντιστοίχων αρχείων  σας και αποθηκεύετε το πρότυπο .



3 )  Ενεργοποιήστε το Slashdot sidebar  Menu :

  Πηγαίνουμε  Διάταξη >>  Στοιχεία Σελίδας >>  Προσθήκη gadget >> HTML/JavaScript  και εισάγουμε τον παρακάτω κώδικα :



<div class="sdmenu" id="my_menu">
<div>
Webmaster tools
<a href="http://bloggertrics.blogspot.com/2009/10/static-image-widget-code-generator.html">Static Image Widget Code Generator</a>
<a href="http://bloggertrics.blogspot.com/2009/10/google-pagerank-button-blog.html"> Google Pagerank Button Generator</a>
<a href="http://bloggertrics.blogspot.com/2009/10/broken-link-checker-tool.html">Broken Link Checker tool</a>
<a href="http://bloggertrics.blogspot.com/2009/09/backlink-checker.html">Backlink Checker</a>
<a href="http://bloggertrics.blogspot.com/2009/09/free-search-engine-ranker.html">FREE Search Engine Ranker!</a>
<a href="http://bloggertrics.blogspot.com/2009/09/free-site-submission.html">FREE Site Submission!</a>
</div>
<div>
Blogger Tips
<a href="http://bloggertrics.blogspot.com/2009/08/blog.html">Πώς να Ρυθμίσετε Blog σας?!!</a>
<a href="http://bloggertrics.blogspot.com/">Link to Us</a>
<a href="http://bloggertrics.blogspot.com/2009/08/template-blogger-blogspot.html">Πως να αλλάξετε το template σας στο Blogger </a>
</div>
<div class="collapsed">
blogger hacks
<a href="http://bloggertrics.blogspot.com/2009/10/css-hover-menu.html">δημιουργήστε μόνο με τη χρήση CSS,ένα όμορφο Hover Menu</a>
<a href="http://bloggertrics.blogspot.com/2009/10/blog-balloon-tooltip.html">Πως να βάλετε στο blog σας ένα όμορφο Balloon tooltip</a>
<a href="http://bloggertrics.blogspot.com/2009/10/lcd-blog-javascript_02.html"> LCD ρολόι για το blog σας χρησιμοποιώντας JavaScript</a>
<a href="http://bloggertrics.blogspot.com/2009/09/scroll-to-top-jquery.html">Προσθέστε " scroll to top " κουμπί χρησιμοποιώντας Jquery</a>
</div>
<div>
Blogger Widgets
<a href="http://bloggertrics.blogspot.com/2009/10/static-image-widget-code-generator.html">Static Image Widget Code Generator Για blogger</a>
<a href="http://bloggertrics.blogspot.com/2009/09/fixed-floating-twitter-follow-me-button.html">Fixed-Floating Twitter Follow Me Button </a>
<a href="http://bloggertrics.blogspot.com/2009/08/top-posts-widget.html">Top Posts Widget</a>
<a href="http://bloggertrics.blogspot.com/2009/08/back-links-e-referrer.html">Αυτόματα back links με το e-Referrer</a>
</div>
</div>
 Αλλάζετε τα links με τα δικά σας ,κάντε αποθήκευση και ανανεώστε την σελίδα σας για να δείτε το αποτέλεσμα . Καλή επιτυχία σε όλους !!!


Δείτε το Slashdot Menu σε λειτουργία εδώ :
Read More ►

Πέμπτη, Οκτωβρίου 29

0

Static Image Widget Code Generator Για blogger

Αυτό το Static Image Code Generator , δημιουργεί ένα   widget , που είναι  μια στατική εικόνα , την οποία μπορείτε να την βάλετε σε κάθε γωνία της ιστοσελίδας σας.



  Για να δημιουργησετε το  Static Image widget , απλά ακολουθήστε τα παρακάτω βήματα :



 Δημιουργήστε το Widget Code εδώ

(1) Εισάγετε εδώ το URL της φωτογραφίας
 





Μπορείτε να φιλοξενήσετε την φωτογραφία σας σε κάθε image hosting [π.χ photobucket η imageshack ]



ΣΗΜΕΊΩΣΗ:
Δεξί-κλικ στην φωτογραφία και κλικ στο Properties για να ξέρετε την τοποθεσία της εικόνας και το URL.



 (2) Επιλέξτε την τοποθεσία της εικόνας (σε ποιο σημείο της σελίδας σας θέλετε να βάλετε την εικόνα )



(3)




ΣΗΜΕΊΩΣΗ:

Copy και Paste τον παρακάτω κώδικα πριν το < /head> του προτύπου σας αν θέλετε η εικόνα να φορτώσει πρώτη.
η πριν το < /body> αν θέλετε η εικόνα να φορτώσει αργότερα.




Δείτε το DEMO  εδώ  



Read More ►

Τετάρτη, Οκτωβρίου 28

0

Λίστα με καλύτερες ιστοσελίδες δωρεάν φιλοξενίας αρχείων για τις εικόνες και τα scripts σας

Αν και το Blogger μας επιτρέπει να ανεβάσουμε αρχεία εικόνας και βίντεο για τις αναρτήσεις  μας και για τα  widgets μας , δεν είμαστε σε θέση να φορτώσουμε άλλους τύπους αρχείων (π.χ.: Javascripts) . Αυτό μπορεί να αποδειχθεί αρκετά δύσκολο για εκείνους που βασίζονται σε τέτοιου είδους αρχεία.
Γι 'αυτό έχω συντάξει έναν κατάλογο των πρώτων πέντε  ελεύθερων υπηρεσιών φιλοξενίας  αρχείων που έχω συναντήσει. Όλες αυτές οι υπηρεσίες θα σας επιτρέψουν να φορτώσετε Javascripts, αρχεία κειμένου και εικόνας, και να έχετε  " hotlink" σε αυτά τα αρχεία , για προσωπική χρήση.





Μπορείτε να φιλοξενήσει τα αρχεία σας σε δικτυακούς τόπους του Google ,απλά με τη δημιουργία ενός λογαριασμού καθώς μπορείτε να δημιουργήσετε τη δική σας προσωπική ιστοσελίδα με site.Google.com. Δυστυχώς, η αποθηκευτική ικανότητα είναι μόλις 100MB. Το  Συνιστώ για την τήρηση των αρχείων μας  για πάντα με ασφάλεια ..




  • Hotlinking επιτρέπεται για όλους τους τύπους αρχείων, συμπεριλαμβανομένων των βίντεο και αρχεία μουσικής!
  • 1GB του προσωπικού χώρου αποθήκευσης.
  • Μέγιστο όριο μεγέθους αρχείου: 50MB  
  • 5GB Bandwidth Μηνιαία .


είναι μια καλή ιστοσελίδα. Επιπλέον πολλά αρχεία JavaScript που φιλοξενούνται εδώ δουλεύουν μια χαρά.
  • Μέγιστο μέγεθος αρχείου 10MB
  • 7GB του καθημερινού Bandwidth !
  • Hotlinking επιτρέπεται σε όλα τα αρχεία
  • Παράνομο / πορνογραφικό περιεχόμενο δεν επιτρέπεται
  • 1GB του προσωπικού χώρου αποθήκευσης
Σημαντικό: Αρχεία σας δεν μπορεί να είναι 100% ασφαλείς αν δεν κάνετε εγγραφή  !





  • Δεν υπάρχουν περιορισμοί στους τύπους αρχείων.
  • Αρχεία μπορεί να είναι έως και 300MB σε μέγεθος.
  • Ανεβάστε μέχρι 25 αρχεία ταυτόχρονα.
  • Upload γρηγορότερα με Turbo.
  • Κοινή χρήση αρχείων  με τα blogs, forums, Facebook ή MySpace.




* Δωρεάν απεριόριστος αποθηκευτικός χώρος , για να αποθηκεύσετε όλες τις ψηφιακές σας φωτογραφίες, βίντεο κλιπ, μουσικά αρχεία, σημαντικά έγγραφα, συνημμένα ηλεκτρονικού ταχυδρομείου, καθώς και άλλα διάφορα αρχεία που θέλετε να αποθηκεύσετε.
* Dedicated Download Speed (ποτέ δεν θα αντιμετωπίσει προβλήματα Ταχύτητα download)
* Δεν υπαρχει οριο στα Uploads Αρχείων
* Hot Linking Επιτρέπετε




* Δωρεάν φιλοξενία αρχείων, mp3 δωρεάν φιλοξενία, δωρεάν mp3 streaming, δωρεάν mp3 αποθήκευση και δωρεάν φιλοξενία εικόνας.
* 1 GB χώρου που μπορείτε να έχετε πρόσβαση από οποιονδήποτε υπολογιστή.
* 250 MB του καθημερινού Bandwidth !
* Μέγιστο μέγεθος αρχείου 50MB
* Δημιουργία-μέχρι και 20 φακέλους για να τακτοποιήσετε τα αρχεία σας, mp3, και εικόνες.
* Hot Linking Επιτρέπετε







Μέγιστο όριο μεγέθους αρχείου: 1,5 MB . Μπορείτε να ανεβάσετε όσες φωτογραφίες θέλετε, για όσο διάστημα ο καθένας να τηρεί τους όρους της υπηρεσίας .ImageShack ® επιτρέπει την πλήρη ενσωμάτωση εικόνων μεγέθους σε δικτυακούς τόπους . Μπορείτε να φορτώσετε: jpg jpeg png gif bmp tif tiff swf
ΣΗΜΕΙΩΣΗ: BMP, TIF, και οι εικόνες tiff θα μετατρέπονται σε. Png αυτόματα.





* Επιτρέπονται τα αρχεία εικόνας: JPG, PNG, GIF, BMP, TIF
*  Αρχεία πολυμέσων: avi, mov, mpg, ASF, WMV, DivX, 3GP, 3G2, qt, dv
* Τα αρχεία δεν διαγράφονται.
* Μέγιστο όριο μεγέθους αρχείου: Απεριόριστη φαίνεται. Δεν αναφέρει πουθενά στην πραγματικότητα.


* Max αποθήκευσης ανά λογαριασμό: 1GB
* Μηνιαία Bandwidth: 10GB
* Εικόνες μεγαλύτερες από 1024x768 pixels θα αλλάζουν


ΣΗΜΑΝΤΙΚΌ :  

Σε καμία περίπτωση μην αποθηκεύετε τα αρχεία σας στις ιστοσελίδες όπως :

Hotlinkfiles.     και   boxstr.com 

 Είναι  ιστοσελίδες   ΑΠΆΤΗ  !!!!!!!!!

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

Χάθηκαν όλα τα αρχεία μου σε μια ήμερα , χωρίς καμία προειδοποίηση , από αυτές τις ιστοσελίδες   ΑΠΆΤΗ  !!!!!!!!!
Read More ►

Όροι Χρήσης





Παρακαλώ  διαβάστε τους Όρους Χρήσης προσεκτικά.

Αυτοί είναι οι γενικοί Όροι που διέπουν την πρόσβασή σας και τη χρήση αυτού του διαδικτυακού τόπου (“Site”). Αν δε συμφωνείτε μαζί τους, δε θα πρέπει να προχωρήσετε περισσότερο στο Site. Αν συνεχίσετε να χρησιμοποιείτε το Site και / ή οποιαδήποτε από τις υπηρεσίες που εμφανίζονται στο Site, συμφωνείτε να είστε δεσμευμένοι από αυτούς τους Όρους και τις Προϋποθέσεις.

Δικαιώματα πνευματικής  ιδιοκτησίας

Το αρχικό - πρωτότυπο περιεχόμενο αυτού του δικτυακού τόπου έχει δημιουργηθεί από την  Σοφία Καράγιαλη ( http://bloggertrics.blogspot.com ) 

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

Συνεπώς, απαγορεύεται ρητά η αναπαραγωγή, αναδημοσίευση, αντιγραφή, πώληση, μετάδοση, διανομή, έκδοση, μετάφραση, τροποποίηση με οποιονδήποτε τρόπο, τμηματικά ή περιληπτικά χωρίς τη ρητή προηγούμενη έγγραφη συναίνεση και ενημέρωση του http://bloggertrics.blogspot.com .

Κατ' εξαίρεση  επιτρέπεται ελεύθερη  αντιγραφή τμημάτων του περιεχομένου για για αυστηρά προσωπική χρήση, χωρίς πρόθεση εμπορικής ή άλλης εκμετάλλευσης   και η χρήση του περιεχομένου αυτών των ιστοσελίδων με την προϋπόθεση ότι γίνεται σαφής αναφορά της  πηγή προέλευσης και του συγγραφέα  και  ότι το τυχόν παράγωγο περιεχόμενο διανέμεται με την ίδια ή συμβατή άδεια , χωρίς αυτό να σημαίνει καθ’ οιονδήποτε τρόπο παραχώρηση δικαιωμάτων πνευματικής ιδιοκτησίας. 
Τα άρθρα και  τα αποσπάσματά αυτά θα δημοσιευτούν ως έχουν, χωρίς αλλαγές στο περιεχόμενό τους.

Ευθύνη για το περιεχόμενο τρίτων

Το http://bloggertrics.blogspot.com δεν ευθύνεται για το περιεχόμενο και τις υπηρεσίες άλλων δικτυακών τόπων στους οποίους παραπέμπει μέσω δεσμών (links), hyperlinks ή  banners, ούτε εγγυάται τη διαθεσιμότητά τους. 
Η παραπομπή σε άλλους δικτυακούς τόπους γίνεται προς διευκόλυνση των επισκεπτών  και σε καμία περίπτωση δεν δημιουργεί οποιασδήποτε μορφής δέσμευση του http://bloggertrics.blogspot.com , προβλήματα δε που θα ανακύψουν κατά την επίσκεψη / χρήση των δικτυακών τόπων στους οποίους η παρούσα παραπέμπει ανάγονται αποκλειστικά και μόνο στη σφαίρα ευθύνης των αντίστοιχων δικτυακών τόπων, όπου και το κοινό οφείλει να απευθύνεται.
Read More ►

Τρίτη, Οκτωβρίου 27

0

Πως να δημιουργήσετε μόνο με τη χρήση CSS,ένα όμορφο Hover Menu

Παρακάτω βλέπετε 100% σε CSS βασισμένο hover menu .

ΠΑΡΑΔΕΙΓΜΑ :



ΤΟ CSS :


<style type="text/css">
#coolmenu{
border: 1px solid black;
width: 170px;
background-color: #E6E6E6;
}
#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}
#coolmenu a:hover{
background-color: black;
color: white;
}
</style>
<div id="coolmenu">
<a href="http://www.javascriptkit.com/">JavaScript Kit</a>
<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://www.codingforums.com/">Coding Forums</a>
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
</div>

Εισάγετε τον κώδικα , όπου εσείς θέλετε να εμφανιστεί το  CSS hover menu και είστε έτοιμοι !!!!
Ελπίζω να σας φάνηκε χρήσιμο !!!!!

Για οποιαδήποτε ερώτηση αφήστε μου ένα σχόλιο και θα χαρώ να σας βοηθήσω !!
Read More ►

Δευτέρα, Οκτωβρίου 26

0

Πως να βάλετε στο blog σας ένα όμορφο Balloon tooltip

Καλησπέρα σε όλους . Σήμερα θα δούμε πως μπορούμε να δημιουργήσουμε ένα ballon tooltip  για ένα link , με την χρήση JavaScript , δίνοντας στο χρήστη τη δυνατότητα με ένα click ή mouse over στο εκάστοτε link να βλέπει την επεξήγηση της λειτουργίας αυτού .
Λοιπόν ας πιάσουμε δουλειά !

ΒΗΜΑ 1ο :  

Πρώτα απ’ όλα θα χρειαστούμε το script  και τα γραφικά τα οποία θα χρησιμοποιήσουμε στην δημιουργία του ballon tooltip . Το script  φάκελο μπορείτε να κατεβάσετε από την ιστοσελίδα του δημιουργού εδω .

Αποσυμπιέστε το Zip file και πρώτα απ’ όλα βρείτε τον φάκελο  ” images “  και ανεβάστε τα γραφικά στο δικό σας  FREE File Hosting Site ( π.χ. Google Sites )
Μετά ανοίξτε τον φάκελο  “ css “  , κάντε  διπλό κλικ στο έγγραφο  “ bubble-tooltip “  και ανοίξτε το script για να το επεξεργαστείτε .
Αναζητουμε μεσα στο css script  τις παρακατω γραμμες :

background-image: url('../images/bubble_bottom.gif');

background-image: url('../images/bubble_middle.gif');

background-image: url('../images/bubble_middle.gif');

Τώρα αλλάζετε τα images url με τα direct url των γραφικών σας , κάνετε αποθήκευση έγγραφου  και ανεβάζετε  το “ bubble-tooltip css “ και το “ bubble-tooltip js “ στο δικό σας  FREE File Hosting Site ( π.χ. Google Sites )
Δείτε τα screenshots κάτω για περισσότερη λεπτομέρεια :

 

ΒΗΜΑ 2ο :  

Κάνετε Log in στο blog σας και πηγαίνετε  <<  Διάταξη >>  Επεξεργασία HTML >> Επέκταση προτύπων γραφικών στοιχείων >>
Κάνετε Λήψη πλήρους προτύπου για κάθε ενεχόμενο πάντα !!!!!               
Ψάχνετε στο πρότυπο σας να βρείτε το </head>   και κολλάτε ακριβώς  πάνω από αυτό , τον παρακάτω κώδικα :


<!--bubble tooltip Scripts and Styles Start-->
<link href='http://sites.google.com/site/.../.../bubble-tooltip.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/.../.../bubble-tooltip.js' type='text/javascript'/>
<!--bubble tooltip Scripts and Styles End-http://bloggertrics.blogspot.com-->
Τώρα αντικαταστήστε  τα url απο τα “ bubble-tooltip.css “ και “ bubble-tooltip.js “ με τα direct url των αντιστοίχων αρχείων σας  και κάντε Αποθήκευση Προτύπου

ΒΗΜΑ 3ο :

Τώρα πηγαίνετε  << Διάταξη >>  Στοιχεία Σελίδας >> Προσθήκη gadget >> HTML/JavaScript  >> και εισάγουμε τον παρακάτω κώδικα  :
 

<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content">Content is comming here as you probably can see.Content is comming here as you probably can see.</span></div>
<div class="bubble_bottom"></div>
</div>
Μέχρι εδώ όλα καλά ….    
Τώρα κάθε φορά που κάνετε μια ανάρτηση , στις λέξεις που πρέπει να έχουν tooltip , πρέπει να  συμπεριλαμβάνετε  μια ετικέτα όπως αυτή :

<a href="#" onmousemove="showToolTip(event,'αυτο είναι ενα απλό κείμενο');return false" onmouseout="hideToolTip()">Εδω το κείμενο σας η την λέξη σας</a>

ΠΑΡΑΔΕΙΓΜΑ ΧΡΗΣΗΣ :
<p>Στις 29 Οκτωβρίου <a href="http://el.wikipedia.org/wiki/Αστερίξ" onmouseover="showToolTip(event,'Αστερίξ είναι ο τίτλος ενός κόμικς των Ρενέ Γκοσινί (σενάριο) και Αλμπέρ Ουντερζό (σκίτσα)');return false" onmouseout="hideToolTip()"> ο Αστερίξ </a> κλείνει τα 50 χρόνια του κι αυτό δεν είναι αστείο πράγμα για τους Γάλλους. «Ο Αστερίξ είναι λιγάκι σαν τον Πύργο του Άιφελ», έλεγε τις προάλλες ο Γάλλος εκδότης της σειράς, Αρνό Νουρί</p>

Κλικ εδώ για το DEMO :


Καλή τύχη λοιπόν και θα τα πούμε σύντομα με άλλο ένα καινούργιο tutorial  Wave
Read More ►

Δευτέρα, Οκτωβρίου 19

4

Πως να βάλετε το Slimbox 2.02 για jquery-1.4.2 στο Bloggspot / Εύκολη εγκατάσταση ! Updeted

Slimbox 2
Εγκαταστήστε εύκολα στο Blog σας το Slimbox 2
                       Δείτε το slimbox2 DEMO

Το Slimbox 2 είναι ένας οπτικός κλώνος του δημοφιλούς Lightbox 2  και χρησιμοποιεί τη βιβλιοθήκη jQuery javascript . Έχει ως σκοπό να είναι πολύ μικρό, αποδοτικό, πρότυπο-φιλικό, πλήρως εξατομικεύσιμο,  και συμβατό 100% με το αρχικό Lightbox 2.

Συμβατότητα :

Το Slimbox 2 είναι συμβατό με όλες τα σύγχρονα Browsers:
Firefox 1.5+, Internet Explorer 6+, όπερα 9+ και όπερα για Wii, Safari 3+, Camino και Google Chrome . Όταν χρησιμοποιείται με το jQuery , είναι επίσης συμβατό με την όπερα 8.5 και το σαφάρι 2.

Πώς να εγκαταστήσετε SlimBox σε Blogger:

Καταρχήν, αν θέλετε να φιλοξενήσετε τα scripts στο δικό σας server ,μεταφορτώστε slimbox-2.02.zip και το jQuery javascript .
  • Ας δούμε τώρα τι πρέπει να κάνετε για να το εγκαταστήσετε στο blog σας :
1. Πρώτα απ' όλα συνδεθείτε στο λογαριασμό του Blogger σας και από τον "Πίνακα ελέγχου" σας πηγαίνετε Σχεδίαση >> Επεξεργασία HTML και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων

2 . Τώρα, εντοπίστε στο πρότυπό σας την ετικέτα ]]></b:skin> και κολλήστε τον ακόλουθο κώδικα ακριβώς από πάνω :

/* SLIMBOX */

#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(http://sites.google.com/site/bl12tr34/archeiotheke/loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/prevlabel.gif) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/nextlabel.gif) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(http://sites.google.com/site/bl12tr34/archeiotheke/closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}

3 . Τώρα,εντοπίστε την ετικέτα </head> και κολλήστε τους παρακάτω κωδικούς ακριβώς απο πάνω :

 <!-- Start jQuery -->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&quot;jquery&quot;, &quot;1.4.2&quot;);</script>
<!-- End jQuery -->
<script src='http://sites.google.com/site/bl12tr34/archeiotheke/slimbox2.js' type='text/javascript'/>
<!-- End slimbox2 --> 

Αποθηκεύετε το τώρα πρότυπό σας και πάμε στο επόμενο βήμα .

Ενεργοποιήστε το slimbox2 :


Για να χρισημοποιησετε το slimbox2 , Κάθε φορά που δημοσιεύετε εικόνες , προσθέστε το rel=" lightbox" ιδιότητες στους κωδικούς των εικόνων σας .
Χρησιμοποιήστε επίσης και τις προαιρετικές ιδιότητες τίτλου εάν θέλετε να παρουσιάσετε έναν τίτλο.

Δηλαδή, θα ανεβάζετε κανονικά τις φωτογραφίες σας στην ανάρτησή σας και εδώ ειναι το κολπο , θα πατήσετε στην φόρμα που κάνουμε τις αναρτήσεις , τον σύνδεσμο Επεξεργασία HTML και μετα μέσα στους κωδικούς της φωτογραφίας σας απλά θα κολλήσετε rel="lightbox" title="Εδώ ο τίτλος που θέλετε "



Για παράδειγμα :

Ο κώδικας της φωτογραφίας σας θα φαίνεται κάπως έτσι :


<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-
NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s1600/15.jpg"
imageanchor="1" style="margin-left: 1em; margin-right: 1em;" >
<img border="0"height="158"
src="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s200/15.jpg"width="200"/></a></div>


Και εσείς πρέπει να κολλήστε τις γραμμές που ενεργοποιούν το slimbox και ο κώδικας της φωτογραφίας σας πρέπει να φαίνεται έτσι :


<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-
NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s1600/15.jpg " 
imageanchor="1"style="margin-left: 1em; margin-right: 1em;"rel="lightbox" title="Εδώ ο τίτλος που θέλετε"><img border="0" height="158" 
src="http://4.bp.blogspot.com/_L116RpGjEMY/Sr-NNPbs-RI/AAAAAAAAAUI/dqFzaA0kDaw/s200/15.jpg " width="200" /></a></div>

Πιστεύω οτι είναι εύκολο ετσι ?

Για να μην ξεχνάτε τους κωδικους ενεργοποιήσετε απλά κάνετε το έξης:

1 . Πηγαίνετε στην καρτέλα "Ρυθμίσεις "και μετα πατάτε Διαμόρφωση , κατεβείτε στην σελίδα προς τα κατω , μέχρι να βρείτε την επιλογή "Πρότυπο Ανάρτησης ".
Δίπλα θα βρείτε ένα textarea εκει μέσα κόλλησε τους κωδικούς ενεργοποιήσεις rel="lightbox" title="Εδω ο τιτλος που θελεις " και αποθηκεύετε τις επιλογές σας !

2 . Τώρα κάθε φορά που θα κάνετε καινούργια ανάρτηση , μέσα στο κουτί της ανάρτησης θα εμφανίζονται αυτοί οι κωδικοί ενεργοποιήσεις .
Αν δεν θέλετε να τις χρησιμοποιήσετε απλά τους διαγράφετε και κάνετε κανονικά την ανάρτησή σας , αλλιώς, κάνετε αποκοπή και επικόλληση αυτών των κωδικών ενεργοποίησης, μέσα στου κωδικούς της φωτογραφίας σας και ετσι διευκολύνετε και τον εαυτό σας !

Ομαδοποιήστε τις εικόνες σας

Για μια ομάδα σχετικών εικόνων , προσθέστε ένα όνομα ομάδας στις ιδιότητες rel αμέσως μετά από τη λέξη «lightbox» .

Για ομάδα σχετικών εικόνων απλά θα κολλήσετε τους παρακάτω κωδικούς σε όσες εικόνες θέλετε να ομαδοποιήσετε :

rel="lightbox-ο τίτλος ομάδας εικόνων εδώ " title="εδώ ο τίτλος για την φωτογραφία "

Παράδειγμα χρήσης :


<div class="separator" style="clear: both; text-align: center;">
<a href="http://χχχχχχχχχχχχχχ.jpg " imageanchor="1" 
style="margin-left: 1em; margin-right: 1em;" rel=" lightbox- τα ταξίδια μου " title="Το ταξίδι μου στην Γαλλία "   >
<img border="0" height="158" src="http://χχχχχχχχχχχχχχχχχ.jpg " width="200" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="http://χχχχχχχχχχχχχχ.jpg  " imageanchor="1" 
style="margin-left: 1em; margin-right: 1em;" rel=" lightbox- τα ταξίδια μου " title="Το ταξίδι μου στην Αμερική "  >
<img border="0" height="158" src="http://χχχχχχχχχχχχχχχχχ.jpg " width="200" /></a></div>

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

Απλά να προσέχετε , το " rel="lightbox- τα ταξίδια μου " θα είναι το ίδιο για όσες φωτογραφίες θέλετε να ομαδοποιήσετε και για το title="Το ταξίδι μου στην Αμερική" ,θα αλλάξετε τον τίτλο ανάλογα με την κάθε φωτογραφία σας .

Καλή επιτυχία σε όλους !
Read More ►

Κυριακή, Οκτωβρίου 18

2

Χρησιμοποιήστε Ετικέτες Τίτλου (title Tag) για βελτιστοποίηση των μηχανών αναζήτησης ( SEO )

Η βελτιστοποίηση των μηχανών αναζήτησης (ή SEO) είναι σαφώς σημαντική στην σημερινή εποχή. Μια ολόκληρη βιομηχανία έχει στηθεί πάνω  στην βελτιστοποίηση μηχανών αναζήτησης (ή SEO) . Ναι, οι άνθρωποι κάνουν σαν τρελοί για να είναι στις πέντε πρώτες θέσεις σε οποιαδήποτε από τις σημαντικότερες μηχανές αναζήτησης, όπως μπορείτε να διαπιστώσετε κ’εσείς .
Τώρα, υπάρχει κάτι που μπορεί να βελτιώσει πραγματικά τη SEO σας; Οι ειδικοί πιστεύουν ότι η χρήση ετικετών τίτλου ( Tag Τitle ) μπορεί πραγματικά να βοηθήσει.

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

Χιλιάδες επισκέπτες χάνονται λόγω βαθμολογικής κατάταξης στις μηχανές αναζήτησης .
Οι περισσότερες από τις διάσημες και μεγάλες μηχανές αναζήτησης χρησιμοποιούν ετικέτες τίτλου < title Tag > για τη διαβάθμιση των ιστοσελίδων. Στην πραγματικότητα, οι μηχανές αναζήτησης θεωρούν τον τίτλο ως το πιο κρίσιμο κομμάτι των πληροφοριών, προκειμένου να καθορίσουν το περιεχόμενο της ιστοσελίδας.
Η επιλογή του  κατάλληλου Τίτλου, χρησιμοποιώντας τις κατάλληλες  λέξεις-κλειδιά (keywords), μπορεί να μεταβάλει  πολύ δραστικά την κατάταξη του site σας στα αποτελέσματα αναζήτησης (Search Engine Results Pages) .

Τίτλος της ιστοσελίδας  (Title tag ) είναι πραγματικά σημαντικός . Τώρα, το μόνο που απαιτείται να κάνετε είναι να συμπεριλάβετε TagTitle στην ιστοσελίδα σας για να κερδίσετε υψηλότερη κατάταξη  .

Πρώτον, ας δούμε τι είναι η ετικέτα τίτλος;

Η ετικέτα τίτλος είναι ένα στοιχείο στην επικεφαλίδα , μέρος μιας σελίδας  HTML που φέρει δύο <title> </ title> tags .
Καλό είναι να συμπεριλαμβάνετε στον τίτλο σας λέξεις-κλειδιά και θα δείτε την διαφορά .
Για παράδειγμα :  Μπορεί ο τίτλος σας να είναι κάπως έτσι  <title> Χρησιμοποιήστε Τίτλο Ετικέτας για τη βελτίωση της SEO </ title> .
Αυτό θα σήμαινε ότι ο τίτλος θα εμφανιζετε ως εξής ( σε μηχανές αναζήτησης όπως το Google ), « Χρησιμοποιήστε Τίτλο Ετικέτας για τη βελτίωση της SEO » .
Έτσι όμως, οι ετικέτες τίτλου που παράγονται για κάθε σελίδα του Blogger σας blog θα επιδεικνύουν τον τίτλο του blog πρώτα, έπειτα τον τίτλο της ανάρτησης σας. Αυτό δεν είναι και πολύ καλό για τη SEO (Βελτιστοποίηση μηχανών αναζήτησης) , αυτό κάνει τις λέξεις κλειδιά από τους post titles σας να εμφανιστούν μετά από τον τίτλο του blog σας.

Έτσι εάν θέλετε να βελτιώσετε τη SEO που είναι σημαντικό για το blog σας, ακολουθήστε το παρακάτω βήματα :

1) Πηγαίνετε   << Διάταξη >> Επεξεργασία HTML >>  και αναζητήστε  αυτήν  την ετικέτα : 
<title><data:blog.pageTitle/></title>


2)  Αντικαταστήστε  αυτήν την ετικέτα με τα εξής : 


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
    
         3) Αποθηκεύστε το πρότυπο σας και δείτε το αποτέλεσμα Love Struck
Read More ►

Παρασκευή, Οκτωβρίου 16

0

Δημιουργήστε Google Pagerank Button για το blog σας




Οδηγίες :
Εισάγετε το URL οποιαδήποτε ιστοσελίδας και πατήστε το κουμπί "Check PR " για να δείτε το Google PageRank.

Διαλέξτε το σχέδιο που σας αρέσει και πατήστε πάνω για να εμφανιστεί ο κωδικός . Αντιγράψτε και επικολλήστε τον κωδικό στην σελίδα σας .
Θυμηθείτε: Με το " www.domain.com " και " domain.com"  ίσως να έχετε διαφορετικά αποτελέσματα.







Read More ►

Δευτέρα, Οκτωβρίου 12

0

Wooden Fence





Wooden Fence Blogger πρότυπο είναι ένα καλλιτεχνικά σχεδιασμένο πρότυπο , με 2 sidebar και ωραία ξύλινο φράχτη ως φόντο.

Template Name: Wooden Fence
Author: Template Lite
Converter: Falcon Hive
Best Viewed Browser:
Internet Explorer 7&8, Firefox RC3, Opera 9.6, Google Chrome 0.3.154.9, Flock 2.0.3, Safari 4 Public Beta


DEMO     Download

Read More ►

Τρίτη, Οκτωβρίου 6

2

Broken Link Checker tool

Χρησιμοποιήστε αυτό το Broken Link Checker tool για να ελέγξετε για τις μη ενεργές συνδέσεις σε έναν ιστοχώρο. Οι μη ενεργές συνδέσεις είναι συνδέσεις που δεν οδηγούν πουθενά,όταν πατήσετε στη σύνδεση θα παρουσιάσει σελίδα λάθους

1. Εισάγετε ένα όνομα domain . (π.χ. http://bloggertrics.blogspot.com )
2. Πατήστε " View" κουμπί για να αναζητήσει για τις σπασμένες συνδέσεις.

Τα αποτελέσματα θα παρουσιαστούν σε έναν πίνακα . Ένα " V" σημάδι δίπλα στη σύνδεση σημαίνει ότι η σύνδεση λειτουργεί. Ένα " X " σημάδι δίπλα στη σύνδεση σημαίνει ότι η σύνδεση είναι σπασμένη.
Για να ελέγξετε τις σπασμένες συνδέσεις σε μια συγκεκριμένη σελίδα, πατήστε στο λινκ



Check URL:



(πχ. bloggertrics.blogspot.com/tools/)

Read More ►

Παρασκευή, Οκτωβρίου 2

0

Πως να βάλετε LCD ρολόι στο blog σας χρησιμοποιώντας JavaScript


Για  να βάλετε LCD ρολόι στο blog σας χρησιμοποιώντας JavaScript ακολουθείτε τα εξής βήματα :

    » Βήμα 1 : Πηγαίνετε   Διάταξη >>  Επεξεργασία HTML
Σας συστήνω  να σώσετε το αντίγραφο του προτύπου σας προκειμένου να γίνουν οι αλλαγές ακίνδυνα. Για να  το κάνετε , απλά πατήστε  " Λήψη πλήρους προτύπου " .
Τώρα κάντε κλικ στο “ Επέκταση προτύπων γραφικών στοιχείων “ και ψάξτε στον κώδικά σας το  ]]></b:skin> :

Και εισάγουμε τον παρακάτω κώδικα  ακριβώς από πάνω από το ]]></b:skin> :

<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>

Όταν τελειώσουμε Κάνουμε Αποθήκευση Πρότυπου και πάμε παρακάτω
» Βήμα 2 : Τώρα ,επιλέγουμε το σημείο , όπου θέλουμε να εμφανιστεί το ρολόι μας . Πηγαίνουμε  Στοιχεία Σελίδας  >> Προσθήκη Gadget >> HTML/JavaScript και εισάγουμε  τον κώδικα παρακάτω


<span id="digitalclock" class="styling"></span>

<script>
<!--

/*****************************************
* LCD Clock script- by Javascriptkit.com
* Featured on/available at http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"

if (hours==12) dn="PM" 
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+"   "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show

//-->
</script>

Αυτό ήταν ……  Κάνουμε αποθήκευση ,ανανεώνουμε την ιστοσελίδα μας και βλέπουμε το αποτέλεσμα . 

Δείτε Demo Εδώ


P . S . Βεβαία , αν θέλετε μπορείτε να προσαρμόσετε στα μέτρα σας τα  style sheet : να αλλάξετε background-color , font , padding  και color
Καλή επιτυχία ….Wave 
Read More ►

0

Πως να δημιουργήσετε Tab Navigation χρησιμοποιώντας το jQuery




Η δημιουργία των tabbed Navigation interfaces έχει γίνει πανεύκολη υπόθεση με την χρήση του  jQuery UI Scripts .
Tab navigation  είναι ένα από το πιό θεμελιώδες στοιχείο στην  σύγχρονη ανάπτυξη  ιστού και στοιχείο το οποίο διευκολύνει τους επισκέπτες να  πλοηγούνται πιο εύκολα σε μια  ιστοσελίδα .
Ας δούμε τώρα πως μπορούμε να το δημιουργήσουμε :





ΒΗΜΑ 1ο :

Προκειμένου να δημιουργηθούν τα αποτελέσματα jQuery , θα χρειαστούμε αρχικά την πιό πρόσφατη  jQuery Scripts , και το jQuery UI με το `Core και τα ‘Tabs’ στοιχεία .
Εάν θα προτιμούσατε, μπορείτε να κατεβάσετε αυτά τα αρχεία από την πηγή jQuery UI , αλλιώς κατεβάστε τα από εδώ :    source_files
Μόλις κατεβάσετε το αρχείο  αποσυμπιέστε το rar και ανεβάστε σε μια υπηρεσία δωρεάν φιλοξενίας και αποθήκευσης για τα αρχεία των χρηστών << π.χ.   http://www.4shared.com/ , http://sites.google.com/  η  όποια εσείς χρησιμοποιείτε >> τα παρακάτω αρχεία :

  •      style  
  •     style2 
  •     style3 
  •     jquery-ui-personalized-1.5.2.packed  
  •    sprinkle 
  •     jquery-1.3.2.min


ΒΗΜΑ 2ο :

Τώρα πάμε  Διάταξη >>  Επεξεργασία HTML >>Επέκταση προτύπων γραφικών στοιχείων και ψάχνουμε στο  πρότυπο μας το  </head> και κολλάμε ακριβώς πάνω από το  </head>  τον παρακάτω κώδικα :

<link href="style3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript" src="sprinkle.js"></script>


Αλλάζουμε τις γραμμές με το κόκκινο χρώμα , με το  URL των αντιστοίχων αρχείων μας ( π.χ.  <script type="text/javascript" src="http://sites.google.com/site/……./jquery-1.3.2.min.js"></script> ) .
Τώρα κάνουμε Αποθήκευση Προτύπου και πάμε στο επόμενο βήμα .


ΒΗΜΑ 3ο :

Τώρα πάμε  Διάταξη Στοιχεία Σελίδας >> Προσθήκη gadget  >> HTML/JavaScript και εισάγουμε τον παρακάτω κώδικα  :

<div id="tabvanilla" class="widget">
<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>
<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->
<div id="recent" class="tabdiv">
<p>Lorem ipsum dolor sit amet.</p>
</div><!--/recent-->
<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->
</div><!--/widget-->

Τώρα μπορούμε να επεξεργαστούμε το Scripts  εφόσον τελειώσαμε  , αλλάζουμε  τους τίτλους , τα λινκς με αυτούς που θέλουμε εμείς , μπορούμε επίσης να εισάγουμε και windgets  . 

DEMO ΕΔΩ

Read More ►
 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS