• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ACCORDION MENU No 1

ACCORDION MENU
ΠΩΣ ΒΑΖΩ ACCORDION MENU
Αυτό είναι ένα απλό accordion menu με ένα υπομενού. Μπαίνει απλά σαν gadget. Το πλάτος του μενού το ρυθμίζετε αλλάζοντας το width: 240px; το ύψος του αλλάζοντας το height:21px; την γραματοσειρά και το μέγεθός της τη ρυθμίζετε αλλάζοντας το font:13px arial; Το background και το χρώμα κειμένου του μενού το ρυθμίζετε αλλάζοντας το background: #173377; και το color: #FFF; Το background του υπομενού το ρυθμίζετε αλλάζοντας το background: #333333; 3 φορές.
Τέλος το πλάτος του υπομενού το ρυθμίζετε αλλάζοντας το width:500px; δύο φορές. Εννοείται πως πρέπει να βάλετε τα δικά σας link και περιγραφές αντικαθιστώντας τα δικά μου γαλάζια και πράσινα links και τις κίτρινες και πορτοκαλί περιγραφές των τίτλων.




<style>
#accordion .item {width: 240px;height:21px;overflow:hidden;border-radius: 5px;margin-bottom: 2px;font:13px arial;}
#accordion a {display:block;background: #173377;color: #FFF;padding:4px;
text-decoration: none; font:13px arial;}
#accordion ul {background: #333333;width:500px;height: auto;padding: 4px; font:13px arial;}
#accordion div:hover {background: #333333;width:500px;height: auto; font:13px arial;}
#accordion div:hover a {background: #333333;border-bottom: 1px solid #FFFF00;font:13px arial;}
</style>

<div id="accordion">
<div class="item">
<a href="http://the-best-widgets.blogspot.gr/p/my-posts.html">ALL MY POSTS ▼</a>
<ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts.html'> Όλα τα άρθρα (μόνο τίτλοι)</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts_19.html'>Όλα τα άρθρα (τίτλοι και εικόνες)</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/TEXT BOXES'>Text boxes</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/BACKGROUNDS'>Backgrounds</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/IMAGE EFFECTS'>Image effects</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ'>Ενσωματώσεις</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΑΣΦΑΛΕΙΑ BLOG'>Ασφάλεια blog</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΣΧΟΛΙΑ BLOGGER'>Σχόλια Blogger</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/SEO'>Συμβουλές SEO</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/FACEBOOK WIDGETS'>Facebook widgets</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΜΟΡΦΟΠΟΙΗΣΗ BLOG'>Μορφοποίηση blog</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/WIDGETS ΓΙΑ BLOGS'>Άλλα widgets για blogs</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ'>Ταξινόμηση αναρτήσεων</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ'>Οριζόντια και κάθετα μενού</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES'>Kυλιομενα links text images</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/SOSIAL NETWORKS BUTTONS'>Buttons & pop up windows</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS'>Galleries, Sliders & Slideshows</a></li> </ul>
</div>
<div class="item">
<a href="http://the-best-widgets.blogspot.gr/p/blog-page_11.html">MY LINKS ▼</a>
<ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_11.html'>My links</a></li>
<li><a href='http://widgets.freeforums.net'>My Forum</a></li>
<li><a href='http://gadgetsforblogs1.blogspot.gr'>My demo blog-1</a></li>
<li><a href='http://gadgetsforblogs2.blogspot.gr'>My demo blog-2</a></li>
<li><a href='http://gadgetsforblogs3.blogspot.gr'>My demo blog-3</a></li>
<li><a href='http://gadgetsforblogs4.blogspot.gr'>My demo blog-4</a></li>
<li><a href='http://gadgetsforblogs5.blogspot.gr'>My demo blog-5</a></li>
<li><a href='http://gadgetsforblogs6.blogspot.gr'>My demo blog-6</a></li>
<li><a href='http://gadgetsforblogs7.blogspot.gr'>My demo blog-7</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/friendly-blogs.html'>My friendly blogs</a></li>
</ul></li>
</div>
<div class="item">
<a href="http://the-best-widgets.blogspot.gr/p/photo-gallery-1.html">MY PHOTOS ▼</a>
<ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/imgur-slideshow.html'>Imgur slideshow</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/flickr-slideshow.html'>Flickr slideshow</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/picasa-slideshow.html'>Picasa slideshow</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/panoramio-slideshow.html'>Panoramio slideshow</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_859.html'>Pinterest photo gallery</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/photobucket-slideshow.html'>Photobucket slideshow</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/photo-gallery-1.html'>My photo gallery-1</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/photo-gallery-2.html'>My photo gallery-2</a>
</ul></li>
</div>
<div class="item">
<a href="http://the-best-widgets.blogspot.gr/p/wigdets.html">MY VIDEOS ▼</a>
<ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets.html'>Video gallery-1</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_31.html'>Video gallery-2</a></li>
<li><a href='https://www.youtube.com/user/WIDGETSFORBLOGS'>My videos on youtube</a>
</ul></li>
</div>
<div class="item">
<a href="http://the-best-widgets.blogspot.gr/p/widgets_26.html">MY FILES ▼</a>
<ul>
<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsX0RKYzZOemtwOWM&usp=sharing'>Annimated Gifs</a></li>
<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsT3VPRkpOYmUwSVU&usp=sharing'>Blogger backrounds</a></li>
<li><a href='https://app.box.com/s/chdfmak9du0v6hlg0h5b'>Ringtones</a></li>
<li><a href='https://app.box.com/s/if98ihmj6bs15f69bro2'>Free programs</a></ul></li>
</div>
</div>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.