-->

σελίδες

 

Για επικοινωνία κάντε σχόλιο!
Και μην ξεχνάτε να διαβάζετε τα σχόλια.Υπάρχουν λύσεις και εκεί.

widget με κινούμενα μπάνερ για οικονομία χώρου

Αν έχετε πολλά φιλικά μπάνερ στην κεντρική σελίδα και σας πιάνουν πολύ χώρο,το παρακάτω widget θα σας φανεί πολύ χρήσιμο.Βάζει όλα τα μπάνερ σε έναν περιορισμένο χώρο και αυτά κινούνται εκεί και εμφανίζονται το ένα μετά το άλλο.


<!--Start Code--> <div class="textwidget">
<marquee align="center" direction="up" height="375" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="4" width="280">
ο κώδικας του μπάνερ εδώ
</marquee></div> </center>
<!--End Code-->
Read more ...
0 σχόλια
Ετικέτες

οριζόντιο μενού πλοήγησης με υποκαρτέλες (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 ...
0 σχόλια
Ετικέτες , , ,
Εγγραφή σε: Αναρτήσεις (Atom)