Αναρτήσεις
Θα φαίνεται κάπως έτσι:
Ακολουθήστε τα παρακάτω βήματα για να την βάλετε κι εσείς:
1. Σύνδεση στον blogger λογαριασμό μας από το blogger.com
2. Πανόπτης> Σχεδίαση> Επεξεργασία html
3. Με το ctrl+F βρείτε το </head>
4. Πάνω από αυτό επικολλήστε το παρακάτω:
<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(http://i47.tinypic.com/23gy3yp.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px "Century gothic",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(http://i50.tinypic.com/2il0gt5.jpg) 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(http://i47.tinypic.com/23gy3yp.jpg) 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(http://i50.tinypic.com/2il0gt5.jpg) 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>
#catmenucontainer{
height:29px;
background:url(http://i47.tinypic.com/23gy3yp.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px "Century gothic",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(http://i50.tinypic.com/2il0gt5.jpg) 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(http://i47.tinypic.com/23gy3yp.jpg) 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(http://i50.tinypic.com/2il0gt5.jpg) 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>
5. Αποθηκεύουμε το πρότυπό μας
6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript
7. Βάλτε τον παρακάτω κωδικό:
<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>
<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>
Όπου το # βάζετε το link σας και από δίπλα βάζετε το όνομα του link.
Προσέξτε τον χρωματισμό που σας έχω κάνει για να καταλάβετε καλύτερα!
8. Αποθήκευση κι είστε έτοιμοι!
Θα ακολουθήσουν κι άλλα σχέδια.
Τα σχόλιά σας, πάντα ευπρόσδεκτα!
Πηγές: Εικόνα και κωδικοί από http://www.bloggertipandtrick.net/2009/11/superb-css-menu-for-blogger-blogspot.html
Copyrights: http://bloggertips.gr/
| 