ΑΥΤΟΜΑΤΟ ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ Νο 2

ΑΥΤΟΜΑΤΟ ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ Νο 2
Το παρακάτω αυτόματο, έγχρωμο κάθετο μενού ενημερώνεται αυτόματα κάθε φορά που κάνετε μια νέα ανάρτηση και βάζετε σε αυτήν μία γενική ετικέτα κατηγορίας. Έχει ένα script που διαβάζει όλες τις αναρτήσεις με συγκεκριμένη γενική ετικέτα κατηγορίας που εσείς θα επιλέξετε. Κάθε κατηγορία μπορεί να έχει το δικό της στυλ, αλλά αν δεν θέλετε πολυχρωμία μπορείτε να κρατήσετε 1 στυλ για όλες τις κατηγορίες.

Αλλάξτε το πλάτος και το ύψος του μενού αλλάζοντας τα width:234px;height:16px; Αλλάξτε τη θέση που θα εμφανίζεται το υπομενου αλλάζοντας το left:251px;top:0px; Αλλάξτε το πλάτος και το ύψος του υπομενού αλλάζοντας το width:480px; height:auto; Αλλάξτε το πράσινο link του blog μου με το link του δικού σας blog και τέλος αλλάξτε και τις ετικέτες που έχω χρωματίσει με πορτοκαλί γράμματα. Το μενού μπαίνει απλά σαν ένα gadget και θα δείχνει έτσι όπως το βλέπετε παρακάτω.

<script src="https://github-codes.github.io/mycodes/javascripts/archive-page-1p.js"></script>

<style>

.onclick-menu1 {position: relative; width:234px;height:16px; background:#532000;color:#FFFFFF; font: 13px arial;margin:0;padding:4px;border-radius:5px; display: inline-block;}

.onclick-menu1:before {content: "TEXT BOXES";font: 13px arial; background:#532000;color:#FFFFFF; }

.onclick-menu1:focus {pointer-events: none;}

.onclick-menu1:focus .onclick-menu1-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu1-content {position: absolute; left:251px;top:-55px;width:480px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#532000; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px;border-radius:5px;border:1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu1"><ul class="onclick-menu1-content">

<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/TEXT BOXES?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

<style>

.onclick-menu2 {position: relative; width:234px;height:16px; background:#00FF00;color:#000000; font: 13px arial;margin:0;padding:4px;border-radius:5px;

display: inline-block;}

.onclick-menu2:before {content: "BACKGROUNDS"; font: 13px arial; background:#00FF00;color:#000000; }

.onclick-menu2:focus {pointer-events: none;}

.onclick-menu2:focus .onclick-menu2-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu2-content {position: absolute; left:251px;top:-85px;width:570px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#105105; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px;border-radius:5px;border:1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu2"><ul class="onclick-menu2-content">

<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/BACKGROUNDS?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

<style>

.onclick-menu3 {position: relative; width:234px;height:16px; background:#FBA3F4;color:#000000; font: 13px arial;margin:0;padding:4px;border-radius:5px;display: inline-block;}

.onclick-menu3:before {content: "IMAGE EFFECTS"; font: 13px arial; background:#FBA3F4;color:#000000;}

.onclick-menu3:focus {pointer-events: none;}

.onclick-menu3:focus .onclick-menu3-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu3-content {position: absolute; left:251px;top:-110px;width:500px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#A11111; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px;border-radius:5px;border: 1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu3"><ul class="onclick-menu3-content">

<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/IMAGE EFFECTS?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

<style>

.onclick-menu4 {position: relative; width:234px;height:16px; background:#FBBB22;color:#000000; font: 13px arial;margin:0;padding:4px;border-radius:5px;display: inline-block;}

.onclick-menu4:before {content: "ΕΝΣΩΜΑΤΩΣΕΙΣ"; font: 13px arial; background:#FBB22;color:#000000;}

.onclick-menu4:focus {pointer-events: none;}

.onclick-menu4:focus .onclick-menu4-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu4-content {position: absolute; left:251px;top:-130px;width:520px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#532000; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px;border-radius:5px;border: 1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu4"><ul class="onclick-menu4-content">

<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>

<style>

.onclick-menu5 {position: relative; width:234px;height:16px; background:#333333;color:#FFFFFF; font: 13px arial;margin:0;padding:4px;border-radius:5px;display: inline-block;}

.onclick-menu5:before {content: "ΑΣΦΑΛΕΙΑ BLOG"; font: 13px arial; background:#333333;color:#FFFFFF; }

.onclick-menu5:focus {pointer-events: none;}

.onclick-menu5:focus .onclick-menu5-content {opacity: 1;visibility:visible;pointer-events: auto;}

.onclick-menu5-content {position: absolute; left:251px;top:-155px;width:480px;height:auto;z-index:1; opacity: 0; visibility:hidden; transition: visibility 0.5s;background:#333333; color:#FFFFFF; font: 13px/1.1 arial;margin:0;padding:0px;border-radius:5px;border:1px solid #FFFF00;}

</style>

<div tabindex="0" class="onclick-menu5"><ul class="onclick-menu5-content">

<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΑΣΦΑΛΕΙΑ BLOG?max-results=30&alt=json-in-script&callback=recentpostslist"></script></ul></div>