Blogger Tips – Tricks – Gadgets – Templates – Hacks

Οριζοντιο blogger menu widget (και με search bar) με πολλα submenus (υποκατηγοριες-drop down menu)



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Πρόκειται για ένα πολύ όμορφο blogger menu. Προσωπικά είναι από τα καλύτερα που έχω δει, αφενός γιατί περιέχει ενσωματωμένο widget αναζήτησης και αφετέρου διότι έχει εως και τρεις υποκατηγορίες της βασικής κατηγορίας στην μπάρα.

μπορείτε να δείτε πως δουλεύει στο http://www.bet-master55giannis35.com/



πρέπει πρώτα να γίνουν κάποιες προεργασίες πριν προχωρήσουμε στην εγκατάσταση του menu



πάμε πανόπτης > πρότυπο > επεξεργασία html και με τη χρήση του ctrl+F ψάχνουμε για την ακόλουθη γραμμή:




<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>




ίσως βρούμε αυτή την γραμμή πολλές φορές

από όλες τις γραμμές διαγράφουμε το class='tabs'



στη συνέχεια ψάχνουμε να βρούμε στον κώδικα για το παρακάτω κομμάτι κώδικα’ για το παρακάτω section




/* Tabs


----------------------------------------------- */




και διαγράφουμε όλο τον κώδικα που υπάρχει ανάμεσα στον παραπάνω με τον παρακάτω κώδικα:




/* Headings


----------------------------------------------- */




δηλαδή από έτσι που ήταν πριν .. :




/* Tabs


----------------------------------------------- */


.tabs-outer {


overflow: hidden;


position: relative;


background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;


}





#layout .tabs-outer {


overflow: visible;


}





.tabs-cap-top, .tabs-cap-bottom {


position: absolute;


width: 100%;





border-top: 1px solid $(tabs.border.color);





}





.tabs-cap-bottom {


bottom: 0;


}





.tabs-inner .widget li a {


display: inline-block;





margin: 0;


padding: .6em 1.5em;





font: $(tabs.font);


color: $(tabs.text.color);





border-top: 1px solid $(tabs.border.color);


border-bottom: 1px solid $(tabs.border.color);


border-$startSide: 1px solid $(tabs.border.color);


}





.tabs-inner .widget li:last-child a {


border-$endSide: 1px solid $(tabs.border.color);


}





.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {


background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;


color: $(tabs.selected.text.color);


}


/* Headings


----------------------------------------------- */  




.. θα μείνει έτσι:




/* Tabs


----------------------------------------------- */





/* Headings


----------------------------------------------- */




τώρα εκεί που διαγράψατε προηγουμένως τον κώδικα ανάμεσα στο tabs section και στο headings section θα βάλετε τον παρακάτω κώδικα:




#crosscol ul {z-index: 200; padding:0 !important;}


#crosscol li:hover {position:relative;}


#crosscol ul li {padding:0 !important;}


.tabs-outer {z-index:1;}


.tabs .widget ul, .tabs .widget ul {overflow: visible;}




τελείωσαν οι προεργασίες και τώρα προχωρούμε στην εγκατάσταση του μενου μας



βρίσκουμε το



]]></b:skin>



και από πάνω του επικολλούμε τον παρακάτω κώδικα:




/* Horizontal drop down menu


----------------------------------------------- */


#menuWrapper {


width:100%; /* Menu width */


height:35px;


padding-left:14px;


background:#333; /* Background color */


border-radius: 10px;


}


.menu {


padding:0;


margin:0;


list-style:none;


height:35px;


position:relative;


z-index:5;


font-family:arial, verdana, sans-serif;


}


.menu li:hover li a {


background:none;


}


.menu li.top {display:block; float:left;}


.menu li a.top_link {


display:block;


float:left;


height:35px;


line-height:34px;


color:#ccc;


text-decoration:none;


font-family:"Verdana", sans-serif;


font-size:12px; /* Font size */


font-weight:bold;


padding:0 0 0 12px;


cursor:pointer;


}


.menu li a.top_link span {


float:left;


display:block;


padding:0 24px 0 12px;


height:35px;


}


.menu li a.top_link span.down {


float:left;


display:block;


padding:0 24px 0 12px;


height:35px;


}


.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }


.menu li:hover {position:relative; z-index:2;}


.menu ul,


.menu li:hover ul ul,


.menu li:hover ul li:hover ul ul,


.menu li:hover ul li:hover ul li:hover ul ul,


.menu li:hover ul li:hover ul li:hover ul li:hover ul ul


{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}





.menu li:hover ul.sub {


left:0;


top:35px;


background:#333; /* Submenu background color */


padding:3px;


white-space:nowrap;


width:200px;


height:auto;


z-index:3;


}


.menu li:hover ul.sub li {


display:block;


height:30px;


position:relative;


float:left;


width:200px;


font-weight:normal;


}


.menu li:hover ul.sub li a{


display:block;


height:30px;


width:200px;


line-height:30px;


text-indent:5px;


color:#ccc;


text-decoration:none;


}


.menu li ul.sub li a.fly {


/* Submenu Background Color */


background:#333 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat;}


.menu li:hover ul.sub li a:hover {


background:#515151; /* Background Color on mouseover */


color:#fff;


}


.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {


/* Background on Mouseover */


background:#646464 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}





.menu li:hover ul li:hover ul,


.menu li:hover ul li:hover ul li:hover ul,


.menu li:hover ul li:hover ul li:hover ul li:hover ul,


.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {


left:200px;


top:-4px;


background: #333; /* Background Color of the Submenu */


padding:3px;


white-space:nowrap;


width:200px;


z-index:4;


height:auto;


}


#search {


width: 228px; /* Width of the Search Box */


height: 50px;


float: right;


z-index: 2;


text-align: center;


margin-top: 5px;


margin-right: 6px;


/* Background of the Search Box */


background: url(http://2.bp.blogspot.com/-kSPW07r2Ct8/UazXPD9DbfI/AAAAAAAADtE/UyopBgIPe-w/s1600/searchBar1.png) no-repeat;


}


#search-box {


margin-top: 3px;


border:0px;


background: transparent;


text-align:center;


}




Σε όλο τον παραπάνω κώδικα θα βρείτε επεξηγήσεις ανάμεσα σε “/*” , “*/” (π.χ. “/* Menu width */”), ώστε να το μορφοποιήσετε όπως θέλετε. Αν δεν έχετε μια Α’ εξοικείωση, τότε μην ασχοληθείτε γιατί θα τα μπερδέψετε.



Τώρα πατήστε Αποθήκευση Προτύπου



Έπειτα πάμε διάταξη > Προσθήκη gadget > HTML/JavaScript

και επικολλούμε τον παρακάτω κώδικα:




<div id='menuWrapper'>


<ul class='menu'>


<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>





<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>


<li><a href='Link URL'>Submenu 2.1.1</a></li>


<li><a href='Link URL'>Submenu 2.1.2</a></li>


<li><a href='Link URL'>Submenu 2.1.3</a></li>


</ul>


</li>


<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>


<ul>


<li><a href='Link URL'>Submenu 2.2.1</a></li>


<li><a href='Link URL'>Submenu 2.2.2</a></li>


<li><a href='Link URL'>Submenu 2.2.3</a></li>


<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>


<ul>


<li><a href='Link URL'>Submenu 2.2.4.1</a></li>


<li><a href='Link URL'>Submenu 2.2.4.2</a></li>


<li><a href='Link URL'>Submenu 2.2.4.3</a></li>


</ul>


</li>


<li><a href='Link URL'>Submenu 2.2.5</a></li>


<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>


<ul>


<li><a href='Link URL'>Submenu 2.2.6.1</a></li>


<li><a href='Link URL'>Submenu 2.2.6.2</a></li>


</ul>


</li>


</ul>


</li>


<li><a href='Link URL'>Submenu 2.3</a></li>


<li><a href='Link URL'>Submenu 2.4</a></li>


<li><a href='Link URL'>Submenu 2.5</a></li>


</ul>


</li>





<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>


<ul class='sub'>


<li><a href='Link URL'>Submenu 3.1</a></li>


<li><a href='Link URL'>Submenu 3.2</a></li>


<li><a href='Link URL'>Submenu 3.3</a></li>


<li><a href='Link URL'>Submenu 3.4</a></li>


</ul>


</li>





<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>


<ul class='sub'>


<li><a href='Link URL'>Submenu 4.1</a></li>


<li><a class='fly' href='Link URL'>Submenu 4.2</a>


<ul>


<li><a href='Link URL'>Submenu 4.2.1</a></li>


<li><a href='Link URL'>Submenu 4.2.2</a></li>


<li><a href='Link URL'>Submenu 4.2.3</a></li>


<li><a href='Link URL'>Submenu 4.2.4</a></li>


<li><a href='Link URL'>Submenu 4.2.5</a></li>


<li><a href='Link URL'>Submenu 4.2.6</a></li>


</ul>


</li>


<li><a href='Link URL'>Submenu 4.3</a></li>


<li><a href='Link URL'>Submenu 4.4</a></li>


<li><a href='Link URL'>Submenu 4.5</a></li>


<li><a href='Link URL'>Submenu 4.6</a></li>


</ul>


</li>





<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>


<ul class='sub'>


<li><a href='Link URL'>Submenu 5.1</a></li>


<li><a href='Link URL'>Submenu 5.2</a></li>


<li><a href='Link URL'>Submenu 5.3</a></li>


</ul>


</li>








<!-- Search Bar -->


<li>


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>


<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form>


</li>





</ul>


</div>




Κάντε αποθήκευση του gadget σας και είστε σχεδόν έτοιμοι!



Σχεδόν, γιατί πρέπει να προσθέσετε τα links που εσείς θέλετε.

Η διαδικασία είναι πάντα ίδια σε όλα τα menus. Μπορείτε να δείτε και μια παλιά μου ανάρτηση με blogger menu (π.χ. http://www.bloggertips.gr/2011/04/blogger-menu-3.html) για να καταλάβετε καλύτερα.



αν θέλετε να προσθέσετε άλλο ένα λινκ τότε πάνω από την search bar βάζετε το:




<li class="top"><a href="Link URL" class="top_link"><span>Title</span></a></li>




ενώ αν θέλετε άλλο ένα λινκ με υποκατηγορίες θα προσθέσετε το:




<li class="top"><a href="Link URL" class="top_link"><span class="down">Title</span></a>


<ul class="sub">


<li><a href="Link URL">Submenu Title</a></li>


<li><a href="Link URL">Submenu Title</a></li>


<li><a href="Link URL">Submenu Title</a></li>


</ul>


</li>




και τώρα ας πούμε πως σε μια υποκατηγορία (

<li><a href="Link URL">Submenu Title</a></li>

) θέλετε να τις βάλετε δικές της υποκατηγορίες, δηλαδή υποκατηγορία στην υποκατηγορία, τότε το

<li><a href="Link URL">Submenu Title</a></li>

θα πρέπει να γίνει έτσι:




<li><a href="Link URL" class="fly">Submenu Title</a>


<ul>


<li><a href="Link URL">Other Submenu</a></li>


<li><a href="Link URL">Other Submenu</a></li>


<li><a href="Link URL">Other Submenu</a></li>


</ul>


</li>




Τα σχόλιά σας, πάντα ευπρόσδεκτα!



Αν το bloggertips.gr σας έχει βοηθήσει, βοηθήστε το κι εσείς με ένα απλό like στο https://www.facebook.com/www.bloggertipstips.gr



Copyrights: http://www.bloggertips.gr/




Οριζοντιο menu-μπαρα με links



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Πρόκειται για μια μπάρα-menu με links-συνδέσμους που τοποθετείται συνήθως κάτω από την επικεφαλίδα της σελίδας σας.



Εγκαθιστάται σαν απλό gadget.

 Ο κώδικας html του είναι:


<style type=”text/css”>
body {
margin:0;
padding:0;
font: bold 14px Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #ffffff;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs H————————— */
#tabsH {
float:left;
width:100%;
font-size:95%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:0px 5px 0 0px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url([get_bloginfo]url[/get_bloginfo]/wp-content/themes/ctooem437d87yvdblwpns116496/files/search/label/tablefth.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url(https://lh5.googleusercontent.com/-muwyDaV_THM/T8mHdxUM2DI/AAAAAAAAU04/BCkIxTvkWHo/h86/tabrightH.gif) no-repeat right top;
padding:5px 5px 6px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
</style>
<div id=”tabsH”>
<ul>
<li><a href=”http://www.bloggertips.gr/” ><span>category 1</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 2</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 3</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 4</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 5</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 6</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 7</span></a></li>
<li><a href=”http://www.bloggertips.gr/” ><span>category 8</span></a></li>
</ul>
</div>



όπου βλέπετε http://www.bloggertips.gr/ βάζετε το δικό σας link

και όπου λέει category βάζετε το όνομα που θέλετε να εμφανίζεται.



καταλαβαίνετε πως μπορείτε να προσθέσετε ή να αφαιρέσετε κατηγορίες



αν σας άρεσε κάντε ένα like στη σελίδα μας στο facebook



 Copyrights: http://www.bloggertips.gr/




Οριζόντιο blogger menu -ΜΕ υποκαρτέλες- κάτω από τον τίτλο για προσθήκη συνδέσμων (3)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Είναι μια μπάρα-μενού ΜΕ ΥΠΟΚΑΡΤΕΛΕΣ που την εγκαθιστάμε κάτω από τον τίτλο του blog μας και βάζουμε σε αυτή, links από αναρτήσεις μας, ετικέτες μας και ότι άλλο θέλουμε.


Θα φαίνεται κάπως έτσι:



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



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>



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>



Όπου το # βάζετε το link σας και από δίπλα βάζετε το όνομα του link.



Προσέξτε τον χρωματισμό που σας έχω κάνει για να καταλάβετε καλύτερα!



8. Αποθήκευση κι είστε έτοιμοι!



Θα ακολουθήσουν κι άλλα σχέδια.

Τα σχόλιά σας, πάντα ευπρόσδεκτα!


Copyrights: /




Οριζόντιο blogger menu -ΜΕ υποκαρτέλες- κάτω από τον τίτλο για προσθήκη συνδέσμων (2)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Είναι μια μπάρα-μενού ΜΕ ΥΠΟΚΑΡΤΕΛΕΣ που την εγκαθιστάμε κάτω από τον τίτλο του blog μας και βάζουμε σε αυτή, links από αναρτήσεις μας, ετικέτες μας και ότι άλλο θέλουμε.



Θα φαίνεται κάπως έτσι:



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



1. Σύνδεση στον blogger λογαριασμό μας από το blogger.com

2. Πανόπτης> Σχεδίαση> Επεξεργασία html

3. Με το ctrl+F βρείτε το </head>

4. Πάνω από αυτό επικολλήστε το παρακάτω:


<style type=’text/css’>

#foxmenucontainer{

height:29px;

background:url(http://i45.tinypic.com/rlw8qe.jpg) repeat-x;

display:block;

padding:0px 0 0px 0px;

border-top:1px solid #474747;

font: 14px "Century gothic",verdana, Arial, sans-serif;

font-weight:normal;

}



#menu ,#menu ul {

margin: 0px 5px;

padding: 0px;

list-style: none;

height:29px;

}



#menu a {

color: #B3DBEF;

display: block;

font-weight: normal;

padding: 4px 10px 6px 10px;

}



#menu a:hover {

background:url(http://i47.tinypic.com/20zxzdj.jpg) repeat-x;

color: #fff;

display: block;

text-decoration: none;

}



#menu li {

float: left;

margin: 0px 0 0px 0;

padding: 0px;

}



#menu li li {

float: left;

margin: px 0px 0px 5px;

padding: 0px;

width: 130px;

}



#menu li li a, #menu li li a:link, #menu li li a:visited {

background:url(http://i45.tinypic.com/rlw8qe.jpg) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#fff;

}



#menu li li a:hover, #menu li li a:active {

background:url(http://i47.tinypic.com/20zxzdj.jpg) repeat-x;

width: 150px;

float: none;

margin: 0px;

padding: 4px 10px 5px 10px;

color:#06415F;

}



#menu li ul {

position: absolute;

width: 10em;

left: -999em;

z-index:1;

}



#menu li:hover ul {

left: auto;

display: block;

}



#menu li:hover ul, #menu li.sfhover ul {

left: auto;

}

</style>



5. Αποθηκεύουμε το πρότυπό μας

6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript

7. Βάλτε τον παρακάτω κωδικό:


<div id=”foxmenucontainer”>



<div id=”menu”>



<ul>



<li><a expr:href=”data:blog.homepageUrl”>Home</a></li>



<li><a href=”#” title=”#”>About</a></li>



<li><a href=”#” title=”#”>Tutorials</a>

<ul>

<li><a href=”#“>Blogger Tutorials</a></li>

<li><a href=”#“>HTML Tutorials</a></li>

<li><a href=”#“>JQuery Tutorials</a></li>

<li><a href=”#“>Blogger Tools</a></li>

<li><a href=”#“>Blogger Layouts</a></li>

<li><a href=”#“>Blogger Templates</a></li>

</ul>

</li>



<li><a href=”#” title=”#”>Contact</a></li>



</ul>



</div>



</div>



Όπου το # βάζετε το link σας και όπου About (και τα άλλα ονόματα) βάζετε το όνομα του link.



Προσέξτε τον χρωματισμό για να καταλάβετε καλύτερα!



8. Αποθήκευση κι είστε έτοιμοι!


Θα ακολουθήσουν κι άλλα σχέδια.


Τα σχόλιά σας, πάντα ευπρόσδεκτα!


Copyrights: /




Οριζόντιο blogger menu κάτω από τον τίτλο για προσθήκη συνδέσμων (1)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Μου το έχετε ζητήσει πάρα πολλοί και δεν μπορούσα να σας αρνηθώ.

Πρόκειται για ένα ακόμη από τα βασικότερα blogger tips που δεν θα μπορούσε να έλειπε από το bloggertips.gr

Είναι μια μπάρα-μενού που την εγκαθιστάμε κάτω από τον τίτλο του blog μας και βάζουμε σε αυτή, links από αναρτήσεις μας, ετικέτες μας και ότι άλλο θέλουμε.



Θα φαίνεται κάπως έτσι:




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



1. Σύνδεση στον blogger λογαριασμό μας από το blogger.com

2. Πανόπτης> Σχεδίαση> Επεξεργασία html

3. Με το ctrl+F βρείτε το </head>

4. Πάνω από αυτό επικολλήστε το παρακάτω:


<!–MENU-11-STARTS-Widget-by-http://loneeagle110.blogspot.com+http://www.bloggertips.gr/–>

<style type=’text/css’>

.solidblockmenu{

margin: 0;

padding: 0;

float: left;

font: bold 13px Arial;

width: 100%;

overflow: hidden;

margin-bottom: 1em;

border: 1px solid #625e00;

border-width: 1px 0;

background: black url(http://i44.tinypic.com/333j255.jpg) center center repeat-x;

}



.solidblockmenu li{

display: inline;

}



.solidblockmenu li a{

float: left;

color: white;

padding: 9px 11px;

text-decoration: none;

border-right: 1px solid white;

}



.solidblockmenu li a:visited{

color: white;

}

.solidblockmenu li a:hover, .solidblockmenu li .current{

color: white;

background: transparent url(http://i40.tinypic.com/51wnm9.jpg) center center repeat-x;

}

</style>

<!–MENU-11-STOPS-Widget-by-http://loneeagle110.blogspot.com+http://www.bloggertips.gr/–>



5. Αποθηκεύουμε το πρότυπό μας

6. Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript

7. Βάλτε τον παρακάτω κωδικό:


<!–MENU-11-STARTS-Widget-by-http://loneeagle110.blogspot.com+http://www.bloggertips.gr/–>

<ul class=”solidblockmenu”>

<li><a href=”…your link…” class=”current”>Login</a></li>

<li><a href=”…your link…” >Home</a></li>

<li><a href=”…your link…”>tab 1</a></li>

<li><a href=”…your link…“>tab 2</a></li>

<li><a href=”…your link…”>tab 3</a></li>

<li><a href=”…your link…”>tab 4</a></li>

<li><a href=”…your link…”>tab 5</a></li>

<li><a href=”…your link…”>tab 6</a></li>

<li><a href=”…your link…”>Contact me</a></li>

<li><a href=”…your link…”>About</a></li>

</ul>

<!–MENU-11-STOPS-Widget-by-http://loneeagle110.blogspot.com+http://www.bloggertips.gr/–>



Όπου το  …your link…  βάζετε το link σας και όπου  tab 0  βάζετε το όνομα του link.



8. Αποθήκευση κι είστε έτοιμοι!



Αν προσέξατε στον τίτλο έχω το (1). Αυτό, όπως καταλαβαίνετε, σημαίνει ότι θα ακολουθήσουν κι άλλα σχέδια.



Τα σχόλιά σας, πάντα ευπρόσδεκτα!


Πηγές: Εικόνα και κωδικοί από http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/P150/
Copyrights: /