ΠΩΣ ΒΑΖΩ ΑΝΑΔΥΟΜΕΝΟ WIDGET No 2

ΠΩΣ ΒΑΖΩ ΑΝΑΔΥΟΜΕΝΟ WIDGET No 2

Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα αναδυόμενο widget στα δεξιά ή στα αριστερά του blog σας το οποίο όταν πλησιάζετε το ποντίκι στην άκρη του ιστολογίου σας θα αναδύεται το widget. Μπορείτε να βάλετε βίντεο, παρουσιάσεις, έγγραφα word, excel, pdf, ημερολόγια, χάρτες, facebook like box, followers box, chat, forum και γενικώς ότι προσφέρεται σε κώδικα HTML /  javascript. Αν θέλετε να ενωματώσετε διαφορετικο widget αλλάξτε το λίνκ που έχω επισημάνει με κίτρινα γράμματα. 
Επίσης μπορείτε να αλλάξετε τις διαστάσεις με τα γαλάζια γράμματα εκεί που γράφει right: "-510" και width:510px; και την θέση που θα εμφανίζεται το widget εκεί που γράφει top:30px; Προσέξτε αν έχετε ήδη ένα script jquery παραλέιψτε την πρώτη γραμμή του κώδικα.

ΔΕΙΤΕ ΕΔΩ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ENA DEMO ►

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {$(".floatingbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-510"}, "medium");}, 500);});

</script>

<style>

.floatingbox{

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy50GZovsaG_fwac7AB0FqhlwVnTasH9OJxHiWGQrHJV0zYy3wL4uUS_QfBgY8zYZGh2KkC5blhSLWCisfE_vDVz1ezQEHmx856viYHP967l8dweVcYCT_2VrFT17Mr-vCVQefMf-s7YaU/w30-h120-no/POSTS.JPG")

no-repeat scroll left top transparent !important;

display:block;float:right;height:auto;padding: 0 0 0 30px;width:510px;

z-index: 99999;position:fixed;right:-510px;top:30px;}

.floatingbox div{border:none;position:relative;display:block;}

</style>

<div class="floatingbox">

<iframe frameborder="0" width="510" height="700"  src="https://docs.google.com/spreadsheets/d/1250n3upxFNUwA50hSL73OZK0fvXv0CHmFF1OTE_443M/pubhtml?gid=898874275&amp;single=true&amp;widget=true&amp;headers=false"></iframe>

</div>