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

Τρίτη, Απριλίου 27

4

Jquery Featured Post Slideshow για Blogger - Updated!


FEATURED CONTENT SLIDESHOW

                                                 Δείτε το Demo

Σε αυτήν την ανάρτηση θα δούμε πώς να προσθέσουμε ένα όμορφο featured content slideshow στο blog μας , για να για να δείξουμε τις πιο πρόσφατες αναρτήσεις η  εικόνες μας  στους αναγνώστες μας .
Είναι παρόμοιο με αυτό που χρησιμοποιώ στο δικό μου blog ,μόνο που έχει απλοποιηθεί και έχει υποστεί ελαφριά μετατροπή , για να είναι εύκολο στην χρήση και στην προσαρμογή   

Το αρχικό  script δημιουργήθηκε από  Boban Karišik και μπορείτε να δείτε εδώ

Είναι πολύ εύκολο στην εγκατάσταση και μπορείτε εύκολα να διαχειριστείτε το πλάτος και το ύψος και να προσαρμόσετε το slideshow  σε αναλογίες που ταιριάζει στα template σας.
Προκαθορισμένο πλάτος  είναι 400px και Προκαθορισμένο ύψος είναι 200px.


Νομίζω ότι θα αγαπήσετε πολύ αυτό το slideshow.

Ας δούμε τώρα πως θα κάνουμε εγκατάσταση στο blog μας :

1. Κάνετε Login στο Πίνακα Ελέγχου του blogger σας –> Διάταξη –> Επεξεργασία HTML


2. Πλοηγηθείτε στο HTML του Προτύπου σας προς τα κάτω μέχρι να βρείτε την ετικέτα :  </ head>


3.  Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον ακριβώς  πάνω από την ετικέτα :  </ head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

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

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #000033;
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 400px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 21px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 400px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fefefe;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

Προσαρμογή :

background:#000000; – >  Το χρώμα υπόβαθρου του slider , στην προκείμενη περίπτωση είναι το μαύρο
border:1px solid #000033; –> Το χρώμα πλαισίου του slider ,στην προκείμενη περίπτωση είναι το σκούρο μπλε
width: 400px; –> Το πλάτος  του slider
height: 200px; –> Το ύψος  του slider
font: 21px Trebuchet MS, sans-serif; –> Το μέγεθος και το στυλ της γραμματοσειράς στην διαφάνεια πληροφοριών
background-color: #000; –> Το χρώμα υπόβαθρου  της διαφάνειας πληροφοριών
color: #fefefe; –> Το χρώμα κειμένου   της διαφάνειας πληροφοριών του slider

4.  Κάνετε τις προσαρμογές που θέλετε και αποθηκεύετε το πρότυπο σας

5.  Τώρα  πηγαίνετε  Διάταξη -> Στοιχεία Σελίδας και κάντε κλικ στο « Προσθήκη gadget ->HTML/JavaScript ».
Αντιγράψτε τον παρακάτω κώδικα  και επικολλήστε  τον μέσα  και πατήστε το κουμπί Αποθήκευση  .

Σημειωση : Μετά από μικρή ασυμβατότητα που παρουσίασε ο παρακάτω κώδικας , έχει γίνει ενημέρωση του κώδικα και είναι πλέον πλήρως λειτουργικός 

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://bloggertrics.blogspot.com/2010/04/wooden-zigzag-free-premium-blogger.html">
<img style="width:400px;height:200px;" src="http://lh6.ggpht.com/_L116RpGjEMY/S8uZzfjxoAI/AAAAAAAABgc/G3ql4z3HWdI/wzigzag_thumb%5B15%5D.png?imgmax=800" />
<span> Download Wooden ZigZag Blogger Template</span></a>
</li>
<li class="s3sliderImage">
<a href="http://bloggertrics.blogspot.com/2010/04/garden-free-premium-artistic-blogger.html">
<img style="width:400px;height:200px;" src="http://lh6.ggpht.com/_L116RpGjEMY/S8WrJzyZ8NI/AAAAAAAABdY/1SvcbDuIcTg/144201035031_thumb6.png?imgmax=800" />
<span>Download The Garden Blogger Template</span></a>
</li>
<li class="s3sliderImage">
<a href="http://bloggertrics.blogspot.com/2010/04/worn-wall-free-blogger-template.html">
<img style="width:400px;height:200px;" src="http://lh5.ggpht.com/_L116RpGjEMY/S7ukCYk05kI/AAAAAAAABdA/lki35S3qGYA/snap_2_thumb%5B2%5D.png?imgmax=800" />
<span>Download Worn Wall Blogger Template</span></a>
</li>
<li class="s3sliderImage">
<a href="http://bloggertrics.blogspot.com/2010/03/wish-tree-blogger-template.html">
<img style="width:400px;height:200px;" src="http://lh4.ggpht.com/_L116RpGjEMY/S5O5qV1f4_I/AAAAAAAABVM/gLWae0gXWy0/snap_10_thumb%5B5%5D.png?imgmax=800" />
<span>Download Wish Tree Blogger Template</span></a>
</li>
<li class="s3sliderImage"> </li> </ul>
</div>
<div class='clear'></div>



Σημειωση : Αλλάζετε τα Links και τις εικόνες με τα δικά σας και αποθηκεύετε

Τώρα πλέον έχετε εγκαταστήσει με επιτυχία το featured content slideshow στο blog σας
Read More ►

Παρασκευή, Απριλίου 23

1

Wooden ZigZag - FREE Premium Blogger Template

WoodenZigzag-Blogger template
                                    Preview   Download

  

Wooden ZigZag

 

Άλλο ένα πανέμορφο FREE Blogger Template , το οποίο σας το προσφέρει το  Bloggertrics

 

   

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

- 2 στήλες
- Όμορφο NavBar 
- Numbered Page Navigation
- Automatic Read More Function
- Comment Reply Option

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

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


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

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
  
<ul id='navBar'>
  <li><a href='http://woodenzigzag-demo.blogspot.com/' title='Home'>Home</a></li>
<li class='page_item page-item-2'>
<a href='http://www.Your Link Here' title='About'>About</a></li>
<li class='page_item page-item-3'>
<a href='http://Your Link Here' title='Another Try'>Another Try</a></li>
<li class='page_item page-item-4'>
<a href='http://Your Link Here' title='Demo Page'>Demo Page</a></li>
<li class='page_item page-item-5'>
<a href='http://Your Link Here' title='About'>About</a></li>
            </ul> 

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

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

 

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<div class='single-rss-container'>
<h3>Stay Connected...</h3> 

<div class='single-rss-icon'>
<a href='http://your-feed-link-here'>
<img alt='Subscribe Via RSS' src='http://i40.tinypic.com/2nks700.jpg'/></a>
<p>Subscribe Via RSS</p>
</div>
<div class='single-rss-icon'>
<a href='http://your-twitter-link-here'>
<img alt='Subscribe Via Twitter' src='http://i42.tinypic.com/m7q7wn.jpg'/></a>
<p>Subscribe Via Twitter</p>
</div>
<div class='single-rss-icon'>
<a href='http://your-email-feed-link-here'>
<img alt='Subscribe Via E-Mail' src='http://i44.tinypic.com/2hz2yhi.jpg'/></a>
<p>Subscribe Via E-Mail</p>
</div>
</div> 
2 .  Και αλλάξτε τα links με τα δικά σας url

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

 

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<h4 id='rss'><a href='http://Your Link Here'>RSS Feed</a></h4> 
2 . Και αλλάξτε το http://Your Link Here με το RSS Feed url του blog σας 

Για να ρυθμίσετε το Comment Reply Option : 

 

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
 <span class='comment-reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;
postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;
postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + 
&quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' 
onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;,&quot;
toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); 
return false;'>[Reply]</a></span> 
2 . Και αλλάξτε το YOUR-BLOG-ID   με το ID του blog σας  3 . Για να βρείτε το ID του blog σας , απλά πηγαίνετε στην σελίδα Ανάρτηση -> Νέα Ανάρτηση και δείτε πάνω στην σελίδα, το addres bar, εκεί θα δείτε κάτι σαν αυτό :

 blog ID
Αντιγράφετε τα νούμερα που θα δείτε στο τέλος και αντικαταστήστε το YOUR-BLOG-ID   με το ID του blog σας  **Αν χρειαστείτε οποιαδήποτε βοήθεια  η έχετε κάποια ερώτηση μπορείτε να αφήσετε το σχόλιο σας
Read More ►

Τετάρτη, Απριλίου 21

0

Δημιουργήστε όμορφο χώρο για τα 125χ125 Banner σας



your-ad-here-themelibΛοιπόν, σήμερα θα δούμε πως μπορούμε να δημιουργήσουμε στο blog μας ένα χώρο όπου μπορούμε να βάλουμε και να δείξουμε με όμορφο τρόπο τα 125χ125 Banner μας


Χωρίς πολλά πολλά ας δούμε τώρα τι πρέπει να κάνουμε :

Βήμα 1ο :

 

Πρώτα κάνουμε login στο λογαριασμό του blogger μας και πηγαίνουμε  Διάταξη –> Επεξεργασία HTML  και πατήστε στο κουτάκι  Επέκταση προτύπων γραφικών στοιχείων

 

Βήμα 2ο :

 

Τώρα ψάχνουμε να βρούμε στο πρότυπο μας την ετικέτα  ]]></b:skin> και κολλάμε ακριβώς από πάνω τον παρακάτω κώδικα :

/*-------- Box Banner 125x125 ------*/
#Box-Banner-ads {
margin: 0px;
padding: 0px;
text-align: center;
}
#Box-Banner-ads img {
margin: 0px 0px 0px 0px;
padding: 0px;
text-align: center;
border: 1px solid  #ffffff;
}
#Box-Banner-ads img:hover {
margin: 0px 0px 0px 0px;
padding: 0px;
text-align: center;
border: 1px solid #505050;
}

Τώρα αποθηκεύετε το πρότυπο σας  και πάμε στο τελευταίο βήμα


Σημείωση : αλλάζετε τα χρώματα των borders (με το κόκκινο χρώμα )  ανάλογα με τις προτιμήσεις σας

 

Βήμα 3ο :

 

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

<div id="Box-Banner-ads">
<a target="_blank" href="Your Link Here"><img alt="ads" src="http://i44.tinypic.com/2utnfwj.jpg"
border="0" /></a>
<a target="_blank" href="Your Link Here"><img alt="ads" src="http://i44.tinypic.com/2utnfwj.jpg"
border="0" /></a>
<a target="_blank" href="Your Link Here"><img alt="ads" src="http://i44.tinypic.com/2utnfwj.jpg"
border="0" /></a>
<a target="_blank" href="Your Link Here"><img alt="ads" src="http://i44.tinypic.com/2utnfwj.jpg"
border="0" /></a>
</div>

Αλλάζετε τα links με τα δικά και και αποθηκεύετε και έχετε πλέον ένα όμορφο χώρο για να συμμαζέψετε τα banner σας
Read More ►

Δευτέρα, Απριλίου 19

0

The Garden Free Premium Artistic blogger template


14-4-2010 3-50-31 πμ
                               Preview   Download

Σήμερα σας παρουσιάζω ένα μοναδικό  Free Blogger  πρότυπο

The Garden - Είναι ένα ελεύθερο Premium Artistic blogger template
Ένα πρότυπο με μοναδικό σχεδιασμό , όπως μπορείτε να δείτε .

Πανέμορφο πρότυπο με ζωηρά χαρούμενα χρώματα  και πολλά έξτρα πρόσθετα :
  • Featured post   πρόσθετο
  • Όμορφο Multilevel NavBar
  • Accordion sidebar 
  • Tab Widget  με 2 tabs
  • Numbered Page Navigation
  • Automatic Read More Function
  • Comment Reply Option
Και πολλά περισσότερα ...........


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


Ρυθμίσεις Προτύπου :



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


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

<ul id='navBar'>
        <li class='current_page_item'><a href=' http://YOUR-LINK-HERE '>Home</a></li>
    <li class='page_item page-item-1'><a href=' http://YOUR-LINK-HERE ' title='About'>About</a></li>
        <li class='page_item page-item-2'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a>
<ul>
    <li class='page_item page-item-3'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
    <li class='page_item page-item-4'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
        <li class='page_item page-item-5'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
    <li class='page_item page-item-6'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
</ul>
</li>
       <li class='page_item page-item-7'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
       <li class='page_item page-item-8'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a>
<ul>
    <li class='page_item page-item-9'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
    <li class='page_item page-item-10'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
    <li class='page_item page-item-11'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
    <li class='page_item page-item-12'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
    <li class='page_item page-item-13'><a href=' http://YOUR-LINK-HERE ' title=' YOUR-TEXT-HERE '>YOUR-TEXT-HERE </a></li>
</ul>
</li>
        </ul>

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

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

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

<ul id='bookmark'>
                    <li class='digg'><a href='http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Add us to Digg'><img alt='Digg' src='http://i44.tinypic.com/ig9d94.jpg'/></a></li>
                    <li class='twitter'><a href='http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Click to send this page to Twitter!'><img alt='Twitter' src='http://i41.tinypic.com/21ep1za.jpg'/></a></li>
                    <li class='technorati'><a href='http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Add us to Technorati'><img alt='technorati' src='http://i44.tinypic.com/e99p1h.jpg'/></a></li>
                    <li class='stumble'><a href='http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Add us to Stumble'><img alt='Stumbleupon' src='http://i42.tinypic.com/vmt005.jpg'/></a></li>
                    <li class='rss'><a href=' http://feeds.feedburner.com/bloggertrics ' title='Join RSS feed'><img alt='RSS' src='http://i43.tinypic.com/ir3mrr.jpg'/></a></li>
                </ul>

2 . Και αλλάξτε το http://feeds.feedburner.com/bloggertrics με το δικό σας Feed url  

Για να ρυθμίσετε το Comment Reply Option :

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

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply]</a></span>

2 . Και αλλάξτε το YOUR-BLOG-ID με το ID του blog σας

3 . Για να βρείτε το ID του blog σας , απλά πατήστε Ανάρτηση -> Νέα Ανάρτηση και δείτε πάνω στην σελίδα το addres bar, εκεί θα δείτε κάτι σαν αυτό : http://blogger.com/post-create.g?blogID= χχχχχχχχχχχχ
 
33

Αντιγράφετε τα νούμερα ( χχχχχχχχχχχχ ) που θα δείτε στο τέλος και αντικαταστήστε το YOUR-BLOG-ID με το ID του blog σας

Για να ρυθμίσετε το 125χ125 ads Bar:

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

<ul class='adBar clearfix'>
<li><a href='# '><img alt='# ' class='adImage' src=' http://i44.tinypic.com/2utnfwj.jpg'/></a></li>
   <li><a href=' # '><img alt=' # ' src=' http://i44.tinypic.com/2utnfwj.jpg '/></a></li>
   <li><a href=' # '><img alt=' # ' src=' http://i44.tinypic.com/2utnfwj.jpg '/></a></li>
   <li><a href='# '><img alt=' # ' src=' http://i44.tinypic.com/2utnfwj.jpg '/></a></li>
               </ul>       

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

Για να ρυθμίσετε το Sidebar-Tabs :

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

<div id='tabbed'>
    <!-- The tabs -->
    <ul class='tabnav clearfix'>
    <li><a href='#rposts'>Recent Posts</a></li>
    <li><a href='#blogroll'>My Blogroll</a></li>
    </ul>
    <!-- tab 1 -->
    <div class='tabdiv' id='rposts'>
    <ul>
    <li><a href='http://YOUR-LINK-HERE' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>
    <li><a href=' http://YOUR-LINK-HERE ' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>
    <li><a href=' http://YOUR-LINK-HERE ' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>
    <li><a href=' http://YOUR-LINK-HERE ' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>
    <li><a href=' http://YOUR-LINK-HERE ' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>
    <li><a href=' http://YOUR-LINK-HERE ' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>
    <li><a href=' http://YOUR-LINK-HERE ' title='YOUR-TITLE-HERE'>YOUR-TITLE-HERE</a></li>
    </ul>
    </div>
    <!-- tab 2 -->
    <div class='tabdiv' id='blogroll'>
<ul>
    <li><a href=' http://BLOG1-LINK-HERE ' title=' BLOG1-TITLE-HERE '>BLOG1-TITLE-HERE</a></li>
    <li><a href=' http://BLOG2-LINK-HERE ' title='BLOG2-TITLE-HERE'>BLOG2-TITLE-HERE</a></li>
    <li><a href=' http://BLOG3-LINK-HERE ' title='BLOG3-TITLE-HERE'>BLOG3-TITLE-HERE</a></li>
    <li><a href=' http://BLOG4-LINK-HERE ' title='BLOG4-TITLE-HERE'>BLOG4-TITLE-HERE</a></li>
    <li><a href=' http://BLOG5-LINK-HERE ' title='BLOG5-TITLE-HERE'>BLOG5-TITLE-HERE</a></li>
    <li><a href=' http://BLOG6-LINK-HERE ' title='BLOG6-TITLE-HERE'>BLOG6-TITLE-HERE</a></li>
    <li><a href=' http://BLOG7-LINK-HERE ' title='BLOG7-TITLE-HERE'>BLOG7-TITLE-HERE</a></li>
</ul>    </div>
</div>   

2 . Και αλλάξτε το lINKS με το δικά

Για να ρυθμίσετε το Featured Content Gallery (FCG) plugin :

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

<div class='clearfix' id='featured'>
<div id='slider'>
<ul>
<li>
    <div class=' post-1 post hentry category-featured tag-Tags title ' id=' post-1 '>
    <h2 class='headline'><a href=' http://post-link.html ' rel='bookmark' title=' Post Title '>Post Title</a></h2>
    <h4 class='date'>Post Date here </h4>
        <h4 class='commentnum'><a href=' http://post-link.html ' title=' Σχόλια  στο Post Title '>Εδώ τον αριθμό σχολίων </a></h4>
        <div class='entry clearfix'>
                                                 <a class='postImage' href=' http://i40.tinypic.com/25ibww4.jpg '><img alt=' Post Title ' src=' http://i40.tinypic.com/25ibww4.jpg '/></a> 
                Εδώ το απόσπασμα από την ανάρτηση σας …. ...   </div>
        <h4 class='tags'>Tags: <a href=' http://blogspot.com/search/label/ΕΤΙΚΕΤΩΝ ΑΝΑΡΤΗΣΗΣ ' rel='tag'>Tags</a> </h4>
        </div>
</li>
<li>  
<div class=' post-2 post hentry category-featured tag-Tags title ' id=' post-2 '>
    <h2 class='headline'><a href=' http://post-link.html ' rel='bookmark' title=' Post Title '>Post Title</a></h2>
    <h4 class='date'>Post Date here </h4>
        <h4 class='commentnum'><a href=' http://post-link.html ' title=' Σχόλια  στο Post Title '>Εδώ τον αριθμό σχολίων </a></h4>
        <div class='entry clearfix'>
                                                 <a class='postImage' href=' http://i42.tinypic.com/2vsixwo.jpg '><img alt=' Post Title ' src=' http://i42.tinypic.com/2vsixwo.jpg'/></a> Εδώ το απόσπασμα από την ανάρτηση σας …. ...   </div>
        <h4 class='tags'>Tags: <a href=' http://blogspot.com/search/label/ΕΤΙΚΕΤΩΝ ΑΝΑΡΤΗΣΗΣ ' rel='tag'>Tags</a> </h4>
        </div>
</li>
<li>  
<div class=' post-3 post hentry category-featured tag-Tags title ' id=' post-3 '>
    <h2 class='headline'><a href=' http://post-link.html ' rel='bookmark' title=' Post Title '>Post Title</a></h2>
    <h4 class='date'>Post Date here </h4>
        <h4 class='commentnum'><a href=' http://post-link.html ' title=' Σχόλια  στο Post Title '>Εδώ τον αριθμό σχολίων </a></h4>
        <div class='entry clearfix'>
                                                 <a class='postImage' href='http://i43.tinypic.com/64ja1h.jpg '><img alt=' Post Title ' src='http://i43.tinypic.com/64ja1h.jpg'/></a> Εδώ το απόσπασμα από την ανάρτηση σας …. ...   </div>
        <h4 class='tags'>Tags: <a href=' http://blogspot.com/search/label/ΕΤΙΚΕΤΩΝ ΑΝΑΡΤΗΣΗΣ ' rel='tag'>Tags</a> </h4>
        </div>
</li>
<li>   
<div class=' post-4 post hentry category-featured tag-Tags title ' id=' post-4 '>
    <h2 class='headline'><a href=' http://post-link.html ' rel='bookmark' title=' Post Title '>Post Title</a></h2>
    <h4 class='date'>Post Date here </h4>
        <h4 class='commentnum'><a href=' http://post-link.html ' title=' Σχόλια  στο Post Title '>Εδώ τον αριθμό σχολίων </a></h4>
        <div class='entry clearfix'>
                                                 <a class='postImage' href=' http://i40.tinypic.com/23tqzo7.jpg '><img alt=' Post Title ' src=' http://i40.tinypic.com/23tqzo7.jpg '/></a>
Εδώ το απόσπασμα από την ανάρτηση σας …. ...   </div>
        <h4 class='tags'>Tags: <a href=' http://blogspot.com/search/label/ΕΤΙΚΕΤΩΝ ΑΝΑΡΤΗΣΗΣ ' rel='tag'>Tags</a> </h4>
        </div>
</li>
</ul>
</div>
</div>   

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

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

0

Easy Slider - Για να αναδείξετε τις εικόνες σας η τις αναρτήσεις σας


slider
previews easyslider-demo

Καλησπέρα σε όλους 


Σήμερα  θα δούμε πως μπορούμε να βάλουμε ένα  όμορφο  Slider στο blog  εύκολα και γρήγορα , με το οποίο μπορείτε να αναδείξετε τις εικόνες σας η να παρουσιάσετε τις αναρτήσεις σας , ειδικά τις παλαιότερες αναρτήσεις …


Τώρα ας δούμε πως θα κάνουμε την εγκατάσταση του στο blog .

Βήμα 1ο :

1 .  Συνδεθείτε στο blogger λογαριασμό σας


2 .  Πηγαίνετε   Διάταξη –> Επεξεργασία HTML  και πατήστε στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων

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

/* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }       
/* Easy Slider */
    #slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
    #slider{margin-top:1em;border:1px solid #666666;}  
    #slider li, #slider2 li{
        /*
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */
        width:650px;
        height:241px;
        overflow:hidden;
        }   
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:250px;
        top:310px;
        z-index:1000;
        }   
    #nextBtn, #slider1next{
        left:940px;
        }                                                       
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{ 
        display:block;
        position:relative;
        width:30px;
        height:77px;
        background:url(http://sites.google.com/site/bloggertricks2/easyslider/btn_prev.gif) no-repeat 0 0;   
        }   
    #nextBtn a, #slider1next a{
        background:url(http://sites.google.com/site/bloggertricks2/easyslider/btn_next.gif) no-repeat 0 0;   
        }

Σημείωση : Μπορεί να χρειαστεί να προσαρμόσετε το πλάτος η τα κουμπιά του Slider  , ανάλογα με το πρότυπο σας

 

Κατανοήστε τον κώδικα :

width:650px; –  Το πλάτος του Slider
height:241px; – Το ύψος του Slider
width:30px;  -  Το πλάτος των κουμπιών του Slider
height:77px; -  Το ύψος των κουμπιών του Slider
left:250px;  - Η θέση του  του κουμπιού  Previous , προσαρμόστε το ανάλογα με τις ανάγκες σας
top:310px;  - Η θέση και των δυο κουμπιών , προς τα πάνω η προς τα κάτω . Προσαρμόστε το ανάλογα με τις ανάγκες σας
left:940px; -  Η θέση του  του κουμπιού  Next , προσαρμόστε το ανάλογα με τις ανάγκες σας

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

<script src='http://sites.google.com/site/bloggertricks2/easyslider/jquery.js' type='text/javascript'/>
    <script src='http://sites.google.com/site/bloggertricks2/easyslider/easySlider1.7.js' type='text/javascript'/>
    <script type='text/javascript'>
        $(document).ready(function(){   
            $(&quot;#slider&quot;).easySlider({
                auto: true,
                continuous: true
            });
        });   
    </script>

Αν θέλετε μπορείτε να κατεβάσετε τα  jquery αρχεία , για να τα φιλοξενήσετε στο δικό σας file hosting site
   
1 .  jquery.js

2 . easySlider1.7.js

Βήμα 2ο :

Τώρα το τελευταίο βήμα .

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

1 . Μπορείτε να εισάγετε τον παρακάτω κώδικα κάτω από την Επικεφαλίδα  , πατώντας προσθήκη gadget –> HTML/JavaScript

2 .  Βρίσκουμε στο πρότυπο μας την παρακάτω γραμμή του κώδικα :  <div id='content-wrapper'>  και κολλάμε τον παρακάτω κώδικα ακριβώς από πάνω
 
<div id='slider'>
            <ul>               
                <li><a href=' http://Εδώ το URL της Εικόνας η της Ανάρτησης .html '><img alt=' Εδώ img alt ' src=' Εδω η εικόνα /01.jpg '/></a></li>
                <li><a href=' http://Εδώ το URL της Εικόνας η της Ανάρτησης .html '><img alt='Εδώ img alt ' src=' Εδω η εικόνα /02.jpg '/></a></li>
                <li><a href=' http://Εδώ το URL της Εικόνας η της Ανάρτησης .html '><img alt='Εδω img alt  ' src=' Εδω η εικόνα /03.jpg '/></a></li>
                <li><a href=' http://Εδώ το URL της Εικόνας η της Ανάρτησης .html '><img alt='Εδω img alt  ' src=' Εδω η εικόνα /04.jpg '/'/></a></li>   
            </ul>
        </div>

Αλλάζετε τα links με τα δικά σας και αποθηκεύετε .

Αυτό ήταν όλο   …..


Σημείωση : Καλό είναι οι φωτογραφίες να έχουν παρόμοιο πλάτος και ύψος με το Slider .

Δηλαδή : αν το πλάτος του Slider είναι 500px και το ύψος 300px  και οι φωτογραφίες να έχουν τις ίδιες διαστάσεις


Μπορείτε να δείτε εδώ μια λίστα από on-line Photo Editors για να επεξεργαστείτε τις  φωτογραφίες σας
Read More ►

Πέμπτη, Απριλίου 15

17

Worn Wall – FREE Blogger Template

snap_2

                                 Preview   Download

  To Bloggertrics σας προσφέρει ακόμη ένα πανέμορφο FREE Blogger Template
 

Worn Wall  είναι ένα ελεύθερο blogger template


Πανέμορφο grunge στυλ θέμα είναι αυτό που μεταφέρει το blog σας στο επόμενο επίπεδο !!!!

CSS  σχεδιασμός  πρότυπου by  Templatelite.com  και μετατροπή για blogger έγινε από μένα


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

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


 - 3 στήλες  
 -  Fixed Width
 -  Right Sidebar
 -  Light brown
 - Widget Ready
 - Υποστήριξη Διαθέσιμη
 - Ενσωματωμένο  Featured Content Gallery (FCG) plugin
 - Ενσωματωμένο Αυτόματο  Read More Function

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


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

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<div id='menubar'>
    <ul id='menu'>
<li class='page_item page-item-1'><a href='http://Your Link Here/' title='Page 1'>Page 1</a>
  <ul>
<li class='page_item page-item-2'><a href='http://Your Link Here/' title='Page child'>Page child</a>
  <ul>
<li class='page_item page-item-3'><a href='http://Your Link Here/' title='Page child 2'>Page child 2</a></li>
  </ul>
  </li>
  </ul>
  </li>
<li class='page_item page-item-4'><a href='http://Your Link Here/' title='Page 2'>Page 2</a>
  <ul>
<li class='page_item page-item-5'><a href='http://Your Link Here/' title='Page child'>Page child</a></li>
  </ul>
  </li>
<li class='page_item page-item-6'><a href='http://Your Link Here/' title='Page 3'>Page 3</a></li>
<li class='page_item page-item-7'><a href='http://Your Link Here/' title='Page 4'>Page 4</a></li>
<li class='page_item page-item-8'><a href='http://Your Link Here/' title='Page 5'>Page 5</a></li>
    </ul>
    </div>

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

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

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

<a class='twitter' href='http://www.twitter.com/bloggertrics' title='Follow me'/>
2 . Και αλλάξτε το http://www.twitter.com/bloggertrics με το δικο σας  Twitter url

Για να ρυθμίσετε το Featured Content Gallery (FCG) plugin :

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<div id='myGallery'>


<div class='imageElement'>
           <h2>Title 1</h2>
     <p>Εδω το αποσπασμα απο το κειμενο σας</p>
                                           
 <a class='open' href='http://Your Title Link Here/' title='Read More'/>
        <img alt='' class='full' src='http://i44.tinypic.com/29yrr09.jpg'/>
         <img alt='' class='thumbnail' src='http://i44.tinypic.com/10gze51.jpg'/>
     </div>
 <div class='imageElement'>
          <h2>Title 2</h2>
    <p>Εδω το αποσπασμα απο το κειμενο σας.</p>
                                            
<a class='open' href='http://Your Title Link Here/' title='Read More'/>
     <img alt='' class='full' src='http://i39.tinypic.com/34q4aj4.jpg'/>
     <img alt='' class='thumbnail' src='http://i43.tinypic.com/2mhfpkl.jpg'/>
                  </div>
                      </div>
2 . Και αλλάξτε τα links  με τα δικά σας  .
Αν χρειαστείτε οποιαδήποτε βοήθεια αφήστε το σχόλιο σας
Read More ►
 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS