Κάθετο μενού bar για blogger

VN:F [1.9.22_1171]
Rating: 4.5/5 (2 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
21/10/2012 από
adavalas

Σε αυτό το 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/-f3waNUw-PO8/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/vert-one_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“. Αυτό ήταν όλο!








Hide ↑

Aσφάλεια στο opencart

04 September 2014

Με το θέμα της διαδικτυακής ασφάλειας να γίνεται ένας ολοένα και μεγαλύτερης σημασίας ζήτημα κατά την

Read more...

Μαθήματα opencart - Αλλαγή του navigation bar

02 September 2014

To OpenCart αποτελεί μια από τις πιο διάσημες πλατφόρμες για την κατασκευή[…]

Read more...

WordFence. Ασφάλεια στο wordpress

01 September 2014

Το WordFence είναι ένα ιδιαίτερα δημοφιλές WordPress plugin που χειρίζεται πολλούς διαφορετικούς και κρίσιμους τομείς ασφαλείας τόσο[…]

Read more...






Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.