Ads 468x60px

Πέμπτη, 17 Μαρτίου 2016

Social Button Slide out Widget

Φίλες και φίλοι γεια σας, σε αυτήν την ανάρτηση θα δούμε μία απλή social bar
με κουμπιά.Διαθέτει ένα πολύ ωραίο οριζόντιο slide out effect και έχει links
για Rss - Facebook  - Twitter - Google+ .Mπορεί να τοποθετηθεί οριζόντια σε όποιο
σημείο του blog σας θέλετε με την γνωστή απλή διαδικασία!



                                                                 Δείτε εδώ το DEMO   



και για το εγκαταστήσετε και εσείς

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

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

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

<style>
#bssocialmenuslide {
  margin:0;
  padding:0;
  width: 30em;
  height: 4.5em;
  overflow:hidden;
  }
#bssocialmenuslide li {
  display:inline;
  list-style-type:none;
  }
#bssocialmenuslide li a {
  display:block;
  float:left;
  text-decoration:none;
  margin:0;
  }
#bssocialmenuslide li a img {
  opacity:0.7;
  margin:0.5em;
  border:0;
  float:left;
  }
#bssocialmenuslide li a span {
  display:none;
  }
#bssocialmenuslide li a:hover {
  background:transparent;
  }
#bssocialmenuslide li a:hover span {
  width:7em;
  color:#aaa;
  display:block;
  cursor:pointer;
  float:left;
  }
#bssocialmenuslide .h2 {
  margin:0 5px;
  padding:0;
  color:#fc0;
  font-variant:small-caps;
  font-size:1em;
  border:0;
  }                                                                                                                                       <!--www.bloggerspice.com-->
  </style>
  <ul id="bssocialmenuslide">
  <li>
    <a href="https://www.facebook.com/ΕΔΩ ΤΟ FACEBOOK USERNAME ΣΑΣ"><img src="https://lh5.googleusercontent.com/-uAEIdl5UdOw/UoluNptpqdI/AAAAAAAAMDw/PVbciGu4vAQ/s256/facebook%2520off.png" alt="facebook" width="50" height="50" title="Facebook" />
     <span><br />
      <b class="h2">Facebook</b><br />
      Add to Facebook
     </span>
    </a>
   </li>
  <li>
    <a href="https://twitter.com/ΕΔΩ ΤΟ ΤWITTER USERNAME ΣΑΣ">
     <img src="https://lh6.googleusercontent.com/-pxxQ91Uuo_g/UoludgzuuWI/AAAAAAAAMJI/LJ-Lu9Sct1s/s256/twitter%2520off.png" alt="twitter" width="50" height="50" title="twitter" />
     <span><br />
      <b class="h2">Twitter</b><br />
      add to twitter
     </span>
    </a>
   </li>
   <li>
    <a href="https://plus.google.com/EΔΩ ΤΟ GOOGLE PLUS ID ΣΑΣ"><img src="https://lh3.googleusercontent.com/-9tRbIz-3Z0k/UoluT1KukbI/AAAAAAAAMF4/lRNk__avndg/s256/google%252B%2520off.png" alt="Google plus" width="50" height="50" title="=Google plus" />
     <span>
      <br />
      <b class="h2">Google +</b><br />
      Add to Google +
     </span>
    </a>
   </li>
   <li>
    <a href="http://feeds.feedburner.com/EΔΩ ΤΟ FEED ΣΑΣ"><img src="https://lh4.googleusercontent.com/-EVVwfYex7Ok/UoluaX2pTsI/AAAAAAAAMH8/3dmzLOzsfG0/s116/rss%2520off.png" alt="Rss" width="50" height="50" title="Rss" />
     <span><br />
      <b class="h2">Rss Feed</b><br />
        Subscribe
     </span>
    </a>
   </li>
   <li>
  </li></ul>

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

Αντικαταστήστε όλα τα usernames με τα αντίστοιχα δικά σας που έχετε στα social media
και πατήστε Αποθήκευση!Αυτό ήταν!


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


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


Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog