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






Η εγκατάσταση του είναι απλή η βάζετε τον κώδικα

στο HTML section της ανάρτησης 

η ακολουθείτε την γνωστή διαδικασία..

Blogger-->Διάταξη

Προσθήκη gadget-->Html javascript

και κάνετε επικόλληση τον ακόλουθο κώδικα:

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

<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin: auto; position: relative; width: 400px;">
<!-- Original image inserted with blogger -->
<a href="ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ URL ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ URL ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ" /></a>
<!-- Text over the image -->
<br />
<div style="color: green; font-size: 24px; font-weight: bold; left: 130px; position: absolute; text-shadow: 2px 2px #FFC0CB; top: 110px;">
ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ
</div>
</div>  

 
....................................................................................................................................................................
ΑΛΛΑΓΕΣ

ΕΔΩ ΜΠΑΙΝΕΙ ΤΟ URL ΤΗΣ ΕΙΚΟΝΑ ΣΑΣ---Εδώ βάζετε την διεύθυνση της εικόνας σας!

Προσέξτε την βάζετε 2 φορές!

ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ---Εδώ γράφετε τον τίτλο που θα φαίνεται στην εικόνα!

green: Εδώ αλλάζετε το χρώμα του κειμένου με ότι θέλετε εσείς - red- blue- black - yellow κτλ!

left: 130px - Αλλάζετε την τιμή για να κεντράρετε το κείμενο στην εικόνα δεξιά η αριστερά και

αλλάζετε και το  top: 110px για το πάνω κάτω!


Αποθήκευση και έτοιμοι!


Καλή επιτυχία!


Πηγή κώδικα
thanks to probloggertricks.com



 Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
κάθετο vertical menu για το blog μας!Μπαίνει στην αριστερή η δεξιά sidebar
του blog μας, η και στο footer της σελίδας μας, εάν υπάρχει χώρος!Διαθέτει και
Hover effect στο mouseover του κέρσορα μας όπως θα







  
Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτό...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> 


Πηγή κώδικα 
thanks to dynamicdrive.com



 Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα οριζόντιο
menu για τα blog μας!Είναι αρκετά μεγάλο σε κατηγορίες, διαθέτει ένα 
πολύ ωραίο 3d flying effect και είναι ιδανικό για blogs που διαθέτουν
πολλές κατηγορίες θεμάτων!





 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

και στο παράθυρο που θα ανοίξει κάντε 

επικόλληση τον ακόλουθο κώδικα:-->

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

<style type="text/css">
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Αρχική</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">Γενικές ειδήσεις</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">Ποδόσφαιρο</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Επικοινώνια</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Αθλητικά</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Πιλότος</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Κίνηση</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">Εσωτερικά</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Καιρός</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->

............................................................................................................................................................
 ΑΛΛΑΓΕΣ

#url-->  Αντικαταστήστε όλα τα #url με τα urls (links) των δικών

σας διευθύνσεων!   


 Αρχική-->  Εδώ βάζετε τις δικές σας ονομασίες που

θέλετε να φαίνονται στις ετικέτες του menu!

Mόλις τελειώσετε από όλα Αποθήκευση και έτοιμοι! 


Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to avdhootblogger.com



 Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
κάθετο vertical menu για το blog μας!Μπαίνει στην αριστερή η δεξιά sidebar
του blog μας, η και στο footer του blog μας, και είναι με κώδικα Css3 ο οποίος
του δίνει ένα πολύ ωραίο animated slanted menu!





ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!
Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to dynamicdrive.com



Edit by

Φίλες και φίλοι γεια σας, όλοι η σχεδόν όλοι ξέρετε τι σημαίνει το blockquote
μέσω του οποίου μπορούμε να τονίσουμε και να αναδείξουμε διάφορα μέρη
και σημεία μίας ανάρτησης!Οι τρόποι που μπορούμε να το
κάνουμε αυτό είναι πολλοί όπως: Μέσα σε παρένθεση, κείμενο με εικόνα,
παράγραφο μέσα σε text box και άλλοι πολλοί!


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

Οι κώδικες έχουν παραμετροποιηθεί έτσι ώστε να χρειάζεται να τους εγκαταστήσουμε
απλά μέσα στο Html section της ανάρτησης!





ΚΩΔΙΚΑΣ ΠΡΩΤΟΣ...

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

  <style>
.post blockquote {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FC8E42;
border-radius: 240px 240px 240px 240px;
color: #333333;
margin: 1em 140px 80px;
padding: 70px 70px;
position: relative;
text-align: center;
font: 1.5em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:before {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #FFBD54;
border-radius: 50px 50px 50px 50px;
bottom: -40px;
content: "";
display: block;
height: 50px;
position: absolute;
right: 100px;
width: 50px;
z-index: 10;
}
.post blockquote:after {
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #5A8F00;
border-radius: 25px 25px 25px 25px;
bottom: -60px;
content: "";
display: block;
height: 25px;
position: absolute;
right: 50px;
width: 25px;
z-index: 10;
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
............................................................................................................................ 



ΚΩΔΙΚΑΣ ΔΕΥΤΕΡΟΣ...
 ...........................................................................................................
<style>
.post blockquote {
background: linear-gradient(#B8DB29, #5A8F00) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px 10px 10px 10px;
color: #FFFFFF;
margin: 30px 15px 5px;
padding: 15px 30px;
position: relative;
font: 1.6em/1.4 Cambria,Georgia,sans-serif;
font-weight: bold;
}
.post blockquote:after {
border-color: rgba(0, 0, 0, 0) #B5D928;
border-style: solid;
border-width: 50px 0px 0px 20px;
top: -50px;
content: "";
display: block;
left: 50px;
position: absolute;
width: 0;
}
</style> 

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 


 
ΚΩΔΙΚΑΣ ΤΡΙΤΟΣ....
.......................................................................................................................
 <style>
.post blockquote {
padding:10px 15px;
margin: 5px 15px;
border: 1px solid #E1E1E1;
background-color: #F6F6F6;
font-size: 15px;
font-family: Times;
}
.post blockquote:before {
content: "\201C";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
}
.post blockquote:after {
content: "\201D";
color: #F13937;
font-family: Times;
font-size:50px;
font-weight: bold;
line-height:0px;
vertical-align:middle;
padding:15px 0px 0px 5px;
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 




ΚΩΔΙΚΑΣ ΤΕΤΑΡΤΟΣ....
.......................................................................................................................

  <style>
.post blockquote {
overflow:auto;width:400px;height:auto;
font-family: "Consolas", "Courier New", Courier, mono, serif;
margin : 15px 35px 15px 15px;
padding : 2px 10px 5px 60px;
line-height:1.7em;
clear : both;
color:#000;
list-style-type : none;
background : #F5F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyOIRMK6l4nTrCqKhHeTDVtr4slhXHtMRR5O6TInsaS0RnGg4as4E8KKzT5C2io-uYKfAvnN8xTztZQ63aFFfJgxUzUzJDr9Y0-bEPV4YgwIaYmYoZZu74hlp4kC7_xrpUZHxxTnfN3Hg/s1600/notepad1.gif) repeat-y top left;
border : 1px solid #ccc;
-webkit-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);
}
</style>

<blockquote>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ</blockquote>
................................................................................................................ 


 ΕΓΚΑΤΑΣΤΑΣΗ:

Απλά γράφετε το κείμενο σας  στο-- ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΣΑΣ --
και πηγαίνεται στο Html Section της ανάλογης ανάρτησης και κάνετε επικόλληση
τον κώδικα!

                     
Καλή επιτυχία!!! 

Πηγή κώδικα


 Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
script για να αναπαράγουμε φωτογραφίες στο blog μας μέσω ενός κώδικα
Css!Μπορείτε να το τοποθετήσετε στην αριστερή μπάρα της σελίδας σας,
η στο κέντρο, η όπου έχετε χώρο και να προσέξετε οι φωτογραφίες να έχουν
το ίδιο μέγεθος!







 Η εγκατάσταση είναι απλή και

για να το εγκαταστήσετε και εσείς:
 
Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> 
..............................................................................................................................................................

<style>

ul.gallery{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.gallery li{
  display: block;
  width: 200px; /* width of gallery */
  height: 50px; /* portion of each gallery image that's shown initially */
  position: relative;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


ul.gallery li img{
  position: absolute;
  width: 100%;
  border: 10px solid #D8D2A2;
 -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
    filter: url(#grayscale);
  filter: grayscale(1);
    -webkit-transition: all .5s ease-in-out; /* CSS3 transition setting */
    -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


ul.gallery li:focus{ /* when a LI receives focus (clicked on) */
  z-index: 100;
    outline: none;
    -webkit-transform: rotate(3deg); /* rotate enlarged LI by 3 degrees */
    -moz-transform: rotate(3deg);
    transform: rotate(3deg);
    pointer-events: none; /* disable pointer events on enlarged LI so thumbnail(s) beneath it can receive those events */
}

ul.gallery li:nth-of-type(even):focus{ /* even LIs that received focus */
    -webkit-transform: rotate(-1deg); /* rotate enlarged LI by -1 degrees instead */
    -moz-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

ul.gallery li:focus img{
  -webkit-transform: scale(2) translateX(80%); /* enlarge focused image and move horizontally */
  -moz-transform: scale(2) translateX(80%);
  transform: scale(2) translateX(80%);
  top: 10px; /* shift enlarged image downwards by 10px */
    outline: none;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
  -webkit-filter: grayscale(0); /* nullify grayscale effect */
  filter: none;
}

ul.gallery li:first-of-type:focus img{ /* first image within list of thumbnails that receives focus */
  top: 80px; /* move image down by 80px so it's not obscured by top of window edge */
}

svg{
    position: absolute;
    visibility: hidden;
}

</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0.3333 0.3333 0.3333 0 0
        0 0 0 1 0" />
    </filter>
</svg>
<ul class="gallery" title="Tab after clicking on a thumbnail to cycle though thumbnails">
<li tabindex="1"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="2"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="3"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="4"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="5"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
<li tabindex="6"><img src="Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ" /></li>
</ul>

........................................................................................................................................
ΑΛΛΑΓΕΣ

Η ΔΙΕΥΘΥΝΣΗ ΤΗΣ ΕΙΚΌΝΑΣ ΣΑΣ --Εδώ βάζετε την διεύθυνση url από την δική σας
εικόνα!

Αποθήκευση και έτοιμοι!


Καλή επιτυχία!!! 

Πηγή κώδικα
thanks to dynamicdrive.com





Edit by

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα  social network widget με ένα πολύ
ωραίο smooth expand hover effect!Είναι με κώδικα Css, δεν καθυστερεί το άνοιγμα
των blog μας, και τοποθετείτε κατά κύριο λόγο στην αριστερή sidebar, η άν έχετε χώρο,
κάτω στο footer των blog σας!





Η εγκατάσταση του είναι πάρα πολύ απλή!



Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει επικολλήστε τον ακόλουθο κώδικα--> 
...................................................................................................................................................

<style>#NBT-SNS {width: 260px;margin: 5px 20px;padding:5px;}#NBT-SNS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#NBT-SNS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpMn047ClD1CTBp9UXlXJlKa23dmX4iNgFdWM7VHl_Tb7021e0KFDFVlx3SfIq0s_RPdAFV0teZrRNaOMlkwb9LJ53mMo6SqwB7-XV5CS4z1ll9GrEs93kEDC2SrkhQ13mtg2P2b6Kv44/s1600/NBT-Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#NBT-SNS span:hover {visibility: hidden;}#NBT-SNS span {display: block;top: 15px;position: absolute;left: 90px;}#NBT-SNS .icon {color: #fafafa;overflow: hidden;}#NBT-SNS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#NBT-SNS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#NBT-SNS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#NBT-SNS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#NBT-SNS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#NBT-SNS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#NBT-SNS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#NBT-SNS li:hover .icon {width: 250px;}#NBT-SNS li:hover .icon {background-color: #d91e76;}#NBT-SNS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#NBT-SNS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#NBT-SNS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#NBT-SNS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#NBT-SNS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#NBT-SNS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#NBT-SNS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#NBT-SNS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="NBT-SNS"><li><a href="http://www.facebook.com/USERNAME FACEBOOK" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/USERNAME TWITTER" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li><li><a href="https://plus.google.com/GOOGLE PLUS ID" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li><li><a href="http://www.pinterest.com/USERNAME PINTEREST" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li><li><a href="http://in.linkedin.com/USERNAME LINKEDIN" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li><li><a href="http://www.youtube.com/user/USERNAME YOUTUBE" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li><li><a href="http://feeds.feedburner.com/USERNAME FEED" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li></ul></div><div style='clear: both;'></div> 

...............................................................................................................................................................
AΛΛΑΓΕΣ

Αντικαταστήστε όλα τα USERNAMES με τα αντίστοιχα δικά σας που έχετε στα social media, προσέξτε
στην αλλαγή να είναι ανάμεσα σε /  "  το username δηλαδή έτσι: /username"  


και μόλις τελειώσετε πατήστε 

Αποθήκευση! Αυτό ήταν!


 Καλή επιτυχία!!! 


Πηγή κώδικα 
thanks to newbloggertips.com



Edit by

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα κάθετο (vertical) 
big menu για την 
αριστερή η δεξιά sidebar του blog μας!Χωρίζεται σε 2 μέρη με
αρκετές κύριες κατηγορίες, 
απλό μενού χωρίς υποκατηγορίες και με hover effect
στο mouseover του κέρσορα μας!



ΤΙΤΛΟΣ-- Εδώ βάζετε τον τίτλο σας! Αποθήκευση και έτοιμοι!

Καλή επιτυχία!!! 


Πηγή κώδικα
 thanks to dynamicdrive.com



 Edit by