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

Σάββατο 7 Νοεμβρίου 2009

ΤΡΟΠΟΠΟΙΗΜΕΝΟ ΤΡΙΣΤΗΛΟ 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' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<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: 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' style='border:0' width='125'/></a>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4aea216727a9a258' 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' 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'/>
    </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'/>
    </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' 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' 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>



Αναρτήθηκε από στις 7 σχόλια:
Ετικέτες , , ,

Κυριακή 7 Ιουνίου 2009

ΦΩΤΟΓΡΑΦΙΕΣ ΓΙΑ 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 για να δείτε περίπου πως είναι. Απλά κάντε κλικ εδώ.
Αναρτήθηκε από στις 11 σχόλια:
Ετικέτες , , , , , , ,
Εγγραφή σε: Αναρτήσεις (Atom)