RSS

Category Archives: TEMPLATE

ΔΗΜΙΟΥΡΓΗΣΤΕ ΔΙΚΑ ΣΑΣ TEMPLATES

Καλή εβδομάδα σε όλους και σε όλες. Σήμερα θα δούμε πως μπορούμε να βγάλουμε προς τα έξω τη δημιουργικότητα μας, την έμπνευση μας και τη φαντασία μας φτιάχνοντας templates. Μην ανησυχείτε. Είναι πανεύκολο, δεν κοστίζει, παίρνει λίγη ώρα και το μόνο όριο είναι η φαντασία.
Το μόνο που θα χρειαστούμε είναι να μπούμε στο λογαριασμό μας μέσω του draft blogger . Ειλικρινά δεν καταλαβαίνω γιατί η Google δε βάζει τις έξτρα δυνατότητες του draft blogger στο «κανονικό» blogspot. Τέλος πάντων! Το σημαντικότερο είναι ότι ακόμα και έτσι μπορούμε να χρησιμοποιήσουμε τις έξτρα δυνατότητες που μας παρέχει η συγκεκριμένη πλατφόρμα. Κλείνουμε την παρένθεση και συνεχίζουμε. Όπως προανέφερα μπαίνουμε στο draft blogger με το ίδιο username και το ίδιο password που χρησιμοποιούμε για να μπούμε στο blogspot.com. Από εκεί πάμε στη διάταξη. Πριν συνεχίσουμε εννοείται ότι παίρνουμε ένα αντίγραφο ασφαλείας (back up) του κώδικα του template που έχουμε. Όταν βρεθούμε στη διάταξη θα δούμε ότι υπάρχει ένας σχεδιαστής προτύπου. Δείτε το παρακάτω screenshot για να καταλάβετε καλύτερα.

Κάνουμε κλικ πάνω στον σχεδιαστή προτύπου και μεταφερόμαστε σε ένα φιλικό περιβάλλον το οποίο χωρίζεται σε δύο μέρη. Στο κάτω είναι η προεπισκόπηση για να βλέπουμε τις διάφορες αλλαγές που κάνουμε και στο πάνω έχουμε τέσσερις επιλογές. Πρότυπο, φόντο, διάταξη και προηγμένη.
Στο πρότυπο μπορούμε να επιλέξουμε το πρότυπο μας από τέσσερις κατηγορίες οι οποίες έχουν η καθεμιά ορισμένες υποκατηγορίες.
Αν κάνουμε κλικ στο φόντο θα δούμε ότι έχουμε τη δυνατότητα να αλλάξουμε χρώμα φόντου σε ορισμένα πρότυπα ή και να βάλουμε κάποιες φωτογραφίες οι οποίες είναι εντυπωσιακές.
Στη διάταξη θα δούμε ότι έχουμε τρεις δυνατότητες. Τη διάταξη κυρίου μέρους όπου μπορούμε να καθορίσουμε αν το template που σχεδιάζουμε θα είναι δίστηλο, τρίστηλο ή τεράστηλο, τη διάταξη υποσέλιδου όπου μπορούμε να ρυθμίσουμε το υποσέλιδο (footer) αν θα είναι ένα ή θα χωρίζεται σε δύο ή τρία μέρη. Το τρίτο μέρος που απαρτίζει τη διάταξη είναι η προσαρμογή πλάτους όπου μπορούμε να ρυθμίσουμε το συνολικό πλάτος του template και το πλάτος των στηλών μας μεμονωμένα.
Η τέταρτη επιλογή που υπάρχει στον σχεδιαστή προτύπου είναι η προηγμένη. Με αυτή μπορούμε να ρυθμίσουμε γραμματοσειρές, χρώματα καθώς και προσθήκη CSS. CSS είναι το κομμάτι του κώδικα που καθορίζει πως θα εμφανίζεται το template σε ένα browser.
Όταν τελειώσετε με τη δημιουργία σας και εφόσον είστε απόλυτα σίγουροι ότι είναι αυτό που θέλετε μπορείτε να το εφαρμόσετε στο blog σας πατώντας το κουμπί Εφαρμογή στο ιστολόγιο που βρίσκεται στην πάνω δεξιά γωνία. Δείτε το παρακάτω screenshot.

Υπάρχει και άλλος τρόπος για τη δημιουργία template και ονομάζεται Artisteer. Aυτό είναι ένα αρκετά καλό πρόγραμμα δημιουργίας template αλλά πρέπει να το αγοράσετε και έχει κάποιες λεπτομέρειες οι οποίες το καθιστούνε λίγο πιο δύσκολο. Πιστεύω ότι ο δημιουργός προτύου του draft blogger μπορεί να καλύψει σε πολύ μεγάλο βαθμό τις απαιτήσεις ενός blogger. Ελπίζω να βρήκατε ενδιαφέρουσα και χρήσιμη αυτή την ανάρτηση. Kαλή επιτυχία σε όλους.

Advertisements
 
30 Σχόλια

Posted by στο Μαρτίου 28, 2010 in BLOGGER, BLOGSPOT, DRAFT BLOGGER, FREE, LAYER, TEMPLATE

 

ΑΛΛΑΓΗ TEMPLATE ΧΩΡΙΣ ΑΠΩΛΕΙΕΣ

Αυτή η ανάρτηση είναι και απάντηση σε ένα ερώτημα του φίλου Διομήδη. Η απορία του; Πώς θα αλλάξει template στο ιστολόγιο του χωρίς να χαθούνε οι αναρτήσεις του, τα σχόλια και τα gadgets. Ας πάρουμε τα πράγματα με τη σειρά. Πρώτη μας ενέργεια ότι και να κάνουμε είναι να πάρουμε ένα αντίγραφο ασφαλείας του template που θέλουμε να αλλάξουμε.
   Μιλώντας από προσωπική εμπειρία και χωρίς να είμαι απόλυτος όταν αλλάζουμε template σε ένα ιστολόγιο, οι αναρτήσεις και τα σχόλια δε χάνονται. Σε περίπτωση όμως που κάποιος θέλει να έχει ήσυχο το κεφάλι του ας ανατρέξει σε μια παλιότερη ανάρτηση του Locus Blogus όπου θα βρει ένα προγραμματάκι για να κρατάει back up τις αναρτήσεις και τα σχόλια σε μορφή κώδικα κάνοντας κλικ εδώ.
   Όσον αφορά τα διάφορα widgets που έχουμε σε ένα blog τι γίνεται; Όταν είμαστε στην επεξεργασία HTML και βάζουμε τον κώδικα του καινούριου template και πατήσουμε αποθήκευση είναι πολύ πιθανόν να εμφανιστεί ένα κόκκινο πλαίσιο το οποίο θα λεει ότι κάποια γραφικά δεν αποθηκεύτηκαν και μας ρωτάει αν θέλουμε να τα κρατήσουμε ή όχι. Τα γραφικά αυτά είναι τα gadgets που θέλουμε να κρατήσουμε. Πατάμε διατήρηση γραφικών στοιχείων και όταν ανοίξουμε το ιστολόγιο μας θα το δούμε με το καινούριο template και επίσης θα δούμε τις αναρτήσεις μας, τα σχόλια και όλα τα gadgets που είχαμε.
   Όποιος όμως θέλει να νιώσει πιο ασφαλής ή σε περίπτωση που δεν εμφανιστεί το κόκκινο πλαίσιο κατά την ώρα της αλλαγής του template μπορεί να ακολουθήσει άλλη οδό. Αυτή τη μέθοδο τη συνιστώ. Αν και είναι πιο χρονοβόρα είναι πιο ασφαλής. Ανοίγουμε δύο έγγραφα του notepad και στο ένα βάζουμε με αντιγραφή – επικόλληση τον κώδικα του template που ήδη υπάρχει και στο δεύτερο τον κώδικα του καινούριου template που θέλουμε να αντικαταστήσουμε. Το κομμάτι του κώδικα που βρίσκεται πάνω από <body> δε μας ενδιαφέρει γιατί είναι CSS, δηλαδή ένα είδος κώδικα που είναι υπεύθυνο για την εμφάνιση του ιστολογίου (χρώματα, γραμματοσειρές κλπ.). Κάτω από το <body> είναι ο κυρίως XML κώδικας που ευθύνεται για τον έλεγχο του template (εμφάνιση των πλευρικών στηλών [sidebars], widgets, header [κεφαλλίδα] κλπ.). Σ’ αυτό το κομμάτι κώδικα θα εργαστούμε.
  Τα gadgets σε έναν κώδικα template εμφανίζονtαι με τη μορφή <b:widget> …κώδικας widget… </b:widget> και πρέπει να βρίσκεται μέσα στο τμήμα του κώδικα <b:section> … </b:section>. Δείτε το παρακάτω παράδειγμα:

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ showaddelement=’no’>
<b:widget id=’LinkList1′ locked=’true’ title=’Linkbar’ type=’LinkList’>

… some additional codes here …

</b:widget>
<b:widget id=’HTML1′ …..;

</b:widget>
<b:widget id=’Image1′ …..;

</b:widget>

</b:section>
</div>

   Κάθε στήλη ή footer ή header που περιέχει gadgets έχει <b:section> το οποίο βρίσκεται μετά την ετικέτα div id. Για παράδειγμα για να βρούμε τα widgets μιας πλευρικής στήλης (sidebar) θα πρέπει να βρούμε το div id=sidebar-wrapper και κάτω από αυτό υπάρχει το b:section και μέσα σε αυτό βρίσκονται τα gadgets. Αυτά τα αναφέρω περισσότερο εγκυκλοπαιδικά. Εμάς μας ενδιαφέρει το <b:widget> …κώδικας widget… </b:widget>  . Για να βρίσκετε πιο εύκολα τα μέρη του κώδικα που θέλετε μπορείτε να χρησιμοποιήσετε το ψαχτήρι πατώντας Control και F (Ctrl+F) και να βρίσκετε ότι θέλετε μέσα στην επεξεργασία HTML εφόσον πρώτα μπείτε στο blogspot λογαριασμό σας.
   Όταν βρίσκετε τα gadgets που θέλετε να σώσετε πρέπει να τα κάνετε αντιγραφή – επικόλληση (copy – paste) στον κώδικα του καινούριου template που θέλετε να εγκαταστήσετε στο δεύτερο έγγραφο notepad. ΠΡΟΣΟΧΗ: πρέπει να επικολληθούν μέσα στο τμήμα του νέου κώδικα  <b:section> … </b:section> με τη μορφή <b:widget> …κώδικας widget… </b:widget>. Όταν τελειώσετε δημιουργήστε ένα δοκιμαστικό ιστολόγιο, γράψτε μια ανάρτηση και αφήστε ένα σχόλιο. Μετά σ’ αυτό το δοκιμαστικό ιστολόγιο πάτε επεξεργασία HTML και βάλτε τον κώδικα που πειράξατε. Πατήστε προεπισκόπηση και δείτε τι αποτέλεσμα θα έχετε αν πατήσετε αποθήκευση. Αν σας ικανοποιεί το αποτέλεσμα πατήστε (save) αποθήκευση. Αν  όλα πάνε καλά πάτε στο κανονικό σας ιστολόγιο και προχωρήστε στη αλλαγή του template. Αν τα gadgets τα βάλετε μόνο σε μια στήλη (sidebar) μην αγχώνεστε. Εφόσον κάνετε την αλλαγή template μετά μπορείτε να πάτε στη διάταξη και να τα τοποθετήσετε όπου θέλετε σύροντας τα (drag and drop).
   Ελπίζω να σας βοήθησα. Καλή επιτυχία.

 
11 Σχόλια

Posted by στο Φεβρουαρίου 17, 2010 in BACK UP, BLOG, LAYER, TEMPLATE

 

BRICKWALL: ΤΟ ΠΡΩΤΟ TEMPLATE ΑΠΟ ΤΟ LOCUS BLOGUS

Και το όνομα αυτού BRICKWALL φίλες και φίλοι. Σας παρουσιάζω το πρώτο template του Locus Blogus. Όλος ο σχεδιασμός του template, καθώς και το background, έγινε εξ’ ολοκλήρου από το παρόν ιστολόγιο.
   Λίγα στοιχεία του παρακάτω template: Είναι τρίστηλο, η navbar έχει αφαιρεθεί για αποφυγή διάφορων επιτήδιων, έχει προεγκατεστημένο ένα κουμπί Bookmark, το οποίο θα εμφανίζεται κάτω από κάθε σας ανάρτηση, για να κάνετε προσθήκη των post σας εσείς ή οι αναγνώστες σας σε διάφορες υπηρεσίες όπως είναι το Twitter, Facebook, MySpace, Delicious και μια πληθώρα άλλων υπηρεσιών. Επίσης αν κάνετε κλικ πάνω στον τίτλο ενός post θα δείτε ότι στη συγκεκριμένη ανάρτηση εμφανίζεται και ένα κουμπί για την εκτύπωση αυτής. Δείτε ένα test blog για το πως θα φαίνεται κάνοντας κλικ εδώ.
   Παρακάτω είναι ο κώδικας στο scroll box τον οποίο μπορείτε να τον κάνετε copy – paste (αντιγραφή επικόλληση) στην επεξεργασία HTML για να εγκαταστήσετε το template. Εκεί θα πάτε μπαίνοντας στο λογαριασμό σας και από τον πανόπτη πάτε διάταξη και επεξεργασία HTML. Πριν κάνετε οτιδήποτε πάρτε ένα back up του ήδη υπάρχοντος template του ιστολογίου σας σε περίπτωση που θέλετε να το επαναεγκαταστήσετε στο μέλλον. Εφόσον βάλετε τον κώδικα πατήστε αποθήκευση (save) και τελειώσατε.
   Μετά τον κώδικα έχω βάλει δυο screenshots. Το πρώτο δείχνει πως είναι το template στην αρχική του σελίδα και το δεύτερο πως φαίνεται όταν επισκευτούμε ένα συγκεκριμένο post (σ’ αυτό θα δείτε και το εικονίδιο του εκτυπωτή πάνω από τον τίτλο της ανάρτησης το οποίο πατώντας το μπορεί ο αναγνώστης να την εκτυπώσει). Για μεγέθυνση αυτών κάντε κλικ πάνω στα screenshots.

<?xml version=»1.0″ encoding=»UTF-8″ ?>
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml&#8217; xmlns:b=’http://www.google.com/2005/gml/b&#8217; xmlns:data=’http://www.google.com/2005/gml/data&#8217; xmlns:expr=’http://www.google.com/2005/gml/expr’&gt;
  <head>
    <b:include data=’blog’ name=’all-head-content’/>
    <meta content=’IE=EmulateIE7′ http-equiv=’X-UA-Compatible’/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
    
/* begin Page */
      
        /* Created by hackaday, http://locusblogus.blogspot.com
*/
      
        body
        {
            margin: 0 auto;
            padding: 0;
            background-color: #C5C5AF;
            background-image: url(‘http://img208.imageshack.us/img208/6351/pagebgtexturet.jpg&#8217;);
            background-repeat: repeat;
            background-attachment: scroll;
            background-position: top left;
        }
      
        #art-main
        {
            position: relative;
            width: 100%;
            left: 0;
            top: 0;
        }
      
      
      
      
        #art-page-background-gradient
        {
            background-position: top left;
        }
      
      
        .cleared
        {
            float: none;
            clear: both;
            margin: 0;
            padding: 0;
            border: none;
            font-size:1px;
        }
      
      
        form
        {
            padding:0 !important;
            margin:0 !important;
        }
      
        table.position
        {
            position: relative;
            width: 100%;
            table-layout: fixed;
        }
      
      
      
      
        #navbar
        {
            position: relative;
            z-index:10;
        }
        #comments{
            padding:0 15px 15px 15px;
        }
      
        #ArchiveList ul li
        {
            text-indent: -10px !important;
            padding:0 0 0 15px;
        }
      
      
      
        .profile-datablock, .profile-textblock {
            margin:0 0 .75em;
            line-height:1.4em;
        }
        .profile-img {
            float: left;
            margin-top: 0;
            margin-right: 5px;
            margin-bottom: 5px;
            margin-left: 0;
            border: 5px solid #889977;
        }
        .profile-data {
            font-weight: bold;
        }
      
        .blog-pager{
            margin-left:15px;
        }
      
        .post-feeds{
            margin-left:15px;
        }
      
        .blog-feeds
        {
           margin-left:15px;
        }
      
        /* for Blogger Page Elements */
      
        body#layout div.art-Header{
          height: auto;
          width: 100%;
        }
        body#layout .art-contentLayout{
          margin-top: 18px;
          padding-top: 2px;
          width: 100%
        }
      
        body#layout .art-Sheet{
          width: 100%;
        }
      
        body#layout .art-Footer{
          width: 100%;
        }
      
        body#layout .art-sidebar1{
          width: 25%;
        }
      
        body#layout .art-sidebar2{
          width: 25%;
        }
      
        body#layout .art-content{
          width: 50%;
        }
      
        body#layout .art-Footer .art-Footer-text{
          height: 85px;
        }
      
        body#layout .art-BlockContent-body{
          padding: 0;
        }
      
        body#layout .art-Block-body{
            padding: 0;
        }
      
        body#layout .art-nav{
            height: auto;
        }
      
        /* search results  */
      
        #uds-searchControl .gsc-results, #uds-searchControl .gsc-tabhActive
        {
            background-color: transparent !important;
        }/* end Page */
      
        /* begin Box, Sheet */
        .art-Sheet
        {
            position:relative;
            z-index:0;
            margin:0 auto;
            width: 1000px;
            min-width:35px;
            min-height:35px;
        }
      
        .art-Sheet-body
        {
            position: relative;
            z-index: 1;
            padding: 3px;
        }
      
        .art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
        {
            position:absolute;
            z-index:-1;
        }
      
        .art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
        {
            width: 34px;
            height: 34px;
            background-image: url(‘http://img163.imageshack.us/img163/1989/sheetsyc.png&#8217;);
        }
      
        .art-Sheet-tl
        {
            top:0;
            left:0;
            clip: rect(auto, 17px, 17px, auto);
        }
      
        .art-Sheet-tr
        {
            top: 0;
            right: 0;
            clip: rect(auto, auto, 17px, 17px);
        }
      
        .art-Sheet-bl
        {
            bottom: 0;
            left: 0;
            clip: rect(17px, 17px, auto, auto);
        }
      
        .art-Sheet-br
        {
            bottom: 0;
            right: 0;
            clip: rect(17px, auto, auto, 17px);
        }
      
        .art-Sheet-tc, .art-Sheet-bc
        {
            left: 17px;
            right: 17px;
            height: 34px;
            background-image: url(‘http://img163.imageshack.us/img163/6388/sheethdc.png&#8217;);
        }
      
        .art-Sheet-tc
        {
            top: 0;
            clip: rect(auto, auto, 17px, auto);
        }
      
        .art-Sheet-bc
        {
            bottom: 0;
            clip: rect(17px, auto, auto, auto);
        }
      
        .art-Sheet-cr, .art-Sheet-cl
        {
            top: 17px;
            bottom: 17px;
            width: 34px;
            background-image: url(‘http://img163.imageshack.us/img163/5375/sheetvf.png&#8217;);
        }
      
        .art-Sheet-cr
        {
            right:0;
            clip: rect(auto, auto, auto, 17px);
        }
      
        .art-Sheet-cl
        {
            left:0;
            clip: rect(auto, 17px, auto, auto);
        }
      
        .art-Sheet-cc
        {
            position:absolute;
            z-index:-1;
            top: 17px;
            left: 17px;
            right: 17px;
            bottom: 17px;
            background-image: url(‘http://img163.imageshack.us/img163/7223/sheetcy.png&#8217;);
        }
      
      
        .art-Sheet
        {
            margin-top: 10px !important;
        }
      
        #art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
        {
            min-width:1000px;
        }
      
        /* end Box, Sheet */
      
        /* begin Header */
        div.art-Header
        {
            margin: 0 auto;
            position: relative;
            z-index:0;
            width: 994px;
            height: 150px;
        }
      
        div.art-Header-png
        {
            position: absolute;
            z-index:-2;
            top: 0;
            left: 0;
            width: 994px;
            height: 150px;
            background-image: url(‘http://img163.imageshack.us/img163/8117/headerir.png&#8217;);
            background-repeat: no-repeat;
            background-position: left top;
        }
      
        div.art-Header-jpeg
        {
            position: absolute;
            z-index:-1;
            top: 0;
            left: 0;
            width: 994px;
            height: 150px;
            background-image: url(‘http://img62.imageshack.us/img62/7942/headerfx.jpg&#8217;);
            background-repeat: no-repeat;
            background-position: center center;
        }
        /* end Header */
      
        /* begin Logo */
        .art-Logo
        {
            display : block;
            position: absolute;
            left: 10px;
            top: 52px;
            width: 679px;
        }
      
        h1.art-Logo-name
        {
            display: block;
            text-align: center;
        }
      
        h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 28px;
        font-style: normal;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 2px;
        text-transform: uppercase;
            padding:0;
            margin:0;
            color: #F6F7E3 !important;
        }
      
        .art-Logo-text
        {
            display: block;
            text-align: center;
        }
      
        .art-Logo-text, .art-Logo-text a
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 14px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
            padding:0;
            margin:0;
            color: #0C0C03 !important;
        }
        /* end Logo */
      
        /* begin Menu */
        /* menu structure */
      
        .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
        {
            text-align:left;
            text-decoration:none;
            outline:none;
            letter-spacing:normal;
            word-spacing:normal;
        }
      
        .art-menu, .art-menu ul
        {
            margin: 0;
            padding: 0;
            border: 0;
            list-style-type: none;
            display: block;
        }
      
        .art-menu li
        {
            margin: 0;
            padding: 0;
            border: 0;
            display: block;
            float: left;
            position: relative;
            z-index: 5;
            background:none;
        }
      
        .art-menu li:hover
        {
            z-index: 10000;
            white-space: normal;
        }
      
        .art-menu li li
        {
            float: none;
        }
      
        .art-menu ul
        {
            visibility: hidden;
            position: absolute;
            z-index: 10;
            left: 0;
            top: 0;
            background:none;
        }
      
        .art-menu li:hover>ul
        {
            visibility: visible;
            top: 100%;
        }
      
        .art-menu li li:hover>ul
        {
            top: 0;
            left: 100%;
        }
      
        .art-menu:after, .art-menu ul:after
        {
            content: «.»;
            height: 0;
            display: block;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }
        .art-menu, .art-menu ul
        {
            min-height: 0;
        }
      
        .art-menu ul
        {
            background-image: url(http://img62.imageshack.us/img62/6748/spacerv.gif);
            padding: 10px 30px 30px 30px;
            margin: -10px 0 0 -30px;
        }
      
        .art-menu ul ul
        {
            padding: 30px 30px 30px 10px;
            margin: -30px 0 0 -10px;
        }
      
      
      
      
      
        /* menu structure */
      
        .art-menu
        {
            padding: 2px 1px 0px 1px;
        }
      
        .art-nav
        {
            position: relative;
            height: 27px;
            z-index: 100;
        }
      
        .art-nav .l, .art-nav .r
        {
            position: absolute;
            z-index: -1;
            top: 0;
            height: 27px;
            background-image: url(‘http://img62.imageshack.us/img62/1677/navu.png&#8217;);
        }
      
        .art-nav .l
        {
            left: 0;
            right:0px;
        }
      
        .art-nav .r
        {
            right: 0;
            width: 994px;
            clip: rect(auto, auto, auto, 994px);
        }
      
      
        /* end Menu */
      
        /* begin MenuItem */
        .art-menu ul li
        {
            clear: both;
        }
      
        .art-menu a
        {
            position:relative;
            display: block;
            overflow:hidden;
            height: 25px;
            cursor: pointer;
            text-decoration: none;
            margin-right: 4px;
            margin-left: 4px;
        }
      
      
        .art-menu a .r, .art-menu a .l
        {
            position:absolute;
            display: block;
            top:0;
            z-index:-1;
            height: 75px;
            background-image: url(‘http://img62.imageshack.us/img62/1272/menuitemh.png&#8217;);
        }
      
        .art-menu a .l
        {
            left:0;
            right:3px;
        }
      
        .art-menu a .r
        {
            width:406px;
            right:0;
            clip: rect(auto, auto, auto, 403px);
        }
      
        .art-menu a .t
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
            color: #2B2C0C;
            padding: 0 6px;
            margin: 0 3px;
            line-height: 25px;
            text-align: center;
        }
      
        .art-menu a:hover .l, .art-menu a:hover .r
        {
            top:-25px;
        }
      
        .art-menu li:hover>a .l, .art-menu li:hover>a .r
        {
            top:-25px;
        }
      
        .art-menu li:hover a .l, .art-menu li:hover a .r
        {
            top:-25px;
        }
        .art-menu a:hover .t
        {
            color: #212118;
        }
      
        .art-menu li:hover a .t
        {
            color: #212118;
        }
      
        .art-menu li:hover>a .t
        {
            color: #212118;
        }
      
      
        .art-menu a.active .l, .art-menu a.active .r
        {
            top: -50px;
        }
      
        .art-menu a.active .t
        {
            color: #E7E7DE;
        }
      
      
        /* end MenuItem */
      
        /* begin MenuSubItem */
        .art-menu ul a
        {
            display:block;
            text-align: center;
            white-space: nowrap;
            height: 20px;
            width: 180px;
            overflow:hidden;
            line-height: 20px;
            margin-right: auto;
      
      
            background-image: url(‘http://img62.imageshack.us/img62/449/subitembgc.png&#8217;);
            background-position: left top;
            background-repeat: repeat-x;
            border-width: 0px;
            border-style: solid;
        }
      
        .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
        {
            display: inline;
            float: none;
            margin: inherit;
            padding: inherit;
            background-image: none;
            text-align: inherit;
            text-decoration: inherit;
        }
      
        .art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
        {
            text-align: left;
            text-indent: 12px;
            text-decoration: none;
            line-height: 20px;
            color: #595B1A;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        letter-spacing: 1px;
        }
      
        .art-menu ul ul a
        {
            margin-left: auto;
        }
      
        .art-menu ul li a:hover
        {
            color: #3B4616;
            background-position: 0 -20px;
        }
      
        .art-menu ul li:hover>a
        {
            color: #3B4616;
            background-position: 0 -20px;
        }
      
        .art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
        {
            color: #3B4616;
        }
      
        .art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
        {
            color: #3B4616;
        }
      
      
        /* end MenuSubItem */
      
        /* begin ContentLayout */
        .art-contentLayout
        {
            position: relative;
            margin-bottom: 1px;
            width: 994px;
        }
        /* end ContentLayout */
      
        /* begin Box, Block */
        .art-Block
        {
            position:relative;
            z-index:0;
            margin:0 auto;
            min-width:3px;
            min-height:3px;
        }
      
        .art-Block-body
        {
            position: relative;
            z-index: 1;
            padding: 7px;
        }
      
        .art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl, .art-Block-tc, .art-Block-bc,.art-Block-cr, .art-Block-cl
        {
            position:absolute;
            z-index:-1;
        }
      
        .art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
        {
            width: 2px;
            height: 2px;
            background-image: url(‘http://img62.imageshack.us/img62/3671/blocksd.png&#8217;);
        }
      
        .art-Block-tl
        {
            top:0;
            left:0;
            clip: rect(auto, 1px, 1px, auto);
        }
      
        .art-Block-tr
        {
            top: 0;
            right: 0;
            clip: rect(auto, auto, 1px, 1px);
        }
      
        .art-Block-bl
        {
            bottom: 0;
            left: 0;
            clip: rect(1px, 1px, auto, auto);
        }
      
        .art-Block-br
        {
            bottom: 0;
            right: 0;
            clip: rect(1px, auto, auto, 1px);
        }
      
        .art-Block-tc, .art-Block-bc
        {
            left: 1px;
            right: 1px;
            height: 2px;
            background-image: url(‘http://img62.imageshack.us/img62/8848/blockhz.png&#8217;);
        }
      
        .art-Block-tc
        {
            top: 0;
            clip: rect(auto, auto, 1px, auto);
        }
      
        .art-Block-bc
        {
            bottom: 0;
            clip: rect(1px, auto, auto, auto);
        }
      
        .art-Block-cr, .art-Block-cl
        {
            top: 1px;
            bottom: 1px;
            width: 2px;
            background-image: url(‘http://img62.imageshack.us/img62/2893/blockvn.png&#8217;);
        }
      
        .art-Block-cr
        {
            right:0;
            clip: rect(auto, auto, auto, 1px);
        }
      
        .art-Block-cl
        {
            left:0;
            clip: rect(auto, 1px, auto, auto);
        }
      
        .art-Block-cc
        {
            position:absolute;
            z-index:-1;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            background-color: #DBDBCD;
        }
      
      
        .art-Block
        {
            margin: 7px;
        }
      
        /* end Box, Block */
      
        /* begin BlockHeader */
        .art-BlockHeader
        {
            position:relative;
            z-index:0;
            height: 30px;
            padding: 0 8px;
            margin-bottom: 0px;
        }
      
        .art-BlockHeader .t
        {
            height: 30px;
            color: #000000;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: 0px;
        text-transform: uppercase;
            white-space : nowrap;
            padding: 0 6px;
            line-height: 30px;  
        }
      
      
      
      
      
        .art-header-tag-icon
        {
            height: 30px;
            background-position:left top;
            background-image: url(‘http://img62.imageshack.us/img62/850/blockheadericonp.png&#8217;);
            padding:0 0 0 12px;
            background-repeat: no-repeat;
            min-height: 12px;
            margin: 0 0 0 5px;
        }
      
      
        /* end BlockHeader */
      
        /* begin Box, BlockContent */
        .art-BlockContent
        {
            position:relative;
            z-index:0;
            margin:0 auto;
            min-width:3px;
            min-height:3px;
        }
      
        .art-BlockContent-body
        {
            position: relative;
            z-index: 1;
            padding: 8px;
        }
      
        .art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl, .art-BlockContent-tc, .art-BlockContent-bc,.art-BlockContent-cr, .art-BlockContent-cl
        {
            position:absolute;
            z-index:-1;
        }
      
        .art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl
        {
            width: 2px;
            height: 2px;
            background-image: url(‘http://img62.imageshack.us/img62/5586/blockcontentsom.png&#8217;);
        }
      
        .art-BlockContent-tl
        {
            top:0;
            left:0;
            clip: rect(auto, 1px, 1px, auto);
        }
      
        .art-BlockContent-tr
        {
            top: 0;
            right: 0;
            clip: rect(auto, auto, 1px, 1px);
        }
      
        .art-BlockContent-bl
        {
            bottom: 0;
            left: 0;
            clip: rect(1px, 1px, auto, auto);
        }
      
        .art-BlockContent-br
        {
            bottom: 0;
            right: 0;
            clip: rect(1px, auto, auto, 1px);
        }
      
        .art-BlockContent-tc, .art-BlockContent-bc
        {
            left: 1px;
            right: 1px;
            height: 2px;
            background-image: url(‘http://img62.imageshack.us/img62/579/blockcontenthc.png&#8217;);
        }
      
        .art-BlockContent-tc
        {
            top: 0;
            clip: rect(auto, auto, 1px, auto);
        }
      
        .art-BlockContent-bc
        {
            bottom: 0;
            clip: rect(1px, auto, auto, auto);
        }
      
        .art-BlockContent-cr, .art-BlockContent-cl
        {
            top: 1px;
            bottom: 1px;
            width: 2px;
            background-image: url(‘http://img62.imageshack.us/img62/7117/blockcontentve.png&#8217;);
        }
      
        .art-BlockContent-cr
        {
            right:0;
            clip: rect(auto, auto, auto, 1px);
        }
      
        .art-BlockContent-cl
        {
            left:0;
            clip: rect(auto, 1px, auto, auto);
        }
      
        .art-BlockContent-cc
        {
            position:absolute;
            z-index:-1;
            top: 1px;
            left: 1px;
            right: 1px;
            bottom: 1px;
            background-color: #ECECE4;
        }
      
      
        .art-BlockContent-body
        {
            color:#68684B;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        }
      
        .art-BlockContent-body a:link
        {
            color: #787B23;
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
        }
      
        .art-BlockContent-body a:visited, .art-BlockContent-body a.visited
        {
            color: #989871;
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: none;
        }
      
        .art-BlockContent-body a:hover, .art-BlockContent-body a.hover
        {
            color: #879F32;
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: none;
        }
      
        .art-BlockContent-body ul
        {
            list-style-type: none;
            color: #53533C;
            margin:0;
            padding:0;
        }
      
        .art-BlockContent-body ul li
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        margin-left: 12px;
        line-height: 125%;
          line-height: 1.25em;
          padding: 0px 0 0px 13px;
          background-image: url(‘http://img62.imageshack.us/img62/8021/blockcontentbulletsd.png&#8217;);
          background-repeat: no-repeat;
        }
      
      
      
        /* Variable definitions
           ====================
            <Variable name=»textcolor» description=»Block Text Color»
                     type=»color» default=»#68684B» value=»#68684B»>
          
            <Variable name=»linkcolor» description=»Block Link Color»
                     type=»color» default=»#787B23″ value=»#787B23″>
      
            <Variable name=»visitedlinkcolor» description=»Block Visited Link Color»
                     type=»color» default=»#989871″ value=»#989871″>
      
            <Variable name=»hoveredlinkcolor» description=»Block Hovered Link Color»
                     type=»color» default=»#879F32″ value=»#879F32″>
      
        */
      
        .art-BlockContent-body
        {
            color: $textcolor;
        }
      
        .art-BlockContent-body a:link
        {
            color: $linkcolor;
        }
      
        .art-BlockContent-body a:visited, .art-BlockContent-body a.visited
        {
            color: $visitedlinkcolor;
        }
      
        .art-BlockContent-body a:hover, .art-BlockContent-body a.hover
        {
            color: $hoveredlinkcolor;
        }
      
        .toggle span
        {
            color: $linkcolor;
        }
      
        .gsc-branding-text {
            color: $textcolor !important;
        }
      
        /* end Box, BlockContent */
      
        /* begin Box, Post */
        .art-Post
        {
            position:relative;
            z-index:0;
            margin:0 auto;
            min-width:1px;
            min-height:1px;
        }
      
        .art-Post-body
        {
            position: relative;
            z-index: 1;
            padding: 0px;
        }
      
      
      
        .art-Post
        {
            margin: 7px;
        }
      
        /* Start images */
        a img
        {
            border: 0;
        }
      
        .art-article img, img.art-article
        {
            border: solid 1px #C5C5AF;
            margin: 1em;
        }
      
        .art-metadata-icons img
        {
            border: none;
            vertical-align: middle;
            margin: 2px;
        }
        /* Finish images */
      
        /* Start tables */
      
        .art-article table, table.art-article
        {
            border-collapse: collapse;
            margin: 1px;
            width:auto;
        }
      
        .art-article table, table.art-article .art-article tr, .art-article th, .art-article td
        {
            background-color:Transparent;
        }
      
        .art-article th, .art-article td
        {
            padding: 2px;
            border: solid 1px #68684B;
            vertical-align: top;
            text-align:left;
        }
      
        .art-article th
        {
            text-align: center;
            vertical-align: middle;
            padding: 7px;
        }
      
        /* Finish tables */
      
        pre
        {
            overflow: auto;
            padding: 0.1em;
        }
      
      
      
        #uds-searchControl .gsc-results, #uds-searchControl .gsc-tabhActive
        {
            border-color: #68684B !important;
        }
        /* end Box, Post */
      
        /* begin PostMetadata */
        .art-PostMetadataHeader
        {
            padding:1px;
            background-color: #EBF2D4;
            border-color: #C5C5AF;
        border-style: solid;
        border-width: 1px;
        }
        /* end PostMetadata */
      
        /* begin PostHeaderIcon */
        .art-PostHeader
        {
            text-decoration:none;
            margin: 0.2em 0;
            padding: 0;
            font-weight:normal;
            font-style:normal;
            letter-spacing:normal;
            word-spacing:normal;
            font-variant:normal;
            text-decoration:none;
            font-variant:normal;
            text-transform:none;
            text-align:left;
            text-indent:0;
            line-height:inherit;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 20px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: 2px;
        text-align: left;
        margin-top: 12px;
        margin-bottom: 8px;
            color: #424E18;
        }
      
        .art-PostHeader a, .art-PostHeader a:link, .art-PostHeader a:visited, .art-PostHeader a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 20px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: 2px;
        text-align: left;
        margin-top: 12px;
        margin-bottom: 8px;
            margin:0;
            color: #424E18;
        }
      
        /* end PostHeaderIcon */
      
        /* begin PostHeader */
        .art-PostHeader a:link
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: none;
        text-align: left;
          color: #53611F;
        }
      
        .art-PostHeader a:visited, .art-PostHeader a.visited
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: none;
        text-align: left;
          color: #F4AD5D;
        }
      
        .art-PostHeader a:hover, .art-PostHeader a.hovered
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
        text-align: left;
          color: #21270C;
        }
        /* end PostHeader */
      
        /* begin PostIcons */
        .art-PostHeaderIcons
        {
            padding:1px;
        }
      
        .art-PostHeaderIcons, .art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 11px;
        letter-spacing: 1px;
            color: #FFFFFF;
        }
      
        .art-PostHeaderIcons a, .art-PostHeaderIcons a:link, .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a:hover
        {
            margin:0;
        }
      
        .art-PostHeaderIcons a:link
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-style: normal;
        font-weight: bold;
        text-decoration: none;
            color: #C7D987;
        }
      
        .art-PostHeaderIcons a:visited, .art-PostHeaderIcons a.visited
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: none;
        letter-spacing: 1px;
            color: #D9DC84;
        }
      
        .art-PostHeaderIcons a:hover, .art-PostHeaderIcons a.hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
            color: #27280B;
        }
        /* end PostIcons */
      
        /* begin PostContent */
        /* Content Text Font & Color (Default) */
        body
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        letter-spacing: 1px;
          color: #F9F9F6;
        }
      
      
        .art-PostContent p
        {
            margin: 0.5em 0;
        }
      
        .art-PostContent, .art-PostContent p
        {
        font-family: Arial, Helvetica, Sans-Serif;
        letter-spacing: 1px;
          color: #F9F9F6;
        }
      
        .art-PostContent
        {
          margin:0;
        }
      
      
        /* Start Content link style */
        /*
        The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
        http://www.w3schools.com/CSS/css_pseudo_classes.asp
        http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
        */
        a
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
        letter-spacing: 1px;
          color: #D9DC84;
        }
      
        /* Adds special style to an unvisited link. */
        a:link
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
        letter-spacing: 1px;
          color: #D9DC84;
        }
      
        /* Adds special style to a visited link. */
        a:visited, a.visited
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
          color: #F4AD5D;
        }
      
        /* :hover – adds special style to an element when you mouse over it. */
        a:hover, a.hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: none;
          color: #21270C;
        }
      
        /* Finish Content link style */
      
        /* Resert some headings default style & links default style for links in headings*/
        h1, h2, h3, h4, h5, h6,
        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
        h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
        h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
        {
          font-weight: normal;
          font-style: normal;
          text-decoration: none;
        }
      
      
        /* Start Content headings Fonts & Colors  */
        h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 22px;
        letter-spacing: 3px;
        text-align: left;
          color: #FFFFFF;
        }
      
        h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 20px;
        letter-spacing: 2px;
        text-align: left;
          color: #BDBDA3;
        }
      
        h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 18px;
        letter-spacing: 2px;
        text-align: left;
          color: #BDBDA3;
        }
      
        h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 14px;
        letter-spacing: 2px;
        text-align: left;
          color: #F9F9F6;
        }
      
        h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        letter-spacing: 2px;
        text-align: left;
          color: #F9F9F6;
        }
      
        h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        letter-spacing: 2px;
        text-align: left;
          color: #F9F9F6;
        }
        /* Finish Content headings Fonts & Colors  */
      
      
        #uds-searchControl .gsc-results,
        #uds-searchControl .gsc-tabhActive
        {
        font-family: Arial, Helvetica, Sans-Serif;
        letter-spacing: 1px;
          color: #F9F9F6 !important;
        }
      
      
        #uds-searchControl a,
        #uds-searchControl .gs-result .gs-title *,
        #uds-searchControl .gs-visibleUrl ,
        #uds-searchControl .gsc-tabhInactive
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
        letter-spacing: 1px;
          color: #D9DC84 !important;
        }/* end PostContent */
      
        /* begin PostBullets */
        /* Start Content list */
        ol, ul
        {
            color: #E9EBB7;
            margin:1em 0 1em 2em;
            padding:0;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        text-align: left;
        }
      
        li ol, li ul
        {
            margin:0.5em 0 0.5em 2em;
            padding:0;
        }
      
        li
        {
            margin:0.2em 0;
            padding:0;
        }
      
        ul
        {
            list-style-type: none;
        }
      
        ol
        {
            list-style-position:inside;
          
        }
      
      
      
        .art-Post li
        {
            padding:0px 0 0px 13px;
            line-height:1.2em;
        }
      
        .art-Post ol li, .art-Post ul ol li
        {
            background: none;
            padding-left:0;
        }
      
        .art-Post ul li, .art-Post ol ul li
        {
            background-image: url(‘http://img62.imageshack.us/img62/2372/postbulletsa.png&#8217;);
            background-repeat:no-repeat;
            padding-left:13px;
        }
      
      
        /* Finish Content list */
        /* end PostBullets */
      
        /* begin PostQuote */
        /* Start blockquote */
        blockquote,
        blockquote p,
        .art-PostContent blockquote p
        {
            color:#383829;
        font-family: Arial, Helvetica, Sans-Serif;
        font-style: italic;
        font-weight: normal;
        text-align: left;
        }
      
        blockquote,
        .art-PostContent blockquote
        {
                border:solid 1px #C5C5AF;
                margin:10px 10px 10px 50px;
            padding:5px 5px 5px 41px;
            background-color:#E1E1D6;
            background-image:url(‘http://img62.imageshack.us/img62/2425/postquotewb.png&#8217;);
            background-position:left top;
            background-repeat:no-repeat;
        }
      
      
        /* Finish blockuote */
        /* end PostQuote */
      
        /* begin PostMetadata */
        .art-PostMetadataFooter
        {
            padding:1px;
            background-color: #F2F2ED;
            border-color: #C5C5AF;
        border-style: solid;
        border-width: 1px;
        }
        /* end PostMetadata */
      
        /* begin PostIcons */
        .art-PostFooterIcons
        {
            padding:1px;
        }
      
        .art-PostFooterIcons, .art-PostFooterIcons a, .art-PostFooterIcons a:link, .art-PostFooterIcons a:visited, .art-PostFooterIcons a:hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 11px;
        text-decoration: none;
        letter-spacing: 1px;
            color: #595940;
        }
      
        .art-PostFooterIcons a, .art-PostFooterIcons a:link, .art-PostFooterIcons a:visited, .art-PostFooterIcons a:hover
        {
            margin:0;
        }
      
        .art-PostFooterIcons a:link
        {
        font-family: Arial, Helvetica, Sans-Serif;
        font-style: normal;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 1px;
            color: #6A7C27;
        }
      
        .art-PostFooterIcons a:visited, .art-PostFooterIcons a.visited
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: none;
        letter-spacing: 1px;
            color: #7C7F24;
        }
      
        .art-PostFooterIcons a:hover, .art-PostFooterIcons a.hover
        {
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
        letter-spacing: 1px;
            color: #27280B;
        }
        /* end PostIcons */
      
        /* begin Button */
        .art-button-wrapper .art-button
        {
            display:inline-block;
            width: auto;
            outline:none;
            border:none;
            background:none;
            line-height:33px;
            margin:0 !important;
            padding:0 !important;
            overflow: visible;
            cursor: default;
            text-decoration: none !important;
            z-index:0;
            vertical-align: middle;
        }
      
        .art-button img, .art-button-wrapper img
        {
          margin: 0;
        }
      
        .art-button-wrapper
        {
            display:inline-block;
            vertical-align: middle;
            position:relative;
            height: 33px;
            overflow:hidden;
            white-space: nowrap;
            width: auto;
            z-index:0;
        }
      
        .firefox2 .art-button-wrapper
        {
            display:block;
            float:left;
        }
      
        .art-button-wrapper .art-button
        {
            display:block;
            height: 33px;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: 1px;
            white-space: nowrap;
            text-align: left;
            padding: 0 21px !important;
            line-height: 33px;
            text-decoration: none !important;
            color: #000000 !important;
        }
      
        input, select
        {
          vertical-align: middle;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: 1px;
        }
      
        .art-button-wrapper.hover .art-button, .art-button:hover
        {
            color: #000000 !important;
            text-decoration: none !important;
        }
      
        .art-button-wrapper.active .art-button
        {
            color: #F6F9EC !important;
        }
      
        .art-button-wrapper .l, .art-button-wrapper .r
        {
            display:block;
            position:absolute;
            z-index:-1;
            height: 99px;
            background-image: url(‘http://img62.imageshack.us/img62/3191/buttonyw.png&#8217;);
        }
      
        .art-button-wrapper .l
        {
            left:0;
            right:10px;
        }
      
        .art-button-wrapper .r
        {
            width:409px;
            right:0;
            clip: rect(auto, auto, auto, 399px);
        }
      
        .art-button-wrapper.hover .l, .art-button-wrapper.hover .r
        {
            top: -33px;
        }
      
        .art-button-wrapper.active .l, .art-button-wrapper.active .r
        {
            top: -66px;
        }
      
      
        /* end Button */
      
        /* begin Footer */
        .art-Footer
        {
            position:relative;
            z-index:0;
            overflow:hidden;
            width: 994px;
            margin: 5px auto 0px auto;
        }
      
        .art-Footer .art-Footer-inner
        {
            height:1%;
            position: relative;
            z-index: 0;
            padding: 8px;
            text-align: center;
        }
      
        .art-Footer .art-Footer-background
        {
            position:absolute;
            z-index:-1;
            background-repeat:no-repeat;
            background-image: url(‘http://img62.imageshack.us/img62/3746/footerzd.png&#8217;);
            width: 994px;
            height: 150px;
            bottom:0;
            left:0;
        }
      
      
        .art-rss-tag-icon
        {
            position: relative;
            display:block;
            float:left;
            background-image: url(‘http://img62.imageshack.us/img62/1695/rssiconxb.png&#8217;);
            background-position: center right;
            background-repeat: no-repeat;
            margin: 0 5px 0 0;
            height: 32px;
            width: 24px;
            cursor: default;
        }
      
      
      
      
        .art-Footer .art-Footer-text p
        {
            margin: 0;
        }
      
        .art-Footer .art-Footer-text
        {
            display:inline-block;
            color:#FFFFFF;
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 13px;
        letter-spacing: 1px;
        }
      
        .art-Footer .art-Footer-text a:link
        {
            text-decoration: none;
            color: #FFFFFF;
        font-family: Arial, Helvetica, Sans-Serif;
        font-style: normal;
        font-weight: bold;
        text-decoration: none;
        }
      
        .art-Footer .art-Footer-text a:visited
        {
            text-decoration: none;
            color: #94946B;
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: none;
        }
      
        .art-Footer .art-Footer-text a:hover
        {
            text-decoration: none;
            color: #94946B;
        font-family: Arial, Helvetica, Sans-Serif;
        text-decoration: underline;
        }
        /* end Footer */
      
        /* begin PageFooter */
        .art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover
        {
            font-family:Arial;
            font-size:10px;
            letter-spacing:normal;
            word-spacing:normal;
            font-style:normal;
            font-weight:normal;
            text-decoration:underline;
            color:#9B9F2D;
        }
      
        .art-page-footer
        {
            margin:1em;
            text-align:center;
            text-decoration:none;
            color:#9A9A74;
        }
        /* end PageFooter */
      
        /* begin LayoutCell */
        .art-contentLayout .art-sidebar1
        {
            position: relative;
            margin: 0;
            padding: 0;
            border: 0;
            float: left;
            overflow: hidden;
            width: 248px;
        }
        /* end LayoutCell */
      
        /* begin LayoutCell */
        .art-contentLayout .art-content
        {
            position: relative;
            margin: 0;
            padding: 0;
            border: 0;
            float: left;
            overflow: hidden;
            width: 496px;
        }
        .art-contentLayout .art-content-sidebar1
        {
            position: relative;
            margin: 0;
            padding: 0;
            border: 0;
            float: left;
            overflow: hidden;
            width: 744px;
        }
        .art-contentLayout .art-content-sidebar2
        {
            position: relative;
            margin: 0;
            padding: 0;
            border: 0;
            float: left;
            overflow: hidden;
            width: 744px;
        }
        .art-contentLayout .art-content-wide
        {
            position: relative;
            margin: 0;
            padding: 0;
            border: 0;
            float: left;
            overflow: hidden;
            width: 992px;
        }
        /* end LayoutCell */
      
        /* begin LayoutCell */
        .art-contentLayout .art-sidebar2
        {
            position: relative;
            margin: 0;
            padding: 0;
            border: 0;
            float: left;
            overflow: hidden;
            width: 248px;
        }
        /* end LayoutCell */
      
      
    
    ]]></b:skin>
  
    <!–[if IE 6]>
      <style type=»text/css»>
/* begin Page */
      
        /* Generated with Artisteer version 2.3.0.23326, file checksum is 0950A3F6. */
      
        img
        {
            filter:expression(fixPNG(this));
        }
        #ArchiveList ul li
        {
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»»);
        }
        #ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover
        {
            color: expression(this.parentNode.currentStyle[«color»]);
        }
        /* end Page */
      
        /* begin Box, Sheet */
        .art-Sheet, .art-Sheet-body
        {
            zoom:1;
        }
      
        .art-Sheet-body
        {
            position:static;
        }
      
        .art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
        {
            font-size: 1px;
            background: none;
        }
      
        .art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
        {
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img163.imageshack.us/img163/1989/sheetsyc.png’,sizingMethod=’scale’)»);
        }
      
        .art-Sheet-tl
        {
            clip: rect(auto 17px 17px auto);
        }
      
        .art-Sheet-tr
        {
            left: expression(this.parentNode.offsetWidth-34+’px’);
            clip: rect(auto auto 17px 17px);
        }
      
        .art-Sheet-bl
        {
            top: expression(this.parentNode.offsetHeight-34+’px’);
            clip: rect(17px 17px auto auto);
        }
      
        .art-Sheet-br
        {
            top: expression(this.parentNode.offsetHeight-34+’px’);
            left: expression(this.parentNode.offsetWidth-34+’px’);
            clip: rect(17px auto auto 17px);
        }
      
        .art-Sheet-tc, .art-Sheet-bc
        {
            width: expression(this.parentNode.offsetWidth-34+’px’);
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img163.imageshack.us/img163/6388/sheethdc.png’,sizingMethod=’scale’)»);
        }
      
        .art-Sheet-tc
        {
            clip: rect(auto auto 17px auto);
        }
      
        .art-Sheet-bc
        {
            top: expression(this.parentNode.offsetHeight-34+’px’);
            clip: rect(17px auto auto auto);
        }
      
        .art-Sheet-cr, .art-Sheet-cl
        {
            height: expression(this.parentNode.offsetHeight-34+’px’);
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img163.imageshack.us/img163/5375/sheetvf.png’,sizingMethod=’scale’)»);
        }
      
        .art-Sheet-cr
        {
            left: expression(this.parentNode.offsetWidth-34+’px’);
            clip: rect(auto auto auto 17px);
        }
      
        .art-Sheet-cl
        {
            clip: rect(auto 17px auto auto);
        }
      
        .art-Sheet-cc
        {
            font-size: 1px;
            width: expression(this.parentNode.offsetWidth-34+’px’);
            height: expression(this.parentNode.offsetHeight-34+’px’);
            background: none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img163.imageshack.us/img163/7223/sheetcy.png’,sizingMethod=’scale’)»);
        }
        #art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
        {
            width:expression(document.body.clientWidth > 1000 ? «100%» : «1000px»);
        }
        /* end Box, Sheet */
      
        /* begin Header */
        div.art-Header-png
        {
            font-size: 1px;
            background: none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img163.imageshack.us/img163/8117/headerir.png’,sizingMethod=’crop’)»);
        }
        /* end Header */
      
        /* begin Menu */
      
        .art-menu ul
        {
            height: 1%;
            width:1px;
        }
      
        .art-menu, .art-menu ul
        {
            height: 1%;
        }
      
        .art-menu li.art-menuhover
        {
            z-index: 10000;
        }
      
        .art-menu .art-menuhoverUL
        {
            visibility: visible;
        }
      
        .art-menu .art-menuhoverUL
        {
            top: 100%;
            left: 0;
        }
      
        .art-menu .art-menuhoverUL .art-menuhoverUL
        {
            top: 0;
            left: 100%;
        }
      
        .art-menu ul a
        {
            height: 1%;
        }
      
        .art-menu li li
        {
            float: left;
            width: 100%;
        }
      
        .art-menu .art-menuhoverUL .art-menuhoverUL
        {
            top: 5px;
            left: 100%;
        }
      
        .art-menu, .art-menu ul
        {
            height: 1%;
        }
      
        .art-menu li.art-menuhover
        {
            z-index: 10000;
        }
      
        .art-menu .art-menuhoverUL
        {
            visibility: visible;
        }
      
        .art-menu .art-menuhoverUL
        {
            top: 100%;
            left: 0;
        }
      
        .art-menu .art-menuhoverUL .art-menuhoverUL
        {
            top: 0;
            left: 100%;
        }
      
        .art-menu ul a
        {
            height: 1%;
        }
      
        .art-menu li li
        {
            float: left;
            width: 100%;
        }
      
        .art-nav
        {
            zoom: 1;
        }
      
        .art-nav .l, .art-nav .r
        {
            font-size: 1px;
            background: none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/1677/navu.png’,sizingMethod=’crop’)»);
        }
      
        .art-nav .l
        {
            width: expression(this.parentNode.offsetWidth-0+’px’);
        }
      
        .art-nav .r
        {
            left: expression(this.parentNode.offsetWidth-994+’px’);
            clip: rect(auto auto auto 994px);
        }
      
        /* end Menu */
      
        /* begin MenuItem */
        .art-menu a
        {
            float:left;
        }
      
        .art-menu a:hover
        {
            visibility:visible;
        }
      
        .art-menu a .r, .art-menu a .l
        {
            font-size:1px;
            background: none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/1272/menuitemh.png’,sizingMethod=’crop’)»);
        }
      
        .art-menu a .r
        {
            left: expression(this.parentNode.offsetWidth-406+’px’);
            clip: rect(auto auto auto 403px);
        }
      
        .art-menu a .l
        {
            width: expression(this.parentNode.offsetWidth-3+’px’);
        }
      
        .art-menuhover .art-menuhoverA .t
        {
            color: #212118;
        }
      
        .art-menuhover .art-menuhoverA .l, .art-menuhover .art-menuhoverA .r
        {
            top: -25px;
        }
        /* end MenuItem */
      
        /* begin MenuSubItem */
      
        .art-menu ul a
        {
            color: #595B1A !important;
        }
      
        .art-menu ul a:hover {
            color: #3B4616 !important;
        }  
      
        .art-menu ul .art-menuhover .art-menuhoverA
        {
            color: #3B4616 !important;
            background-position: 0 -20px;
        }
      
        .art-nav .art-menu ul a:hover span, .art-nav .art-menu ul a:hover span span
        {
            color: #3B4616 !important;
        }  
      
        .art-nav .art-menu ul .art-menuhover .art-menuhoverA span, .art-nav .art-menu ul .art-menuhover .art-menuhoverA span span
        {
            color: #3B4616 !important;
        }
      
        /* end MenuSubItem */
      
        /* begin Box, Block */
        .art-Block, .art-Block-body
        {
            zoom:1;
        }
      
        .art-Block-body
        {
            position:static;
        }
      
        .art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl, .art-Block-tc, .art-Block-bc,.art-Block-cr, .art-Block-cl
        {
            font-size: 1px;
            background: none;
        }
      
        .art-Block-tr, .art-Block-tl, .art-Block-br, .art-Block-bl
        {
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/3671/blocksd.png’,sizingMethod=’scale’)»);
        }
      
        .art-Block-tl
        {
            clip: rect(auto 1px 1px auto);
        }
      
        .art-Block-tr
        {
            left: expression(this.parentNode.offsetWidth-2+’px’);
            clip: rect(auto auto 1px 1px);
        }
      
        .art-Block-bl
        {
            top: expression(this.parentNode.offsetHeight-2+’px’);
            clip: rect(1px 1px auto auto);
        }
      
        .art-Block-br
        {
            top: expression(this.parentNode.offsetHeight-2+’px’);
            left: expression(this.parentNode.offsetWidth-2+’px’);
            clip: rect(1px auto auto 1px);
        }
      
        .art-Block-tc, .art-Block-bc
        {
            width: expression(this.parentNode.offsetWidth-2+’px’);
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/8848/blockhz.png’,sizingMethod=’scale’)»);
        }
      
        .art-Block-tc
        {
            clip: rect(auto auto 1px auto);
        }
      
        .art-Block-bc
        {
            top: expression(this.parentNode.offsetHeight-2+’px’);
            clip: rect(1px auto auto auto);
        }
      
        .art-Block-cr, .art-Block-cl
        {
            height: expression(this.parentNode.offsetHeight-2+’px’);
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/2893/blockvn.png’,sizingMethod=’scale’)»);
        }
      
        .art-Block-cr
        {
            left: expression(this.parentNode.offsetWidth-2+’px’);
            clip: rect(auto auto auto 1px);
        }
      
        .art-Block-cl
        {
            clip: rect(auto 1px auto auto);
        }
      
        .art-Block-cc
        {
            font-size: 1px;
            width: expression(this.parentNode.offsetWidth-2+’px’);
            height: expression(this.parentNode.offsetHeight-2+’px’);
            background-color: #DBDBCD;
        }
        /* end Box, Block */
      
        /* begin BlockHeader */
        .art-BlockHeader, .art-BlockHeader
        {
            font-size: 1px;
        }
      
        .art-header-tag-icon
        {
            background: none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/850/blockheadericonp.png’,sizingMethod=’crop’)»);
        }
      
        /* end BlockHeader */
      
        /* begin Box, BlockContent */
        .art-BlockContent, .art-BlockContent-body
        {
            zoom:1;
        }
      
        .art-BlockContent-body
        {
            position:static;
        }
      
        .art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl, .art-BlockContent-tc, .art-BlockContent-bc,.art-BlockContent-cr, .art-BlockContent-cl
        {
            font-size: 1px;
            background: none;
        }
      
        .art-BlockContent-tr, .art-BlockContent-tl, .art-BlockContent-br, .art-BlockContent-bl
        {
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/5586/blockcontentsom.png’,sizingMethod=’scale’)»);
        }
      
        .art-BlockContent-tl
        {
            clip: rect(auto 1px 1px auto);
        }
      
        .art-BlockContent-tr
        {
            left: expression(this.parentNode.offsetWidth-2+’px’);
            clip: rect(auto auto 1px 1px);
        }
      
        .art-BlockContent-bl
        {
            top: expression(this.parentNode.offsetHeight-2+’px’);
            clip: rect(1px 1px auto auto);
        }
      
        .art-BlockContent-br
        {
            top: expression(this.parentNode.offsetHeight-2+’px’);
            left: expression(this.parentNode.offsetWidth-2+’px’);
            clip: rect(1px auto auto 1px);
        }
      
        .art-BlockContent-tc, .art-BlockContent-bc
        {
            width: expression(this.parentNode.offsetWidth-2+’px’);
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/579/blockcontenthc.png’,sizingMethod=’scale’)»);
        }
      
        .art-BlockContent-tc
        {
            clip: rect(auto auto 1px auto);
        }
      
        .art-BlockContent-bc
        {
            top: expression(this.parentNode.offsetHeight-2+’px’);
            clip: rect(1px auto auto auto);
        }
      
        .art-BlockContent-cr, .art-BlockContent-cl
        {
            height: expression(this.parentNode.offsetHeight-2+’px’);
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/7117/blockcontentve.png’,sizingMethod=’scale’)»);
        }
      
        .art-BlockContent-cr
        {
            left: expression(this.parentNode.offsetWidth-2+’px’);
            clip: rect(auto auto auto 1px);
        }
      
        .art-BlockContent-cl
        {
            clip: rect(auto 1px auto auto);
        }
      
        .art-BlockContent-cc
        {
            font-size: 1px;
            width: expression(this.parentNode.offsetWidth-2+’px’);
            height: expression(this.parentNode.offsetHeight-2+’px’);
            background-color: #ECECE4;
        }
      
        .art-BlockContent-body ul li
        {
            height:1%;
            background:none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/8021/blockcontentbulletsd.png’,sizingMethod=’crop’)»);
        }
      
        /* end Box, BlockContent */
      
        /* begin Box, Post */
        .art-Post, .art-Post-body
        {
            zoom:1;
        }
      
        .art-Post-body
        {
            position:static;
        }
        /* end Box, Post */
      
        /* begin PostContent */
        h1
        {
          margin: 0.67em 0;
        }
      
        h2
        {
          margin: 0.8em 0;
        }
      
        h3
        {
          margin: 1em 0;
        }
      
        h4
        {
          margin: 1.25em 0;
        }
      
        h5
        {
          margin: 1.67em 0;
        }
      
        h6
        {
          margin: 2.33em 0;
        }
        /* end PostContent */
      
        /* begin PostBullets */
        .art-Post ul li, .art-Post ol ul li
        {
            height:1%;
            background:none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/2372/postbulletsa.png’,sizingMethod=’crop’)»);
        }
      
        .art-Post ul ol li
        {
            background:none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»»);
        }
        /* end PostBullets */
      
        /* begin PostQuote */
        blockquote,
        .art-PostContent blockquote
        {
            height:1%;
            background-image: none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/2425/postquotewb.png’,sizingMethod=’crop’)»);
        }
        /* end PostQuote */
      
        /* begin Button */
        .art-button-wrapper, .art-button-wrapper .l, .art-button-wrapper .r
        {
            font-size: 1px;
        }
      
        .art-button-wrapper .art-button
        {
            float:left;
        }
      
        .art-button-wrapper .l, .art-button-wrapper .r
        {
            background: none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/3191/buttonyw.png’,sizingMethod=’crop’)»);
        }
      
        .art-button-wrapper .r
        {
            left: expression(this.parentNode.offsetWidth-409+’px’);
            clip: rect(auto auto auto 399px);
        }
      
        .art-button-wrapper .l
        {
            width: expression(this.parentNode.offsetWidth-10+’px’);
        }
      
        /* end Button */
      
        /* begin Footer */
        .art-Footer .art-Footer-background
        {
            top: expression(this.parentNode.offsetHeight-150+’px’);
            background: none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/3746/footerzd.png’,sizingMethod=’crop’)»);
            zoom: 1;
            font-size:1px;
        }
      
        .art-rss-tag-icon
        {
            zoom:1;
            font-size:1px;
            background:none;
            behavior: expression(this.runtimeStyle.filter?»:this.runtimeStyle.filter=»progid:DXImageTransform.Microsoft.AlphaImageLoader(src='» + GetStyleUrl()+»http://img62.imageshack.us/img62/1695/rssiconxb.png’,sizingMethod=’crop’)»);
        }
      
        /* end Footer */
      
      
      </style>
    <![endif]–>
    <!–[if IE 7]>
      <style type=»text/css»>
/* begin Box, Sheet */
        .art-Sheet-tl
        {
            clip: rect(auto 17px 17px auto);
        }
      
        .art-Sheet-tr
        {
            clip: rect(auto auto 17px 17px);
        }
      
        .art-Sheet-bl
        {
            clip: rect(17px 17px auto auto);
        }
      
        .art-Sheet-br
        {
            clip: rect(17px auto auto 17px);
        }
      
        .art-Sheet-tc
        {
            clip: rect(auto auto 17px auto);
        }
      
        .art-Sheet-bc
        {
            clip: rect(17px auto auto auto);
        }
      
        .art-Sheet-cr
        {
            clip: rect(auto auto auto 17px);
        }
      
        .art-Sheet-cl
        {
            clip: rect(auto 17px auto auto);
        }
      
        .art-Sheet-body
        {
            zoom: 1;
        }
        /* end Box, Sheet */
      
        /* begin Menu */
        .art-nav .r
        {
            clip: rect(auto auto auto 994px);
        }
        /* end Menu */
      
        /* begin MenuItem */
        .art-menu a .r
        {
            clip: rect(auto auto auto 403px);
        }
        /* end MenuItem */
      
        /* begin Box, Block */
        .art-Block-tl
        {
            clip: rect(auto 1px 1px auto);
        }
      
        .art-Block-tr
        {
            clip: rect(auto auto 1px 1px);
        }
      
        .art-Block-bl
        {
            clip: rect(1px 1px auto auto);
        }
      
        .art-Block-br
        {
            clip: rect(1px auto auto 1px);
        }
      
        .art-Block-tc
        {
            clip: rect(auto auto 1px auto);
        }
      
        .art-Block-bc
        {
            clip: rect(1px auto auto auto);
        }
      
        .art-Block-cr
        {
            clip: rect(auto auto auto 1px);
        }
      
        .art-Block-cl
        {
            clip: rect(auto 1px auto auto);
        }
      
        .art-Block-body
        {
            zoom: 1;
        }
        /* end Box, Block */
      
        /* begin Box, BlockContent */
        .art-BlockContent-tl
        {
            clip: rect(auto 1px 1px auto);
        }
      
        .art-BlockContent-tr
        {
            clip: rect(auto auto 1px 1px);
        }
      
        .art-BlockContent-bl
        {
            clip: rect(1px 1px auto auto);
        }
      
        .art-BlockContent-br
        {
            clip: rect(1px auto auto 1px);
        }
      
        .art-BlockContent-tc
        {
            clip: rect(auto auto 1px auto);
        }
      
        .art-BlockContent-bc
        {
            clip: rect(1px auto auto auto);
        }
      
        .art-BlockContent-cr
        {
            clip: rect(auto auto auto 1px);
        }
      
        .art-BlockContent-cl
        {
            clip: rect(auto 1px auto auto);
        }
      
        .art-BlockContent-body
        {
            zoom: 1;
        }
        /* end Box, BlockContent */
      
        /* begin Box, Post */
      
        .art-Post-body
        {
            zoom: 1;
        }
        /* end Box, Post */
      
        /* begin PostContent */
        .art-PostContent
        {
            height:1%;
        }
        /* end PostContent */
      
        /* begin Button */
        .art-button-wrapper .r
        {
            clip: rect(auto auto auto 399px);
        }
        /* end Button */
      
      
      </style>
    <![endif]–>

    <script type=’text/javascript’>
      /* begin Page */

/* Generated with Artisteer version 2.3.0.23326, file checksum is 5BBC8659. */

cssFix = function(){
var u = navigator.userAgent.toLowerCase(),
addClass = function(el, val){
    if(! el.className) {
        el.className = val;
    } else {
        var newCl = el.className;
        newCl+=(' '+val);
        el.className = newCl;
    }
},
is = function(t){return (u.indexOf(t)!=-1)};
addClass(document.getElementsByTagName('html')[0],[
(!(/opera|webtv/i.test(u))&amp;&amp;/msie (\d)/.test(u))?('ie ie'+RegExp.$1)
: is('firefox/2')?'gecko firefox2'
: is('firefox/3')?'gecko firefox3'
: is('gecko/')?'gecko'
: is('chrome/')?'chrome'
: is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1
: is('konqueror')?'konqueror'
: is('applewebkit/')?'webkit safari'
: is('mozilla/')?'gecko':'',
(is('x11')||is('linux'))?' linux'
: is('mac')?' mac'
: is('win')?' win':''
].join(' '));
}();

var artEventHelper = {
    'bind': function(obj, evt, fn) {
        if (obj.addEventListener)
            obj.addEventListener(evt, fn, false);
        else if (obj.attachEvent)
            obj.attachEvent('on' + evt, fn);
        else
            obj['on' + evt] = fn;
    }
};

var userAgent = navigator.userAgent.toLowerCase();
var browser = {
    version: (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
    safari: /webkit/.test(userAgent) &amp;&amp; !/chrome/.test(userAgent),
    chrome: /chrome/.test(userAgent),
    opera: /opera/.test(userAgent),
    msie: /msie/.test(userAgent) &amp;&amp; !/opera/.test(userAgent),
    mozilla: /mozilla/.test(userAgent) &amp;&amp; !/(compatible|webkit)/.test(userAgent)
};

var artLoadEvent = (function() {
  

    var list = [];

    var done = false;
    var ready = function() {
        if (done) return;
        done = true;
        for (var i = 0; i &lt; list.length; i++)
            list[i]();
    };

    if (document.addEventListener &amp;&amp; !browser.opera)
        document.addEventListener('DOMContentLoaded', ready, false);

    if (browser.msie &amp;&amp; window == top) {
        (function() {
            try {
                document.documentElement.doScroll('left');
            } catch (e) {
                setTimeout(arguments.callee, 10);
                return;
            }
            ready();
        })();
    }

    if (browser.opera) {
        document.addEventListener('DOMContentLoaded', function() {
            for (var i = 0; i &lt; document.styleSheets.length; i++) {
                if (document.styleSheets[i].disabled) {
                    setTimeout(arguments.callee, 10);
                    return;
                }
            }
            ready();
        }, false);
    }

    if (browser.safari || browser.chrome) {
        var numStyles;
        (function() {
            if (document.readyState != 'loaded' &amp;&amp; document.readyState != 'complete') {
                setTimeout(arguments.callee, 10);
                return;
            }
            if ('undefined' == typeof numStyles) {
                numStyles = document.getElementsByTagName('style').length;
                var links = document.getElementsByTagName('link');
                for (var i = 0; i &lt; links.length; i++) {
                    numStyles += (links[i].getAttribute('rel') == 'stylesheet') ? 1 : 0;
                }
                if (document.styleSheets.length != numStyles) {
                    setTimeout(arguments.callee, 0);
                    return;
                }
            }
            ready();
        })();
    }
    artEventHelper.bind(window, 'load', ready);
    return ({
        add: function(f) {
            list.push(f);
        }
    })
})();

(function() {
    // fix ie blinking
    var m = document.uniqueID &amp;&amp; document.compatMode &amp;&amp; !window.XMLHttpRequest &amp;&amp; document.execCommand;
    try { if (!!m) { m('BackgroundImageCache', false, true); } }
    catch (oh) { };
})();

function xGetElementsByClassName(clsName, parentEle, tagName) {
    var elements = null;
    var found = [];
    var s = String.fromCharCode(92);
    var re = new RegExp('(?:^|' + s + 's+)' + clsName + '(?:$|' + s + 's+)');
    if (!parentEle) parentEle = document;
    if (!tagName) tagName = '*';
    elements = parentEle.getElementsByTagName(tagName);
    if (elements) {
        for (var i = 0; i &lt; elements.length; ++i) {
            if (elements[i].className.search(re) != -1) {
                found[found.length] = elements[i];
            }
        }
    }
    return found;
}

var styleUrlCached = null;
function GetStyleUrl() {
    if (null == styleUrlCached) {
        var ns;
        styleUrlCached = '';
        ns = document.getElementsByTagName('link');
        for (var i = 0; i &lt; ns.length; i++) {
            var l = ns[i];
            if (l.href &amp;&amp; /style\.ie6\.css(\?.*)?$/.test(l.href)) {
                return styleUrlCached = l.href.replace(/style\.ie6\.css(\?.*)?$/, '');
            }
        }

        ns = document.getElementsByTagName('style');
        for (var i = 0; i &lt; ns.length; i++) {
            var matches = new RegExp('import\\s+&quot;([^&quot;]+\\/)style\\.ie6\\.css&quot;').exec(ns[i].innerHTML);
            if (null != matches &amp;&amp; matches.length &gt; 0)
                return styleUrlCached = matches[1];
        }
    }
    return styleUrlCached;
}

function fixPNG(element) {
    if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent)) {
        var src;
        if (element.tagName == 'IMG') {
            if (/\.png$/.test(element.src)) {
                src = element.src;
                element.src = GetStyleUrl() + 'http://img62.imageshack.us/img62/6748/spacerv.gif&#039;;
            }
        }
        else {
            src = element.currentStyle.backgroundImage.match(/url\(&quot;(.+\.png)&quot;\)/i);
            if (src) {
                src = src[1];
                element.runtimeStyle.backgroundImage = 'none';
            }
        }
        if (src) element.runtimeStyle.filter = &quot;progid:DXImageTransform.Microsoft.AlphaImageLoader(src='&quot; + src + &quot;')&quot;;
    }
}

function artHasClass(el, cls) {
    return (el &amp;&amp; el.className &amp;&amp; (' ' + el.className + ' ').indexOf(' ' + cls + ' ') != -1);
}

var block_header_exists = false;
/* end Page */

/* begin Menu */
function gTranslateFix() {
    var menus = xGetElementsByClassName(&quot;art-menu&quot;, document);
    for (var i = 0; i &lt; menus.length; i++) {
        var menu = menus[i];
        var childs = menu.childNodes;
        var listItems = [];
        for (var j = 0; j &lt; childs.length; j++) {
            var el = childs[j];
            if (String(el.tagName).toLowerCase() == &quot;li&quot;) listItems.push(el);
        }
        for (var j = 0; j &lt; listItems.length; j++) {
            var item = listItems[j];
            var a = null;
            var gspan = null;
            for (var p = 0; p &lt; item.childNodes.length; p++) {
                var l = item.childNodes[p];
                if (!(l &amp;&amp; l.tagName)) continue;
                if (String(l.tagName).toLowerCase() == &quot;a&quot;) a = l;
                if (String(l.tagName).toLowerCase() == &quot;span&quot;) gspan = l;
            }
            if (gspan &amp;&amp; a) {
                var t = null;
                for (var k = 0; k &lt; gspan.childNodes.length; k++) {
                    var e = gspan.childNodes[k];
                    if (!(e &amp;&amp; e.tagName)) continue;
                    if (String(e.tagName).toLowerCase() == &quot;a&quot; &amp;&amp; e.firstChild) e = e.firstChild;
                    if (e &amp;&amp; e.className &amp;&amp; e.className == 't') {
                        t = e;
                        if (t.firstChild &amp;&amp; t.firstChild.tagName &amp;&amp; String(t.firstChild.tagName).toLowerCase() == &quot;a&quot;) {
                            while (t.firstChild.firstChild) t.appendChild(t.firstChild.firstChild);
                            t.removeChild(t.firstChild);
                        }
                        a.appendChild(t);
                        break;
                    }
                }
                gspan.parentNode.removeChild(gspan);
            }
        }
    }
}
artLoadEvent.add(gTranslateFix);

function Insert_Separators() {
    var menus = xGetElementsByClassName(&quot;art-menu&quot;, document, &quot;ul&quot;);
    for (var i = 0; i &lt; menus.length; i++) {
        var menu = menus[i];
        var childs = menu.childNodes;
        var listItems = [];
        for (var j = 0; j &lt; childs.length; j++) {
            var el = childs[j];
            if (String(el.tagName).toLowerCase() == &quot;li&quot;) listItems.push(el);
        }
        for (var j = 0; j &lt; listItems.length – 1; j++) {
            var item = listItems[j];
            var span = document.createElement('span');
            span.className = 'art-menu-separator';
            var li = document.createElement('li');
            li.appendChild(span);
            item.parentNode.insertBefore(li, item.nextSibling);

        }
        if (browser.msie) menu.style.position = &quot;relative&quot;;
    }
  
}
artLoadEvent.add(Insert_Separators);

function Menu_IE6Setup() {
    var isIE6 = navigator.userAgent.toLowerCase().indexOf(&quot;msie&quot;) != -1
    &amp;&amp; navigator.userAgent.toLowerCase().indexOf(&quot;msie 7&quot;) == -1;
    if (!isIE6) return;
    var aTmp2, i, j, oLI, aUL, aA;
    var aTmp = xGetElementsByClassName(&quot;art-menu&quot;, document, &quot;ul&quot;);
    for (i = 0; i &lt; aTmp.length; i++) {
        aTmp2 = aTmp[i].getElementsByTagName(&quot;li&quot;);
        for (j = 0; j &lt; aTmp2.length; j++) {
            oLI = aTmp2[j];
            aUL = oLI.getElementsByTagName(&quot;ul&quot;);
            if (aUL &amp;&amp; aUL.length) {
                oLI.UL = aUL[0];
                aA = oLI.getElementsByTagName(&quot;a&quot;);
                if (aA &amp;&amp; aA.length)
                    oLI.A = aA[0];
                oLI.onmouseenter = function() {
                    this.className += &quot; art-menuhover&quot;;
                    this.UL.className += &quot; art-menuhoverUL&quot;;
                    if (this.A) this.A.className += &quot; art-menuhoverA&quot;;
                };
                oLI.onmouseleave = function() {
                    this.className = this.className.replace(/art-menuhover/, &quot;&quot;);
                    this.UL.className = this.UL.className.replace(/art-menuhoverUL/, &quot;&quot;);
                    if (this.A) this.A.className = this.A.className.replace(/art-menuhoverA/, &quot;&quot;);
                };
            }
        }
    }
}
artLoadEvent.add(Menu_IE6Setup);
/* end Menu */

/* begin BlockHeader */
block_header_exists = true;/* end BlockHeader */

/* begin Button */

function artButtonsSetupJsHover(className) {
    var tags = [&quot;input&quot;, &quot;a&quot;, &quot;button&quot;];
    for (var j = 0; j &lt; tags.length; j++){
        var buttons = xGetElementsByClassName(className, document, tags[j]);
        for (var i = 0; i &lt; buttons.length; i++) {
            var button = buttons[i];
            if (!button.tagName || !button.parentNode) return;
            if (!artHasClass(button.parentNode, 'art-button-wrapper')) {
                if (!artHasClass(button, 'art-button')) button.className += ' art-button';
                var wrapper = document.createElement('span');
                wrapper.className = &quot;art-button-wrapper&quot;;
                if (artHasClass(button, 'active')) wrapper.className += ' active';
                var spanL = document.createElement('span');
                spanL.className = &quot;l&quot;;
                spanL.innerHTML = &quot; &quot;;
                wrapper.appendChild(spanL);
                var spanR = document.createElement('span');
                spanR.className = &quot;r&quot;;
                spanR.innerHTML = &quot; &quot;;
                wrapper.appendChild(spanR);
                button.parentNode.insertBefore(wrapper, button);
                wrapper.appendChild(button);
            }
            artEventHelper.bind(button, 'mouseover', function(e) {
                e = e || window.event;
                wrapper = (e.target || e.srcElement).parentNode;
                wrapper.className += &quot; hover&quot;;
            });
            artEventHelper.bind(button, 'mouseout', function(e) {
                e = e || window.event;
                button = e.target || e.srcElement;
                wrapper = button.parentNode;
                wrapper.className = wrapper.className.replace(/hover/, &quot;&quot;);
                if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, &quot;&quot;);
            });
            artEventHelper.bind(button, 'mousedown', function(e) {
                e = e || window.event;
                button = e.target || e.srcElement;
                wrapper = button.parentNode;
                if (!artHasClass(button, 'active')) wrapper.className += &quot; active&quot;;
            });
            artEventHelper.bind(button, 'mouseup', function(e) {
                e = e || window.event;
                button = e.target || e.srcElement;
                wrapper = button.parentNode;
                if (!artHasClass(button, 'active')) wrapper.className = wrapper.className.replace(/active/, &quot;&quot;);
            });
        }
    }
}

artLoadEvent.add(function() { artButtonsSetupJsHover(&quot;art-button&quot;); });
/* end Button */

function artInsertSidebarBlocks(widgetClassName) {
    var widgets = xGetElementsByClassName(widgetClassName, document);
    for (var i = 0; i &lt; widgets.length; i++) {
        var widget = widgets[i];
        if (widget.id == 'LinkList99') continue;
        if (widget.id == 'LinkList98') continue;
        if (widget.id == 'Text99')     continue;
      
        var childs = widget.childNodes;
        var widgetTitle = widget.getElementsByTagName(&quot;h2&quot;);
        var widgetContent = widget.innerHTML;
        var widgetTitleText = '';
        if (widgetTitle.length != 0){
            widgetTitleText = widgetTitle[0].innerHTML;
        }

        var div1  = document.createElement('div'); div1.className  = 'art-Block';
      
                      
        var div2  = document.createElement('div'); div2.className  = 'art-Block-tl'; div1.appendChild(div2);
        var div3  = document.createElement('div'); div3.className  = 'art-Block-tr'; div1.appendChild(div3);
        var div4  = document.createElement('div'); div4.className  = 'art-Block-bl'; div1.appendChild(div4);
        var div5  = document.createElement('div'); div5.className  = 'art-Block-br'; div1.appendChild(div5);
        var div6  = document.createElement('div'); div6.className  = 'art-Block-tc'; div1.appendChild(div6);
        var div7  = document.createElement('div'); div7.className  = 'art-Block-bc'; div1.appendChild(div7);
        var div8  = document.createElement('div'); div8.className  = 'art-Block-cl'; div1.appendChild(div8);
      
                      
        var div9  = document.createElement('div'); div9.className  = 'art-Block-cr'; div1.appendChild(div9);
        var div10 = document.createElement('div'); div10.className = 'art-Block-cc'; div1.appendChild(div10);
      
                      
        var divBB   = document.createElement('div'); divBB.className = 'art-Block-body';  div1.appendChild(divBB);
        if (widgetTitleText &amp;&amp; block_header_exists){
            var divBH   = document.createElement('div'); divBH.className = 'art-BlockHeader'; divBB.appendChild(divBH);
                        var divBHl  = document.createElement('div'); divBHl.className = 'l'; divBH.appendChild(divBHl);
            var divBHr  = document.createElement('div'); divBHr.className = 'r'; divBH.appendChild(divBHr);
                        var divBHti = document.createElement('div'); divBHti.className = 'art-header-tag-icon'; divBH.appendChild(divBHti);
            var divBHt  = document.createElement('div'); divBHt.className = 't'; divBHti.appendChild(divBHt);
            divBHt.innerHTML = widgetTitleText;
        }

        var divBC   = document.createElement('div'); divBC.className = 'art-BlockContent'; divBB.appendChild(divBC);
      
                      
        var di2  = document.createElement('div'); di2.className  = 'art-BlockContent-tl'; divBC.appendChild(di2);
        var di3  = document.createElement('div'); di3.className  = 'art-BlockContent-tr'; divBC.appendChild(di3);
        var di4  = document.createElement('div'); di4.className  = 'art-BlockContent-bl'; divBC.appendChild(di4);
        var di5  = document.createElement('div'); di5.className  = 'art-BlockContent-br'; divBC.appendChild(di5);
        var di6  = document.createElement('div'); di6.className  = 'art-BlockContent-tc'; divBC.appendChild(di6);
        var di7  = document.createElement('div'); di7.className  = 'art-BlockContent-bc'; divBC.appendChild(di7);
        var di8  = document.createElement('div'); di8.className  = 'art-BlockContent-cl'; divBC.appendChild(di8);
      
                      
        var di9  = document.createElement('div'); di9.className  = 'art-BlockContent-cr'; divBC.appendChild(di9);
        var di10 = document.createElement('div'); di10.className = 'art-BlockContent-cc'; divBC.appendChild(di10);
      
                      
        var divBCb  = document.createElement('div'); divBCb.className = 'art-BlockContent-body'; divBC.appendChild(divBCb);
      
      
      
        if ( ((widgetClassName == 'widget Gadget') || (widgetClassName == 'widget Followers')) &amp;&amp; (widgetContent.indexOf(&quot;friendconnect.js&quot;) != -1)){
          
            if (browser.mozilla){
                if (widgetTitle.length != 0){
                    widgetTitle[0].parentNode.removeChild(widgetTitle[0]);
                }
                divBCb.innerHTML = widget.innerHTML;
                widget.innerHTML = &quot;&quot;;
                widget.appendChild(div1);
            }
            if (browser.msie){
                if (widgetTitle.length != 0){
                    widgetTitle[0].parentNode.removeChild(widgetTitle[0]);
                }
                var childsLength = childs.length;
                for (var j = 0; j &lt; childsLength; j++) {
                    divBCb.appendChild(childs[0]);
                }
                widget.appendChild(div1);
            }
          
        } else {
            if (widgetTitle.length != 0){
                widgetTitle[0].parentNode.removeChild(widgetTitle[0]);
            }
            var childsLength = childs.length;
            for (var j = 0; j &lt; childsLength; j++) {
                divBCb.appendChild(childs[0]);
            }
            widget.appendChild(div1);
        }
 
      
        if (widgetClassName == 'widget Subscribe') {
            widget.style.position = &quot;relative&quot;;
            widget.style.zIndex = &quot;2&quot;;
        }
      
    }
}

function artCheckNavBar(){
    var navbar = document.getElementById(&quot;navbar&quot;);
    if (navbar){
        if (false) {
            var el1 = document.getElementById(&quot;art-page-background-glare&quot;);
            if (el1) el1.style.top = &quot;30px&quot;;
            var el2 = document.getElementById(&quot;art-page-background-simple-gradient&quot;);
            if (el2) el2.style.top = &quot;30px&quot;;
            if (!el2) {
                var el3 = document.getElementById(&quot;art-page-background-gradient&quot;);
                if (el3) el3.style.top = &quot;30px&quot;;
            }
        } else {
            navbar.style.display = 'none';
        }
    }
}

function artFixFooterMenu(){
    var widgetLinks = document.getElementById(&quot;LinkList98&quot;);
    var widgetText  = document.getElementById(&quot;Text99&quot;);
    if (widgetLinks) {
        var widgetText = widgetLinks.innerHTML;
        widgetLinks.innerHTML = widgetText.replace(&quot;| |&quot;, &quot;&quot;);
    } else {
        if (widgetText){
            var els = xGetElementsByClassName(&quot;widget-content&quot;, widgetText);
            var el = els[0];
            if (el.innerHTML == '\n') {
                el.innerHTML = &quot;&lt;br /&gt;&lt;br /&gt;&quot;;
            } else {
                el.innerHTML += &quot;&lt;br /&gt;&quot;;
            }
        }
    }
}

function artFixPostHeaders(){
    var els = xGetElementsByClassName(&quot;art-PostMetadataHeader&quot;, document);
    for (var i = 0; i &lt; els.length; i++) {
        var el = els[i];
        if (el) {
            var elText = el.innerHTML;
            if ((el.getElementsByTagName(&quot;div&quot;).length == 0) &amp;&amp; (el.getElementsByTagName(&quot;h2&quot;).length == 0)) el.style.visibility = 'hidden';
        }
    }
}

artLoadEvent.add(function() { artFixPostHeaders(); });

function artFixPostFooters(){
    var els = xGetElementsByClassName(&quot;art-PostMetadataFooter&quot;, document);
    for (var i = 0; i &lt; els.length; i++) {
        var el = els[i];
        if (el) {
            var els2 = xGetElementsByClassName(&quot;art-PostFooterIcons&quot;, el);
            for (var j = 0; j &lt; els2.length; j++) {
                var el2 = els2[j];
                var elText = el2.innerHTML;
                if ((el.getElementsByTagName(&quot;img&quot;).length == 0) &amp;&amp; (el.getElementsByTagName(&quot;a&quot;).length == 0)) el.style.visibility = 'hidden';
            }
        }
    }
}

artLoadEvent.add(function() { artFixPostFooters(); });

function artFixTopMenu(){
    var topMenu = document.getElementById(&quot;LinkList99&quot;);
    if (!topMenu){
        var navSection = document.getElementById(&quot;navsection&quot;);
        if (navSection){
            if (showHomePage) {
                if (window.location == homePageLink)
                    var tmpstr = '&lt;a href=&quot;'+homePageLink+'&quot; class=&quot;active&quot;&gt;';
                else
                    var tmpstr = '&lt;a href=&quot;'+homePageLink+'&quot;&gt;';
                navSection.innerHTML = '&lt;div&gt;&lt;div class=&quot;l&quot;&gt;&lt;/div&gt;&lt;div class=&quot;r&quot;&gt;&lt;/div&gt;&lt;div class=&quot;art-nav-center&quot;&gt;&lt;ul class=&quot;art-menu&quot;&gt;&lt;li&gt;'+tmpstr+'&lt;span class=&quot;l&quot;&gt;&lt;/span&gt;&lt;span class=&quot;r&quot;&gt;&lt;/span&gt;&lt;span class=&quot;t&quot;&gt;'+homePageName+'&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;';
            } else {
                navSection.innerHTML = '&lt;div&gt;&lt;div class=&quot;l&quot;&gt;&lt;/div&gt;&lt;div class=&quot;r&quot;&gt;&lt;/div&gt;&lt;div class=&quot;art-nav-center&quot;&gt;&lt;/div&gt;&lt;/div&gt;';
            }
        }
    }
}
artLoadEvent.add(function() { artFixTopMenu(); });

function artDisplayTopMenu(menuitems){
    var i=0;
    var subList = false;
    var menu = new Array();
    for(i=0; i &lt; menuitems.length; i++){
      var item = menuitems[i];
      var itemname = item[0];
      var itemlink = item[1];
    
      if ( (itemname.indexOf(&quot;-&quot;) == 0) &amp;&amp; !subList) document.write(&quot;&lt;ul&gt;&quot;);
      else if ( (itemname.indexOf(&quot;-&quot;) != 0) &amp;&amp; subList) { document.write(&quot;&lt;/ul&gt;&lt;/li&gt;&quot;); subList = false; }
      else if (i != 0) document.write(&quot;&lt;/li&gt;&quot;);
    
      document.write(&quot;&lt;li&gt;&quot;);
    
      if (itemname.indexOf(&quot;-&quot;) != 0){
        if (window.location == itemlink)
            document.write('&lt;a href=&quot;'+itemlink+'&quot; class=&quot;active&quot;&gt;&lt;span class=&quot;l&quot;&gt;&lt;/span&gt;&lt;span class=&quot;r&quot;&gt;&lt;/span&gt;&lt;span class=&quot;t&quot;&gt;'+itemname+'&lt;/span&gt;&lt;/a&gt;');
        else if(itemlink == &quot;http://./&quot;)
            document.write('&lt;a href=&quot;#&quot;&gt;&lt;span class=&quot;l&quot;&gt;&lt;/span&gt;&lt;span class=&quot;r&quot;&gt;&lt;/span&gt;&lt;span class=&quot;t&quot;&gt;'+itemname+'&lt;/span&gt;&lt;/a&gt;');
        else
            document.write('&lt;a href=&quot;'+itemlink+'&quot;&gt;&lt;span class=&quot;l&quot;&gt;&lt;/span&gt;&lt;span class=&quot;r&quot;&gt;&lt;/span&gt;&lt;span class=&quot;t&quot;&gt;'+itemname+'&lt;/span&gt;&lt;/a&gt;');
      } else {
        document.write('&lt;a href=&quot;'+itemlink+'&quot;&gt;'+itemname.substr(1,itemname.length)+'&lt;/a&gt;');
        subList = true;
      }
      if (i==(menuitems.length-1)) document.write(&quot;&lt;/li&gt;&quot;);
    }
}
    </script>
<style media=’print’ type=’text/css’> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;} #main-wrapper {width: 95%} </style>
  </head>
  <body>
  <script type=’text/javascript’>
        artCheckNavBar();
    </script>
    <div id=’art-main’>
    <div class=’art-Sheet’>
        <div class=’art-Sheet-tl’/>
        <div class=’art-Sheet-tr’/>
        <div class=’art-Sheet-bl’/>
        <div class=’art-Sheet-br’/>
        <div class=’art-Sheet-tc’/>
        <div class=’art-Sheet-bc’/>
        <div class=’art-Sheet-cl’/>
        <div class=’art-Sheet-cr’/>
        <div class=’art-Sheet-cc’/>
        <div class=’art-Sheet-body’>
    <b:section class=’art-Header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’BRICKWALL (Κεφαλίδα)’ type=’Header’>
<b:includable id=’title’>
                <a expr:href=’data:blog.homepageUrl’><data:title/></a>
            </b:includable>
<b:includable id=’description’>
                <data:description/>
            </b:includable>
<b:includable id=’main’>
                                <div class=’art-Header-png’/>
                                            <div class=’art-Header-jpeg’/>
                <div class=’art-Logo’>
        <h1 class=’art-Logo-name’ id=’name-text’>
            <b:include name=’title’/>
        </h1>
        <div class=’art-Logo-text’ id=’slogan-text’>
            <b:include name=’description’/>
        </div>
    </div>
  
            </b:includable>
</b:widget>
</b:section>
    <script type=’text/javascript’>
        var menuitems = new Array();
        var showHomePage = false;
        if (true) {
          showHomePage = true;
          var homePageName = 'Home';
          var homePageLink = '<data:blog.homepageUrl/>';
          menuitems.push(new Array('Home','<data:blog.homepageUrl/>'));
        }
    </script>         
    <b:section class=’art-nav’ id=’navsection’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’LinkList99′ locked=’true’ title=’Top Menu’ type=’LinkList’>
<b:includable id=’main’>
        <div class=’l’/>
        <div class=’r’/>
        <ul class=’art-menu’>
            <script type=’text/javascript’>
                <b:loop values=’data:links’ var=’link’>
                  menuitems.push(new Array('<data:link.name/>','<data:link.target/>'));
                </b:loop>
                artDisplayTopMenu(menuitems);
            </script>
        </ul>
    </b:includable>
</b:widget>
</b:section>
    <div id=’crosscol-wrapper’ style=’text-align:center’>
        <b:section class=’crosscol’ id=’crosscol’ showaddelement=’no’/>
    </div>
    <div class=’art-contentLayout’>
    <b:section class=’art-sidebar1′ id=’sidebar1′ preferred=’yes’>
<b:widget id=’Followers1′ locked=’false’ title=’Αναγνώστες’ type=’Followers’>
<b:includable id=’main’>
  <b:if cond=’data:title != &quot;&quot;’>
    <b:if cond=’data:codeSnippet != &quot;&quot;’>
      <h2 class=’title’><data:title/></h2>
    <b:else/>
      <b:if cond=’data:totalFollowerCount != &quot;&quot;’>
        <h2 class=’title’><data:title/> (<data:totalFollowerCount/>)</h2>
      </b:if>
    </b:if>
  </b:if>
  <div class=’widget-content’>
    <div expr:id=’data:widget.instanceId + &quot;-wrapper&quot;’>
      <b:if cond=’data:codeSnippet != &quot;&quot;’>
        <div style=’margin-right:2px;’>
          <data:codeSnippet/>
        </div>
      <b:else/>
        <b:if cond=’data:totalFollowerCount == &quot;&quot;’>
          <span class=’item-control following-not-admin’>
            <b><data:failureSnippet/></b>
          </span>
          <span class=’item-control blog-admin’>
            <b><data:adminFailureSnippet/></b>
          </span>
        <b:else/>
          <b:if cond=’data:followingLinkPresent’>
            <div class=’follow-this profile-link item-control following-follow-this’>
              <a expr:href=’&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;’>
                <data:followThisMessage/>
              </a>
            </div>
            <div class=’follow-this profile-link item-control following-stop-following-this’>
              <a expr:href=’&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;’>
                <data:stopFollowingMessage/>
              </a>
            </div>
          </b:if>
 
          <div class=’followers-grid’>
            <b:if cond=’data:totalFollowerCount == 0′>
              <div class=’profile-link item-control following-follow-this’>
                <data:emptyFollowersMessage/>
              </div>
            </b:if>
            <!–
            Relies on the js written out in navbar.gxp
            –>
            <b:loop values=’data:followers’ var=’follower’>
              <div class=’follower’>
                <a expr:href=’data:follower.profileUrl’ expr:title=’data:follower.displayName’ rel=’nofollow’>
                <img class=’follower-img’ expr:alt=’data:follower.displayName’ expr:height=’data:follower.imageHeight’ expr:onerror=’&quot;this.onerror=null;this.src=\&quot;&quot; + data:anonFollowerImageUrl + &quot;\&quot;;&quot;’ expr:onload=’&quot;setAttributeOnload(this, \&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;’ expr:width=’data:follower.imageWidth’ src=’http://img1.blogblog.com/img/blank.gif’/&gt;
                </a>
              </div>
            </b:loop>
            <div class=’clear’/>
          </div>
 
          <div class=’followers-canvas profile-link’>
            <data:followersFooterMessage/>
            <span class=’item-control following-not-admin’>
              <a expr:href=’data:followersUri’>
                <data:viewAllMessage/>
              </a>
            </span>
            <span class=’item-control blog-admin’>
              <a expr:href=’data:manageFollowersUri’>
                <data:manageFollowersMessage/>
              </a>
            </span>
          </div>
          </b:if>
      </b:if>
    </div>
    <b:include name=’quickedit’/>
  </div>
</b:includable>
</b:widget>
<b:widget id=’Profile1′ locked=’false’ title=’Για Μένα’ type=’Profile’>
<b:includable id=’main’>
    <b:if cond=’data:title != &quot;&quot;’>
      <h2><data:title/></h2>
    </b:if>
    <div class=’widget-content’>
    <b:if cond=’data:team == &quot;true&quot;’> <!– team blog profile –>
      <ul>
        <b:loop values=’data:authors’ var=’i’>
          <li><a expr:href=’data:i.userUrl’><data:i.display-name/></a></li>
        </b:loop>
      </ul>

      <b:else/> <!– normal blog profile –>

      <b:if cond=’data:photo.url != &quot;&quot;’>
        <a expr:href=’data:userUrl’><img class=’profile-img’ expr:alt=’data:photo.alt’ expr:height=’data:photo.height’ expr:src=’data:photo.url’ expr:width=’data:photo.width’/></a>
      </b:if>

      <dl class=’profile-datablock’>
        <dt class=’profile-data’><data:displayname/></dt>

        <b:if cond=’data:showlocation == &quot;true&quot;’>
          <dd class=’profile-data’><data:location/></dd>
        </b:if>

        <b:if cond=’data:aboutme != &quot;&quot;’><dd class=’profile-textblock’><data:aboutme/></dd></b:if>
      </dl>
      <a class=’profile-link’ expr:href=’data:userUrl’><data:viewProfileMsg/></a>
    </b:if>

     <b:include name=’quickedit’/>
    </div>
  </b:includable>
</b:widget>
</b:section>
          <b:section class=’art-content’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Αναρτήσεις ιστολογίου’ type=’Blog’>
<b:includable id=’nextprev’>
              <div class=’blog-pager’ id=’blog-pager’>
                <b:if cond=’data:newerPageUrl’>
                  <span id=’blog-pager-newer-link’>
                    <a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-newer-link&quot;’ expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
                  </span>
                </b:if>
  
                <b:if cond=’data:olderPageUrl’>
                  <span id=’blog-pager-older-link’>
                    <a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + &quot;_blog-pager-older-link&quot;’ expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>
                  </span>
                </b:if>
  
                <b:if cond=’data:blog.homepageUrl != data:blog.url’>
                  <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
                <b:else/>
                  <b:if cond=’data:newerPageUrl’>
                    <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
                  </b:if>
                </b:if>
  
              </div>
              <div class=’clear’/>
            </b:includable>
<b:includable id=’backlinks’ var=’post’>
              <a name=’links’/>
              <h4><data:post.backlinksLabel/></h4>
              <b:if cond=’data:post.numBacklinks != 0′>
                <dl class=’comments-block’ id=’comments-block’>
                  <b:loop values=’data:post.backlinks’ var=’backlink’>
                    <div class=’collapsed-backlink backlink-control’>
                      <dt class=’comment-title’>
                        <span class=’backlink-toggle-zippy’> </span>
                        <a expr:href=’data:backlink.url’ rel=’nofollow’><data:backlink.title/></a>
                        <b:include data=’backlink’ name=’backlinkDeleteIcon’/>
                      </dt>
                      <dd class=’comment-body collapseable’>
                        <data:backlink.snippet/>
                      </dd>
                      <dd class=’comment-footer collapseable’>
                        <span class=’comment-author’><data:post.authorLabel/> <data:backlink.author/></span>
                        <span class=’comment-timestamp’><data:post.timestampLabel/> <data:backlink.timestamp/></span>
                      </dd>
                    </div>
                  </b:loop>
                </dl>
              </b:if>
              <p class=’comment-footer’>
                <a class=’comment-link’ expr:href=’data:post.createLinkUrl’ expr:id=’data:widget.instanceId + &quot;_backlinks-create-link&quot;’ target=’_blank’><data:post.createLinkLabel/></a>
              </p>
            </b:includable>
<b:includable id=’post’ var=’post’>
              <div class=’art-Post-tl’/>
              <div class=’art-Post-tr’/>
              <div class=’art-Post-bl’/>
              <div class=’art-Post-br’/>
              <div class=’art-Post-tc’/>
              <div class=’art-Post-bc’/>
              <div class=’art-Post-cl’/>
              <div class=’art-Post-cr’/>
              <div class=’art-Post-cc’/>
              <div class=’art-Post-body’>
                <div class=’art-Post-inner art-article’>
<b:if cond=’data:blog.pageType == &quot;item&quot;’> <span style=’background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;’><a href=’javascript:window.print()’>Print this post</a></span> </b:if>
                  <a expr:name=’data:post.id’/>
                  <b:if cond=’data:post.dateHeader’>
                    <div class=’date-header’><data:post.dateHeader/></div>
                  </b:if>
          <div class=’art-PostMetadataHeader’>
    <b:if cond=’data:post.title’>
        <h2 class=’art-PostHeader’>
      
            <b:if cond=’data:post.link’>
              <a expr:href=’data:post.link’><data:post.title/></a>
            <b:else/>
              <b:if cond=’data:post.url’>
                <a expr:href=’data:post.url’><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            </b:if>
        </h2>
    </b:if>
  
    </div>
    <div class=’art-PostHeaderIcons art-metadata-icons’>
    <img alt=» class=’art-metadata-icon’ height=’18’ src=’http://img62.imageshack.us/img62/2059/postdateicon.png&#8217; width=’18’/>
    <data:post.timestamp/> | <img alt=» class=’art-metadata-icon’ height=’18’ src=’http://img62.imageshack.us/img62/2217/postauthoricon.png&#8217; width=’18’/>
    <data:authorLabel/> <data:post.author/><b:if cond=’data:post.editUrl’><span expr:class=’&quot;item-control &quot; + data:post.adminClass’> | </span></b:if>
            <b:if cond=’data:post.editUrl’><span expr:class=’&quot;item-control &quot; + data:post.adminClass’>
          <img alt=» class=’art-metadata-icon’ height=’19’ src=’http://img62.imageshack.us/img62/9931/postediticonc.png&#8217; width=’20’/>
  
            <a class=’post-edit-link’ expr:href=’data:post.editUrl’ expr:title=’data:top.editPostMsg’>
              <data:top.editPostMsg/>
            </a>
  
            </span></b:if>
        
    </div>
    <div class=’art-PostContent’>
    <data:post.body/>
    </div>
    <div class=’cleared’/>
  
    <b:if cond=’data:post.hasJumpLink’>
        <div class=’jump-link’>
            <a expr:href=’data:post.url + &quot;#more&quot;’><data:post.jumpText/></a>
        </div>
    </b:if>
    <div class=’art-PostMetadataFooter’>
    <div class=’art-PostFooterIcons art-metadata-icons’>
  
            <b:if cond=’data:post.labels’>
          <img alt=» class=’art-metadata-icon’ height=’18’ src=’http://img62.imageshack.us/img62/1103/posttagicon.png&#8217; width=’18’/>
  
            <data:postLabelsLabel/>
            <b:loop values=’data:post.labels’ var=’label’>
              <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
            </b:loop>
  
            </b:if>
          <b:if cond=’data:post.labels’><b:if cond=’data:blog.pageType != &quot;item&quot;’><b:if cond=’data:post.allowComments’> | </b:if></b:if></b:if>
            <b:if cond=’data:blog.pageType != &quot;item&quot;’><b:if cond=’data:post.allowComments’>
          <img alt=» class=’art-metadata-icon’ height=’18’ src=’http://img62.imageshack.us/img62/7756/postcommentsiconq.png&#8217; width=’18’/>
    <a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
  
            </b:if></b:if>
        
    </div>
  
    </div>
  
                
                  <div class=’post-footer’>
<!– AddThis Button BEGIN –>
<div><a class=’addthis_button’ expr:addthis:title=’data:post.title’ expr:addthis:url=’data:post.url’><img alt=’Bookmark and Share’ height=’16’ src=’http://s7.addthis.com/static/btn/v2/lg-share-en.gif&#8217; style=’border:0′ width=’125’/></a>
<script src=’http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b64d7091be383d8&#8242; type=’text/javascript’/></div>
<!– AddThis Button END –>

                    <div class=’post-footer-line post-footer-line-1′>
                    
                      <span class=’reaction-buttons’>
                        <b:if cond=’data:top.showReactions’>
                          <table border=’0′ cellpadding=’0′ cellspacing=’0′ width=’100%’><tr>
                            <td class=’reactions-label-cell’ nowrap=’nowrap’ valign=’top’ width=’1%’>
                              <span class=’reactions-label’>
                              <data:top.reactionsLabel/></span> </td>
                            <td><iframe allowtransparency=’true’ class=’reactions-iframe’ expr:src=’data:post.reactionsUrl’ frameborder=’0′ name=’reactions’ scrolling=’no’/></td>
                           </tr></table>
                        </b:if>
                      </span>
  
                      <span class=’star-ratings’>
                        <b:if cond=’data:top.showStars’>
                           <div expr:g:background-color=’data:backgroundColor’ expr:g:text-color=’data:textColor’ expr:g:url=’data:post.absoluteUrl’ g:height=’42’ g:type=’RatingPanel’ g:width=’280’/>
                        </b:if>
                      </span>
  
                      <!– backlinks –>
                      <span class=’post-backlinks post-comment-link’>
                        <b:if cond=’data:blog.pageType != &quot;item&quot;’>
                          <b:if cond=’data:post.showBacklinks’>
                            <a class=’comment-link’ expr:href=’data:post.url + &quot;#links&quot;’><data:top.backlinkLabel/></a>
                          </b:if>
                        </b:if>
                      </span>
  
                      <span class=’post-icons’>
                        <!– email post links –>
                        <b:if cond=’data:post.emailPostUrl’>
                          <span class=’item-action’>
                          <a expr:href=’data:post.emailPostUrl’ expr:title=’data:top.emailPostMsg’>
                              <img alt=» class=’icon-action’ height=’13’ src=’http://www.blogger.com/img/icon18_email.gif&#8217; width=’18’/>
                          </a>
                          </span>
                        </b:if>
  
                      </span>
                    </div>
  
                    <div class=’post-footer-line post-footer-line-3′>
                      <span class=’post-location’>
                        <b:if cond=’data:top.showLocation’>
                          <b:if cond=’data:post.location’>
                            <data:postLocationLabel/>
                            <a expr:href=’data:post.location.mapsUrl’ target=’_blank’><data:post.location.name/></a>
                          </b:if>
                        </b:if>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </b:includable>
<b:includable id=’commentDeleteIcon’ var=’comment’>
              <span expr:class=’&quot;item-control &quot; + data:comment.adminClass’>
                <a expr:href=’data:comment.deleteUrl’ expr:title=’data:top.deleteCommentMsg’>
                  <img src=’http://www.blogger.com/img/icon_delete13.gif’/&gt;
                </a>
              </span>
            </b:includable>
<b:includable id=’status-message’>
              <b:if cond=’data:navMessage’>
                <div class=’status-msg-wrap’>
                  <div class=’status-msg-body’>
                    <data:navMessage/>
                  </div>
                  <div class=’status-msg-border’>
                    <div class=’status-msg-bg’>
                      <div class=’status-msg-hidden’><data:navMessage/></div>
                    </div>
                  </div>
                </div>
                <div style=’clear: both;’/>
              </b:if>
            </b:includable>
<b:includable id=’feedLinks’>
              <b:if cond=’data:blog.pageType != &quot;item&quot;’> <!– Blog feed links –>
                <b:if cond=’data:feedLinks’>
                  <div class=’blog-feeds’>
                    <b:include data=’feedLinks’ name=’feedLinksBody’/>
                  </div>
                </b:if>
              <b:else/> <!–Post feed links –>
                <div class=’post-feeds’>
                  <b:loop values=’data:posts’ var=’post’>
                    <b:if cond=’data:post.allowComments’>
                      <b:if cond=’data:post.feedLinks’>
                        <b:include data=’post.feedLinks’ name=’feedLinksBody’/>
                      </b:if>
                    </b:if>
                  </b:loop>
                </div>
              </b:if>
            </b:includable>
<b:includable id=’comment-form’ var=’post’>
              <div class=’comment-form’>
                <a name=’comment-form’/>
                <h4 id=’comment-post-message’><data:postCommentMsg/></h4>
                <p><data:blogCommentMessage/></p>
                <data:blogTeamBlogMessage/>
                <a expr:href=’data:post.commentFormIframeSrc’ id=’comment-editor-src’/>
                <iframe allowtransparency=’true’ class=’blogger-iframe-colorize blogger-comment-from-post’ frameborder=’0′ height=’410′ id=’comment-editor’ name=’comment-editor’ scrolling=’no’ src=» width=’100%’/>
                <data:post.friendConnectJs/>
                <data:post.cmtfpIframe/>
                <script type=’text/javascript’>
                  BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
                </script>
              </div>
            </b:includable>
<b:includable id=’backlinkDeleteIcon’ var=’backlink’>
              <span expr:class=’&quot;item-control &quot; + data:backlink.adminClass’>
                <a expr:href=’data:backlink.deleteUrl’ expr:title=’data:top.deleteBacklinkMsg’>
                  <img src=’http://www.blogger.com/img/icon_delete13.gif’/&gt;
                </a>
              </span>
            </b:includable>
<b:includable id=’feedLinksBody’ var=’links’>
              <div class=’feed-links’>
                <data:feedLinksMsg/>
                <b:loop values=’data:links’ var=’f’>
                  <a class=’feed-link’ expr:href=’data:f.url’ expr:type=’data:f.mimeType’ target=’_blank’><data:f.name/> (<data:f.feedType/>)</a>
                </b:loop>
              </div>
            </b:includable>
<b:includable id=’postQuickEdit’ var=’post’>
  <b:if cond=’data:post.editUrl’>
    <span expr:class=’&quot;item-control &quot; + data:post.adminClass’>
      <a expr:href=’data:post.editUrl’ expr:title=’data:top.editPostMsg’>
        <img alt=» class=’icon-action’ height=’18’ src=’http://www.blogger.com/img/icon18_edit_allbkg.gif&#8217; width=’18’/>
      </a>
    </span>
  </b:if>
</b:includable>
<b:includable id=’comments’ var=’post’>
              <div class=’comments’ id=’comments’>
                <a name=’comments’/>
                <b:if cond=’data:post.allowComments’>
                  <h4>
                    <b:if cond=’data:post.numComments == 1′>
                      1 <data:commentLabel/>:
                    <b:else/>
                      <data:post.numComments/> <data:commentLabelPlural/>:
                    </b:if>
                  </h4>
  
                  <b:if cond=’data:post.commentPagingRequired’>
                    <span class=’paging-control-container’>
                      <a expr:class=’data:post.oldLinkClass’ expr:href=’data:post.oldestLinkUrl’><data:post.oldestLinkText/></a>
                       
                      <a expr:class=’data:post.oldLinkClass’ expr:href=’data:post.olderLinkUrl’><data:post.olderLinkText/></a>
                       
                      <data:post.commentRangeText/>
                       
                      <a expr:class=’data:post.newLinkClass’ expr:href=’data:post.newerLinkUrl’><data:post.newerLinkText/></a>
                       
                      <a expr:class=’data:post.newLinkClass’ expr:href=’data:post.newestLinkUrl’><data:post.newestLinkText/></a>
                    </span>
                  </b:if>
  
                  <dl id=’comments-block’>
                    <b:loop values=’data:post.comments’ var=’comment’>
                      <dt expr:class=’&quot;comment-author &quot; + data:comment.authorClass’ expr:id=’data:comment.anchorName’>
                        <b:if cond=’data:comment.favicon’>
                          <img expr:src=’data:comment.favicon’ height=’16px’ style=’margin-bottom:-2px;’ width=’16px’/>
                        </b:if>
                        <a expr:name=’data:comment.anchorName’/>
                        <b:if cond=’data:comment.authorUrl’>
                          <a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
                        <b:else/>
                          <data:comment.author/>
                        </b:if>
                        <data:commentPostedByMsg/>
                      </dt>
                      <dd class=’comment-body’>
                        <b:if cond=’data:comment.isDeleted’>
                          <span class=’deleted-comment’><data:comment.body/></span>
                        <b:else/>
                          <p><data:comment.body/></p>
                        </b:if>
                      </dd>
                      <dd class=’comment-footer’>
                        <span class=’comment-timestamp’>
                          <a expr:href=’data:comment.url’ title=’comment permalink’>
                            <data:comment.timestamp/>
                          </a>
                          <b:include data=’comment’ name=’commentDeleteIcon’/>
                        </span>
                      </dd>
                    </b:loop>
                  </dl>
  
                  <b:if cond=’data:post.commentPagingRequired’>
                    <span class=’paging-control-container’>
                      <a expr:class=’data:post.oldLinkClass’ expr:href=’data:post.oldestLinkUrl’>
                        <data:post.oldestLinkText/>
                      </a>
                      <a expr:class=’data:post.oldLinkClass’ expr:href=’data:post.olderLinkUrl’>
                        <data:post.olderLinkText/>
                      </a>
                       
                      <data:post.commentRangeText/>
                       
                      <a expr:class=’data:post.newLinkClass’ expr:href=’data:post.newerLinkUrl’>
                        <data:post.newerLinkText/>
                      </a>
                      <a expr:class=’data:post.newLinkClass’ expr:href=’data:post.newestLinkUrl’>
                        <data:post.newestLinkText/>
                      </a>
                    </span>
                  </b:if>
  
                  <p class=’comment-footer’>
                    <b:if cond=’data:post.embedCommentForm’>
                      <b:if cond=’data:post.allowNewComments’>
                        <b:include data=’post’ name=’comment-form’/>
                      <b:else/>
                        <data:post.noNewCommentsText/>
                      </b:if>
                    <b:else/>
                      <b:if cond=’data:post.allowComments’>
                        <a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:postCommentMsg/></a>
                      </b:if>
                    </b:if>
                  </p>
                </b:if>
  
                <div id=’backlinks-container’>
                  <div expr:id=’data:widget.instanceId + &quot;_backlinks-container&quot;’>
                    <b:if cond=’data:post.showBacklinks’>
                      <b:include data=’post’ name=’backlinks’/>
                    </b:if>
                  </div>
                </div>
              </div>
            </b:includable>
<b:includable id=’main’ var=’top’>
              <!– posts –>
                <b:include data=’top’ name=’status-message’/>
  
                <data:adStart/>
                <b:loop values=’data:posts’ var=’post’>
                  <div class=’art-Post’>
                    <b:include data=’post’ name=’post’/>
                    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
                      <b:include data=’post’ name=’comments’/>
                    </b:if>
                    <b:if cond=’data:post.includeAd’>
                      <data:adEnd/>
                      <data:adCode/>
                      <data:adStart/>
                    </b:if>
                    <b:if cond=’data:post.trackLatency’>
                      <data:post.latencyJs/>
                    </b:if>
                  </div>
                </b:loop>
                <data:adEnd/>
  
              <!– navigation –>
              <b:include name=’nextprev’/>
  
              <!– feed links –>
              <b:include name=’feedLinks’/>
            
              <b:if cond=’data:top.showStars’>
                <script src=’http://www.google.com/jsapi&#8217; type=’text/javascript’/>
                <script type=’text/javascript’>
                  google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
                  function initialize() {
                    google.annotations.setApplicationId(<data:top.blogspotReviews/>);
                    google.annotations.createAll();
                    google.annotations.fetch();
                  }
                  google.setOnLoadCallback(initialize);
                </script>
              </b:if>
            </b:includable>
</b:widget>
</b:section>
          <b:section class=’art-sidebar2′ id=’sidebar2′ preferred=’yes’>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Αρχειοθήκη ιστολογίου’ type=’BlogArchive’>
<b:includable id=’main’>
  <b:if cond=’data:title’>
    <h2><data:title/></h2>
  </b:if>
  <div class=’widget-content’>
  <div id=’ArchiveList’>
  <div expr:id=’data:widget.instanceId + &quot;_ArchiveList&quot;’>
    <b:if cond=’data:style == &quot;HIERARCHY&quot;’>
     <b:include data=’data’ name=’interval’/>
    </b:if>
    <b:if cond=’data:style == &quot;FLAT&quot;’>
      <b:include data=’data’ name=’flat’/>
    </b:if>
    <b:if cond=’data:style == &quot;MENU&quot;’>
      <b:include data=’data’ name=’menu’/>
    </b:if>
  </div>
  </div>
  <b:include name=’quickedit’/>
  </div>
</b:includable>
<b:includable id=’flat’ var=’data’>
  <ul>
    <b:loop values=’data:data’ var=’i’>
      <li class=’archivedate’>
        <a expr:href=’data:i.url’><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
</b:includable>
<b:includable id=’menu’ var=’data’>
  <select expr:id=’data:widget.instanceId + &quot;_ArchiveMenu&quot;’>
    <option value=»><data:title/></option>
    <b:loop values=’data:data’ var=’i’>
      <option expr:value=’data:i.url’><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
  </select>
</b:includable>
<b:includable id=’interval’ var=’intervalData’>
  <b:loop values=’data:intervalData’ var=’i’>
      <ul>
        <li expr:class=’&quot;archivedate &quot; + data:i.expclass’>
          <b:include data=’i’ name=’toggle’/>
          <a class=’post-count-link’ expr:href=’data:i.url’><data:i.name/></a>
            <span class=’post-count’ dir=’ltr’>(<data:i.post-count/>)</span>
          <b:if cond=’data:i.data’>
            <b:include data=’i.data’ name=’interval’/>
          </b:if>
          <b:if cond=’data:i.posts’>
            <b:include data=’i.posts’ name=’posts’/>
          </b:if>
        </li>
      </ul>
  </b:loop>
</b:includable>
<b:includable id=’toggle’ var=’interval’>
  <b:if cond=’data:interval.toggleId’>
  <b:if cond=’data:interval.expclass == &quot;expanded&quot;’>
    <a class=’toggle’ href=’javascript:void(0)’>
      <span class=’zippy toggle-open’>▼ </span>
    </a>
  <b:else/>
    <a class=’toggle’ href=’javascript:void(0)’>
      <span class=’zippy’>
        <b:if cond=’data:blog.languageDirection == &quot;rtl&quot;’>
          ◄ 
        <b:else/>
          ► 
        </b:if>
      </span>
    </a>
  </b:if>
 </b:if>
</b:includable>
<b:includable id=’posts’ var=’posts’>
  <ul class=’posts’>
    <b:loop values=’data:posts’ var=’i’>
      <li><a expr:href=’data:i.url’><data:i.title/></a></li>
    </b:loop>
  </ul>
</b:includable>
</b:widget>
</b:section>
        
    </div>
    <div class=’cleared’/>
    <div id=’footer-wrapper’>
        <b:section class=’footer’ id=’footer’/>
    </div>
    <div class=’art-Footer’><p align=’center’><a href=’http://locusblogus.blogspot.com’>Created by hackaday 2010</a></p>
        <div class=’art-Footer-inner’>
            <a class=’art-rss-tag-icon’ href=’/feeds/posts/default’ title=’RSS’/>
            <div class=’art-Footer-text’>
    <b:section class=’art-footer-nav’ id=’footersection’ maxwidgets=’2′ showaddelement=’no’>
<b:widget id=’LinkList98′ locked=’true’ title=’Footer Links’ type=’LinkList’>
<b:includable id=’main’>
                <b:loop values=’data:links’ var=’link’><a expr:href=’data:link.target’><data:link.name/></a> | </b:loop>|
            </b:includable>
</b:widget>
<b:widget id=’Text99′ locked=’true’ title=’Copyright Text’ type=’Text’>
<b:includable id=’main’>
              <div class=’widget-content’>
                <data:content/>
              </div>
            </b:includable>
</b:widget>
</b:section>
  
            </div>
            <script type=’text/javascript’>
                artFixFooterMenu();
                artInsertSidebarBlocks(&quot;widget Gadget&quot;);
                artInsertSidebarBlocks(&quot;widget Label&quot;);
                artInsertSidebarBlocks(&quot;widget Profile&quot;);
                artInsertSidebarBlocks(&quot;widget Followers&quot;);
                artInsertSidebarBlocks(&quot;widget CustomSearch&quot;);
                artInsertSidebarBlocks(&quot;widget HTML&quot;);
                artInsertSidebarBlocks(&quot;widget Text&quot;);
                artInsertSidebarBlocks(&quot;widget AdSense&quot;);
                artInsertSidebarBlocks(&quot;widget Image&quot;);
                artInsertSidebarBlocks(&quot;widget Slideshow&quot;);
                artInsertSidebarBlocks(&quot;widget VideoBar&quot;);
                artInsertSidebarBlocks(&quot;widget Poll&quot;);
                artInsertSidebarBlocks(&quot;widget BlogList&quot;);
                artInsertSidebarBlocks(&quot;widget LinkList&quot;);
                artInsertSidebarBlocks(&quot;widget TextList&quot;);
                artInsertSidebarBlocks(&quot;widget Feed&quot;);
                artInsertSidebarBlocks(&quot;widget NewsBar&quot;);
                artInsertSidebarBlocks(&quot;widget Subscribe&quot;);
                artInsertSidebarBlocks(&quot;widget BloggerButton&quot;);
                artInsertSidebarBlocks(&quot;widget BlogArchive&quot;);
            </script>
        </div>
        <div class=’art-Footer-background’/>
    </div>
  
        </div>
    </div>
    <div class=’cleared’/>
    <p class=’art-page-footer’/>
    </div>
  
  </body>
</html>
               
               

 
12 Σχόλια

Posted by στο Ιανουαρίου 31, 2010 in CODE, HTML, LAYER, TEMPLATE

 

ΤΡΟΠΟΠΟΙΗΜΕΝΟ ΤΡΙΣΤΗΛΟ MINIMA TEMPLATE

Καλησπέρα. Σήμερα δε θα σας προτείνω κάποιο widget, σελίδα ή trick ούτε θα σας παραπέμψω σε κάποιο tutorial. Σήμερα θα σας προσφέρω ένα template του blogspot το οποίο το έχω τροποποιήσει λιγάκι. Το template είναι το minima στη λευκή του έκδοση. Παρακάτω είναι ο κώδικας και ακόμα πιο κάτω ένα screenshot για να δείτε πως δείχνει στη διάταξη του πανόπτη.
   Λίγα στοιχεία του παρακάτω template: Είναι τρίστηλο, η navbar έχει αφαιρεθεί για αποφυγή διάφορων επιτήδιων, κάτω από το κείμενο έχει τρεις κάθετες στήλες στις οποίες μπορούνε να προστεθούνε εικόνες, widgets και διάφορα άλλα, καθώς και προεγκατεστημένο ένα κουμπί Bookmark, το οποίο θα εμφανίζεται κάτω από κάθε σας ανάρτηση, για να κάνετε προσθήκη των post σας εσείς ή οι αναγνώστες σας σε διάφορες υπηρεσίες όπως είναι το Twitter, Facebook, MySpace, Delicious και μια πληθώρα άλλων υπηρεσιών. Πάνω από την κεφαλίδα μπορείτε να κάνετε προσθήκη gadget έτσι ώστε αν θέλετε να έχετε για logo ακόμα και animated banner. Επίσης αν κάνετε κλικ πάνω στον τίτλο ενός post θα δείτε ότι στη συγκεκριμένη ανάρτηση εμφανίζεται και ένα κουμπί για την εκτύπωση αυτής. Δείτε ένα test blog για το πως θα φαίνεται κάνοντας κλικ εδώ. Ελπίζω να το βρείτε ενδιαφέρον.

<?xml version=»1.0″ encoding=»UTF-8″ ?>
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml&#8217; xmlns:b=’http://www.google.com/2005/gml/b&#8217; xmlns:data=’http://www.google.com/2005/gml/data&#8217; xmlns:expr=’http://www.google.com/2005/gml/expr’&gt;
<head>
<b:include data=’blog’ name=’all-head-content’/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
———————————————–
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: http://www.stopdesign.com
Modified by hackaday
URL: http://locusblogus.blogspot.com
Date: 26 Feb 2004
Updated by: Blogger Team
———————————————– */




#navbar-iframe {display:none !important;}


/* Variable definitions
   ====================
   <Variable name=»bgcolor» description=»Page Background Color»
             type=»color» default=»#fff» value=»#ffffff»>
   <Variable name=»textcolor» description=»Text Color»
             type=»color» default=»#333″ value=»#333333″>
   <Variable name=»linkcolor» description=»Link Color»
             type=»color» default=»#58a» value=»#5588aa»>
   <Variable name=»pagetitlecolor» description=»Blog Title Color»
             type=»color» default=»#666″ value=»#666666″>
   <Variable name=»descriptioncolor» description=»Blog Description Color»
             type=»color» default=»#999″ value=»#999999″>
   <Variable name=»titlecolor» description=»Post Title Color»
             type=»color» default=»#c60″ value=»#cc6600″>
   <Variable name=»bordercolor» description=»Border Color»
             type=»color» default=»#ccc» value=»#ffffff»>
   <Variable name=»sidebarcolor» description=»Sidebar Title Color»
             type=»color» default=»#999″ value=»#999999″>
   <Variable name=»sidebartextcolor» description=»Sidebar Text Color»
             type=»color» default=»#666″ value=»#666666″>
   <Variable name=»visitedlinkcolor» description=»Visited Link Color»
             type=»color» default=»#999″ value=»#999999″>
   <Variable name=»bodyfont» description=»Text Font»
             type=»font» default=»normal normal 100% Georgia, Serif» value=»normal normal 100% Georgia, Serif»>
   <Variable name=»headerfont» description=»Sidebar Title Font»
             type=»font»
             default=»normal normal 78% ‘Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif» value=»normal normal 78% ‘Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif»>
   <Variable name=»pagetitlefont» description=»Blog Title Font»
             type=»font»
             default=»normal normal 200% Georgia, Serif» value=»normal normal 200% Georgia, Serif»>
   <Variable name=»descriptionfont» description=»Blog Description Font»
             type=»font»
             default=»normal normal 78% ‘Trebuchet MS’, Trebuchet, Arial, Verdana, Sans-serif» value=»normal normal 78% ‘Trebuchet MS’, Trebuchet, Arial, Verdana, Sans-serif»>
   <Variable name=»postfooterfont» description=»Post Footer Font»
             type=»font»
             default=»normal normal 78% ‘Trebuchet MS’, Trebuchet, Arial, Verdana, Sans-serif» value=»normal normal 78% ‘Trebuchet MS’, Trebuchet, Arial, Verdana, Sans-serif»>
   <Variable name=»startSide» description=»Side where text starts in blog language»
             type=»automatic» default=»left» value=»left»>
   <Variable name=»endSide» description=»Side where text ends in blog language»
             type=»automatic» default=»right» value=»right»>
*/


body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }


/* Header
———————————————–
 */


#header-wrapper {
  width:950px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }


#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}


#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}


#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}


#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }


#header a:hover {
  color:$pagetitlecolor;
  }


#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }


#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}




/* Outer-Wrapper
———————————————– */
#outer-wrapper {
  width: 950px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }


#main-wrapper {
  width: 410px;
  float: left;margin-left: 40px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }


#sidebar-wrapper {
  width: 220px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#left-sidebar-wrapper {
  width: 220px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
———————————————– */


h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}




/* Posts
———————————————–
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }


.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}


.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}


.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}


.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}


.post-body blockquote {
  line-height:1.3em; 
}


.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}


.comment-link {
  margin-$startSide:.6em;
  }
.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }


/* Comments
———————————————– */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }


#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
border-bottom:2px solid #736AFF;
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }


#blog-pager-newer-link {
  float: $startSide;
 }


#blog-pager-older-link {
  float: $endSide;
 }


#blog-pager {
  text-align: center;
 }


.feed-links {
  clear: both;
  line-height: 2.5em;
}


/* Sidebar Content
———————————————– */
.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;
 }


.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }


.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }


.main .Blog {
  border-bottom-width: 0;
}




/* Profile
———————————————– */
.profile-img {
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}


.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}


.profile-datablock {
  margin:.5em 0 .5em;
}


.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}


.profile-link {
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}


/* Footer
———————————————– */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
]]></b:skin>
<style media=’print’ type=’text/css’> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;} #main-wrapper {width: 95%} </style>
  </head>


  <body>
  <div id=’outer-wrapper’><div id=’wrap2′>


    <!– skip links for text browsers –>
    <span id=’skiplinks’ style=’display:none;’>
      <a href=’#main’>skip to main </a> |
      <a href=’#sidebar’>skip to sidebar</a>
    </span>


    <div id=’header-wrapper’>
      <b:section class=’header’ id=’header’ maxwidgets=’2′ showaddelement=’yes’>
<b:widget id=’Header1′ locked=’true’ title=’SimpleStyle (Κεφαλίδα)’ type=’Header’>
<b:includable id=’main’>


  <b:if cond=’data:useImage’>
    <b:if cond=’data:imagePlacement == «REPLACE»‘>
      <!–Show just the image, no text–>
      <div id=’header-inner’>
        <a expr:href=’data:blog.homepageUrl’ style=’display: block’>
          <img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + «_headerimg»‘ expr:src=’data:sourceUrl’ expr:width=’data:width’ style=’display: block’/>
        </a>
      </div>
    <b:else/>
      <!–
      Show image as background to text. You can’t really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don’t force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width’s worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      –>
      <div expr:style='»background-image: url(\»» + data:sourceUrl + «\»); »                      + «background-position: »                      + data:backgroundPositionStyleStr + «; »                      + data:widthStyleStr                      + «min-height: » + data:height + «px;»                      + «_height: » + data:height + «px;»                      + «background-repeat: no-repeat; «‘ id=’header-inner’>
        <div class=’titlewrapper’ style=’background: transparent’>
          <h1 class=’title’ style=’background: transparent; border-width: 0px’>
            <b:include name=’title’/>
          </h1>
        </div>
        <b:include name=’description’/>
      </div>
    </b:if>
  <b:else/>
    <!–No header image –>
    <div id=’header-inner’>
      <div class=’titlewrapper’>
        <h1 class=’title’>
          <b:include name=’title’/>
        </h1>
      </div>
      <b:include name=’description’/>
    </div>
  </b:if>
</b:includable>
<b:includable id=’title’>
  <b:if cond=’data:blog.url == data:blog.homepageUrl’>
    <data:title/>
  <b:else/>
    <a expr:href=’data:blog.homepageUrl’><data:title/></a>
  </b:if>
</b:includable>
<b:includable id=’description’>
  <div class=’descriptionwrapper’>
    <p class=’description’><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
</b:section>
    </div>


    <div id=’content-wrapper’>


      <div id=’crosscol-wrapper’ style=’text-align:center’>
        <b:section class=’crosscol’ id=’crosscol’ showaddelement=’no’/>
      </div>
<div id=’left-sidebar-wrapper’> <b:section class=’sidebar’ id=’left-sidebar’ preferred=’yes’/> </div>
      <div id=’main-wrapper’>
        <b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Αναρτήσεις ιστολογίου’ type=’Blog’>
<b:includable id=’nextprev’>
  <div class=’blog-pager’ id=’blog-pager’>
    <b:if cond=’data:newerPageUrl’>
      <span id=’blog-pager-newer-link’>
      <a class=’blog-pager-newer-link’ expr:href=’data:newerPageUrl’ expr:id=’data:widget.instanceId + «_blog-pager-newer-link»‘ expr:title=’data:newerPageTitle’><data:newerPageTitle/></a>
      </span>
    </b:if>


    <b:if cond=’data:olderPageUrl’>
      <span id=’blog-pager-older-link’>
      <a class=’blog-pager-older-link’ expr:href=’data:olderPageUrl’ expr:id=’data:widget.instanceId + «_blog-pager-older-link»‘ expr:title=’data:olderPageTitle’><data:olderPageTitle/></a>
      </span>
    </b:if>


    <b:if cond=’data:blog.homepageUrl != data:blog.url’>
      <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
      <b:else/>
      <b:if cond=’data:newerPageUrl’>
        <a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
      </b:if>
    </b:if>


  </div>
  <div class=’clear’/>
</b:includable>
<b:includable id=’backlinks’ var=’post’>
  <a name=’links’/><h4><data:post.backlinksLabel/></h4>
  <b:if cond=’data:post.numBacklinks != 0′>
    <dl class=’comments-block’ id=’comments-block’>
      <b:loop values=’data:post.backlinks’ var=’backlink’>
        <div class=’collapsed-backlink backlink-control’>
          <dt class=’comment-title’>
            <span class=’backlink-toggle-zippy’> </span>
            <a expr:href=’data:backlink.url’ rel=’nofollow’><data:backlink.title/></a>
            <b:include data=’backlink’ name=’backlinkDeleteIcon’/>
          </dt>
          <dd class=’comment-body collapseable’>
            <data:backlink.snippet/>
          </dd>
          <dd class=’comment-footer collapseable’>
            <span class=’comment-author’><data:post.authorLabel/> <data:backlink.author/></span>
            <span class=’comment-timestamp’><data:post.timestampLabel/> <data:backlink.timestamp/></span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class=’comment-footer’>
    <a class=’comment-link’ expr:href=’data:post.createLinkUrl’ expr:id=’data:widget.instanceId + «_backlinks-create-link»‘ target=’_blank’><data:post.createLinkLabel/></a>
  </p>
</b:includable>
<b:includable id=’post’ var=’post’>
  <div class=’post hentry uncustomized-post-template’>
    <b:if cond=’data:blog.pageType == «item»‘> <span style=’background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;’><a href=’javascript:window.print()’>Print this post</a></span> </b:if>
<a expr:name=’data:post.id’/>
    <b:if cond=’data:post.title’>
      <h3 class=’post-title entry-title’>
     <b:if cond=’data:post.link’>
       <a expr:href=’data:post.link’><data:post.title/></a>
     <b:else/>
        <b:if cond=’data:post.url’>
          <a expr:href=’data:post.url’><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>
    <div class=’post-header-line-1’/>


    <div class=’post-body entry-content’>
      <data:post.body/>
      <div style=’clear: both;’/> <!– clear for photos floats –>
    </div>
 
    <b:if cond=’data:post.hasJumpLink’>
      <div class=’jump-link’>
        <a expr:href=’data:post.url + «#more»‘ expr:title=’data:post.title’><data:post.jumpText/></a> 
      </div>
    </b:if>
   
    <div class=’post-footer’>
<!– AddThis Button BEGIN –>
<div><a class=’addthis_button’ expr:addthis:title=’data:post.title’ expr:addthis:url=’data:post.url’><img alt=’Bookmark and Share’ height=’16’ src=’http://s7.addthis.com/static/btn/v2/lg-bookmark-en.gif&#8217; style=’border:0′ width=’125’/></a>
<script src=’http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4aea216727a9a258&#8242; type=’text/javascript’/></div>
<!– AddThis Button END –>


    <div class=’post-footer-line post-footer-line-1′>
      <span class=’post-author vcard’>
        <b:if cond=’data:top.showAuthor’>
          <data:top.authorLabel/>
          <span class=’fn’><data:post.author/></span>
        </b:if>
      </span>


      <span class=’post-timestamp’>
        <b:if cond=’data:top.showTimestamp’>
          <data:top.timestampLabel/>
        <b:if cond=’data:post.url’>
          <a class=’timestamp-link’ expr:href=’data:post.url’ rel=’bookmark’ title=’permanent link’><abbr class=’published’ expr:title=’data:post.timestampISO8601′><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>
 
      <span class=’reaction-buttons’>
        <b:if cond=’data:top.showReactions’>
          <table border=’0′ cellpadding=’0′ cellspacing=’0′ width=’100%’><tr>
            <td class=’reactions-label-cell’ nowrap=’nowrap’ valign=’top’ width=’1%’>
              <span class=’reactions-label’>
              <data:top.reactionsLabel/></span> </td>
            <td><iframe allowtransparency=’true’ class=’reactions-iframe’ expr:src=’data:post.reactionsUrl’ frameborder=’0′ name=’reactions’ scrolling=’no’/></td>
           </tr></table>
        </b:if>
      </span>


      <span class=’star-ratings’>
        <b:if cond=’data:top.showStars’>
           <div expr:g:background-color=’data:backgroundColor’ expr:g:text-color=’data:textColor’ expr:g:url=’data:post.absoluteUrl’ g:height=’42’ g:type=’RatingPanel’ g:width=’280’/>
        </b:if>
      </span>


      <span class=’post-comment-link’>
        <b:if cond=’data:blog.pageType != «item»‘>
          <b:if cond=’data:post.allowComments’>
            <a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span>


       <!– backlinks –>
       <span class=’post-backlinks post-comment-link’>
         <b:if cond=’data:blog.pageType != «item»‘>
           <b:if cond=’data:post.showBacklinks’>
             <a class=’comment-link’ expr:href=’data:post.url + «#links»‘><data:top.backlinkLabel/></a>
           </b:if>
         </b:if>
       </span>


      <span class=’post-icons’>
        <!– email post links –>
        <b:if cond=’data:post.emailPostUrl’>
          <span class=’item-action’>
          <a expr:href=’data:post.emailPostUrl’ expr:title=’data:top.emailPostMsg’>
              <img alt=» class=’icon-action’ height=’13’ src=’http://www.blogger.com/img/icon18_email.gif&#8217; width=’18’/>
          </a>
          </span>
        </b:if>


        <!– quickedit pencil –>
        <b:include data=’post’ name=’postQuickEdit’/>
      </span>
      </div>


      <div class=’post-footer-line post-footer-line-2′>
      <span class=’post-labels’>
        <b:if cond=’data:post.labels’>
          <data:postLabelsLabel/>
          <b:loop values=’data:post.labels’ var=’label’>
            <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != «true»‘>,</b:if>
          </b:loop>
        </b:if>
      </span>
      </div>


      <div class=’post-footer-line post-footer-line-3′>
      <span class=’post-location’>
        <b:if cond=’data:top.showLocation’>
          <b:if cond=’data:post.location’>
            <data:postLocationLabel/>
            <a expr:href=’data:post.location.mapsUrl’ target=’_blank’><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>
    </div>
  </div>
</b:includable>
<b:includable id=’commentDeleteIcon’ var=’comment’>
  <span expr:class='»item-control » + data:comment.adminClass’>
    <a expr:href=’data:comment.deleteUrl’ expr:title=’data:top.deleteCommentMsg’>
      <img src=’http://www.blogger.com/img/icon_delete13.gif’/&gt;
    </a>
  </span>
</b:includable>
<b:includable id=’status-message’>
  <b:if cond=’data:navMessage’>
  <div class=’status-msg-wrap’>
    <div class=’status-msg-body’>
      <data:navMessage/>
    </div>
    <div class=’status-msg-border’>
      <div class=’status-msg-bg’>
        <div class=’status-msg-hidden’><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style=’clear: both;’/>
  </b:if>
</b:includable>
<b:includable id=’feedLinks’>
  <b:if cond=’data:blog.pageType != «item»‘> <!– Blog feed links –>
    <b:if cond=’data:feedLinks’>
      <div class=’blog-feeds’>
        <b:include data=’feedLinks’ name=’feedLinksBody’/>
      </div>
    </b:if>


    <b:else/> <!–Post feed links –>
    <div class=’post-feeds’>
      <b:loop values=’data:posts’ var=’post’>
        <b:if cond=’data:post.allowComments’>
          <b:if cond=’data:post.feedLinks’>
            <b:include data=’post.feedLinks’ name=’feedLinksBody’/>
          </b:if>
        </b:if>
      </b:loop>
    </div>
  </b:if>
</b:includable>
<b:includable id=’comment-form’ var=’post’>
  <div class=’comment-form’>
    <a name=’comment-form’/>
    <h4 id=’comment-post-message’><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href=’data:post.commentFormIframeSrc’ id=’comment-editor-src’/>
    <iframe allowtransparency=’true’ class=’blogger-iframe-colorize blogger-comment-from-post’ frameborder=’0′ height=’410′ id=’comment-editor’ name=’comment-editor’ src=» width=’100%’/>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type=’text/javascript’>
      BLOG_CMT_createIframe(‘<data:post.appRpcRelayPath/>’, ‘<data:post.communityId/>’);
    </script>
  </div>
</b:includable>
<b:includable id=’backlinkDeleteIcon’ var=’backlink’>
  <span expr:class='»item-control » + data:backlink.adminClass’>
    <a expr:href=’data:backlink.deleteUrl’ expr:title=’data:top.deleteBacklinkMsg’>
      <img src=’http://www.blogger.com/img/icon_delete13.gif’/&gt;
    </a>
  </span>
</b:includable>
<b:includable id=’feedLinksBody’ var=’links’>
  <div class=’feed-links’>
  <data:feedLinksMsg/>
  <b:loop values=’data:links’ var=’f’>
     <a class=’feed-link’ expr:href=’data:f.url’ expr:type=’data:f.mimeType’ target=’_blank’><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>
<b:includable id=’postQuickEdit’ var=’post’>
  <b:if cond=’data:post.editUrl’>
    <span expr:class='»item-control » + data:post.adminClass’>
      <a expr:href=’data:post.editUrl’ expr:title=’data:top.editPostMsg’>
        <img alt=» class=’icon-action’ height=’18’ src=’http://www.blogger.com/img/icon18_edit_allbkg.gif&#8217; width=’18’/>
      </a>
    </span>
  </b:if>
</b:includable>
<b:includable id=’comments’ var=’post’>
  <div class=’comments’ id=’comments’>
    <a name=’comments’/>
    <b:if cond=’data:post.allowComments’>
      <h4>
        <b:if cond=’data:post.numComments == 1′>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>


      <b:if cond=’data:post.commentPagingRequired’>
        <span class=’paging-control-container’>
          <a expr:class=’data:post.oldLinkClass’ expr:href=’data:post.oldestLinkUrl’><data:post.oldestLinkText/></a>
         
          <a expr:class=’data:post.oldLinkClass’ expr:href=’data:post.olderLinkUrl’><data:post.olderLinkText/></a>
         
          <data:post.commentRangeText/>
         
          <a expr:class=’data:post.newLinkClass’ expr:href=’data:post.newerLinkUrl’><data:post.newerLinkText/></a>
         
          <a expr:class=’data:post.newLinkClass’ expr:href=’data:post.newestLinkUrl’><data:post.newestLinkText/></a>
        </span>
      </b:if>


      <dl expr:class=’data:post.avatarIndentClass’ id=’comments-block’>
        <b:loop values=’data:post.comments’ var=’comment’>
          <dt expr:class='»comment-author » + data:comment.authorClass’ expr:id=’data:comment.anchorName’>
            <b:if cond=’data:comment.favicon’>
              <img expr:src=’data:comment.favicon’ height=’16px’ style=’margin-bottom:-2px;’ width=’16px’/>
            </b:if>
            <a expr:name=’data:comment.anchorName’/>
            <b:if cond=’data:blog.enabledCommentProfileImages’>
              <data:comment.authorAvatarImage/>
            </b:if>
            <b:if cond=’data:comment.authorUrl’>
              <a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class=’comment-body’>
            <b:if cond=’data:comment.isDeleted’>
              <span class=’deleted-comment’><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class=’comment-footer’>
            <span class=’comment-timestamp’>
              <a expr:href=’data:comment.url’ title=’comment permalink’>
                <data:comment.timestamp/>
              </a>
              <b:include data=’comment’ name=’commentDeleteIcon’/>
            </span>
          </dd>
        </b:loop>
      </dl>


      <b:if cond=’data:post.commentPagingRequired’>
        <span class=’paging-control-container’>
          <a expr:class=’data:post.oldLinkClass’ expr:href=’data:post.oldestLinkUrl’>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class=’data:post.oldLinkClass’ expr:href=’data:post.olderLinkUrl’>
            <data:post.olderLinkText/>
          </a>
         
          <data:post.commentRangeText/>
         
          <a expr:class=’data:post.newLinkClass’ expr:href=’data:post.newerLinkUrl’>
            <data:post.newerLinkText/>
          </a>
          <a expr:class=’data:post.newLinkClass’ expr:href=’data:post.newestLinkUrl’>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>


      <p class=’comment-footer’>
        <b:if cond=’data:post.embedCommentForm’>
          <b:if cond=’data:post.allowNewComments’>
            <b:include data=’post’ name=’comment-form’/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond=’data:post.allowComments’>
            <a expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><data:postCommentMsg/></a>
          </b:if>
        </b:if>


      </p>
    </b:if>


    <div id=’backlinks-container’>
    <div expr:id=’data:widget.instanceId + «_backlinks-container»‘>
       <b:if cond=’data:post.showBacklinks’>
         <b:include data=’post’ name=’backlinks’/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
<b:includable id=’main’ var=’top’>
  <!– posts –>
  <div class=’blog-posts hfeed’>


    <b:include data=’top’ name=’status-message’/>


    <data:defaultAdStart/>
    <b:loop values=’data:posts’ var=’post’>
      <b:if cond=’data:post.dateHeader’>
        <h2 class=’date-header’><data:post.dateHeader/></h2>
      </b:if>
      <b:include data=’post’ name=’post’/>
      <b:if cond=’data:blog.pageType == «static_page»‘>
        <b:include data=’post’ name=’comments’/>
      </b:if>
      <b:if cond=’data:blog.pageType == «item»‘>
        <b:include data=’post’ name=’comments’/>
      </b:if>
      <b:if cond=’data:post.includeAd’>
        <b:if cond=’data:post.isFirstPost’>
          <data:defaultAdEnd/>
        <b:else/>
          <data:adEnd/>
        </b:if>
        <div class=’inline-ad’>
          <data:adCode/>
        </div>
        <data:adStart/>
      </b:if>
      <b:if cond=’data:post.trackLatency’>
        <data:post.latencyJs/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>


  <!– navigation –>
  <b:include name=’nextprev’/>


  <!– feed links –>
  <b:include name=’feedLinks’/>
 
  <b:if cond=’data:top.showStars’>
    <script src=’http://www.google.com/jsapi&#8217; type=’text/javascript’/>
    <script type=’text/javascript’>
      google.load(«annotations», «1», {«locale»: «<data:top.languageCode/>»});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
  </b:if>
</b:includable>
</b:widget>
</b:section>
      </div>


      <div id=’sidebar-wrapper’>
        <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’/>
      </div>


      <!– spacer for skins that want sidebar and main to be the same height–>
      <div class=’clear’> </div>


    </div> <!– end content-wrapper –>


    <div id=’footer-wrapper’>
      <div id=’footer-column-container’>
<div id=’footer2′ style=’width: 30%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer3′ style=’width: 40%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer4′ style=’width: 30%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>
<div style=’clear:both;’/>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’>
<b:section class=’footer’ id=’col-bottom’ preferred=’yes’/>
</div>
<div style=’clear:both;’/>
</div>
    </div>

  </div></div> <!– end outer-wrapper –>
</body><div id=’footer-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’><p align=’center’><a href=’http://locusblogus.blogspot.com’>Modified by hackaday 2009</a></p></div>
</html>


 
19 Σχόλια

Posted by στο Νοέμβριος 7, 2009 in BLOGGER, BLOGSPOT, LAYER, TEMPLATE

 

ΦΩΤΟΓΡΑΦΙΕΣ ΓΙΑ BACKGROUND ΣΤΟ BLOG

Καλημέρα και καλή εβδομάδα. Σήμερα θα δούμε πως μπορούμε να κάνουμε προσθήκη μια εικόνας που θέλουμε στο blog μας ως background.
Σαν πρώτο βήμα είναι να βρείτε μια εικόνα της αρεσκείας σας και να τη σηκώσετε στο internet. Υπάρχουν πολλά sites που μπορείτε να το κάνετε αυτό. Για παράδειγμα το γνωστά σε όλους μας Photobucket και Flickr αλλά και πολλά άλλα.
Πάντα πριν κάνουμε οτιδήποτε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του κώδικα μας. Μετά από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πατώντας το Ctrl + F ανοίγει στο κάτω μέρος του browser ένα ψαχτήρι. Με αντιγραφή και επικόλληση (copy – paste) μέσα στο ψαχτήρι του παρακάτω κώδικα:

body { background:$bgcolor;

μπορούμε να βρούμε εύκολα σε πιο σημείο του κώδικα του template βρίσκεται αυτό το κομμάτι. Αμέσως μετά το παρακάτω κομμάτι κώδικα:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small «Trebuchet MS», Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

κάνουμε αντιγραφή – επικόλληση (copy – paste) τον παρακάτω κώδικα:

body {
background-color:#B38481;
background-image: url(your image ‘s adress);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

ή αν προτιμάτε τον κώδικα σε μια γραμμή:

body {
background:#B38481 url(
your image ‘s adress) no-repeat center center fixed;

Όπου υπάρχει κόκκινο χρώμα πρέπει να αντικατασταθεί με τη διεύθυνση όπου βρίσκεται η εικόνα που θέλετε να βάλετε. Οι παρενθέσεις παραμένουν.
Στον παραπάνω κώδικα που προσθέσαμε μπορούμε να πειράξουμε τις τιμές. Για παράδειγμα στο background-color μπορούμε να βάλουμε όποιο χρώμα θέλουμε με έναν color generator ή μέσα από το blogspot, μια διαδικασία που την ανάρτησα στο παρελθόν και μπορείτε να τη δείτε κάνοντας κλικ εδώ.
Στο background-repeat αν βάλουμε repeat αντί του no-repeat η εικόνα που βάλαμε θα επαναλαμβάνεται.
Στο background-position μπορούμε να καθορίσουμε για το σημείο όπου θα εμφανίζεται η εικόνα. Οι τιμές που μπορούμε να βάλουμε είναι οι παρακάτω: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right (πάνω αριστερά, πάνω κέντρο, πάνω δεξιά κ.ο.κ.).
Στο background-attachment αν έχουμε την τιμή fixed τότε η εικόνα παραμένει σταθερή και γίνεται κύλιση (scroll) μόnο στο κείμενο και στα υπόλοιπα (widgets κλπ.) Αν αντί για fixed βάλουμε default τότε η κύλιση κειμένου και εικόνας θα γίνεται ταυτόχρονα.
Θα πρέπει όμως σε όλα αυτά να συνυπολογίσουμε και το μέγεθος της εικόνας. Για να φτάσουμε σε ένα επιθυμητό αποτέλεσμα καλό θα είναι να έχουμε εγκατεστημένο πρόγραμμα επεξεργασίας στο pc μας. Το πιο γνωστό είναι το Photoshop αλλά υπάρχουν και πολλές δωρεάν λύσεις στο internet (κλικ). Με ένα τέτοιο πρόγραμμα μπορούμε να πειραματιστούμε στο μέγεθος της εικόνας που θα βάλουμε ως background στο blog μας.
Όταν τελειώσουμε απ’ όλα θα πρέπει να πάμε από τον πανόπτη στη διάταξη και από εκεί γραμματοσειρές και χρώματα για να κάνουμε όποιες αλλάγές θέλουμε έτσι ώστε τα κείμενα μας και οτιδήποτε άλλο αναγράφεται στο blog μας να είναι ευανάγνωστα. Πολλές φορές τα χρώματα από τις εικόνες που είναι background δυσκολεύουν την ανάγνωση των κειμένων και αυτό είναι αρνητικό ως προς την επισκεψιμότητα του ιστολογίου μας. Θα πρέπει να είμαστε πολύ προσεκτικοί ως προς την επιλογή της εικόνας από άποψη σύνθεσης αυτής, χρώματα που διαθέτει και σχέδια για να μην μετατραπεί σε αρνητικό στοιχείο.
Ελπίζω να σας βοήθησα. Έφτιαξα ένα δοκιμαστικό blog για να δείτε περίπου πως είναι. Απλά κάντε κλικ εδώ.

 
 

ΠΡΟΣΘΗΚΗ ΔΙΑΧΩΡΙΣΤΙΚΗΣ ΓΡΑΜΜΗΣ ΑΝΑΜΕΣΑ ΣΤΑ ΣΧΟΛΙΑ

Πολλές φορές όταν διαβάζουμε τα σχόλια σε ένα blog μπερδευόμαστε, ιδιαίτερα όταν είμαστε κουρασμένοι και όταν το template του blog είναι μονόχρωμο όπως τα minima templates του blogspot. Μπορούμε να βάλουμε μια διαχωριστική γραμμή ανάμεσα στα σχόλια έτσι ώστε να ξεχωρίζουν ευκολότερα που αρχίζουν και που τελειώνουν. Η όλη διαδικασία κρατάει λίγα λεπτά.
Μπαίνουμε στο λογαριασμό μας και από τον πανόπτη πάμε διάταξη και επεξεργασία HTML. Πριν προχωρήσουμε παίρνουμε ένα αντίγραφο ασφαλείας (back up) του template μας για κάθε ενδεχόμενο. Μετά πατάμε Control και F (Ctrl+F) για να ανοίξει το ψαχτήρι στο κάτω μέρος της σελίδας. Πληκτρολογήστε: #comments-block .comment-footer { όσοι χρησιμοποιείτε minima templates και όσοι δε χρησιμοποιείτε minima πληκτρολογείστε .comment-footer {. Αυτόματα θα εμφανιστεί τονισμένο με χρώμα το κομμάτι του κώδικα που βάλαμε στο ψαχτήρι μας. Στην αμέσως επόμενη σειρά κάνουμε αντιγραφή επικόλληση (copy – paste) αυτό: border-bottom:1px dotted $bordercolor; Εμφανίζει μια λεπτή γραμμή ανάμεσα στα σχόλια. Αν δεν ικανοποιείστε από το αποτέλεσμα αντικαταστήστε το με αυτό: border-bottom:2px solid #736AFF; (προσωπικά το προτιμώ). Αυτό το κομμάτι του κώδικα κάνει τη γραμμή πιο έντονη και μπορείτε να αλλάξετε το χρώμα της απλά αλλάζοντας τον κωδικό χρώματος που είναι με κόκκινο χρώμα. Για το πως βρίσκουμε τους κωδικούς του κάθε χρώματος κάντε κλικ εδώ ή ψάξτε στο internet για color generators.
Αν η διαχωριστική γραμμή φαίνεται να είναι πολύ κοντά ή πολύ μακριά από το σχόλιο τότε βρείτε το παρακάτω κομμάτι του κώδικα ή αν δεν υπάρχει προσθέστε το εσείς: padding:0 0 1px 0; όπως βλέπετε έχει τέσσερις τιμές. Η πρώτη είναι για κενό από πάνω, η δεύτερη για κενό από δεξιά, η τρίτη για κενό από κάτω και η τέταρτη για κενό από αριστερά. Για παράδειγμα το 1px σημαίνει ότι αυξήσαμε το κενό από κάτω. Αλλάζοντας τις τιμές αλλάζει και η θέση της διαχωριστικής γραμμής. Πάντως δεν είναι απαραίτητο αυτό το τελευταίο για να δουλέψει το trick. Πατήστε αποθήκευση (save) και μπείτε στο blog σας για να δείτε τα αποτελέσματα. Καλή επιτυχία! 🙂

 
Σχολιάστε

Posted by στο Απρίλιος 3, 2009 in BLOG, BLOGGER, BLOGSPOT, BORDERS, TEMPLATE, TUTORIALS

 

ΠΡΟΣΘΗΚΗ ADMIN CONTROL PANEL ΣΤΟ TEMPLATE

Καλό μήνα σε όλους και σε όλες. Πως θα σας φαινόταν αν είχατε ένα control panel στο blog σας το οποίο θα είναι ορατό μόνο σε εσάς όταν κάνετε login και όταν κάνετε logout αυτό να είναι αόρατο; Ποια η χρησιμότητα του; Μα φυσικά να έχετε τον έλεγχο του blog σας πιο άμεσα και να ολοκληρώνετε τις δουλειές σας γρηγορότερα. Με ένα κλικ θα μπορείτε να γράφετε ανάρτηση, να πειράζετε τον κώδικα και ότι άλλο θέλετε. Το admin control panel θα εμφανίζεται στο blog σας πάνω δεξιά μόνο όταν έχετε μπει στο λογαριασμό σας.
Πάμε πανόπτης, διάταξη και επεξεργασία HTML. Παίρνουμε ένα αντίγραφο ασφαλείας (back up) και με το Ctrl+F βρίσκουμε το παρακάτω κομμάτι κώδικα:

<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>

Ακριβώς πάνω από αυτή τη γραμμή κώδικα κάνουμε αντιγραφή – επικόλληση (copy – paste) τον παρακάτω κώδικα:

<span class=’item-control blog-admin’> <h2>Admin Control Panel</h2> <a href=’http://www.blogger.com/post-create.g?blogID=BlogIdNumber’>New Post</a> | <a href=’http://draft.blogger.com/blog-options-basic.g?blogID=BlogIdNumber’>Settings</a&gt; | <a href=’http://www.blogger.com/rearrange?blogID=BlogIdNumber’>Change Layout</a> | <a href=’http://www.blogger.com/html?blogID=BlogIdNumber’>Edit HTML</a> | <a href=’http://www.blogger.com/moderate-comment.g?blogID=BlogIdNumber’>Moderate Comments</a> | <a href=’http://www.blogger.com/logout.g’>Sign Out</a> </span>

Στον κώδικα που μόλις κάναμε επικόλληση πρέπει να αντικαταστήσουμε όπου λέει BlogIdNumber με τον μοναδικό αριθμό του blog σας ο οποίος ονομάζεται BlogID και τον βρίσκουμε πολύ εύκολα αρκεί να είμαστε μέσα στον blogspot λογαριασμό μας (δηλαδή να έχουμε κάνει login) και να δούμε τη μπάρα διευθύνσεων. Έιναι ο αριθμός μετά το blogID=. Δείτε το παρακάτω screenshot:

Μόλις τελειώσετε με την τοποθέτηση του blogID πατήστε αποθήκευση (save). Το admin control panel δεν είναι ορατό στην προεπισκόπηση. Μπήτε μέσα στο blog σας χωρίς να αποσυνδεθείτε από το blogspot και θα δείτε πάνω δεξιά το admin control panel που θα μοιάζει σαν το παρακάτω screenshot:

Αν αποσυνδεθείτε από τον λογαριασμό σας και ξαναπάτε στο blog σας θα δείτε ότι το admin control panel δεν εμφανίζεται. Με λίγα λόγια πρόσβαση σ’ αυτό έχει μόνο ο ιδιοκτήτης του blog όταν έχει κάνει login. Καλή επιτυχία.

 
6 Σχόλια

Posted by στο Φεβρουαρίου 2, 2009 in ADMIN, CONTROL, HTML, PANEL, TEMPLATE