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

Δευτέρα, Μαΐου 31

9

Μην ξεχάσετε να καταχωρήσετε το ιστολόγιό σας στις Μηχανές Αναζήτησης



 Σύμφωνα με τα στατιστικά, το 87% της κίνησης (traffic) στο internet, δημιουργείται από τις μηχανές αναζήτησης (search engines) .
Εάν έχετε ένα σχετικά καινούργιο  blog,  το αμέσως επόμενο βήμα που πρέπει να ακολουθήσετε  είναι  να το καταχωρήσετε  στις πιο δημοφιλείς μηχανές αναζήτησης για να εξασφαλίσετε μια υψηλή  θέση στην κατάταξη  όσο το δυνατόν συντομότερα και να παράγετε κυκλοφορία  από τις μηχανές αναζήτησης.

Ενώ είναι πιθανό ότι οι μεγάλες μηχανές αναζήτησης κάποια στιγμή θα  το βρουν  το blog σας τελικά, γιατί να περιμένετε από  τις μηχανές αναζήτησης για το πότε και αν  αναζητήσουν την ιστοσελίδα σας / blog . Κάντε μόνοι σας την Υποβολή του blog  σας σε μηχανές αναζήτησης, πριν το κάνουν αυτόματα.

Μερικες από τις  πιο δημοφιλέστερες και μεγαλυτερες  μηχανές αναζήτησης είναι  :  Google, Yahoo, MSN, κλπ. Μπορείτε να υποβάλετε ακόμη Feed URL σας ή Sitemap σε ορισμένες μηχανές αναζήτησης. Αλλά καλο ειναι να βεβαιωθείτε πρωτα πριν από την υποβολή.
Η υποβολή του blog σας στις μηχανές αναζήτησης, θα τονώσει σημαντικά την κυκλοφορία του ιστολογίου σας .Δεν μπορεί να φέρει μεγάλο αριθμό επισκεπτών σε μια νύχτα, αλλά θα επιταχυνθεί  η διαδικασία στην αύξηση του όγκου και βελτίωση της ποιότητας της κυκλοφορίας σε μια ιστοσελίδα από τα αποτελέσματα της μηχανής αναζήτησης .

Κατάλογος των μηχανών αναζήτησης :

Παρακάτω αναφέρονται οι συνδέσεις από μερικές πιο δημοφιλείς μηχανές αναζήτησης.
Μπορείτε να υποβάλετε το URL του blog σας  σε αυτές τις μηχανές αναζήτησης δωρεάν  .


Υπηρεσίες καταχώρισης :

Υπάρχουν πολλές ιστοσελίδες στο Διαδίκτυο που προσφέρουν δωρεάν υπηρεσίες υποβολής ιστοχώρου στις μηχανές αναζήτησης. Ο κατάλογος των μηχανών αναζήτησης είναι σε μεγάλο βαθμό ίδιος .
Κάποια από αυτά προσφέροντα να καταχωρήσουν  το URL σας σε περισσότερες από εκατό μηχανές αναζήτησης και προσφέρουν αρκετές υπηρεσίες παρακολούθησης .
Είναι ίσως ο πιο γρήγορος τρόπος να καταχωρίσετε το URL σας στις περισσότερες μηχανές αναζήτησης
Read More ►

Τετάρτη, Μαΐου 26

12

Recent posts widget για blogger με thumbnails

Προσθέστε ένα όμορφο recen posts  widget στο blog σας εύκολα και γρήγορα .
Recent posts widget
Αυτό το συγκεκριμένο widget είναι βασισμένο στο Mlxperience's -- "Recent Posts Widget" .
Στο οποίο όμως έχουν προστεθεί μερικά χαρακτηριστικά , όπως το  Read More , Comment Bubble και  Ημερομηνία ανάρτησης .


Παρακάτω είναι ο πλήρες κώδικας.

Μπορείτε να το δείτε σε λειτουργία εδώ

Για να το βάλετε στο blog σας :

Πηγαίνετε  Στοιχεία Σελίδας –> Προσθήκη Gadget –> HTML/JavaScript και απλά αντιγράψτε και επικολλήστε αυτόν τον κώδικα στο περιεχόμενο widget , σε όποιο σημείο  εσείς θέλετε να εμφανιστεί .


<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
imgr[1] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
imgr[2] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
imgr[3] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
imgr[4] = "http://4.bp.blogspot.com/_L116RpGjEMY/S-3gwCzotYI/AAAAAAAABvc/FtxiJvmYDmw/s1600/no-image.jpg";
showRandomImg = true;
tablewidth = 300;
cellspacing = 5; borderColor = "#f3f3f3";
bgTD = "#f3f3f3";
imgwidth = 40;
imgheight = 40;
fntsize = 12;
acolor = "#073763";
aBold = true;
icon = " ";
text = "";
fsize= "11";
showPostDate = true;
summaryPost = 60;
summaryFontsize = 11;
summaryColor = "#0b3e61";
icon2 = " ";
numposts = 5;
home_page =
"http://yourblog.blogspot.com/";
</script>
<script type="text/javascript" src="http://sites.google.com/site/mybloggerscripts/js/recentposts.js"></script>
<span style="font-size:10px;float:right;"> <a href="http://bloggertrics.blogspot.com/2010/05/recent-posts-widget-blogger-thumbnails.html" target="_blank">Take This widget</a></span>

Πριν αποθηκεύσετε το widget σας ίσως θέλετε να το επεξεργαστείτε :
  • Για να προσαρμόσετε το πλάτος (width) του widget  ανάλογα με το πλάτος (width) του sidebar  σας .
tablewidth = 300;
  • Για να προσαρμόσετε το χρώμα του πλαισίου ( border ) και το χρώμα υπόβαθρου ( background ) του widget .
borderColor = "#f3f3f3";
bgTD = "#f3f3f3";
  • Για να προσαρμόσετε το width και το height από το thumbnail image .
imgwidth = 40;
imgheight = 40;
  • Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς Τίτλου .
fntsize = 12;
acolor = "#073763";
  • Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς Σχολίων και Ημερομηνίας
fsize= "11";
  • Για να προσαρμόσετε το χρώμα και το μέγεθος γραμματοσειράς  Κειμένου .
summaryFontsize = 11;
summaryColor = "#0b3e61";
  • Για να προσαρμόσετε το νούμερο των αναρτήσεων που θα εμφανίζονται
 numposts = 5;
  • Και το πιο σημαντικό :  Μην ξεχάσετε να αλλάξετε το http://yourblog.blogspot.com/  με το url του blog σας .
 Καλή επιτυχία σε όλους :)  
   
Read More ►

0

Canvas- Free Blogger Template

Canvas Free Blogger Template
Download    Demo

Canvas είναι ένα ελεύθερο Premium Modern Artistic  Blogger πρότυπο .
Ένα πρότυπο με μοναδικό σχεδιασμό , όπως μπορείτε να δείτε . Με απαλά χρώματα  και πολλά έξτρα πρόσθετα .
Είναι δοκιμασμένο σε Firefox, Safari , Opera και Internet Explorer 8 .( Αν και δεν είναι 100% συμβατό με το Internet Explorer 6 και Internet Explorer 7 )

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

  - 2 στήλες
  - Featured post   πρόσθετο
  - Όμορφο Multilevel NavBar
  - Accordion sidebar 
  - Tab Widget  με 3 tabs
  - Numbered Page Navigation
  - Automatic Read More Function
  - Comment Reply Option

Wordpress Theme έχει σχεδιαστεί από www.thebookish.info και μετατροπή για blogger έγινε από εμένα .

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

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

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

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<!-- NavBar -->
                <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='Multilevel'>Multilevel</a>
<ul>
    <li class='page_item page-item-3'><a href='YOUR-LINK-HERE' title='SubPage'>SubPage</a></li>
    <li class='page_item page-item-4'><a href='YOUR-LINK-HERE' title='SubPage2'>SubPage2</a></li>
        <li class='page_item page-item-5'><a href='YOUR-LINK-HERE' title='SubPage3'>SubPage3</a></li>
    <li class='page_item page-item-6'><a href='http://YOUR-LINK-HERE' title='SubPage4'>SubPage4</a></li>
</ul>
</li>
       <li class='page_item page-item-7'><a href='http://YOUR-LINK-HERE' title='Sample Page'>Sample Page</a></li>
       <li class='page_item page-item-8'><a href='http://YOUR-LINK-HERE' title='SecMultiLevel'>SecMultiLevel</a>
<ul>
    <li class='page_item page-item-9'><a href='http://YOUR-LINK-HERE' title='Sub Page'>Sub Page</a></li>
    <li class='page_item page-item-10'><a href='http://YOUR-LINK-HERE' title='Sub Page 2'>Sub Page 2</a></li>
    <li class='page_item page-item-11'><a href='http://YOUR-LINK-HERE' title='Sub Page 3'>Sub Page 3</a></li>
    <li class='page_item page-item-12'><a href='http://YOUR-LINK-HERE' title='Sub Page 4'>Sub Page 4</a></li>
    <li class='page_item page-item-13'><a href='http://YOUR-LINK-HERE' title='Sub Page 5'>Sub Page 5</a></li>
</ul>
</li>
        </ul>
2 .  Και αλλάξτε τα  url με τα δικά σας  .

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

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<!-- Bookmark -->
  <ul class='clearfix' id='bookmark'>
            <li><a href='http://feeds.feedburner.com/bloggertrics' title='Join RSS feed'><img alt='RSS' src='http://1.bp.blogspot.com/_Q6tRnBVZnko/S9CS3RRZW_I/AAAAAAAAAZ4/n0YB-Rd0dwM/s1600/rss_icon.png'/></a></li>
            <li><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='Stumble' src='http://4.bp.blogspot.com/_Q6tRnBVZnko/S9CS6COx_-I/AAAAAAAAAaA/V02aQIxQrPE/s1600/stumble_icon.png'/></a></li>
            <li id='sep'><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://1.bp.blogspot.com/_Q6tRnBVZnko/S9CS_oMUDoI/AAAAAAAAAaQ/RqVgBIldvOk/s1600/technorati_icon.png'/></a></li>
               <li><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://3.bp.blogspot.com/_Q6tRnBVZnko/S9CSSbs7VvI/AAAAAAAAAZo/nxVhogJrobQ/s1600/digg_icon.png'/></a></li>
            <li><a href='http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Add us to Delicious'><img alt='Delicious' src='http://3.bp.blogspot.com/_Q6tRnBVZnko/S9CSycMHLRI/AAAAAAAAAZw/0AGLPee6mhU/s1600/delicious_icon.png'/></a></li>
            <li id='last'><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://2.bp.blogspot.com/_Q6tRnBVZnko/S9CSKp_pE1I/AAAAAAAAAZg/Eo3sO01iiQs/s1600/twitter_icon.png'/></a></li>                      
            </ul>
2 .  Και αλλάξτε το http://feeds.feedburner.com/bloggertrics  με το δικο σας RSS 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, εκεί θα δείτε κάτι σαν αυτό :
ID του blog σας
Αντιγράφετε τα νούμερα που θα δείτε στο τέλος και αντικαταστήστε το YOUR-BLOG-ID   με το ID του blog σας

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

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<!-- 125x125 AdBar -->
<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 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<!-- Tabbed Nav-->
<div id='tabbed'>
    <!-- The tabs -->
    <ul class='tabnav clearfix'>
    <li class='edge'><a href='#rposts'>Recent Posts</a></li>
    <li><a href='#blogroll'>My Blogroll</a></li>
        <li class='edge'><a href='#archives'>Archives</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>
<!-- tab 3 -->
    <div class='tabdiv' id='archives'>
    <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>
    </ul>
    </div>
</div>   
2 .  Και αλλάξτε το lINKS  με το δικά σας
 

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

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<!-- Slider -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='slider'>
<ul>
<li>
    <div class='post-1 post hentry category-featured ' id='post-1'>
        <h2 class='headline'><a href='http://post-link.html' rel='bookmark' title='Post Title Here'>Post Title Here</a></h2>
        <h4 class='date'>Post Date Here</h4>
        <div class='entry clearfix'>
                        <a class='postImage' href='http://post-link.html'><img alt='Post Title Here' src='http://i40.tinypic.com/25ibww4.jpg'/></a>
                Consectetur adipiscing elit. Nullam elementum leo ac orci luctus accumsan. Pellentesque nibh metus, tristique eu venenatis vitae, euismod at justo. Suspendisse hendrerit augue urna. Fusce pellentesque varius nibh volutpat pellentesque. Fusce id tellus quam, quis gravida nisl. Suspendisse at tellus urna. Sed accumsan condimentum dapibus. Sed tristique tempor augue non vulputate. Curabitur nec tellus massa. Sed congue mattis arcu, sed ultrices ligula dapibus eget. Proin nec nibh eget velit aliquet semper nec in lacus. ...    </div>
           <div class='postMeta'>
        <h4 class='more'><a href='http://post-link.html' title='Read More'>Read More...</a></h4>
        <h4 class='commentnum'><a href='http://post-link.html#comments' title='Comment on TemplateInfo'>Comments (4)</a></h4>
        </div>
        </div>
</li>
<li>
    <div class='post-2 post hentry category-featured ' id='post-2'>
        <h2 class='headline'><a href='http://post-link.html' rel='bookmark' title='Post Title Here'>Post Title Here</a></h2>
        <h4 class='date'>Post Date Here</h4>
        <div class='entry clearfix'>
                        <a class='postImage' href='http://post-link.html'><img alt='Post Title Here' src='http://i42.tinypic.com/2vsixwo.jpg'/></a>
                Consectetur adipiscing elit. Nullam elementum leo ac orci luctus accumsan. Pellentesque nibh metus, tristique eu venenatis vitae, euismod at justo. Suspendisse hendrerit augue urna. Fusce pellentesque varius nibh volutpat pellentesque. Fusce id tellus quam, quis gravida nisl. Suspendisse at tellus urna. Sed accumsan condimentum dapibus. Sed tristique tempor augue non vulputate. Curabitur nec tellus massa. Sed congue mattis arcu, sed ultrices ligula dapibus eget. Proin nec nibh eget velit aliquet semper nec in lacus. ...        </div>
           <div class='postMeta'>
        <h4 class='more'><a href='http://post-link.html' title='Read More'>Read More...</a></h4>
        <h4 class='commentnum'><a href='http://post-link.html#comments' title='Comment on Post Title Here'>Comments (2)</a></h4>
        </div>
        </div>
</li> 
</ul>
</div>
2 . Και αλλάξτε τα links  με τα δικά σας


Για οτιδήποτε θέλετε να ρωτήσετε, μπορείτε να αφήσετε τα σχόλια σας !!!
Read More ►

Παρασκευή, Μαΐου 21

0

20 τρομεροί πόροι όπου μπορείτε να βρείτε δωρεάν εικονίδια

Σε αυτήν την κατηγορία ας ρίξουμε μια ματιά στο Internet' να βρούμε κάποιες ιστοσελίδες που προσφέρουν μερικά από τα καλύτερα free graphics για κάθε μας έργο  .

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

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


1.  WebsiteIcons.com


Κάθε μήνα σχεδιάζουν τα εικονίδια ειδικά για τη χρήση στους ιστοχώρους ή στις εφαρμογές λογισμικού.
Δίνει πρόσβαση σε πάνω από 2000 εικονίδια, τα οποία χωρίζονται σε 3 κατηγορίες :

-> Vista Style icons
-> All flags of the world
-> Pixel icons


2.  100,000 Free Icons



Αν χρειάζεστε high quality free icons για το Web project σας , τότε δεν χρειάζεται να ψάξετε άλλο ....
Σε αυτό το site  θα βρείτε τα πάντα , από "social media" icons μέχρι  emoticons και "Polaroid" style images .


3.  dryicons.com




Κάθε μήνα  προσφέρει υψηλής ποιότητας Free Icon Set και Free Vector Graphics για κάθε Web project .
Τα γραφικά πραγματικά είναι καταπληκτικής ποιότητας και διαθέτει τεράστια γκάμα για να διαλέξετε αυτό που σας αρέσει .
Go to top

4.  vector4free 





Είναι μια ιστοσελίδα αφιερωμένη στα free vectors γραφικά: Adobe Illustrator AI, EPS, PDF, SVG, Corel Draw CDR αρχεία για να κατεβάσετε δωρεάν - αυτό είναι που μπορείτε να βρείτε εδώ.
Για να διευκολυνθεί η αναζήτησή σας στα αρχεία  , όλα τα είδη έχουν χαρακτηριστεί από ετικέτες.
Μπορείτε επίσης να υποβάλετε τα δικά σας γραφικά στο vector4free.com.


5.  freesocialicons.com





FreeSocialIcons.com είναι είναι ένα site  που προσφέρει  αποκλειστικά free social networking icons και icon sets .
Μπορείτε να χρησιμοποιήσετε αυτές τις ελεύθερες εικόνες χωρίς κανένα περιορισμό για την προσωπική χρήση και εμπορικά έργα, όπως στις ιστοσελίδες των επιχειρήσεων και των blogs.

Go to top

6.  Iconshock



Η ιστοσελίδα παρέχει, κατά την άποψή μου , την πιο επαγγελματική και ολοκληρωμένη συλλογή εικόνων στο Διαδίκτυο.
Τα  πιο περιεκτικά , κομψά icon sets ειναι διαθέσιμα.  με Ποιότητα Brilliant και απίστευτη ποικιλία. Συνιστάται ανεπιφύλακτα !
Go to top


7.  Ιcofree




Εδώ θα βρείτε τα  καλύτερα  ελεύθερα εικονίδια  από τους icon artists .
Είναι δωρεάν για προσωπική και μη εμπορική χρήση / δωρεάν για δημόσια μη εμπορική χρήση .
Εάν είστε σχεδιαστής εικονιδίων  και θέλετε να προβληθούν εικόνες σας το  icofree.com  είναι το καλύτερο μέρος!


8.  Iconspedia




Εδώ θα βρείτε τα πιο κατάλληλα εικονίδια για την σελίδα σας η για το έργο σας .
Το καλύτερο είναι δεν χρειάζεται να κατεβάσετε ολόκληρα icon sets,  μπορείτε να κατεβάσετε μεμονωμένες εικόνες τις προτίμησής σας .

Go to top

9.  Weloveicons





Ιδιαίτερα καλαίσθητα ,υψηλής ποιότητας εικονίδια για κάθε σας έργο !
Πραγματικά αξίζει να το επισκεφτείτε !

10.  Ιconsgator




Ακόμη ψάχνετε εικονίδια ? ...Σταματήστε να ψάχνετε  γιατί εδώ θα  βρείτε όλα όσα ζητάτε και ακόμη περισσότερα !

Go to top

11.  Ιconpaper




Ίσως η μεγαλύτερη συλλογή γραφικών !
Εδώ  θα βρείτε τα πάντα  πραγματικά , από "social media" icons  , Screensavers και Docks μέχρι Wallpapers .

12.  Fast Icons



Go to top

13.  VistaIcons.com





VistaIcons.com είναι μια συλλογή των ελεύθερων εικονιδίων .Vista Style σειρές πάνω από 2500 υψηλής ποιότητας εικόνες σε png και τη μορφή ico.


14. icondock





Θα βρείτε μια αρκετά μεγάλη συλλογή από δωρεάν εικονίδια , υψηλής ποιότητας .

Go to top

15 .  Webtreats




Σε αυτό το site θα βρείτε ότι μπορείτε να φανταστείτε .
Patterns , Photoshop layer styles , Social Networking Icons ,Photoshop Brushes , Textures και πολλά άλλα .
Πραγματικά αξίζει ...


16 .deviantart





Μην ξεχάστε  το  deviantart, έχουν τόσα πολλά καταπληκτικά εικονίδια , που μπορείτε να πραγματικά να χαθούμε μέσα στην   ιστοσελίδα.

Go to top

Όχι δεν τελειώσαμε ακόμη ..... Έχουμε να δούμε και άλλα !.....


Μηχανές Αναζήτησης για εικόνες :


17 . Findicons




Go to top


18. Iconseeker




Go to top

19.  Iconfinder




Go to top

20.  IconLook.com




Go to top

Ελπίζω  αυτή η λίστα να σας βοηθήσει να βρείτε ότι ψάχνετε !

Αν γνωρίζετε  κάποια άλλη σελίδα  που δεν συμπεριλαμβάνετε στην λίστα   ενημερώστε μας.
Read More ►

Τρίτη, Μαΐου 18

6

Aλλο ένα στιλάτο featured content slider στο Blogger με την χρήση jQuery UI


Αυτό το script επιτρέπει  να επιδείξετε τα πιο δημοφιλή η πιο ενδιαφέροντα άρθρα και αναρτήσεις από το  blog σας .
FeaturedContentSliderjQueryΜπορείτε επίσης να αναδείξετε και κάποιες παλιές αναρτήσεις που δύσκολα τα βρίσκει ο επισκέπτης του blog σας
Το Featured contents συνήθως θα πρέπει να εμφανίζετε στην αρχική σελίδα του blog ,  διευκολύνοντας έτσι τους επισκέπτες  να βρούνε στην στιγμή τις πιο “hot αναρτήσεις ” από το blog σας. 
Επίσης , είναι κομψό και λειτουργικό .

Click  εδώ για demo


Τα βήματα που πρέπει να ακολουθηθούν είναι τα εξής  :


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

2. Εισάγετε τον παρακάτω κώδικα  στο Html του πρότυπου σας  ακριβώς πάνω από την ετικέτα : ]]></b:skin> 

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
}
#featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
}
#featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
}

#featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
        overflow:hidden;
}
#featured .ui-tabs-hide{
    display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
    display:block;
    height:60px;
    color:#333;  background:#fff;
    line-height:20px;
    outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
    background:url(' http://3.bp.blogspot.com/_L116RpGjEMY/S-3MJC5jdTI/AAAAAAAABuc/_-Lmjmgqelo/s1600/tabs-selected.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
}

#featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px; 
    background: url('http://1.bp.blogspot.com/_L116RpGjEMY/S-3LQB_CsKI/AAAAAAAABuY/KipWcEpC2Zg/s1600/panel+.info.png');
}
#featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
}
#featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
}
#featured .info a{
    text-decoration:none;
    color:#fff;
}
#featured .info a:hover{
    text-decoration:underline;
}

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
</script>

4. Τώρα  πηγαίνετε  Στοιχεία Σελίδας  και δείτε κάτω από την επικεφαλίδα αν υπάρχει στοιχειό  Προσθήκη gadget , πατήστε το και  επιλέξτε  HTML/JavaScript , εισάγετε τον παρακάτω κώδικα στο κουτί και αποθηκεύετε


1


<div id="featured">
          <ul class="ui-tabs-nav">
            <li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src=" http://lh5.ggpht.com/_L116RpGjEMY/S89usJ-JIHI/AAAAAAAABkE/zwaCuelG7dw/image1-small.jpg "/><span>15+ Excellent High Speed</span></a></li>
            <li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src=" http://lh4.ggpht.com/_L116RpGjEMY/S89usWJvQeI/AAAAAAAABkM/nP98Bd62-y4/image2-small.jpg "/><span>20 Beautiful Long Exposure</span></a></li>
            <li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src=" http://lh5.ggpht.com/_L116RpGjEMY/S89wpzv-z_I/AAAAAAAABks/CuHLZemhd4s/image3-small.jpg "/><span>35 Amazing Logo Designs</span></a></li>
            <li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="http://lh5.ggpht.com/_L116RpGjEMY/S89wqfhE9UI/AAAAAAAABk0/QVO8IYt9w2g/image4-small.jpg"/><span>Create a Vintage</span></a></li>
          </ul>
        <!-- First Content -->
        <div id="fragment-1" style="" class="ui-tabs-panel">
            <img alt="" src=" http://lh3.ggpht.com/_L116RpGjEMY/S89ur2bAB-I/AAAAAAAABkA/N22X9P1yf2Q/image1.jpg"/>
             <div class="info">
                <h2><a href="#">15+ Excellent High Speed</a></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">read more</a></p>
             </div>
        </div>
        <!-- Second Content -->         <div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src=" http://lh6.ggpht.com/_L116RpGjEMY/S89usCo-PLI/AAAAAAAABkI/vPQYRcUNn9c/image2.jpg "/>
             <div class="info">
                <h2><a href="#">20 Beautiful Long Exposure</a></h2>
                <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">read more</a></p>
             </div>
        </div>
        <!-- Third Content -->
        <div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src=" http://lh3.ggpht.com/_L116RpGjEMY/S89wpo3di-I/AAAAAAAABko/UkEshdWie9M/image3.jpg"/>
             <div class="info">
                <h2><a href="#">35 Amazing Logo Designs</a></h2>
                <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">read more</a></p>
             </div>
        </div>
        <!-- Fourth Content -->
        <div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
            <img alt="" src="http://lh5.ggpht.com/_L116RpGjEMY/S89wqDR9mJI/AAAAAAAABkw/fDRv5XJH9TM/image4.jpg"/>
             <div class="info">
                <h2><a href="#">Create a Vintage</a></h2>
                <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">read more</a></p>
             </div></div></div>

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


Σημείωση :  Αν δεν βρείτε κάτω από την επικεφαλίδα το στοιχειό  Προσθήκη gadget , τότε εισάγετε τον κώδικα μέσα στο  Html πρότυπο σας  .

Θα βρείτε στο πρότυπο σας την ετικέτα  <div id='main-wrapper'> και κολλάτε τον παραπάνω κώδικα ακριβώς από πάνω

Καλή επιτυχία σε όλους :) 
Read More ►

Δευτέρα, Μαΐου 17

0

wpTune |Free Blogger Template

wpTune Blogger Template
                         
                              Demo    Download

wpTune είναι ένα καθαρό , μοντέρνο blogger πρότυπο , με απαλούς  ανοιχτόχρωμους συνδυασμούς .
Ένα φρέσκο και classy πρότυπο που ταιριάζει  σε κάθε τύπου blog   .

Είναι δοκιμασμένο σε Firefox, Safari , Opera και Internet Explorer 8 .

Οι στρογγυλεμένες γωνίες σε μερικά στοιχεία μπορεί να μην λειτουργούν σε Browsers που δεν υποστηρίζουν CSS3 elements .

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

  • 2 στήλες
  • Fixed Width
  • Right Sidebar 
  • Μπλε , Άσπρο 
  • μοναδικός σχεδιασμός λίστας  σχόλιων
  • Υποστήριξη Διαθέσιμη

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

Για να ρυθμίσετε το Top menu :
 
top menu
1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<div id="top_menu" class="span-96 last">
  <ul>
    <li><a expr:href="data:blog.homepageUrl">Home</a> </li>
    <li><a expr:href="data:blog.homepageUrl + &quot;feeds/posts/default&quot;">Posts RSS</a> </li>
    <li><a expr:href="data:blog.homepageUrl + &quot;feeds/comments/default&quot;">Comments RSS</a> </li>
    <li><a href="#">Text 1</a> </li>
    <li><a href="#">Text 2</a> </li>
    <li><a href="#">Edit</a> </li>
  </ul>
</div>
<!-- end top_menu -->
2 .  Αλλάξτε τα Text 1Text 2 , Edit με τα δικά σας links

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


menu
1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<!-- Menu -->
<div class='clear last' id='menu'>
            <div id='menu_l'/>
            <div id='menu_r'/>
            <ul>
     <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
       <li><a href='#'>Text 1</a></li>
       <li><a href='#'>Text 2</a></li>
        <li><a href='#'>Edit</a></li>  
            </ul>
        </div><!-- end menu --> 
2 .  Αλλάξτε τα  με τα δικά σας links

Για να ρυθμίσετε το 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, εκεί θα δείτε κάτι σαν αυτό :

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

Συντελεστές και Άδεια Χρήσης :

 

Για το Wordpress σχεδιάστικε από  http://wpburn.com  και μετατροπή για blogger έγινε από εμένα


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

Εάν χρησιμοποιείτε αυτό το πρότυπο ή το προσφέρετε αυτό για download από το site σας , παρακαλούμε να συμπεριλάβετε μια σύνδεση πίσω στο http://bloggertrics.blogspot.com  ως απόδοση για το σχεδιασμό και διατηρείστε  τις πληροφορίες του συγγραφέα στο κώδικα του προτύπου.
Σε όλες τις άλλες περιπτώσεις, μπορείτε να προσαρμόσετε και να χρησιμοποιήσετε  αυτό το πρότυπο για κάθε τύπου  blog .

Οι σκέψεις σας :

 

Ελπίζω να απολαύσετε τη χρήση του wpTune στα blogging έργα σας!


Παρακαλώ επιτρέψτε μου να γνωρίζω τις απόψεις σας για αυτό το πρότυπο, αφήνοντας τα σχόλιά σας παρακάτω.
Read More ►

Σάββατο, Μαΐου 15

0

Όμορφες λεζάντες ( Captions ) με CSS στις φωτογραφίες σας

Όπως ήδη ξέρετε το Blogger μας δίνει την δυνατότητα  να προσθέσουμε λεζάντες στις φωτογραφίες μας .

Αν δεν ξέρετε πως να βάλετε λεζάντες λοιπόν δείτε πως να το κάνετε :

1 . Ανεβάζετε κανονικά την φωτογραφία που θέλετε να δημοσιεύσετε στην ανάρτηση ( πιστεύω όλοι ξέρετε πως δημοσιεύουμε εικόνες στο blogger ) και όταν φορτώσει η εικόνα , πατήστε με τον κέρσορα σας ελαφρά πάνω στην φωτογραφία , μέχρι να εμφανιστεί ένα μικρό  μπλε πλαίσιο , απ’ όπου ρυθμίζετε την διάταξη και το μέγεθος της εικόνας .

λεζαντα

2 .Εκεί θα δείτε ένα σύνδεσμο Προσθήκη λεζάντας ,  πατήστε το και κάτω από την  φωτογραφία σας θα εμφανιστεί το  κείμενο Προσθήκη λεζάντας


λεζαντα1

3 . Το διαγράφετε  αυτό το κείμενο και στην θέση του γράφετε  ότι εσείς θέλετε , έπειτα δημοσιεύετε την ανάρτηση σας  και το αποτέλεσμα θα μοιάζει κάπως έτσι :



Να σας πω την αλήθεια , δεν είναι και πολύ εντυπωσιακό !!!!!

Ας το αλλάξουμε λοιπόν , να το κάνουμε να φαίνεται πιο  όμορφο .

Για να το κάνουμε αυτό απλά θα τροποποιήσουμε τον αρχικό κώδικα στο πρότυπο μας .

Βήμα 1ο :
 
Πηγαίνετε  Σχεδίαση –> Επεξεργασία HTML και κάντε κλικ στο κουτάκι Επέκταση προτύπων γραφικών στοιχείων


Βήμα 2ο :
 
Τώρα βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}

Τώρα, αυτό που πρέπει να κάνετε είναι να διαγράψετε τις γραμμές τις  οποίες έχω τονίσει με κόκκινο χρώμα .

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

table.tr-caption-container {
padding-top: 4px;
margin: 10px;
background-color: #f4f3f3;
text-align: center; 
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-color:#a8a8a8 #a8a8a8 #a8a8a8;
border-style:solid solid solid;
border-width:1px 1px 1px;
}
.tr-caption-container img {
padding-top: 4px;
margin: 10px;
background-color: #f4f3f3;
}
.tr-caption{
padding: 0 4px 5px;
margin: 0;
letter-spacing:.1em;
color: #000;
font-weight: bold;
text-shadow:1px 1px 1px #fff;
line-height: 17px;
font: Cambria, "Chaparral Pro", Georgia, "Times New Roman", serif;
}

Αποθηκεύετε το πρότυπο σας και δείτε το αποτέλεσμα .  

Autumn Flowers


Read More ►

Παρασκευή, Μαΐου 14

0

Στολίστε τα BLOCKQUOTES με CSS και Εικόνες

  Στο πνεύμα να κάνουμε την blog-όσφαιρα καλύτερη και ομορφότερη, κινείται και αυτή η ανάρτηση μου .

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


Εδώ είναι ο κώδικας για ένα απλό blockquote , αυτό που χρησιμοποιούν τα περισσότερα πρότυπα μας
5

.post blockquote {    
  margin:1em 20px;      
}      
.post blockquote p {       
  margin:.75em 0;      
}

Δεν είναι και πολύ εντυπωσιακό έτσι ???!!!


Μπορούμε όμως να κάνουμε πιο όμορφα blockquote μας με απλή πρόσθεση CSS και εικόνας αν θέλουμε .
Απλά  αλλάζοντας  τους αρχικούς κωδικούς  blockquote στο πρότυπο μας .

Ας δούμε μερικά παραδείγματα  με μερικά όμορφα blockquotes :

  1  Παράδειγμα :


Και ο CSS κώδικας για αυτό θα είναι :


blockquote {      
background:#F5F5F5 none repeat scroll 0 0;       
border-left:8px solid #CCCCCC;      
border-right:1px dotted #CCCCCC;      
font-family:georgia,serif;      
margin-bottom:12px;       
margin-left:10px;       
margin-right:10px;       
padding:12px;      
}

2  Παράδειγμα :

  Και ο CSS κώδικας είναι :


blockquote p:before {      
content:url(http://lh5.ggpht.com/_L116RpGjEMY/S8h4DAm4DnI/AAAAAAAABfw/LFIBHnYiIUc/quote-left.gif);       
margin-right:10px;       
text-align:left;       
opacity:0.4;       
} 
blockquote p:after {      
content:url(http://lh6.ggpht.com/_L116RpGjEMY/S8h4DbrU9uI/AAAAAAAABf0/Da6rmGW69cI/quote-right.gif);       
display:block;       
margin-top:-16px;       
text-align:right;       
opacity:0.4;       
}

  3  Παράδειγμα : 

 1

Και ο CSS κώδικας είναι :


blockquote {      
background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ;       
background-position:;       
background-repeat:repeat-y;       
margin: 0 20px;       
padding: 20px 20px 20px 50px;       
color:#C7CACF;       
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";       
}       
.post blockquote p {       
margin: 0;       
padding-top: 10px;       
}

  4  Παράδειγμα : 


4

Και ο CSS κώδικας είναι :


blockquote {      
background: url(http://lh3.ggpht.com/_L116RpGjEMY/S8h5sjhMepI/AAAAAAAABf4/tjx3lNHPp44/blockquoteSTART.gif) top left no-repeat;       
} 
blockquote p {      
background: url(http://lh6.ggpht.com/_L116RpGjEMY/S8h5sgvjXsI/AAAAAAAABf8/K9HpwH2S5jw/blockquoteend.gif) bottom right no-repeat;       
padding-left: 30px;       
padding-right: 30px;       
}

Και το HTML θα είναι :


<blockquote>      
    <p>       
        Lorem ipsum dolor sit amet, consectetur adipisicing       
        elit, sed do eiusmod tempor incididunt ut labore et       
        dolore magna aliqua. Ut enim ad minim veniam, quis       
        nostrud exercitation ullamco laboris nisi ut aliquip       
        ex ea commodo consequat.       
    </p>       
</blockquote>

  5  Παράδειγμα : 

 16-4-2010 5-58-28 μμ

Και ο CSS κώδικας είναι :


blockquote {      
 margin: 1em 3em;       
 color: #999;       
 border-left: 2px solid #999;       
 padding-left: 1em; }

  6  Παράδειγμα : 

 16-4-2010 6-00-50 μμ

Και ο CSS κώδικας είναι :


blockquote {      
background:transparent url(http://4.bp.blogspot.com/_L116RpGjEMY/S-0wQ4b9C5I/AAAAAAAABss/bY0vDej1rs8/s1600/blockquote.gif) no-repeat scroll 0 0;       
font-family:Georgia,"Times New Roman",Times,serif;       
font-size:1em;       
margin:15px 0;       
min-height:32px;       
padding:0 50px;       
}

  7  Παράδειγμα :

16-4-2010 6-02-29 μμ

Και ο CSS κώδικας είναι :


blockquote {      
 margin: 1em 3em;       
 padding: .5em 1em;       
 border-left: 5px solid #fce27c;       
 background-color: #f6ebc1; }       

blockquote p {       
 margin: 0; }

  8  Παράδειγμα : 

 16-4-2010 6-15-33 μμ

Και ο CSS κώδικας είναι :


blockquote {      
 margin: 5px 10px 5px 10px;       
 padding: 10px 60px 10px 10px;       
 border-width: 1px;       
 border-style: solid;       
 border-color: #cfcfcf;       
 background-color: #d3eefd;       
 background-image: url(http://lh4.ggpht.com/_L116RpGjEMY/S8h_JTMaN9I/AAAAAAAABgE/2inxUMw8EWU/blockquote3-img.png);       
 background-repeat: no-repeat;       
 background-position: top right;       
 font-family: Georgia;       
 font-size: 14px;       
 font-weight: bold;       
 color: #8f8f8f;       
 }

  9  Παράδειγμα :


 16-4-2010 6-19-05 μμ

Και ο CSS κώδικας είναι :


blockquote {      
border: 1px solid #5c5656;       
margin: 1em 0;       
padding: 10px;       >
background: #f8f7f6 url(http://lh5.ggpht.com/_L116RpGjEMY/S8h_u_zBrEI/AAAAAAAABgI/VevrHwN8YnE/blq.gif); 
}

  10  Παράδειγμα :

 7

Και ο CSS κώδικας είναι :


blockquote {      
margin: 0 20px;       
padding: 20px 20px 20px 50px;       
background-position:;       
background:#D9E197 url(http://lh4.ggpht.com/_L116RpGjEMY/S8iaextgutI/AAAAAAAABgM/m1S2_kpIii4/s512/blockquote-1.png);       
background-repeat:repeat-y;      
font-family:Georgia,"Times New Roman",Times,serif;      
font-size:1em; 
}

  11  Παράδειγμα :

6

Ο CSS κώδικας :


blockquote {     
background:#f9f9f9;      
border-left:10px solid #C92014;      
margin:1.5em 10px;      
padding:.5em 10px;       
quotes:"\201C""\201D""\2018""\2019";      
}       
blockquote:before {       
color:#C92014;      
content:open-quote;       
font-size:4em;       
line-height:.1em;       
margin-right:.25em;      
vertical-align:-.4em;       
}      
blockquote p {       
display:inline;      
}

Αυτά ήταν !!!!!

Είναι πολύ όμορφα έτσι ? !....
Μπορείτε και εσείς να αλλάξετε τα BLOCKQUOTES σας εύκολα .

Καλή επιτυχία σε όλους : )
Read More ►

Πέμπτη, Μαΐου 13

5

ΚΙ ΑΛΛΟ ΒΡΑΒΕΙΟ!!!



Ευχαριστώ την υπέροχη φίλη μου την post2.soo για αυτό το όμορφο  βραβείο !!!!

Και επίσης σ' ευχαριστούμε για τα καταπληκτικά  μυστικά   ομορφιάς που μοιράζεσαι μαζί μας : )
Read More ►

Τρίτη, Μαΐου 11

2

Artistic -Άλλο ένα Free Blogger Template By BLOGGERTRICS

snap_1

   Preview   Download


Artistic είναι ένα πανέμορφο FREE Blogger Template για το προσωπικό σας blog .


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

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

  • 2 columns
  • Fixed width, Widget ready.
  • Right Sidebar
  • Light brown
  • 125x125 Banners Ready
  • Πανέμορφα σχεδιασμένο Comment Section
  • Vintage στυλ θέμα , για ενα blog με άποψη !!!!

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

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

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<ul id='navBar'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a>
</li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a>
</li>
<li><a href='#'>Text 1</a></li>
<li><a href='#'>Text 2</a></li>
<li><a href='#'>Edit</a></li>
</ul>
2 .  Και αλλάξτε τα url με τα δικά σας  .

Για να ρυθμίσετε τα 125x125 Banners:

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<div class='banner'>
<ul>
<li>
<a href='http://YOUR-LINK-HERE' target='_blank'>
<img alt='ads' border='0' src='http://i40.tinypic.com/jkd3yd.jpg'/></a>
</li>
<li> <a href='http://YOUR-LINK-HERE' target='_blank'><img alt='ads' border='0' src='http://i40.tinypic.com/jkd3yd.jpg'/></a>
</li>
<li>
<a href='http://YOUR-LINK-HERE' target='_blank'>
<img alt='ads' border='0' src='http://i40.tinypic.com/jkd3yd.jpg'/></a>
</li>
<li>
<a href='http://YOUR-LINK-HERE' target='_blank'>
<img alt='ads' border='0' src='http://i40.tinypic.com/jkd3yd.jpg'/></a>
</li>
</ul>
</div>

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

Για να ρυθμίσετε το Blogger date calendar  :

Πηγαίνετε Ρυθμίσεις -> Διαμόρφωση -> Μορφή Timestamp και επιλέξτε την μορφή :
" Κυριακή,Μάρτιος 07,2010 "

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

1 . Βρείτε στο πρότυπο σας τον παρακάτω κώδικα :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-it'>
<!-- 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://i39.tinypic.com/24bp5pv.jpg'/></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://i42.tinypic.com/svs21g.jpg'/></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://i44.tinypic.com/16911qx.jpg'/></a>
<!-- Technorati -->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'>
<img alt='Technorati' src='http://i41.tinypic.com/s4477s.jpg'/></a>
<!-- Twitthis -->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' target='_blank'>
<img alt='Twitter' src='http://i42.tinypic.com/211lboy.jpg'/></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://i40.tinypic.com/106boll.jpg'/></a>
<!-- linkedin -->
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='linkedin' src='http://i39.tinypic.com/a12ywk.jpg'/></a>
<!-- RSS -->
<a expr:href='&quot;Feed links here &quot;' title='Subscribe to Feeds'>
<img alt='Subscribe to RSS' src='http://i43.tinypic.com/a9p82r.jpg'/></a>
</div>
</b:if>

2 .  Και αλλάξτε το Feed links here με το δικό σας Rss Feed link.

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

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS