MEGA ΑΠΕΙΡΟ ΣΤΑΤΙΚΟ MENU ΜΕ ΦΥΛΛΑ ECXEL ΚΑΙ ΣΕΛΙΔΟΔΕΙΚΤΕΣ

MEGA ΑΠΕΙΡΟ ΣΤΑΤΙΚΟ MENU ΜΕ ΦΥΛΛΑ ECXEL ΚΑΙ ΣΕΛΙΔΟΔΕΙΚΤΕΣ

Αυτό το μενού αποτελείται από μία σειρά έγχρωμα στατικά buttons στα οποία αν περάσετε το ποντίκι από πάνω τους ανοίγει ακριβώς από κάτω τους ένα iframe σαν μενού το οποίο μπορεί να περιέχει φύλλα excel με links, ή μία σελίδα ενός bookmark site όπως το start.me που έχω ενσωματώσει σε μερικά από αυτά τα buttons. Εννοείται ότι μπορείτε να βάλετε οτιδήποτε έχει iframe κώδικα όπως, παρουσιάσεις, βίντεο, μουσική, photo albums & galleries, έγγραφα word, excel, pdf και φόρμες με ερωτηματολόγια.

Ο κώδικας αυτός μπαίνει σε ένα οποιοδήποτε κουτάκι gadget του blogger. Εσείς το μόνο που έχετε να κάνετε είναι να αλλάξετε τα iframe πορτοκαλί link ενδιάμεσα στο <iframe και το </iframe> και τις διαστάσεις του που έχω επισημάνει με γαλάζια νούμερα. Εννοείτε πως θα αλλάξετε και την περιγραφή των κουμπιών που είναι με κίτρινα γράμματα, τα χρώματα background και κειμένου που είναι μετά το σύμβολο της δίεσης #, και τέλος την θέση των κουμπιών αυτών εκεί που γράφει top:0px;left:0px; στο πρώτο, top:0px;left:150px; στο δεύτερο και γενικώς σε όλα τα left position των κουμπιών που απαρτίζουν το στατικό μενού το οποίο από ότι καταλαβαίνετε μπάινει στη θέση της navbar του blogger την οποία πρέπει να έχετε εξαφανίσει πρώτα.

ΔΕΙΤΕ ΤΟ MEGA ΑΠΕΙΡΟ ΣΤΑΤΙΚΟ ΜΕΝΟΥ ΣΕ ΕΝΑ HTML VIEWER ΕΔΩ ►

<style>

#f-box #f-box-wrap {display:none;z-index:99;padding:0px}

#f-box:hover  #f-box-wrap {display:block}

#f-box:hover  #f-box-wrap {position:absolute;top:30px;left:0px; z-index:999;}

</style>

<script>

hover = function() {

if (!document.body.currentStyle) return;

var DIVf-box = document.getElementById('f-box');

var DIVf-box_wrap = document.getElementById('f-box-wrap');

DIVf-box.onmouseover = function() {

DIVf-box_wrap.style.display = 'block';}

DIVf-box.onmouseout = function() {

DIVf-box_wrap.style.display = 'none';}}

window.onload = hover;

</script>

<div id="f-box">

<div id="static-button" style="top:0px;left:0px;position:fixed;z-index:999;">

<a href="https://start.me/p/Vb68d7/blogger-articles"><button style="width:auto; height:28px; background:#115599; color:#FFFFFF;  font: 14px Arial;">SOSIAL NETWORKS</button></a>

<div id="f-box-wrap">

<iframe frameborder="0" width="1260" height="750" src="https://start.me/p/WqMDRn/sosial-networks"></iframe>

</div></div></div>

<div id="f-box">

<div id="static-button" style="top:0px;left:150px;position:fixed;z-index:999;">

<a href="https://start.me/p/Vb68d7/blogger-articles"><button style="width:auto; height:28px; background:#105105; color:#FFFFFF;  font: 14px Arial;">MY CODES</button></a>

<div id="f-box-wrap">

<iframe frameborder="0" width="1200" height="750" src="https://start.me/p/W20mG6/html-css-js-codes"></iframe>

</div></div></div>

<div id="f-box">

<div id="static-button" style="top:0px;left:240px;position:fixed;z-index:999;">

<a href="https://start.me/p/Vb68d7/blogger-articles"><button style="width:auto; height:28px; background:#FF6600; color:#FFFFFF;  font: 14px Arial;">BLOGGER ARTICLES</button></a>

<div id="f-box-wrap">

<iframe frameborder="0" width="1100" height="750" src="https://start.me/p/Vb68d7/blogger-articles"></iframe>

</div></div></div>

<div id="f-box">

<div id="static-button" style="top:0px;left:392px;position:fixed;z-index:999;">

<a href="#"><button style="width:auto; height:28px; background:#FFFF00; color:#000000;font: 14px Arial;">MY LINKS</button></a>

<div id="f-box-wrap">

<iframe frameborder="0" width="960" height="750" src="https://docs.google.com/spreadsheets/d/1mdEE_FkslrVn_TEgWRdVUdp7g4rnJ9r4ge4jgglv_YA/pubhtml?gid=25900094&amp;single=true&amp;widget=true&amp;headers=false"></iframe></div></div></div>

<div id="f-box">

<div id="static-button" style="top:0px;left:471px;position:fixed;z-index:999;">

<a href="#"><button style="width:auto; height:28px; background:#F11111; color:#FFFFFF;font: 14px Arial;">MY WIDGETS</button></a>

<div id="f-box-wrap">

<iframe frameborder="0" width="980" height="750" src="https://docs.google.com/spreadsheets/d/1aLXP3gygj2TILXQkEmfF-CBe5sqp7y5zlLk92pQU1tE/pubhtml?widget=true&amp;headers=false"></iframe>

</div></div></div>