Οριζόντιο μενού με κατηγορίες.

Καλησπέρα φίλοι.Σήμερα ετοίμασα ένα ωραίο  μενού επιλογών για το μπλογκ σας.Ένα μενού πάνω από τις αναρτήσεις σας αυξάνει κατακόρυφα την προβολή των σελίδων από τους επισκέπτες αλλά και συμμαζεύει το μπλογκ σας και το κάνει να φαίνεται πιο όμορφο..Ακολουθείστε τις απλές οδηγίες παρακάτω και εγκαταστείστε το σε τρία απλά βήματα.

Το μενού μπορείτε να το δείτε εδώ.


Γκρί μπάρα

1ο βήμα
στο Πρότυπο/επεξεργασία HTML κλικάρετε το κουτάκι Επέκταση προτύπων γραφικών στοιχείω.Ακολούθως με CNTRL+F ψάξτε για ]]></b:skin>
Πρίν από αυτό επικολλήστε τον παρακάτω κώδικα: 

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

2ο βήμα.Ακολούθως πάλι με CNTRL+F ψάξτε για </head>

και πριν από αυτό επικολλήστε τον ακόλουθο κώδικα:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

3ο βήμα
Πηγαίντε τώρα στη Διάταξη/προσθήκη gadget ΗΤΜL επικολλήστε και σώστε τον εξής κώδικα:

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>

</ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="http://symvl.blogspot.gr/2013/03/blog-post_11.html</a></li>
  </li></ul>
Έτοιμο!Τέλος, το μόνο που έχετε να κάνετε είναι να αντικαταστήσετε τις λέξεις Menu και Drop με αυτές που επιθυμείτε.Το σύμβολο #  αναντικαταστήστε το με το url της κατηγορίας σας.




Κόκκινη μπάρα

Για να κάνετε την μπάρα κόκκινη βάλτε στο 1ο βήμα τον παρακάτω κώδικα.

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #440909;
background: -webkit-gradient(linear, left top, left bottom, from(#F75A5A), to(#440909));
background: -moz-linear-gradient(top, #F75A5A, #440909);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #F1B6B6;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #861717;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #863D3D;
}

#jsddm li ul li a:hover {
background: #863D3D;

Αυτά για σήμερα.Για απορίες και δυσκολίες στην εγκατάσταση κάντε σχόλιο.

@Πνευματικά δικαιώματα ανάρτησης symvl.blogspot.com Επιτρέπεται η αντίγραφη με υποχρεωτικό ενεργό backlink πίσω στην πηγή με ένα κλικ.

Read more ...

Πώς φτιάχνουμε ένα απλό μενού με κατηγορίες

Ο παρακάτω κώδικας δημιουργεί ένα πολύ απλό μενού κατηγοριών,χωρίς Java,εικόνες ή οτιδήποτε άλλο,κάνοντας απλά χρήση των ετικετών <a>

Οπότε πηγαίνουμε διάταξη>προσθήκη gadget>html/javascript.Και μέσα σ'αυτό κάνουμε επικόλληση τον παρακάτω κώδικα.Αποθήκευση και είμαστε έτοιμοι.

Στη συνέχεια αν θέλουμε να κάνουμε το μενού να εμφανίζεται οριζόντια πηγαίνουμε στη διάταξη και το τοποθετούμε πάνω από τις αναρτήσεις.Αν θέλουμε να εμφανιστεί κάθετα το τοποθετούμε στο sidebar.

Μπορούμε να το πειράξουμε και άλλο αν θέλουμε το μενού:π.χ.
αντί για center βάζουμε left ή right.Αν θέλουμε να έχει δύο σειρές,μετά το τρίτο </a> βάζουμε <br> και προσθέτουμε όσα <a></a> μας χρειάζονται.

<div align='center'>

<a href="link1">κατηγορία 1</a> |

<a href="link2">κατηγορία 2</a> |

<a href="link3">κατηγορία 2</a> |

</div>

Τα link1,link2,link3 τα αντικαθιστάτε με το url των ετικετών σας.Αν δεν ξέρετε πώς να φτιάξετε ετικέτες για τις αναρτήσεις σας διαβάστε εδώ.

Σχετική ανάρτηση
οριζόντιο μενού με κατηγορίες (ανοιχτό γκρι)

Read more ...

οριζόντιο μενού πλοήγησης με υποκαρτέλες (1)

Από την αρχή που ξεκίνησα να ασχολούμαι με το blogging θέλησα να φτιάξω ένα μενού με υποκατηγορίες αλλά δυσκολευόμουν παρά πολύ να βρώ κάτι λειτουργικό και απλό.Γι'αυτό για να απαλλάξω εσάς από τον κόπο και ψάξιμο σας δίνω σήμερα τον κώδικα για φτιάξετε ένα απλό μενού με υποκαρτέλες.



Ακολουθείστε τα βήματα προσεκτικά ένα προς ένα:

• Πανόπτης> Σχεδίαση> Επεξεργασία html
• Πατήστε cntrl+f για να εμφανιστεί η μπάρα αναζήτησης και βρείτε το </head>.Αν δεν βρίσκει τίποτα γράψτε το πιο απλά /head.
• Ακριβώς πάνω από από αυτό αντιγράψτε και επικολλήστε τον παρακάτω κώδικα

<style type="text/css"> #catmenucontainer{ height:29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49dgubqJxJAS515SbEo4k7QvU3Z85E7VrPLBj4NNUntcFhT0IqSJgN0s5OPsDFZ2rTStDCCgbsEKixfy9x838-v8AjJ3DpOY4QbUzRit4tqpn5RPzxqZzhjsvY_CCP5dws5AmM3H6pcZ8/) repeat-x; display:block; padding:0px 0 0px 0px; font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif; font-weight:normal; border-top:1px solid #686D6F; } #catmenu ,#catmenu ul { margin: 0px 5px; padding: 0px; list-style: none; height:29px; } #catmenu a { color: #999; display: block; font-weight: normal; padding: 4px 10px 6px 10px; } #catmenu a:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQ_Bw-HbVwgK2iv6IEV2vbwpcGDttOPX7-FwT4CpPIAtvVis23yPAjLoYEiWK0R-jTLuaYn-jC-TlPvVjhSUDf5xfxuhKsq1-_BO3EyFAdJw0VZf13EYo1-j77mnBKSrIBb9roTUL-i03/) repeat-x; color: #fff; display: block; text-decoration: none; } #catmenu li { float: left; margin: 0px; padding: 0px; } #catmenu li li { float: left; margin: 0px 0px 0px 0px; padding: 0px; width: 130px; } #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49dgubqJxJAS515SbEo4k7QvU3Z85E7VrPLBj4NNUntcFhT0IqSJgN0s5OPsDFZ2rTStDCCgbsEKixfy9x838-v8AjJ3DpOY4QbUzRit4tqpn5RPzxqZzhjsvY_CCP5dws5AmM3H6pcZ8/) repeat-x; width: 150px; float: none; margin: 0px; padding: 4px 10px 5px 10px; color:#E8EBEE; border-bottom:1px solid #2C3133; } #catmenu li li a:hover, #catmenu li li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQ_Bw-HbVwgK2iv6IEV2vbwpcGDttOPX7-FwT4CpPIAtvVis23yPAjLoYEiWK0R-jTLuaYn-jC-TlPvVjhSUDf5xfxuhKsq1-_BO3EyFAdJw0VZf13EYo1-j77mnBKSrIBb9roTUL-i03/) repeat-x; width: 150px; float: none; margin: 0px; padding: 4px 10px 5px 10px; color:#fff; border-bottom:1px solid #2C3133; } #catmenu li ul { position: absolute; width: 10em; left: -999em; z-index:1; } #catmenu li:hover ul { left: auto; display: block; } #catmenu li:hover ul, #catmenu li.sfhover ul { left: auto; } </style>

• Κάνουμε πρώτα Προεσκόπηση μήπως βγάζει κανένα σφάλμα και αν όχι,στη συνέχεια Αποθήκευση
• μετά Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript 
• και προσθέτουμε τον παρακάτω κώδικα

<div id='catmenucontainer'> <div id='catmenu'> <ul> <li><a href='#' title='#'>Home</a></li> <li><a href='#' title='#'>Tab 1</a> <ul class='children'> <li><a href='#' title='#'>1</a></li> <li><a href='#' title='#'>2</a></li> <li><a href='#' title='#'>3</a></li> </ul> </li> <li><a href='#' title='#'>Tab 2</a> <ul class='children'> <li><a href='#' title='#'>1</a></li> <li><a href='#' title='#'>2</a></li> <li><a href='#' title='#'>3</a></li> <li><a href='#' title='#'>4</a></li> </ul> </li> <li><a href='#' title='#'>About</a></li> <li><a href='#'' title='#'>Contact</a></li> </ul> </div>

Στη συνέχεια απλά κάνουμε αντικατάσταση το πρώτο # μετά το href= με το λινκ της κατηγορίας και δίπλα ανάμεσα στα >όνομα< αλλάζουμε το όνομα της κατηγορίας

Αποθήκευση και τελειώσαμε.




Προσοχή!Σε περίπτωση που το μενού σταταματήσει να δουλεύει κανονικά απλά σώσε τις παρακάτω εικόνες στην επιφάνεια εργασίας και ανέβασέ τες π.χ. στο google sites .Στη συνέχεια αντικατέστησε από δύο φορές το λινκ (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi49dgubqJxJAS515SbEo4k7QvU3Z85E7VrPLBj4NNUntcFhT0IqSJgN0s5OPsDFZ2rTStDCCgbsEKixfy9x838-v8AjJ3DpOY4QbUzRit4tqpn5RPzxqZzhjsvY_CCP5dws5AmM3H6pcZ8/) με αυτό της εικόνας που έχεις στο google sites και το ίδιο κάνε δύο φορές για το δεύτερο λινκ (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQ_Bw-HbVwgK2iv6IEV2vbwpcGDttOPX7-FwT4CpPIAtvVis23yPAjLoYEiWK0R-jTLuaYn-jC-TlPvVjhSUDf5xfxuhKsq1-_BO3EyFAdJw0VZf13EYo1-j77mnBKSrIBb9roTUL-i03/).
πηγή κώδικα



Σχετική ανάρτηση
οριζόντιο μενού με κατηγορίες (ανοιχτό γκρι)

Read more ...