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

Σάββατο 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>



Παρασκευή 3 Απριλίου 2009

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

Πολλές φορές όταν διαβάζουμε τα σχόλια σε ένα 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 σας για να δείτε τα αποτελέσματα. Καλή επιτυχία! :-)

Τετάρτη 1 Απριλίου 2009

ΠΡΟΣΘΗΚΗ SCROLLBOX

Πολλοί είναι αυτοί που θα ήθελαν να κάνουν προσθήκη ενός scrollbox είτε μέσα σε μια ανάρτηση είτε στη sidebar. Δεν χρειάζεται να γνωρίζει κάποιος προγραμματισμό για να το κάνει. Υπάρχει η αστείρευτη πηγή γνώσης και ευκολίας που ονομάζεται internet.
Το μόνο που έχετε να κάνετε είναι να επισκευτείτε έναν ιστότοπο κάνοντας κλικ εδώ. Τα πράγματα είναι απλά. Δώστε τις διαστάσεις, τα χρώματα και το μέγεθος του scrollbox που θέλετε, γράψτε το κείμενο ή τον κώδικα στο πρώτο πλαίσιο και όταν τελειώσετε μπορείτε να δείτε τον κώδικα του scrollbox στο δεύτερο πλαίσιο τον οποίο πρέπει να τον κάνετε copy - paste (αντιγραφή επικόλληση) στο blog σας είτε σε μορφή gadget είτε μέσα σε μια ανάρτηση σας. Δείτε το παρακάτω παράδειγμα για να καταλάβετε καλύτερα:

MY BLOGS

ΔΙΑΔΩΣΤΕ ΤΗ ΓΝΩΣΗ
SPREAD THE KNOWLEDGE
LOCUS BLOGUS
http://locusblogus.blogspot.com

ΘΕΜΑ
http://hackaday-thema.blogspot.com

CYGLOBE
http://cyglobe.blogspot.com

..................................
..................................
..................................
..................................
..................................
..................................
..................................


Σε περίπτωση που θέλετε να κάνετε προσθήκη ενός scrollbox σε μια ανάρτηση σας και θέλετε να βρίσκεται στο κέντρο το μόνο που έχετε να κάνετε είναι να βάλετε στην αρχή του κώδικα (πριν το <div style...) το <center> και στο τέλος (μετά το </div>) πρέπει να βάλετε το </center> Καλή επιτυχία σε όλους!!!

Τρίτη 24 Μαρτίου 2009

ΠΡΟΣΘΗΚΗ LINK ΕΚΤΥΠΩΣΗΣ ΜΕ ΕΙΚΟΝΙΔΙΟ ΣΤΟ BLOG

Πως θα σας φαινόταν αν μπορούσατε να δώσετε τη δυνατότητα στους αναγνώστες σας να εκτυπώνουν τα post σας με ένα κλικ; Η όλη διαδικασία δεν είναι ιδιαίτερα δύσκολη. Πάμε να δούμε πως γίνεται.
Μπαίνουμε στο λογαριασμό του blogspot και από εκεί πάμε πανόπτης, διάταξη και επεξεργασία HTML. Πρώτα κρατάμε ένα αντίγραφο ασφαλείας (back up) σε περίπτωση που συναντήσουμε κάποιο πρόβλημα. Μετά πληκτρολογούμε Control και F (CTRL + F) για να ανοίξει το ψαχτήρι μας στο κάτω μέρος της οθόνης. Πληκτρολογούμε στο ψαχτήρι μας </head> και αμέσως θα δούμε στον κώδικα μας τονισμένο με πράσινο χρώμα το κομμάτι που πληκτρολογήσαμε προηγουμένως. Αμέσως πριν από αυτό κάνουμε αντιγραφή επικόλληση (copy - paste) το παρακάτω κομμάτι κώδικα:

<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>

Πατάμε αποθήκευση (save) και μετά κάνουμε κλικ στο κουτάκι που βρίσκεται δίπλα στην Επέκταση προτύπων γραφικών στοιχείων. Μετά στο ψαχτήρι μας πληκτρολογούμε: <p><data:post.body/></p> ή αν δε βρεθεί το παρακάτω κομμάτι του κώδικα πληκτρολογούμε: <data:post.body/> και αν δε μας ικανοποιεί ούτε αυτό τότε ψάχνουμε για το: <a expr:name='data:post.id'/> (προτείνεται) και θα δούμε στον κώδικα μας τονισμένο με πράσινο χρώμα το κομμάτι που πληκτρολογήσαμε προηγουμένως. Αμέσως πριν από αυτό το κομμάτι κάνουμε αντιγραφή - επικόλληση (copy - paste) το παρακάτω κομμάτι κώδικα:

<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>

Πατήστε αποθήκευση (save). Όταν βρίσκεστε στο blog σας για να δείτε το εικονίδιο και το link για την εκτύπωση πρέπει να μπείτε σε ένα post, δηλαδή αν κάνετε κλικ στον τίτλο ενός post θα δείτε το εικονίδιο και το link για την εκτύπωση. Κάντε κλικ και θα δείτε. Εννοείται ότι βασική προϋπόθεση είναι η ύπαρξη εκτυπωτή. Αν κάνετε μια εκτύπωση ενός post σας θα δείτε ότι εκτυπώνεται μόνο το post και όχι οι sidebars και τα υπόλοιπα στοιχεία του blog σας. Για να καταλάβετε καλύτερα δείτε το παρακάτω screenshot. Καλό, ε; Καλή επιτυχία.

Τετάρτη 25 Φεβρουαρίου 2009

ΚΑΝΤΕ ΠΙΟ ΚΑΛΑΙΣΘΗΤΟ ΤΟ BLOG ΣΑΣ

Σε αυτή την ανάρτηση θα δούμε πως μπορούμε να κάνουμε πιο καλαίσθητο το blog μας. Μπορείτε να εγκαταστήσετε ένα ψηφιακό ενυδρείο στο blog σας (αυτό συστήνεται για blogs που οι διοκτήτες τους είναι παιδιά και όσοι νιώθουν παιδιά). Το μόνο που έχετε να κάνετε είναι να μπείτε στο λογαριασμό σας στο blogspot και από εκεί πάτε πανόπτης, διάταξη, προσθήκη gadget και HTML/JavaScript και κάντε αντιγραφή επικόλληση (copy - paste) στο pop up παράθυρο τον παρακάτω κώδικα και πατήστε αποθήκευση (save).

<object type="application/x-shockwave-flash" data="http://widgets.clearspring.com/o/48cfe5b37f644537/49a5c70407a4e3fe/48cfe5b37f644537/a072c174/-cpid/e76ce0ea4e02f1b9" id="W48cfe5b37f64453749a5c70407a4e3fe" width="500" height="350"><param name="movie" value="http://widgets.clearspring.com/o/48cfe5b37f644537/49a5c70407a4e3fe/48cfe5b37f644537/a072c174/-cpid/e76ce0ea4e02f1b9" /><param name="wmode" value="transparent" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /></object>

Αν θέλετε να αλλάξετε τον αριθμό των ψαριών ή το χρώμα αυτών επισκευτείτε τη σελίδα κάνοντας κλικ εδώ και πατήστε το κουμπί edit. Για να αλλάξετε τις διαστάσεις στο ενυδρείο αλλάξτε τις τιμές στο height και width που είναι τονισμένα με κόκκινο χρώμα στον παραπάνω κώδικα. Το αποτέλεσμα θα είναι όπως παρακάτω. Βάλτε τον κέρσορα του ποντικιού σας πάνω στο ενυδρείο και δείτε τα ψάρια να τον ακολουθούνε. Κάντε κλικ στο ενυδρείο για να δώσετε τροφή στα ψάρια.



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

Αν σας ενδιαφέρουν αυτά τα κουμπιά μπορείτε να τα κατεβάσετε από εδώ. Προτείνονται για ανοιχτόχρωμα templates. Θα βρείτε κουμπιά για τα digg, facebook, twitter, rss, delicius και πολλά άλλα.
Τέλος να σας προτείνω το PuttingBlogsFirst στο οποίο μπορείτε να βρείτε διάφορα κόλπα για τα blogs σας κάνοντας κλικ εδώ και εδώ.

Πέμπτη 19 Φεβρουαρίου 2009

ΑΥΤΟΜΑΤΗ ΚΥΛΙΣΗ ΣΕΛΙΔΩΝ

Σήμερα θα δούμε ένα κολπάκι που θα βοηθάει τους αναγνώστες μας να έχουν λυμμένα τα χέρια τους όταν διαβάζουν τις αναρτήσεις μας. Αντί να είναι το ένα χέρι μονίμως στο ποντίκι και να κατεβαίνουν σιγά - σιγά στο blog μας μια φορά αρκεί να κάνουν κλικ στο βελάκι δεξιά στη scroll down μπάρα και η σελίδα μας θα κατεβαίνει αυτόματα. Δείτε το παρακάτω screenshot για να καταλάβετε (κλικ στην εικόνα για να τη δείτε σε μεγέθυνση).


Μπείτε στο λογαρισμό σας και πάτε πανόπτης, διάταξη και επεξεργασία HTML. Πατήστε το Control και F (Ctrl+F) για να ανοίξει στο κάτω μέρος της οθόνης το ψαχτήρι και μέσα στο πλαίσιο αυτού πληκτρολογήστε: </body>
Θα δείτε ότι μέσα στον κώδικα του template σας εμφανίζει αυτό που πληκτρολογήσαμε στο ψαχτήρι χρωματισμένο. Ακριβώς μια γραμμή παραπάνω κάνουμε κλικ και πατάμε enter για να δημιουργηθεί μια κενή γραμμή πριν το </body> και σ' αυτή τη γραμμή κάνουμε αντιγραφή - επικόλληση (copy - paste) τον παρακάτω κώδικα:

<script language="JavaScript1.2">

//change 1 to another integer to alter the scroll speed. Greater is faster
var speed=1
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}

function iecompattest(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}

function scrollwindow(){
if (document.all)
temp=iecompattest().scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp

Πατήστε αποθήκευση (save) και τέλος. Πως δουλεέυει; Απλά αν κάνετε μια φορά κλικ στο κάτω βελάκι της κυλιόμενης μπάρας ή αν με το ποντίκι τραβήξετε την κυλιόμενη μπάρα προς τα κάτω αυτό ξεκινάει και κατεβάζει τη σελίδα σας. Για να το σταματήσετε πατήστε το πάνω βελάκι της κυλιόμενης μπάρας ή τραβήξτε με το ποντίκι την κυλιόμενη μπάρα προς τα πάνω. Κάντε κλικ εδώ για να δείτε πως δουλεύει. Καλή επιτυχία.

Κυριακή 15 Φεβρουαρίου 2009

ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΡΟΣΘΗΚΗ ANIMATED TEXT BANNER

Σήμερα θα σας δείξω πως μπορούμε να βάλουμε ένα κινούμενο banner. Ονομάζεται scrolling or marqee text, δηλαδή το κείμενο του banner κινείται από πάνω προς τα κάτω ή το αντίθετο ή από αριστερά προς τα δεξιά και το αντίθετο. Πρώτα πρέπει αν καταλάβουμε πως δουλεύει ο κώδικας έτσι ώστε να τον φέρουμε στα μέτρα μας.
Το κείμενο του banner πρέπει να περικλείεται από δύο tags. Το opening tag και το closing tag. Δείτε το παρακάτω παράδειγμα:

<opening tag> Το κείμενο σας </closing tag>

Ο κώδικας για το scrolling or marqee text banner πρέπει να μοιάζει με τον παρακάτω:

<marquee>Το κείμενο σας - Demo</marquee>

Αν προσθέσετε τον παραπάνω κώδικα στο blogspot θα δείτε ένα demo κείμενο σε άσπρο φόντο (background) και ακίνητο. Εμείς πρέπει να προσθέσουμε στον κώδικα χρώμα φόντου, ταχύτητα που κινείται το κείμενο, κατεύθυνση κειμένου, διαστάσεις banner. Για να προσθέσουμε όλα τα παραπάνω είναι ιδιαίτερα εύκολο, απλά θέλει λιγάκι προσοχή. Για παράδειγμα, για να βάλουμε κατεύθυνση κειμένου πρέπει να προσθέσουμε στον κώδικα το παρακάτω:
direction="right"

Το παραπάνω πρέπει να προστεθεί μετά το opening tag που στην περίπτωση μας είναι το <marquee> Ο κώδικας του banner θα πρέπει να δείχνει κάπως έτσι:

<marquee direction="right">Το κείμενο σας - Demo</marquee>

Με τον ίδιο τρόπο προσθέτουμε και τα υπόλοιπα στοιχεία, values στα αγγλικά, (χρώμα φόντου, ταχύτητα που κινείται το κείμενο, διαστάσεις banner) στον κώδικα. Ας προσθέσουμε χρώμα φόντου. Το στοιχείο που θα προσθέσουμε είναι της μορφής bgcolor="#FF00FF" (όπου #FF00FF είναι το χρώμα). Να θυμάστε ότι πάντα προσθέτουμε τα values μετά το opening tag που στην περίπτωση μας είναι το <marquee> Ο κώδικας θα πρέπει να μοιάζει με τον παρακάτω:

<marquee bgcolor="#FF00FF" direction="right">Το κείμενο σας - Demo</marquee> Με τον ίδιο τρόπου βάζουμε και τα υπόλοιπα στοιχεία του βαννερ μας. Παρακάτω έχω ένα πίνακα με τα στοιχεία που μπορείτε να προσθέσετε και μια μικρή επεξήγηση του καθενός.

The Value

ΕΠΕΞΗΓΗΣΗ

direction="left" Κάνει το κείμενο να κινείται προς τα αριστερά.
direction="right" Κάνει το κείμενο να κινείται προς τα δεξιά.
direction="up" Κάνει το κείμενο να κινείται προς τα πάνω.
direction="down"
Κάνει το κείμενο να κινείται προς τα κάτω.
behavior="alternate" Κάνει το κείμενο να κινείται προς τα δεξιά και μόλις φτάσει στο τέλος της διαδρομής του το κείμενο αλλάζει κατεύθυνση (προς τα αριστερά) και επιστρέφει στην αρχή.
behavior="slide" Κάνει το κείμενο να σταματάει μόλις φτάσει στο τέλος της διαδρομής του.
loop="4" Αν θέλετε να ελέγχετε πόσες φορές θα εμφανιστεί το κείμενο στο banner προσθέστε αυτό το value και αλλάξτε τον αριθμό (4) στον επιθυμητό από εσάς.
scrollamount="2" Με αυτό το value ελέγχετε την ταχύτητα που κινείται το κείμενο. Το 1 είναι αργό, το 2 γρηγορότερο και τα 3, 4, 5 ακόμη γρηγορότερα. Όσο μεγαλύτερο αριθμό βάλετε τόσο αυξάνεται η ταχύτητα με την οποία κινείται το κείμενο.
width="400" Με αυτό ελέγχετε το πλάτος του banner. Όσο μεγαλύτερη τιμή τόσο φαρδύτερο το banner.
height="66" Με αυτό ελέγχετε το ύψος του banner. Όσο μεγαλύτερη τιμή τόσο ψηλότερο το banner.
onmouseover="this.stop()" onmouseout="this.start()" Με αυτό το value καθορίζουμε το κείμενο να σταματάει όταν πάνω στο banner βρίσκεται ο δείκτης από το ποντίκι και όταν το απομακρύνουμε να συνεχίσει να κινείται το κείμενο.
bgcolor="#9999CC" Με αυτό αλλάζουμε το χρώμα του φόντου (background). Θα σας δείξω αργότερα πως βρίσκουμε την κωδική ονομασία του επιθυμητού χρώματος.
style="color: #FF0000" Με αυτό αλλάζουμε το χρώμα της γραμματοσειράς. Θα σας δείξω αργότερα πως βρίσκουμε την κωδική ονομασία του επιθυμητού χρώματος.
style="font-size: 1em" Με αυτό αλλάζουμε το μέγεθος της γραμματοσειράς.
style="font-family: Tahoma" Με αυτό αλλάζουμε τη γραμματοσειρά.
style="font-size: 12pt; color:
#800000; font-family: Tahoma"
Με αυτόν το τρόπο μπορούμε να προσθέσουμε στον κώδικα του banner τα values και να αλλάξουμε τη γραμματοσειρά, το μέγεθος αυτής και το χρώμα αυτής.

Αν θέλετε να βάλετε links αντί για κείμενο θα πρέπει να ανάμεσα στα opening tags να βάλετε τον παρακάτω κώδικα:

<a href="Link URL">Link Title</a>

Αν θέλετε και κείμενο και link απλά μέσα στο κείμενο βάλτε τον παραπάνω κώδικα και όπου Link URL είναι η διεύθυνση που θέλετε να βάλετε και όπου Link Title είναι ο τίτλος για το link.
Ένας demo κώδικας για animated banner που φτιάξαμε είναι ο παρακάτω:

<marquee direction="Up" scrollamount="8" width="318" style="font-size: 12pt;
color: #800000; font-family: Tahoma" height="66" bgcolor="#FFCC99">Το κείμενο σας - Demo</marquee>

Το αποτέλεσμα είναι το παρακάτω:
Το κείμενο σας - Demo
Όταν δημιουργήσετε τον κώδικα του banner σας η προσθήκη αυτού είναι εύκολη υπόθεση. Πάτε πανόπτης, διάταξη, προσθήκη gadget και HTML/JavaScript και πατάτε αποθήκευση (save).
Σχετικά με το πως βρίσκουμε τις κωδικές ονομασίες των χρωμάτων για να αλλάξουμε το όνομα της γραμματοσειράς ή το χρώμα του φόντου είχα περιγράψει έναν τρόπο στο post για την προσθήκη animated cloud. Ας τον επαναλάβουμε:
Για να αλλάξουμε χρώμα στο φόντο ή τη γραμματοσειρά πρέπει να αλλάξουμε την παράμετρο #ffffff. Πώς όμως; Πρέπει να ανοίξουμε άλλο ένα παράθυρο εργασίας στον browser και να μπούμε πάλι στο λογαριασμό μας και από εκεί πάμε πανόπτης, διάταξη και γραμματοσειρές και χρώματα. Εκεί μπορούμε να δούμε τον κωδικό των χρωμάτων φόντου και γραμματοσειρών. Δείτε την παρακάτω φωτογραφία (κλικ για μεγέθυνση): Στα δεξιά βλέπετε τον κωδικό χρώματος που στην προκειμένη περίπτωση είναι το άσπρο. Εσείς στον κώδικα πρέπει να βάλετε τον κωδικό του χρώματος του template σας.

Άλλος τρόπος είναι να ψάξουμε μέσω της Google για free color generator. Ένα free download code generator μπορείτaι να κάνετε από εδώ. Καλή επιτυχία!

Τρίτη 27 Ιανουαρίου 2009

ΨΑΧΤΗΡΙ 4 ΣΕ 1

Τα ψαχτήρια ή μηχανές αναζήτησης (search engines) είναι πολύ διαδεδομένα στα blogs και στα web sites. Πολλές φορές θέλουμε να κάνουμε αναζητήσεις μόνο στο blog μας, άλλες φορές στη google, άλλες φορές στο technorati και άλλες φορές στο blogspot. Αυτό σημαίνει ότι πρέπει να μπαινοβγαίνουμε σε σελίδες και να χάνουμε πολύ χρόνο. Υπάρχει τρόπος να τα έχουμε όλα σε ένα. Και μάλιστα στο blog μας.
Μπαίνουμε στο λογαριασμό μας και πάμε πανόπτης, διάταξη, προσθήκη gadget και στο παράθυρο που ανοίγει διαλέγουμε HTML/JavaScript. Εκεί μέσα βάζουμε τον παρακάτω κώδικα με αντιγραφή - επικόλληση (copy - paste):

<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogspot</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://yourblog.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="15" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="yourblog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="yourblog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="yourblog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>

Όποιο κομμάτι (yourblog) του κώδικα έχω τονισμένο (bold) το αντικαθιστάτε με τη διεύθυνση του blog σας. Το πρώτο που είναι τονισμένο (το here) αν θέλετε το αφήνετε έτσι αν όχι μπορείτε να βάλετε το όνομα του blog σας. Πατήστε αποθήκευση (save). Μετά πάμε πάλι στον πανόπτη και από εκεί διάταξη και επεξεργασία HTML. Πατώντας το Ctrl+F βρίσκουμε το παρακάτω κομμάτι του κώδικα:
body {
και βλέπουμε ακριβώς από πάνω του να λέει:

/* Use this with templates/template-twocol.html */

Ακριβώς πάνω από το τελευταίο κάνουμε κλικ με το ποντίκι και πατάμε μια φορά το enter για να κάνουμε χώρο και κάνουμε αντιγραφή επικόλληση τον παρακάτω κώδικα:

/** css for the search box */
div#pm-search ul { /* unordered list */
margin-top: 0;
margin-right: 0;
margin-left: 0px;
margin-bottom: 5px;
padding: 0;
}
div#pm-search li { /* each list element */
list-style-type: none; /* don't edit this */
display: inline; /* don't edit this */
cursor: pointer; /* don't edit this */
margin-top: 0;
margin-bottom: 0;
margin-right: 5px;
margin-left: 0px;
text-indent: 0px;
padding: 0;
}
div#pm-search form { /* the search form */
margin: 0;
padding: 0;
}
div#pm-search-h {
display: block; /* don't edit this */
}
div#pm-search-g,
div#pm-search-b,
div#pm-search-t {
display: none; /* don't edit this */
}
div#pm-search input { /* the textbox and submit button */
background-color: transparent;
border: 1px dotted #999;
color: #999;
}
.pm-search-selected { /* which search service is currently selected */
color: #999;
border-bottom: 1px dotted #999;
}
.pm-search-unselected { /* which search services are not selected */
color: #777;
border-bottom: 1px dotted #777;
}

Το τελευταίο στάδιο είναι να προσθέσουμε και ένα κομμάτι JavaScript. Βρίσκουμε με το ψαχτήρι μας στο κάτω μέρος της σελίδας το κομμάτι του κώδικα:

</b:skin>

Κάντε κλικ δίπλα σ' αυτό το κομμάτι και πατήστε μια φορά enter για να δημιουργηθεί μια κενή σειρά από κάτω του. Εκεί θα κάνουμε αντιγραφή επικόλληση τον παρακάτω κώδικα:

<script type='text/javascript'>
//<![CDATA[

/***********************************************
* Javascript functions for the search box
* made by PurpleMoggy :)
* http://purplemoggy.blogspot.com/
***********************************************/
var search_which_one = "pm-f-h";
function selectH() {
document.getElementById('li-h').className = 'pm-search-selected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'block';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-h').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-h";
}
function selectG() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-selected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'block';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-g').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-g";
}
function selectB() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-selected';
document.getElementById('li-t').className = 'pm-search-unselected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'block';
document.getElementById('pm-search-t').style.display = 'none';
document.getElementById('pm-f-b').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-b";
}
function selectT() {
document.getElementById('li-h').className = 'pm-search-unselected';
document.getElementById('li-g').className = 'pm-search-unselected';
document.getElementById('li-b').className = 'pm-search-unselected';
document.getElementById('li-t').className = 'pm-search-selected';
document.getElementById('pm-search-h').style.display = 'none';
document.getElementById('pm-search-g').style.display = 'none';
document.getElementById('pm-search-b').style.display = 'none';
document.getElementById('pm-search-t').style.display = 'block';
document.getElementById('pm-f-t').value = document.getElementById(search_which_one).value;
search_which_one = "pm-f-t";
}

//]]>
</script>

Πατήστε προεπισκόπηση για να δείτε τα αποτελέσματα. Αν σας ικανοποιούν πατήστε αποθήκευση (save) και τέλος.Το ψαχτήρι σας θα πρέπει να δείχνει όπως το παρακάτω screenshot. Διαλέγετε εσείς που θέλετε να ψάξετε κάνοντας κλικ, γράφετε στο πλαίσιο της αναζήτησης αυτό που ψάχνετε πατάτε search και τέλος. Καλή επιτυχία.