Ads 468x60px

Πέμπτη, 6 Ιουλίου 2017

Amazing jQuery Facebook Like Slide Out

Φίλες και φίλοι γειά σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο slide out Like για
το facebook!!Τοποθετείτε σαν κουμπί like στα αριστερά της σελίδας μας και όταν το κλικάρουμε
κάνει ανάδυση το slide out box από τον πάτο(footer) της σελίδας μας!









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



 Πηγαίνετε blogger--> 

Διάταξη --> Προσθήκη gadget-->

HTML/JavaScript

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

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


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

 <!-- Amazing Facebook Like Slide Out Widget For Blogger @NewBloggerTips.com -->  <a href="javascript:showHideNBTfl()"><img border="0" src="http://4.bp.blogspot.com/-YzvENSuE5q8/URbSi4Z1xqI/AAAAAAAALE4/MAKkVC0hH2Y/s1600/NBTLikeUs+1.png" alt="Member" title="Click to Follow" style="position: fixed; top: 150px; right: 0px; cursor: pointer; opacity: 0.5; " opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;"="" height="130px" width="35px" /></a>    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    <style type="text/css">  #NBTfl{  position:fixed;  left:150px;  z-index:+1000;  }  * html #NBTfl{position:relative;}  .NBTflcontent{  NBTfloat:left;  border:2px solid #676767;  background:whitesmoke;  -moz-border-radius-topleft:15px;  -moz-border-radius-topright:15px;  -moz-border-radius-bottomleft:15px;  -moz-border-radius-bottomright:15px;  padding:10px;  }  </style>  <script type="text/javascript">  function showHideNBTfl(){  var NBTfl = document.getElementById("NBTfl");  var w = NBTfl.offsetWidth;  NBTfl.opened ? moveNBTfl(0, -100-w) : moveNBTfl(20-w, 0);  NBTfl.opened = !NBTfl.opened;  }  function moveNBTfl(x0, xf){  var NBTfl = document.getElementById("NBTfl");  var dx = Math.abs(x0-xf) > 25 ? 35 : 1;  var dir = xf>x0 ? 1 : -1;  var x = x0 + dx * dir;  NBTfl.style.bottom = x.toString() + "px";  if(x0!=xf){setTimeout("moveNBTfl("+x+", "+xf+")", 10);}  }  </script>  <div id="NBTfl" style="bottom: -401px; ">  <div class="NBTfltab" onclick="showHideNBTfl()"> </div>    <div class="NBTflcontent">    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FUSERNAME FACEBOOK&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overNBTflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>      <div style="text-align: right;">  <a href="javascript:showHideNBTfl()">  <span style="color:#daa520;"><b>[Close]</b> </span>  </a></div></span>  <span style="font-size:10px;">Widget By: <strong><a href="http://www.newbloggertips.com/2013/02/add-amazing-jquery-facebook-like-slide.html"><span style="color: rgb(218, 165, 32);">NBT</span></a></strong></span>  </a></a></div>  </div>  <script type="text/javascript">  var NBTfl = document.getElementById("NBTfl");  NBTfl.style.bottom = (-100-NBTfl.offsetWidth).toString() + "px";  </script>  <!-- Amazing Facebook Like Slide Out Widget For Blogger @NewBloggerTips.com --> 
................................................................................................................................................
ΑΛΛΑΓΕΣ

USERNAME FACEBOOK- Εδώ βάζετε το username σας από το facebook!


150px-- Εάν αυξήσουμε το 150 το like κατεβαίνει προς τα κάτω, εάν το μειώσουμε ανεβαίνει
προς τα πάνω!


ΒΑΣΙΚΟ--->    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 

ΕΑΝ ΕΧΕΤΕ ΚΑΙ ΑΛΛΟ JQUERY CODE ΣΤΟ BLOG ΣΑΣ ΑΦΑΙΡΕΙΤΕ ΑΠΟ ΤΟΝ ΚΩΔΙΚΑ ΤΗΝ ΥΠΟΓΡΑΜΜΙΣΜΕΝΗ ΠΡΟΤΑΣΗ ΠΟΥ ΒΛΕΠΕΤΕ ΑΠΟ ΠΑΝΩ!

Υγ:Ενδέχεται σε κάποια πρότυπα (templates) και παρόλο την αφαίρεση το jquery να μην
λειτουργήσει!  

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


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



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






Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog