Ads 468x60px

Τετάρτη, 12 Οκτωβρίου 2016

CSS Pink Social Networking Widget

Φίλες και φίλοι γεια σας σε αυτήν την ανάρτηση θα δούμε μία social bar σε ροζ
χρώμα διαφορετική από όσες έχουμε δει μέχρι τώρα σε παλαιότερες αναρτήσεις
και λόγω χρώματος αλλά και λόγω εφέ καθώς διαθέτει και ένα πολύ ωραίο
οριζόντιο slide out!


Δείτε εδώ το 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="http://1.bp.blogspot.com/-7r14xTQfaso/UYi5yJ0H7CI/AAAAAAAACwg/LrD1OWgWGeQ/s1600/BS+Facebook.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="http://3.bp.blogspot.com/-GbkS6eD0WPo/UYi5y6md4dI/AAAAAAAACww/ziaOv5oiNJY/s1600/BS+Twitter.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="http://1.bp.blogspot.com/-eve1b3fX6Ss/UYi5yFBcCNI/AAAAAAAACwY/ILlooqDWOnI/s1600/BS+Google+Plus.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="http://4.bp.blogspot.com/-DAVYWR9Dxt8/UYi5yvUKkfI/AAAAAAAACws/oege3aDhZg8/s1600/BS+RSS.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