גוגל בלוגר | איך להוסיף תפריט

הכנסת תפריט לבלוג מעניקה מראה יותר מקצועי ומקלה את חווית הגלישה בבלוג.
במדריך זה נעבור על השלבים להוספת התפריט שמוצג למטה, בחרנו תפריט קלאסי ופשוט שיכול להתאים לכל בלוג וכל זאת במספר פעולות בודדות.

• בממשק הבלוג בחרו את הטאב תבנית ומשם בחרו ערוך HTML
• הקליקו בתוך העורך וחפשו בתוך הקוד (Ctrl+F) את השורה הבאה

]]></b:skin>

• נעתיק את ה-CSS המוצג למטה

#cssmenu ul {
  margin: 0;
  padding: 0;
}
#cssmenu li {
  margin: 0;
  padding: 0;
}
#cssmenu a {
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu a {
  text-decoration: none;
}
#cssmenu {
  height: 70px;
  background-color: #232323;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
  width: auto;
}
#cssmenu > ul > li {
    float: right;
    margin-left: 15px;
    position: relative;
}
#cssmenu > ul > li > a {
    color: #a0a0a0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 70px;
    padding: 15px 20px;
    -webkit-transition: color .15s;
    -moz-transition: color .15s;
    -o-transition: color .15s;
    transition: color .15s;
}
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  position: absolute;
  top: 55px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  -webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
  -o-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
  opacity: 1;
  top: 65px;
  visibility: visible;
}
#cssmenu > ul > li > ul:before {
  content: '';
  display: block;
  border-color: transparent transparent #fafafa transparent;
  border-style: solid;
  border-width: 10px;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}
#cssmenu > ul ul > li {
  position: relative;
}
#cssmenu ul ul a {
    color: #323232;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #fafafa;
    padding: 5px 8px 7px 16px;
    display: block;
    -webkit-transition: background-color 0.1s;
    -moz-transition: background-color 0.1s;
    -o-transition: background-color 0.1s;
    transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
  background-color: #f0f0f0;
}
#cssmenu ul ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  width: 180px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
  opacity: 1;
  left: 190px;
  visibility: visible;
}
#cssmenu ul ul a:hover {
  background-color: #cc2c24;
  color: #f0f0f0;
}

• נדביק מעל השורה (תמונה למטה)

• נעתיק את קוד ה-HTML

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>עמוד הבית</span></a></li>
   <li><a href='#'><span>גלריה</span></a></li>
   <li><a href='#'><span>אודות</span></a></li>
   <li class='last'><a href='#'><span>צרו קשר</span></a></li>
</ul>
</div>

• כדי למקם את התפריט בראש הבלוג נדביק את ה-HTML מתחת לשורה (תמונה למטה) :

<div class='content-outer'>

* את שמות התפריט שנו לפי הצורך.
* החליפו את הסולמיות (#) בכתובות הדפים או תוויות ושימרו את התבנית.
הציגו את הבלוג וצפו בתוצאה.