Hi! Welcome...

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

Τρίτη, Μαρτίου 30

10

Πως να εισάγετε το "Διαβάστε περισσότερα" στο Blogger

Μετά από αρκετά μηνύματα που δέχτηκα από τους αναγνώστες μου ,που ρωτούσαν πως θα βάλουν την δυνατότητα  "Διαβάστε περισσότερα"  η  "Read more" στις αναρτήσεις , πήρα την αφορμή για αυτήν την ανάρτηση  .

Υπάρχουν δυο τρόποι για να εισάγετε ένα "Διαβάστε περισσότερα"  στις αναρτήσεις σας.


Πρώτα απ'ολα σιγουρευτείτε ότι χρησιμοποιήτε το Ενημερωμένο πρόγραμμα επεξεργασίας .
Για να το κάνετε αυτό πηγαίνετε  στο Πρόχειρο Blogger  και κάνετε Login login στο λογαριασμό σας
Από την καρτέλα του Πανόπτη πατάτε  Ρυθμίσεις -> Βασικό

Πλοηγηθείτε  στην σελίδα προς τα κάτω , μέχρι να βρείτε : Γενικές Ρυθμίσεις (Ισχύει για όλα τα ιστολόγιά σας.) 

- Από κάτω ακριβώς, θα δείτε μια επιλογή :  Επιλογή προγράμματος επεξεργασίας ανάρτησης
- Επιλέγετε  το πρώτο : Ενημερωμένο πρόγραμμα επεξεργασίας


  Πατήστε Αποθήκευση ρυθμίσεων

Τώρα πηγαίνετε στην καρτέλα Ανάρτηση -> Νεα Ανάρτηση

 Θα παρατηρήσετε το εικονίδιο  "Εισαγωγή Μεταπήδησης "  στην γραμμή εργαλείων του επιμελητή. Κάντε κλικ στο εικονίδιο αυτό και το "Διαβάστε περισσότερα" θα πρέπει να προστεθεί στο blog σας στη θέση του κέρσορα σας.




Τώρα , όταν θα γράψετε  μια ανάρτηση , επιλέξτε στην ανάρτηση σας το σημείο που θέλετε να χωρίσετε την ανάρτηση σας  και πατήστε το εικονίδιο  "Εισαγωγή Μεταπήδησης " 

Θα φαίνεται κάπως έτσι :


Το κείμενο πάνω από την γραμμή μεταπήδησης θα φαίνεται στην πρώτη σελίδα σας και για να διαβάσετε το υπόλοιπο  κείμενο θα πρέπει να πατήσετε το "Διαβάστε περισσότερα" 



Εάν δεν χρησιμοποιήσετε το νέο επεξεργαστή αναρτήσεων, μπορείτε να εισαγάγετε το "Διαβάστε περισσότερα" με το χέρι , απλά πατήστε   στην Επεξεργασία HTML  και  προσθέστε το  <! - more-> όπου θέλετε να χωρίσετε την ανάρτηση.



Αν θέλετε να αλλάξετε το κείμενο  "Διαβάστε περισσότερα"  σε κάτι άλλο . Κανένα πρόβλημα... Μπορείτε να επεξεργαστείτε το κείμενο "Διαβάστε περισσότερα"  κάνοντας κλικ Διάταξη-> Στοιχεία Σελίδας και στη συνέχεια πατήστε Επεξεργασία   στο κύριος σώμα του blog Αναρτήσεις ιστολογίου


 Θα ανοίξει ένα παραθυράκι " Διαμόρφωση αναρτήσεων ιστολογίου" και εκεί στην δεύτερη σειρά θα δείτε το κείμενο  "Διαβάστε περισσότερα"  , σβηστέ το κείμενο αυτό και γράψτε στην θέση του αυτό που εσείς θέλετε 



Ενημέρωση
: Οι χρήστες που έχουν ιδιαίτερα εξατομικευμένα πρότυπα: Μπορεί να χρειαστεί να επεξεργαστείτε HTML σας για να μπορέσετε να εισάγετε το "Διαβάστε περισσότερα" .
 Κατ 'αρχάς, αποθηκεύετε ένα αντίγραφο ασφαλείας απο το πρότυπό σας,στη συνέχεια, ακολουθήστε τις οδηγίες που σας δίνω παρακάτω :

1. Κάντε log in στο Blogger  λογαριασμό σας
2 . πηγαίνετε  Διάταξη -> Επεξεργασία HTML  και πατήστε στο κουτάκι  -> Επέκταση προτύπων γραφικών στοιχείων 


 Τώρα , πατήστε στο πληκτρολόγιο σας το CTRL+F και στο κουτάκι που θα εμφανιστεί εισάγετε  τον παρακάτω κώδικα και πατήστε Εύρεση


 <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 + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>


Δείτε την εικόνα παρακάτω :




 Κάνετε Αποθήκευση προτύπου ..

Έτοιμο !!!!!!!

Αν θέλετε να αλλάξετε το κείμενο  "Διαβάστε περισσότερα"  , ακολουθήστε τα ίδια βήματα που γράφω παραπάνω !!!

 Στολίστε το link "Διαβάστε περισσότερα" : 

1 . Εικόνα αντί για απλό κείμενο :

Αν θέλετε αντί για απλό κείμενο "Διαβάστε περισσότερα" να χρησιμοποιήσετε μια εικόνα τότε κάνετε το εξής :

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

2 . Τώρα αντικαταστήστε το σημείο με το κόκκινο χρώμα στον κώδικα και  το με τον κώδικα της εικόνας σας :

<img border="0" src="Κολλήστε εδώ το  URL της Εικόνας σας "/>

Δηλαδή έτσι :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img border="0" src="Κολλήστε εδώ το  URL της Εικόνας σας "/></a>
</div>
</b:if>


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

 <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><p align="left"> <img border="0" src="Κολλήστε εδώ το  URL της Εικόνας σας "/> </p> </a>
</div>
</b:if>


Αν θέλετε να φαίνεται δεξιά τότε :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><p align="right"> <img border="0" src="Κολλήστε εδώ το  URL της Εικόνας σας "/> </p> </a>
</div>
</b:if>

Όταν τελειώσετε , πατήστε Προεπισκοπηση και αν είναι όλα εντάξει πατήστε Αποθήκευση .


Αν δεν θέλετε να χρησιμοποιήσετε Εικόνα , όμως θέλετε να φαίνεται σαν Εικόνα ( δείτε το Read More στο πρότυπο μου )  τότε θα κάνετε το εξής :

Για να δημιουργήσετε "ψευτο-κουμπί "  για το κείμενο "Διαβάστε περισσότερα" θα το κάνετε προσθέτοντας  CSS κωδικούς :

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

.jump-link{font-size:12px;}
.jump-link a {

padding: 4px 15px;
background: #8c0311;
color: #fff;
text-decoration: none;
}
.jump-link a:hover {

background-color: #6a010e;
}
 

 #8c0311 - Είναι το χρώμα υπόβαθρου , στην συγκεκριμένη περίπτωση είναι το Κόκκινο 

 #fff - Είναι το χρώμα κείμενου , στην περίπτωση αυτή είναι το Άσπρο  

 #6a010e - Είναι το hover χρώμα υπόβαθρου , δηλαδή το χρώμα υπόβαθρου με το πέρασμα του ποντικιού , στην περίπτωση αυτή είναι το σκούρο Κόκκινο  

Αλλάζετε τα χρώματα ανάλογα με τις ανάγκες σας  , για να δείτε όλο το Χρωματολόγιο πατήστε εδώ  .

Αν θέλετε να δείτε πως θα φαίνεται , απλά δείτε το  Read More στο πρότυπο μου .


Όταν τελειώσετε πατήστε Αποθήκευση !
Read More ►

Σάββατο, Μαρτίου 27

20

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

Tab Widget  (widget πλοήγησης με καρτέλες) είναι ένα widget που πρέπει να υπάρχει σε κάθε blog , γιατί δεν είναι μόνο όμορφα , αλλά είναι και πολύ χρήσιμα  !
Πρώτα απ’ολα εξοικονομεί πολύ  χώρο στην πλαϊνή σας μπάρα και δεύτερων είναι κατά πολύ πιο εύκολος τρόπος να οργανώσετε τα gadget σας .
Υπάρχουν εκατοντάδες διαθέσιμα Tab Widget στο internet , τα οποία περιλαμβάνουν CSS και  javascrpts αλλά αυτό που θα δούμε τώρα  είναι  ο πιο σίγουρος και ο πιο απλός τρόπος να το βάλετε στο blog σας .
Για να το δείτε σε λειτουργία , απλά ρίξτε μια μάτια στην πλαϊνή μπάρα του blog μου , στο “MY STATS” .
Λοιπόν ας ξεκινήσουμε …….

ΟΔΗΓΙΕΣ :


1 . Πηγαίνετε Διάταξη – > Στοιχεία Σελίδας  - > Προσθήκη gadget –> HTML/JavaScript
έπειτα , αντιγράφετε τον παρακάτω κώδικα και τον κολλάτε εκεί
<script type="text/javascript">
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i   = 0;
  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i    = 0;
  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
</script>
<style type="text/css">
div.TabView div.Tabs
{
    height: 24px;
    overflow: hidden;
}
div.TabView div.Tabs a
{
    float: left;
    display: block;
    width:  90px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid black;     border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Serif;
    font-weight: 900;
   color: #000000; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
    background-color:#404040; 
    color: #ffffff; }
div.TabView div.Pages
{
    clear: both;
    border: 1px solid #404040;     overflow: hidden;
}
div.TabView div.Pages div.Page
{
    height: 100%;
    padding: 0px;
    overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
    padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 310px;">
<a>ΟΝΟΜΑ ΤΑΒ 1</a> <a>ΟΝΟΜΑ TΑΒ 2</a> <a>ΟΝΟΜΑ ΤΑΒ 3</a> </div>
<div class="Pages" style="width: 310px; height: 250px;">
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2
</div>
</div>
<div class="Page">
<div class="Pad">
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
    tabview_initialize('TabView');
</script>

2 . Επεξεργαστείτε το ανάλογα με τις ανάγκες σας :
border: 1px solid black;  - είναι το χρώμα και το πάχος περιγράμματος / frame γύρο από τα links του  Tab Widget , το επιλεγμένο χρώμα πλαισίου σε αυτήν την περίπτωση είναι το μαύρο και το πάχος είναι τι 1px
color: #000000;  - είναι το χρώμα της γραμματοσειράς , το προεπιλεγμένο χρώμα είναι το μαύρο 
background-color:#404040;   - είναι το hover χρώμα  του περιγράμματος / frame του Tab Widget , όταν από πάνω  περνάμε το ποντίκι μας
color: #ffffff; - είναι το hover χρώμα της γραμματοσειράς του Tab Widget , όταν από πάνω  περνάμε το ποντίκι μας
border: 1px solid #404040; – είναι το χρώμα περιγράμματος / frame γύρο από το κύριος σώμα του  Tab Widget , το επιλεγμένο χρώμα πλαισίου σε αυτήν την περίπτωση είναι το μαύρο και το πάχος είναι τι 1px
Μπορείτε να αλλάξετε τα χρώματα ανάλογα με τις ανάγκες σας , για να δείτε όλα τα χρώματα πατήστε εδώ 
ΟΝΟΜΑ ΤΑΒ 1, ΟΝΟΜΑ ΤΑΒ 2 , ΟΝΟΜΑ ΤΑΒ 3  - Αντικαταστήστε τα με τους τίτλους των tab σας
ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1 , ΤΑΒ 2 , ΤΑΒ 1 - Εδώ πηγαίνουν οι κωδικοί περιεχομένου σας / widgets, τα οποία μπορει να ειναι  widget πρόσφατων  αναρτήσεων  σας , κάθε γραπτό κείμενο, κλπ….

Για παράδειγμα, μπορείτε να προσθέσετε widget πρόσφατα  σχόλια στην πρώτη καρτέλα, ΟΝΟΜΑ ΤΑΒ 1 θα γίνει  Σχόλια και θα αντικαταστήσετε ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1 με τον κώδικα HTML του widget πρόσφατα  σχόλια .

Καλή επιτυχία σε όλους smile_teeth
Αν έχετε ερώτηση η  κάποιο πρόβλημα , αφήστε τα σχόλια σας !
Read More ►

Τετάρτη, Μαρτίου 24

1

Peacefull FREE BLOGGERTEMPLATE



                                 Preview   Download


Peacefull  είναι ακόμη ένα όμορφο free Blogger Template , το οποίο σας το προσφέρει το Bloggertrics
Ο CSS σχεδιασμός έγινε από  Metamorphosis Design Studio και μετατροπή για blogger έγινε από μένα .
Αυτό το έργο διανέμεται υπό την  Creative Commons Attribution 3.0 License , που σημαίνει ότι είστε ελεύθεροι να χρησιμοποιήσετε , να διανέμετε , να παρουσιάσετε  στο κοινό το Έργο , να το τροποποιήσετε για οποιοδήποτε σκοπό.
Με μόνη προϋπόθεση να μην αφαιρεθούν οι σύνδεσμοι προς δημιουργούς από το footer .
Δε μπορείτε να χρησιμοποιήσετε το έργο αυτό για εμπορικούς σκοπούς.

Γενικές πληροφορίες για αυτό το πρότυπο :

  • 2 στήλες  
  • Fixed Width
  • Left Sidebar 
  • Υποστήριξη Διαθέσιμη
  • Όμορφο θέμα με μεγάλη ωραία εικόνα κεφαλίδας

Οδηγίες ρυθμίσεις :

Για να ρυθμίσετε το menu: 

Απλά βρείτε τον παρακάτω κώδικα στο πρότυπο σας:
  <div id='menu'>
       <ul>
         <li id='button1'><a href='#' title=''>Home</a></li>
         <li id='button2'><a href='#' title=''>Blog</a></li>
         <li id='button3'><a href='#' title=''>Gallery</a></li>
         <li id='button4'><a href='#' title=''>About</a></li>
         <li id='button5'><a href='#' title=''>Contact</a></li>
       </ul>
    </div> 
   Και αλλάξτε τα links με τα δικά σας 

Για να αλλάξετε την εικόνα επικεφαλίδας  : 

Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
#middle_box{
width:900px;
height: 415px;
clear:both;
margin:auto;
background: url(http://i42.tinypic.com/k036vk.jpg);
    background-repeat:no-repeat;
background-position:top center;
} 
Και αλλάξτε το url της εικόνας (http://i42.tinypic.com/k036vk.jpg) , με την εικόνα που εσείς θέλετε .

Αν χρειαστείτε οποιαδήποτε βοήθεια αφήστε το σχόλιο σας Wave
Read More ►

Δευτέρα, Μαρτίου 22

4

10 χρήσιμες επεκτάσεις και Addons για το Google Chrome


  Web browser της Google Chrome δημιουργεί  σταθερά τον χώρο του και  μέχρι στιγμής, οι αντιδράσεις  από τους χρήστες είναι ενθαρρυντικές .


Αυτό το πρόγραμμα περιήγησης δίνει σκληρή μάχη με το  Firefox. Να σας πω την αλήθεια εγώ προσωπικά δεν το είχα σε μεγάλη εκτίμηση , μέχρι που το χρησιμοποίησα δοκιμαστικά και ομολογώ ότι με εξέπληξε ευχάριστα .

Η τέταρτη έκδοση του Google Chrome browser διαθέτει πλέον αρκετές βελτιώσεις και αυξημένες αποδόσεις σε σύγκριση με την προηγούμενη έκδοση  . Τα σημαντικότερα χαρακτηριστικά του είναι η δυνατότητα χρησιμοποίησης επεκτάσεων .

Μέχρι στιγμής υπάρχουν περίπου 1500 διαθέσιμες επεκτάσεις, ενώ η λειτουργία Bookmark Sync επιτρέπει στον χρήστη να συγχρονίσει τους σελιδοδείκτες του σε όλους τους υπολογιστές που τρέχουν Chrome.

Εδώ είναι μια λίστα με μερικά πολύ χρήσιμα πρόσθετα για το πρόγραμμα περιήγησης Google Chrome browser

1 .  Google Chrome Backup

chrome-addon-backup-300x180  
Το Google Chrome Backup είναι ένα μικρό εργαλείο για τη δημιουργία αντιγράφων ασφαλείας, επαναφοράς και να διαχειριστείτε των Google Chrome profiles με ένα κλικ. Το προφίλ κατέχει προσωπικά δεδομένα όπως το ιστορικό, σελιδοδείκτες, κλπ.

2 . Google Mail Checker Plus

12001 Εμφανίζει τον αριθμό των μη αναγνωσμένων μηνυμάτων στο Gmail σας . Μπορείτε να κάνετε προεπισκόπηση των μηνυμάτων σας , να τα διαβάσετε, να τα διαγράψετε και να κάνετε αρχειοθέτηση .

3 . Brizzly




Brizzly κάνει το Twitter και το Facebook  διασκέδαση και πιο εύκολα στη χρήση , επίσης μπορείτε να διαχειριστείτε και τις δυο υπηρεσίες ταυτόχρονα με το Brizzly . Δείτε  και μοιραστείτε τις φωτογραφίες, βίντεο, αναζητήσεις, καταλόγους, και πιο πολλά

4 . Picnik Extension for Chrome




Κάντε λήψη στιγμιότυπων ιστοσελίδων  και επεξεργαστείτε τις εικόνες με ένα κλικ  στον browser σας χρησιμοποιώντας Picnik

5 . Google Translate




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

6 . Firebug Lite




Firebug Lite είναι ένα εργαλείο για την ανάπτυξη Ιστού, που σας επιτρέπει να επεξεργαστείτε και να παρακολουθήσετε  CSS, HTML και  JavaScript  σε οποιαδήποτε ιστοσελίδα.


7 . AdSweep



AdSweep είναι μια παρόμοια εφαρμογή  με το με AdBlock  και επιτρέπει να μπλοκάρουμε τις διαφήμισης στο Google Chrome

8 .  Web2PDFConverter





Μετατρέψτε  οποιαδήποτε ιστοσελίδα σε PDF χρησιμοποιώντας αυτήν την επέκταση

9 . Blog This! (by Google)



Προσθέστε BlogThis κουμπί στη γραμμή εργαλείων του προγράμματος περιήγησης, το οποίο σας επιτρέπει να στέλνετε Blogger blog σας από οποιαδήποτε ιστοσελίδα με ένα μόνο κλικ.

10 .  Google PageRank


1001
Δείχνει το Google rank σελίδας στη γραμμή εργαλείων.

11 . whos.amung.us Users Online Counter



Δείχνει πόσοι άνθρωποι βρίσκονται σήμερα στην ιστοσελίδα σας .

Αν έχετε υπόψιν σας κάποια πρόσθετα που να αξίζουν είστε ευπρόσδεκτοι να τα αναρτησετε στα σχόλια σας .
Read More ►

Δευτέρα, Μαρτίου 15

5

Websnapshot - Για να κάνετε λήψη στιγμιότυπων Thumnails ιστοσελίδων


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

Θα χρειαστεί να το εγκαταστήσετε στον υπολογιστή σας πριν το χρησιμοποιήσετε.
 Websnapshot
Κάντε κλικ στο 'Install now'  εικονίδιο  για να Εγκαταστήστε την εφαρμογή στον υπολογιστή σας.


Websnapshot

Για να κάνετε λήψη στιγμιότυπων , εισάγετε τη διεύθυνση URL του blog σας ή άλλης  ιστοσελίδας  στη μπάρα διευθύνσεων και πατήστε  Snap η κάντε Copy – Paste  URL από τον browser σας.


Κάντε κλικ στο Thumnails για να αποθηκεύσετε . Αν επιλέξετε  Auto Save τα  thumnails αποθηκεύονται  αυτόματα .
Επιλέξτε το είδος των στιγμιότυπων που θέλετε να κάνετε: Thumbnail , μέγεθος Browser, ή Ολόκληρη τη σελίδα.



 Μπορείτε να αλλάξετε το πλάτος και το ύψος των στιγμιότυπων στο παράθυρο « Preferences ».

Κατεβάστε το Websnapshot και αρχίστε να το χρησιμοποιείτε αμέσως αυτό το χρήσιμο εργαλείο .
Read More ►

Παρασκευή, Μαρτίου 12

10

Σχεδιαστής προτύπων - Άλλη μια καινοτομία από το Βlogger in draft

Το Blogger in draft  προσθέτει άλλη μια καινοτομία  στο Blogger και κάνει ένα μεγάλο πρώτο βήμα για τη βελτίωση του , και αναφέρομαι  στο Σχεδιαστής προτύπων .




Με αυτό το εργαλείο Δεν αλλάζουμε  μόνο τα  πρότυπα μας , αλλά μας δίνει  και όλες τις δυνατότητες για να μπορούμε να προσαρμόσουμε την εμφάνιση και τη διάταξη του blog μας.


Να λοιπόν , τι μας προσφέρει  ο Σχεδιαστής προτύπων :

  • 15 νέα, υψηλής ποιότητας προσαρμόσιμα πρότυπα από τους  Template Design Group του blogger και χωρίζονται σε τέσσερις κατηγορίες : Simple, Picture Window, Awesome Inc, and  και Watermark

  • Προσθέτουμε με ένα κλικ  Μια, δύο και  τρεις  στήλες για κάθε πρότυπο, με πλήρη έλεγχο στο μέγεθος και τη διάταξη των στηλών


  • Εκατοντάδες εικόνες φόντου για τα πρότυπα μας από το  iStockphoto, ο μεγαλύτερος microstock για αγορά εικόνας
Δοκιμάστε το τώρα

Πηγαίνετε στο  Blogger in draft για να αρχίσετε να χρησιμοποιείτε τον Σχεδιαστή προτύπων.
Κάντε κλικ στο "Διάταξη για να μεταφερθείτε στην καρτέλα Διάταξης και προς τέλος της σειράς των υπό-καρτελών θα δείτε τον σύνδεσμο για τον Σχεδιαστή Πρότυπων



Μπορείτε να χρησιμοποιήσετε τη ζωντανή προεπισκόπηση για να δείτε το νέο σας πρότυπο , δεν επηρεάζει το Blog σας.



Όταν βρείτε αυτό που σας αρέσει και είστε ικανοποιημένοι με το αποτέλεσμα, απλά πατήστε το κουμπί "Εφαρμογή στο Ιστολογιο " για να το αποθηκεύσετε  .

Σημείωση : Πριν από κάποια αλλαγή κάνουμε πάντα ένα αντίγραφο ασφαλείας από το υπάρχον πρότυπο μας ,  πηγαίνοντας   "Διάταξη"> Επεξεργασία HTML  > Λήψη πλήρους προτύπου

Μικρές συμβουλές 

  • Κάντε τα link σας να ταιριάζoυν με την εικόνα φόντου σας γρήγορα , χρησιμοποιώντας το Ιστορικό πάνελ "Κεντρικό  χρώμα θέματος " για να προσαρμόσει όλα τα χρώματα του blog σας αμέσως. 

  • Δη μιουργήστε τρεις στήλες με ένα κλικ στο footer του blog σας , όπου μπορείτε να βάλετε περισσότερα gadgets

  • Εάν χρησιμοποιείτε νέο χαρακτηριστικό του blogger σελίδες , τότε μπορείτε να διαλέξετε ανάμεσα στα  μοναδικά σχέδια καρτελών που έχει προσθέσει το blogger  σε όλα τα νέα πρότυπα.
  • Μπορείτε να  αλλάξετε το πλάτος της κύριας στήλης η της πλαϊνής στήλης με ένα κλικ  

  • Το Copyright gadget 

Επεξεργαστείτε τις ρυθμίσεις του  για να προσθέσετε πληροφορίες  των πνευματικών δικαιωμάτων σας . Για περισσότερες λεπτομέρειες επισκεφτείτε το επίσημο blog του Blogger in draft have fun with your blog , γιατί τώρα πια το blogging γίνεται διασκέδαση : )
    Read More ►

    1

    Απενεργοποιήστε δεξί κλικ δυνατότητα στο blogger.



    Απενεργοποιήστε δεξί κλικ  δυνατότητα στο blogger.

    Ναι λοιπόν , αν δεν θέλετε να αντιγράφουν το περιεχόμενο  από το blog σας τότε έχετε την λύση πια , μπορείτε να προστατεύσετε τα κείμενα και τις φωτογραφίες σας  με αυτό το μικρο  javascript code .
    Το μόνο που πρέπει να κάνετε είναι απλά να εισάγετε τον παρακάτω  κώδικά στο Html  του Blog σας και έχετε τελειώσει.

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

    Μπορείτε να βάλετε αυτούς τους κωδικούς στο blog σας με 2 τρόπους :

    1ος Τρόπος : Εισάγετε τον κωδικά  στο html του Προτύπου σας  , πάνω από την ετικέτα  </head>


    2ος Τρόπος : Ο πιο απλός τρόπος , εισάγετε τον κώδικα  στην πλαϊνή μπάρα του blog σας η σε οποιοδήποτε σημείο μπορείτε να προσθέσετε  το  Html/Javascript  gadget , απλά πατώντας Προσθήκη gadget  και επιλέγετε Html/Javascript , εισάγετε τον κώδικα και αποθηκεύετε

    Κώδικας με προειδοποιητικό μήνυμα :


    <script language=JavaScript> <!--
    //Disable right mouse click Script
    //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
    //For full source code, visit http://www.dynamicdrive.com
    var message="Αντιγράφεις ?!!!! ΝΤΡΟΠΉ ΣΟΥ !!!!!!";
    ///////////////////////////////////
    function clickIE4(){
    if (event.button==2){
    alert(message);
    return false;
    }
    }
    function clickNS4(e){
    if (document.layers||document.getElementById&&!document.all){
    if (e.which==2||e.which==3){
    alert(message);
    return false;
    }
    }
    }
    if (document.layers){
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=clickNS4;
    }
    else if (document.all&&!document.getElementById){
    document.onmousedown=clickIE4;
    }
    document.oncontextmenu=new Function("alert(message);return false")
    // -->
    </script>

    Μπορείτε να δείτε το Demo εδώ



    Κώδικας χωρίς προειδοποιητικό μήνυμα ( Απλός ) 

    <script language=JavaScript>
    <!--
    //Disable right click script III- By Renigade (renigade@mediaone.net)
    //For full source code, visit http://www.dynamicdrive.com
    var message="";
    ///////////////////////////////////
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
    document.oncontextmenu=new Function("return false")
    // -->
    </script>

    Τώρα μπορείτε άφοβα να δημοσιεύσετε τα κείμενά σας η τις φωτογραφίες σας χωρίς να ανησυχείτε για τους επίδοξους αντιγραφείς !

    Σημείωση : Κανένας κώδικας δεν λειτουργεί με το Opera , έτσι λοιπόν υπάρχει τρόπος να σας αντιγράφουν αν θέλουν  

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

    Τετάρτη, Μαρτίου 10

    0

    Wish Tree-Blogger Template


                                   Preview   Download


    Wish Tree  είναι ένα πανέμορφο ελεύθερο blogger template
    Wordpress πρότυπο απο Wordpress Themes Expert  και μετατροπή για blogger έγινε από μενα

    Αυτό το έργο διανέμεται υπό την Creative Commons Attribution 3.0 License , που σημαίνει ότι είστε ελεύθεροι να χρησιμοποιήσετε , να διανέμετε , να παρουσιάσετε στο κοινό το Έργο , να το τροποποιήσετε για οποιοδήποτε σκοπό.
    Με μόνη προϋπόθεση να μην αφαιρεθούν οι σύνδεσμοι προς δημιουργούς από το footer .

    Δε μπορείτε να χρησιμοποιήσετε το έργο αυτό για εμπορικούς σκοπούς.

    Γενικές πληροφορίες για αυτό το πρότυπο :

     -   2 στήλες  
     -   Fixed Width
     -   Right Sidebar 
     -  Υποστήριξη Διαθέσιμη
     -   Ενσωματωμένο  αυτόματο read more με Thumbnails
     -   Πολύχρωμο θέμα με μεγάλη ωραία εικόνα κεφαλίδας

    Οδηγίες ρυθμίσεις 

      Για να ρυθμίσετε τα Bookmarks :

    1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :





    <div class='Bookmarks'>
    <!-- Bookmarks -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- Stumbleupon -->
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Stumble' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S47djoVmeVI/AAAAAAAAARw/NVtYbW_13Aw/48x48.png'/></a>
    <!-- Delicious -->
    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Delicious' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S47fli8qDaI/AAAAAAAAAR8/dBtdmFnjGb8/delicious_48x48.png'/></a>
    <!-- Reddit -->
    <a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Reddit' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S47eKji-FwI/AAAAAAAAAR0/uIw6lLkUWuU/48x48.png'/></a>
    <!-- Technorati -->
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'><img alt='Technorati' src='http://lh4.ggpht.com/_Q6tRnBVZnko/S47djX7cLJI/AAAAAAAAARs/SjZFsrEeyEk/48x48.png'/></a>
    <!-- Twitthis -->
    <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' target='_blank'><img alt='Twitter' src='http://lh4.ggpht.com/_Q6tRnBVZnko/S47djOoNt4I/AAAAAAAAARo/0HujfvvxPXo/48x48.png'/></a>
    <!-- Digg -->
    <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg it' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S47cyGVDfNI/AAAAAAAAARc/6SQhX94CNQs/48x48.png'/></a>
    <!-- RSS -->
    <a expr:href='&quot;YOUR FEED ADDRESS&quot;' title='Subscribe to Feeds'><img alt='Subscribe to RSS' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S47f93DU59I/AAAAAAAAASQ/QoI5kUjjk7w/rss_48x48.png'/></a>
    </b:if>
    <!--End - -->
    </div>


    2 .  Αλλάξτε το FEED ADDRESS με το δικό σας , δηλαδή όπου  YOUR FEED ADDRESS εισάγετε το url του δικού σας feed .

     Για να ρυθμίσετε το sidemenu :

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

    <div id="menu">
                            <ul>
                                    <!-- CSS Tabs -->
    <li><a href="Home.html">Home</a></li>
    <li><a href="Products.html">Products</a></li>
    <li><a id="current" href="Services.html">Services</a></li>
    <li><a href="Support.html">Support</a></li>
    <li><a href="Order.html">Order</a></li>
    <li><a href="News.html">About</a></li>
                            </ul>
                    </div>
      Και αλλάξτε τα url με τα δικά σας


     Για να ρυθμίσετε το  Post Calendar :

    1 . Πηγαίνετε Ρυθμίσεις -> Διαμόρφωση -> Μορφή Timestamp και επιλεξτε την μορφη :

    " Κυριακή,Μάρτιος 07,2010 "

    Κατεβάστε το και χαρείτε το  
    Αν χρειαστείτε οποιαδήποτε βοήθεια αφήστε το σχόλιο σας
    Read More ►

    Κυριακή, Μαρτίου 7

    5

    3 Τροποι για να κανετε τις φωτογραφιες στο blog σας να ξεχωριζουν με javascript

    Σήμερα θα δούμε μερικούς τρόπους για να κάνουμε τις εικόνες στο blog μας να τραβούν τα βλέμματα και να ξεχωρίζουν  με πολύ απλά βήματα .

    1ος Τρόπος : Reflex.




                                                          Preview         


     Reflex  επιτρέπει να προσθέσετε ένα Cover Flow  αποτέλεσμα στις εικόνες στην  ιστοσελίδα σας. 
    Το script σας επιτρέπει να προσθέσετε μεμονωμένα σύνορα, tiltings και reflections στις εικόνες .

    Λειτουργεί με όλες τις μεγάλες μηχανές αναζήτησης - Mozilla Firefox 1.5 +, Opera 9 +, Safari και IE6 +.

    Για να δώσουμε στις εικόνες μας Cover Flow  αποτέλεσμα κάνουμε τα εξής : 

    Εισάγουμε στο πρότυπο μας πάνω από την ετικέτα </head> τον παρακάτω κώδικα :

    <script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/reflex.js' type='text/javascript'/>

    Και  αποθηκεύετε το πρότυπο σας  .

    Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιήσετε  class "reflex"  ενεργοποίησης . 

    Δείτε ένα παράδειγμα χρήσης :


    <div class="image">
    <img alt="" class="reflex " src="http://2.bp.blogspot.com/_Q6tRnBVZnko/S4lWIYUZL1I/AAAAAAAAALU/d-neTvWfn20/s320/none.jpg" width="200" />
    </div>

     

    class attributes‎


    Μπορείτε επίσης να προσθέσετε διαφορετικά  class attributes‎ για διαφορετικά αποτελέσματα :
    1. Ενεργοποίηση  class "reflex"
    2. διαφοροποιεί την αντανάκλαση με την προσθήκη idistance ακολουθείται από το επιθυμητό height σε pixel:  class "idistance" ( - min=0 max=100 default=0 )
    3. διαφοροποιεί την αντανάκλαση με την προσθήκη iheight ακολουθείται από το επιθυμητό height σε pixel:  class "iheight"  ( - min=10 max=100 default=33 )
    4. διαφοροποιεί την αντανάκλαση με την προσθήκη iopacity ακολουθούμενη από την επιθυμητή αδιαφάνεια σε ποσοστό: class "iopacity"  ( - min=0 max=100 default=33 )
    5. διαφοροποιεί  τα border με την προσθήκη iborder ακολουθείται από το επιθυμητό wide σε  pixel:  class "iborder"  ( - min=0 max=100 default=0 )
    6. διαφοροποιεί το χρώμα  στα border με την προσθήκη iColor  ακολουθείται από το επιθυμητό χρώμα σε hex : class "icolor"  ( - min=000000 max=ffffff default=f0f4ff )
    7. διαφοροποιοει το 3D Z-Tilt direction , προσθέτοντας ένα από τα ακόλουθα:
      class "itiltright" ή  class "itiltnone"  ή  class "itiltleft"

    Π.Χ.  <div class="image"><img src="images/left.jpg" width="200" class="reflex iopacity50" alt="" /></div>

    2oς Τρόπος :  Instant picture


         
                                                                      Preview

    Δίνει στις φωτογραφίες σας instant picture  εφέ , επίσης  μπορείτε να τις κάνετε να μοιάζουν σαν παλιές

    Για να δώσουμε στις εικόνες μας instant picture   αποτέλεσμα κάνουμε τα εξής :

    Εισάγουμε στο πρότυπο μας πάνω από το  </head>  τον παρακάτω κώδικα :

    <script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/instant.js' type='text/javascript'/>
    Και αποθηκεύετε το πρότυπο σας  .

    Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιηθεί  class="instant"  ενεργοποίησης

    Δείτε ένα παράδειγμα χρήσης  :

    <div class="image">
    <img class="instant" src="images/ΧΧΧΧ.png" width="180" height="140" border="0" alt="">
    </div>

    class attributes‎



    Μπορείτε επίσης να χρησιμοποιήσετε  διαφορετικά  class attributes‎ για διαφορετικά αποτελέσματα :


    1 . Ενεργοποίηση  class="instant" 2.  Προσθέστε σκιά, με την προσθήκη ishadow ακολουθούμενη με το επιθυμητο opacity σε ποσοστά :  class "ishadow"  ( - min=0 max=100 default=33 )
    π.χ.  class="instant ishadow40 " 
    3 . διαφοροποιήστε το πλαίσιο, με την προσθήκη iColor ακολουθείται από το επιθυμητό χρώμα hex:   class "icolor"  - min=000000 max=ffffff default=f0f4ff )
    π.χ. class="instant  icolorFFFCE9 " 
    4 . διαφοροποιήστε  την κατεύθυνση κλίσης προσθέτοντας ένα από τα ακόλουθα:
     class "itiltleft" η "itiltnone" η  "itiltright"  π.χ. class="instant itiltleft" 
    5 . αποτρέψτε  τη σκίαση με την προσθήκη noshading:
    class "noshading" π.χ. class="instant noshading"  
    6 . διαφοροποιήστε το σχεδιασμό των  border design προσθέτοντας  historical:
    class "historical" π.χ.  class="instant historical"  
    7 . Στρογγυλεμένες γωνίες με την προσθήκη nocorner:
    class "nocorner" 8 . διατηρήστε  την αναλογία διαστάσεων εικόνας προσθέτοντας preserve :
    class "preserve"
    9 . διαφοροποιήστε το κείμενο σχόλιων με την προσθήκη itxtcol ακολουθείται από το επιθυμητό χρώμα ως hex:
     class "itxtcol"  ( - min=000000 max=ffffff default=000000 )
    10. Παράγει  το κείμενο από alt χαρακτηριστικό προσθέτοντας itxtalt:
     class "itxtalt" 11. Παράγει  το κείμενο από το χαρακτηριστικό title με την προσθήκη itxttitle :
     class "itxttitle"


    Παράδειγμα χρήσης συνδυάζοντας διαφορετικά class attributes‎ :

    <div class="image">
    <img class="instant ishadow40 itiltleft icolorFFFCE9 historical" src="images/historical.jpg" width="400" height="400" border="0" title="onClick event" alt="">
    </div>

    3ος Τρόπος : filmed.


    filmed  σας επιτρέπει να προσθέσετε λωρίδα φωτογραφικού φιλμ και σκιά  στις εικόνες σας


                                                           Preview         

    Για να δώσουμε στις εικόνες μας αυτό το  αποτέλεσμα κάνουμε τα εξής :

    Εισάγουμε στο πρότυπο μας πάνω από το  </head>  τον παρακάτω κώδικα :

    <script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/filmed.js' type='text/javascript'/>

    Και αποθηκεύετε το πρότυπο σας

    Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιηθεί class="filmed"  ενεργοποίησης

    Δείτε ενα παράδειγμα χρήσης  :


    <div class="image">
    <img src="images/test.jpg" width="150" height="100" class="filmed" alt="" />
    </div>


    class attributes‎



    Μπορείτε και σε αυτή την περίπτωση να βάλετε διαφορετικά  class attributes‎ για διαφορετικά αποτελέσματα :

    1 .Ενεργοποίηση  class "filmed" 2 . Διαφοροποιεί την ταινία  με την προσθήκη iColor ακολουθείται από το επιθυμητό χρώμα ως hex:
    class "icolor"   ( - min=000000 max=ffffff default=000000 )
    3. Διαφοροποιεί την διαφάνεια με την προσθήκη istrip ακολουθούμενη από το επιθυμητό  opacity σε ποσοστό:

     class "istrip"  ( - min=0 max=100 default=100 )
    4 . Διαφοροποιεί την αντανάκλαση , με την προσθήκη ishine ακολουθούμενη από το επιθυμητό opacity  σε ποσοστά:

    class "ishine"  ( - min=0 max=100 default=25 )
    5 . Ρυθμίστε την σκιάση , με την προσθήκη ishadow ακολουθούμενη από το επιθυμητό opacity  σε ποσοστά :

     class "ishadow"  ( - min=0 max=100 default=33 )
    6 . Προσθέστε softshadow : (χρήση σε μεγάλες εικόνες μόνο)
    class "softshadow"
      ( - default=false )
    7 . Ρυθμίστε  την σκίαση  με την προσθήκη noshadow :
     class "noshadow"  ( - default=false )

    Παράδειγμα χρήσης συνδυάζοντας διαφορετικά class attributes‎



    <div class="image">
    <img src="images/girl.jpg" class="filmed istrip50 icolor402000" alt="" />
    </div>

    Η

    <div class="image">
    <img src="images/test.jpg" width="150" height="100" class="filmed icolor300000" alt="" />
    </div>

    Μπορείτε βεβαία να χρησιμοποιήσετε και τους 3 javascript κωδικούς μαζί στην ιδία σελίδα .
    Λοιπόν τι περιμένετε ?!!!  Δώστε ζωή στις φωτογραφίες σας 

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

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

    Τρίτη, Μαρτίου 2

    7

    New Horizon - Free Blogger Template - updated

     screenshot2

                          Live Demo    Download

    New Horizon είναι ένα πανέμορφο ελεύθερο blogger template

    New Horizon 1.0  είναι ένα ελεύθερο blogger template
    CSS  σχεδιασμός  πρότυπου by  styleshout  και μετατροπή για blogger έγινε από μένα

    Αυτό το έργο διανέμεται υπό την Creative Commons Attribution 3.0 License , που σημαίνει ότι είστε ελεύθεροι να χρησιμοποιήσετε , να διανέμετε , να παρουσιάσετε στο κοινό το Έργο , να το τροποποιήσετε για οποιοδήποτε σκοπό.
    Με μόνη προϋπόθεση να μην αφαιρεθούν οι σύνδεσμοι προς δημιουργούς από το footer .

    Δε μπορείτε να χρησιμοποιήσετε το έργο αυτό για εμπορικούς σκοπούς.

    Γενικές πληροφορίες για αυτό το πρότυπο :

      -  2 στήλες  
      - Fixed Width
      - Right Sidebar 
      - Υποστήριξη Διαθέσιμη
      - Ενσωματωμένο  Page Navigation
      - Σκουρόχρωμο θέμα με μεγάλη ωραία πολύχρωμη εικόνα κεφαλίδας

    Οδηγίες ρυθμίσεις 

    Για να ρυθμίσετε το Header Logo :

    1. Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :


    <!-- header starts here -->
        <div id='header'>   
            <div id='clouds'/>
            <h1 id='logo-text'><a href='index.html' title=''>new horizon</a></h1>   
            <p id='slogan'>Free Blogger Template </p>               
        </div>  


    2 .  Και αλλάξτε τον τίτλο και το url με τα δικά σας  , όπως βλέπετε παρακάτω .


    <!-- header starts here -->
        <div id='header'>   
            <div id='clouds'/>
            <h1 id='logo-text'><a href= ' Εδώ το url του blog σας ' title=''>Εδω ο Τίτλος σας</a></h1>   
            <p id='slogan'>Εδω το slogan σας  </p>               
        </div>   

     

    Για να ρυθμίσετε το Top navigation μενου  :

    1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

    <!-- navigation starts here -->
        <div id='nav'>
            <ul>
                <li id='current'><a href=' index.html '>Home</a></li>
                <li><a href=' index.html '>News </a></li>
                <li><a href=' index.html '>Downloads</a></li>
                <li><a href=' index.html '>Support</a></li>
                <li><a href=' index.html '>About</a></li>           
            </ul>
        </div>

    2 .  Και αλλάξτε τ url με τα δικά σας  . 

    Για να ρυθμίσετε το sharebox :

    1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

    <div id='sharebox'>
                <p>If you liked this article why don&#39;t you share it:</p>
    <!-- Stumbleupon -->
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Stumble' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S4TwCsy7MmI/AAAAAAAAAH0/LZrAk7ZfpUU/stumble.png'/></a>
    <!-- Delicious -->
    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Delicious' src='http://lh4.ggpht.com/_Q6tRnBVZnko/S4TvgxvMurI/AAAAAAAAAHk/oxB6c6yNv34/delicious.png'/></a>
    <!-- Reddit -->
    <a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Reddit' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S4TvheTxWdI/AAAAAAAAAHw/aIdqxctqDTc/reddit.png'/></a>
    <!-- Technorati -->
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'><img alt='Technorati' src='http://lh4.ggpht.com/_Q6tRnBVZnko/S4TxAwzsIcI/AAAAAAAAAH4/_EF9Beche1Q/technorati.png'/></a>
    <!-- Twitthis -->
    <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' target='_blank'><img alt='Twitter' src='http://lh4.ggpht.com/_Q6tRnBVZnko/S4TxirUBYFI/AAAAAAAAAIA/dKdgmPP5_sY/twitter.png'/></a>
    <!-- Digg -->
    <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg it' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S4TyA0p3fZI/AAAAAAAAAIE/Sx6RsK90bKE/digg.png'/></a>
    <!-- Facebook -->
    <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' src='http://lh5.ggpht.com/_Q6tRnBVZnko/S4TvggjerjI/AAAAAAAAAHg/2z_8Rm8c2rA/facebook.png'/></a>
    <!-- Google -->
    <a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google Bookmarks' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S4TvhQTB8UI/AAAAAAAAAHs/qnj8WuSpfog/google.png'/></a>
    <!-- RSS -->
    <a expr:href='&quot;YOUR FEED ADDRESS&quot;' title='Subscribe to Feeds'><img alt='Subscribe to RSS' src='http://lh5.ggpht.com/_Q6tRnBVZnko/S4TzPEn8bhI/AAAAAAAAAIM/CPcbBpxUE4w/rss.png'/></a>
    </div>

    2 .  Αλλάξτε το FEED ADDRESS με το δικό σας , δηλαδή όπου  YOUR FEED ADDRESS εισάγετε το url του δικού σας feed .
    - Μπορείτε επίσης αν θέλετε να αλλάξετε το κείμενο ,αλλάζοντας το το κείμενο με το κόκκινο χρώμα :
    <p>If you liked this article why don&#39;t you share it:</p>

    Για να ρυθμίσετε το sidebar_social :

    1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

        <!-- Social Network Section -->
        <div id='sidebar_social'>
        <ul>
          <li>
            <a href=' Facebook-LINK-HERE '>
              <img alt='facebook' src='http://lh3.ggpht.com/_Q6tRnBVZnko/S4T9REpK0hI/AAAAAAAAAIU/I7P5s4OKNkA/Furry-Cushion-Facebook_48.png'/>
            </a>
          </li>
          <li>
            <a href=' TWITTER-LINK-HERE '>
              <img alt='Twitter' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S4T-yYrA4bI/AAAAAAAAAIk/eAvBcPRR8vY/Furry-Cushion-Twitter_48.png'/>
            </a>
          </li>
          <li>
            <a href=' STUMBLEUPON-LINK-HERE '>
              <img alt='stuble' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S4T9ReLgxCI/AAAAAAAAAIg/6WZN5KDTooM/Furry-Cushion-StumbleUpon_48.png'/>
            </a>
          </li>
          <li>
            <a href=' /feeds/posts/default ' title='RSS'><img alt='RSS' src='http://lh5.ggpht.com/_Q6tRnBVZnko/S4T9RbpTK9I/AAAAAAAAAIc/-0Tcdgika3A/Furry-Cushion-RSS_48.png'/>
            </a>
          </li>
          <li class='last'>
            <a href=' DELICIOUS-LINK-HERE '>
              <img alt='delicious' src='http://lh6.ggpht.com/_Q6tRnBVZnko/S4T9Q3e2BxI/AAAAAAAAAIQ/x3DRu0zW7jw/Furry-Cushion-Delicious_48.png'/>
            </a>
          </li>
        </ul>
        </div>
        <!-- /Social Network Section -->
    2 .  Και αλλάξτε τα url με τα δικά σας  ( τις γραμμές με το κόκκινο χρώμα ) .

    Για να ρυθμίσετε το sidemenu :

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

    <ul class="sidemenu">
                    <li><a href="http://bloggertrics.blogspot.com/">Βloggertrics</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Links</a></li>   
                    <li><a href="#">Link 1</a></li>                                   
                    <li><a href="#">Link 2 </a></li>        
                    <li><a href="#">Link 3</a></li>
                </ul>
     
    Και αλλάξτε τα url με τα δικά σας

    Για να ρυθμίσετε το search form:

    1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :

    <!-- Search -->
        <form action=' # ' id='searchform' method='get'>
    <fieldset class='search'>
        <input class='box' type='text'/>
        <button class='btn' title='Submit Search'>Search</button>
    </fieldset>
    </form>
        <!-- /Search –>

    2 . Και αλλαξτε το συμβολο #   με το url του blog σας 

    Κατεβάστε το και χαρείτε το  
    Αν χρειαστείτε οποιαδήποτε βοήθεια αφήστε το σχόλιο σας

     Σημείωση : Επειδή το πρότυπο παρουσίαζε ένα μικρο προβληματάκι συμβατότητας με το Firefox , έχει γίνει update και είναι πλέον συμβατό και με το Firefox 
    Read More ►
     

    © 2010 Bloggertrics

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

    ΑΡΧΙΚΗ| Sitemap| Posts RSS