הדרך הטובה והפתרון המושלם למראה מקצועי ומסודר בבלוג הוא הוספת תפריט. ותפריט שנפתח לקטגוריות ותתי קטגוריות יכול להועיל ככל שהבלוג מורכב יותר. ניתן להכניס את כתובות התוויות בבלוג לתוך תפריט נפתח ולסדר לפי הסדר הנכון אליו התכוונתם תחילה.
הכנו תפריט מבוסס על CSS3, מראה קליל ולא יומרני, אנימציה קלילה במעבר עכבר ומאוד פשוט להוספה לבלוג. הכנו HTML ו - CSS מוכנים להעתקה והדבקה והוראות כיצד לשנות צבעים, פונט וקישורים שיתאים למראה של הבלוג או אתר שלכם.
הוראות :
1# - תחילה נוסיף את ה - CSS לתוך הקוד.
ממשק ניהול הבלוג נבחר בטאב תבנית ומשם נלחץ על כפתור ערוך HTML, ונחפש עם Ctrl+F (מדריך חיפוש בעורך) את השורה הבאה :]]></b:skin>
נעתיק ונדביק את ה - CSS מעל השורה שחיפשנו (תמונה) הדגשנו בירוק את הצבעים כך שתוכלו להתאים לפי הצורך לצבעי הבלוג.(כלי מצוין לקבלת מספרי קוד של צבעים מכאן)
 |
| חיפוש בעורך HTML |
#menu_H2D_dropit {
width: 900px;
margin: 0px auto;
/*צבע רקע מרכזי של התפריט*/
background-color: rgb(102,102,102);
}
#menu_H2D_dropit, #menu_H2D_dropit ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu_H2D_dropit:before,
#menu_H2D_dropit:after {
content: "";
display: table;
}
#menu_H2D_dropit:after {
clear: both;
}
#menu_H2D_dropit li {
float: right;
position: relative;
border-left-width: thin;
border-left-style: dotted;
/*צבע קו מפריד בין הטאבים*/
border-left-color: rgba(153,153,153,1);
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
#menu_H2D_dropit a {
float: right;
/*צבע טקסט תפריט*/
color: #FFF;
letter-spacing: 4;
text-transform: inherit;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
text-decoration: none;
padding-top: 8px;
padding-right: 20px;
padding-bottom: 8px;
padding-left: 20px;
text-shadow: 0px 0px 10px rgba(255,255,255,.5);
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#menu_H2D_dropit li a:hover {
/*צבע רקע טאבים מעבר עכבר*/
background-color: #333333;
}
#menu_H2D_dropit li:hover > a {
/*צבע טקסט מעבר עכבר*/
color: #00CCFF;
}
*html #menu_H2D_dropit li a:hover {
color: #fafafa;
}
#menu_H2D_dropit ul {
_margin: 0;
opacity: 0;
visibility: hidden;
position: absolute;
top: 34px;
z-index: 20;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
right: 0px;
text-align: right;
/*צבע רקע תפריט נפתח*/
background-color: rgb(51,51,51);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0px;
}
#menu_H2D_dropit li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu_H2D_dropit ul ul {
top: 0px;
margin: 0 20 0 0px;
_margin: 0;
right: 136px;
}
#menu_H2D_dropit ul li {
float: none;
display: block;
border: 0;
_line-height: 0;
}
#menu_H2D_dropit ul a {
padding: 8px;
width: 120px;
color: #fff;
_height: 12px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #666666;
}
#menu_H2D_dropit ul a:hover {
/*צבע רקע תפריט נפתח במעבר עכבר*/
background-color:#3d3d3d;
/*צבע טקסט תפריט נפתח במעבר עכבר*/
color: #00CCFF;
}
2# - כעת נוסיף את קוד ה - HTML
נחפש את השורה הבאה :<body expr:class='"loading" + data:blog.mobileClass'> או <body>
 |
| עורך HTML - הדבק HTML |
<div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" dir="rtl" bgcolor="#666666">
<tr>
<td></td>
<td align="center"><ul id="menu_H2D_dropit">
<li><a href="">דף הבית</a></li>
<li><a href="">תפריט נפתח</a>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">נפתח 3</a>
<ul>
<li><a href="">נפתח 1</a></li>
<li><a href="">נפתח 2</a></li>
<li><a href="">נפתח 3</a></li>
<li><a href="">נפתח 4</a></li>
</ul>
</li>
<li><a href="">נפתח 4</a>
<ul>
<li><a href="">נפתח 1</a></li>
<li><a href="">נפתח 2</a></li>
<li><a href="">נפתח 3</a></li>
<li><a href="">נפתח 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">גלריות</a>
<ul>
<li><a href="">גלריה 1</a></li>
<li><a href="">גלריה 2</a></li>
<li><a href="">גלריה 3</a></li>
<li><a href="">גלריה 4</a></li>
</ul>
</li>
<li><a href="">אודות</a></li>
<li><a href="">צרו קשר</a></li>
</ul></td>
<td></td>
</tr>
</table>
</div>
3# - התאמת התפריט :
תפריט נפתח נכנס לתוך <li></li> בצבע צהוב.תת תפריט ניכנס לתוך <ul></ul> בצבע ורוד.
נכניס לתוך הגרשיים בצבע אדום את קישורי הכתובות של הדפים או התוויות ושנו את שמות התפריטים.
<li><a href="http://h2d-manual.blogspot.co.il/">דוגמא</a> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> </ul> </li>
תודה רבה. האם יש דרך למרכז את התפריט?
השבמחקושאלה נוספת, האם יש דרך למקם את התפריט מתחת לכותרת הבלוג?
השבמחק