MY CODES

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

BOOKMARK 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 παραλέιψτε την πρώτη γραμμή του κώδικα.

<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>
Για να σχολιάσετε πρέπει να συνδεθείτε.
Προηγούμενο άρθρο
ΠΩΣ ΕΝΣΩΜΑΤΩΝΩ GOOGLE PHOTOS SLIDESHOW ΣΤΟ BLOG ΜΟΥ
Επόμενο άρθρο
BUTTONS ΜΕ ΕΝΣΩΜΑΤΩΣΕΙΣ ΠΟΥ ΑΝΟΙΓΟΥΝ ΣΕ POPUP WINDOWS