Κάθετο μενού bar για blogger
Σε αυτό το tutorial θα σας εξηγήσουμε πως να προσθέσετε ένα κάθετο sidebar menu στο blog σας. Όπως θα διαπιστώσετε είναι κάτι το ιδιαίτερα απλό το οποίο θα σας βοηθήσει όχι μόνο σε επίπεδο σχεδιαστικό αλλά και σε λειτουργικό αφού θα διευκολύνει ιδιαίτερα τους αναγνώστες σας κατά την πλοήγηση τους στο blog σας. Ποιός είπε οτι στο web design εξάλλου αισθητικές και λειτουργικές επιλογές δεν μπορούν να ταυτίζονται; Για το συγκεκριμένο παράδειγμα χρησιμοποιούμε , όπως και στα προηγούμενα παραδείγματα μας, τεχνολογίες css και html
Ακολουθεί το παράδειγμα μας βήμα προς βήμα όπως πάντα.
1. Συνδεθείτε στο blogger account σας και κάντε κλικ στο drop down.
2. Τώραεπιλέξτε "Template" όπως στην φωτογραφία που ακολουθεί
3. Τώρα βλέπετε live το blog . Απλά κάντε κλικ στο button EDIT HTML 4. Τώρα κάντε κλικ στο button Proceed . 5. Βρείτε τον κώδικα που ακολουθεί με την χρήση τωνπλήκτρων Ctrl+F ]]></b:skin> 6. Κάντε paste τον κώδικα που ακολουθεί πριν τον κώδικα ]]></b:skin> /* Bloggertrix
*/
ul.vert-one{margin:0;padding:0;list-style-type:none;display:block;font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;width:200px;} ul.vert-one li{margin:0;padding:0;border-top:1px solid #4D0000;border-bottom:1px solid #761A1A;} ul.vert-one li a{display:block;text-decoration:none;color:#fff;background:#600;padding:0 0 0 20px;width:180px;} ul.vert-one li a:hover{background:#900 url("http://3.bp.blogspot.com/-f3waNUwPO8/UHaPLAhCmZI/AAAAAAAAE7I/lHLT4BSxVyg/s1600/vert-one_arrow.gif") no-repeat 0 9px;} ul.vert-one li a.current,ul.vert-one li a.current:hover{background:#933 url("http://3.bp.blogspot.com/-f3waNUw-PO8/UHaPLAhCmZI/AAAAAAAAE7I/lHLT4BSxVyg/s1600/vertone_arrow.gif") no-repeat 0 9px;}
7. Πηγαίντε στο blogger και δώστε κλικ στο click drop-down όπως ακριβώς κάνατε και στο 1ο βήμα και επιλέξτε Layout 8. Κάντε κλικ στο Add Gadget και επιλέξτε 'HTML/Javascript" 9. Κάντε paste τον κώδικα που ακολουθεί. <ul> <li><a href="http://www.bloggertrix.com/" title="CSS Menus">Home</a></li> <li><a href="http://www.bloggertrix.com/" title="CSS Menus">Articles</a></li>
<li><a href="http://www.bloggertrix.com/" title="CSS Menus">Topics</a></li> <li><a href="http://www.bloggertrix.com/" title="CSS Menus">Forum</a></li> <li><a href="http://www.bloggertrix.com/" title="CSS Menus">Blog</a></li> <li><a href="http://www.bloggertrix.com/" title="CSS Menus">Subscribe</a></li> <li><a href="http://www.bloggertrix.com/" title="CSS Menus">Contact Us</a></li> </ul>
*Μην ξεχάσετε φυσικά στο σημείο αυτό να αντικαταστήσετε με τα δικά σας url και φυσικά τις δικές σας υποκατηγορίες 10. Δώστε απλά save "HTML/Javascript". Αυτό ήταν όλο!