Ads 468x60px

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

Floating Facebook LikeBox Widget

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα Floating Facebook 
LikeBox Widget για το facebook!Τοποθετείτε στην κάτω δεξιά πλευρά της
σελίδας μας και η διαφορετικότητα του με άλλα παρόμοια widgets, είναι ότι δεν
ανοίγει με στυλ slideout αλλά σαν βεντάλια στο περίπου..!






Δείτε εδώ το DEMO




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

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

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

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

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

<style>
.MD-widget2012 {
    background-color: #2d176e;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    bottom:-6px;
    position:fixed;
    right:0;
    z-index:3;
}
* html .MD-widget2012 { /**/
    position: absolute;
    left: auto;
    bottom: auto;
left: expression( ( -1 - fbpromo_makingdifferent.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( (-1 - fbpromo_makingdifferent.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );/**/
}
.flt {
    float:left;
}
.MD-widget2012 span a {
    color: #808080;
    text-decoration:none;
}
.MD-widget2012 span a:hover {
    text-decoration:underline;
}
.MD-widget2012 span {
    bottom: 12px;
    font: 8px "lucida grande", tahoma, verdana, arial, sans-serif;
    position: absolute;
    right: 6px;
    text-align: right;
    z-index: 99999;
}
</style>
<script type="text/javascript">function fn_sliderpromo() { if (document.getElementById("fbpromo_makingdifferent") != null && !fnGetCookie('FBPROMOMOVIES')) { showfbpromo(); } }YAHOO.util.Event.onContentReady("ft", fn_sliderpromo, "");function clearfbpromo() {    if (document.getElementById("fbpromo_makingdifferent") != null) {    document.getElementById("fbpromo_makingdifferent").innerHTML = "<a href='javascript:void(0);' onclick='showfbpromo();'><img alt='' class='flt' src='http://3.bp.blogspot.com/-GDatnHZcBMg/T6z-1HVnfJI/AAAAAAAADJA/sSR-81_ivk0/s1600/vertical-right.png'/></a>";}}function showfbpromo() { if (document.getElementById("fbpromo_makingdifferent") != null)document.getElementById("fbpromo_makingdifferent").innerHTML = "<div style='width:280px;padding:8px 0px;background-color:#2d176e;font-family:arial;text-align:center;'><div style='color:#FFF;font-size:13px;font-weight:bold;'>ΕΔΩ ΜΠΑΙΝΕΙ Ο ΤΙΤΛΟΣ</div></div><iframe src='http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/USERNAME FACEBOOK&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;' scrolling='no' frameborder='0' style='border:none;overflow:hidden; width:280px; height:265px;background:#9dd1ce;'></iframe><span>By <a href='http://www.makingdifferent.com/'>Making DIfferent</a> / <a href='http://www.makingdifferent.com/javascript-floating-facebook-likebox-widget-for-bloggerblog'>+Get This!</a></span><a href='javascript:void(0)' onclick='clearfbpromo();'><div id='fbpclose' style='position:absolute;left:0px;top:0px;margin-left:-18px;margin-top:-18px;'><img src='http://1.bp.blogspot.com/-zHvDxX38DGE/T6z_NdL2kWI/AAAAAAAADJI/aJHuVUIlhKI/s1600/%5Bwww.gj37765.blogspot.com%5DcloseButton.png' /></div></a>";}</script>
<div class="MD-widget2012" id="fbpromo_makingdifferent"><a href="javascript:void(0);" onclick="showfbpromo();"><img alt="" class="flt" src='http://3.bp.blogspot.com/-GDatnHZcBMg/T6z-1HVnfJI/AAAAAAAADJA/sSR-81_ivk0/s1600/vertical-right.png'/></a></div>
....................................................................................................................................................................
ΑΛΛΑΓΕΣ

  ΕΔΩ ΜΠΑΙΝΕΙ Ο ΤΙΤΛΟΣ -Εδώ βάζετε τον τίτλο που θέλετε να φαίνεται στο box!

  USERNAME FACEBOOK -Εδώ βάζετε το username που έχετε στο facebook!

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

Υγ:Από την πηγή που δίνω μπορείτε να πάτε και να αλλάξετε τα χρώματα του likebox
στην σελίδα του δημιουργού!

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


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




 Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog