ΑΝΑΔΥΟΜΕΝΟ WIDGET ΜΕ ΣΕΛΙΔΟΔΕΙΚΤΕΣ

ΑΝΑΔΥΟΜΕΝΟ WIDGET ΜΕ ΣΕΛΙΔΟΔΕΙΚΤΕΣ.

Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα αναδυόμενο widget με σελιδοδείκτες στα δεξιά ή στα αριστερά του blog σας το οποίο όταν πλησιάζετε το ποντίκι στην άκρη του ιστολογίου σας θα αναδύεται το widget. Μπορείτε να βάλετε βίντεο, παρουσιάσεις, έγγραφα word, excel, pdf, ημερολόγια, χάρτες, facebook like box, followers box, chat, forum και γενικώς ότι προσφέρεται σε κώδικα HTML /  javascript. Αν θέλετε να ενωματώσετε διαφορετική σελίδα με δικούς σας σελιδοδείκτες αλλάξτε το λίνκ που έχω επισημάνει με κίτρινα γράμματα. 
Επίσης μπορείτε να αλλάξετε τις διαστάσεις με τα γαλάζια γράμματα εκεί που γράφει 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://i.imgur.com/skU22fS.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://demo-7.github.io/my/widgets/bmarks-480.html"></iframe>

</div>