Blogger ile ilgili ders içeriklerimize devam ediyoruz. Bildiğiniz gibi birçok web sitesinde sayfa ile kayan sabit bir menü bulunmaktadır. Bu oldukça pratik ve işlevsel bir özelliktir. Blogger’da da sayfa ile kayan menü yapımı oldukça basit bir işlemdir. Dilerseniz bu içeriğimizde, bu konuyu işliyor olacağız. Böylelikle web sitenize güzel menüler ekleyebileceksiniz. Aşağıdaki adımları izlemeniz ise bu yönde yeterli olacaktır. Faydalı bir anlatım olmasını temenni ederek, ilgili anlatımageçiyorum.
1) Temanızın CSS bölümüne aşağıdaki kodları ekleyin.
/* Spacing & Border of First Link in Navigation */
.tabs-inner .section:first-child ul {
margin-top: 0px;
border: 0 solid #eeeeee;
}
/* Background & Border of Navigation */
.tabs-inner .widget ul {
background: #999999;
border: 0px solid #eeeeee;
text-align: center !important;
}
/* Font, Colour & Border of Links */
.tabs-inner .widget li a {
font: normal normal 14px Arvo;
color: #333333;
border: 0px solid #ffffff;
}
/* Font & Colour of Rollover Links */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #000;
background-color: #ffffff;
text-decoration: none;
}
/* Centre Navigation */
.tabs .widget li, .tabs .widget li{
display: inline;
float: none;}
#stickynavbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}
2) HTML/JavaScript bölümüne aşağıdaki kodları ekleyin.
<div id="stickynavbar">
<ul>
<li><a title="Başlık" href="Link">Sayfa Başlığı</a></li>
<li><a title="Başlık" href="Link">Sayfa Başlığı</a></li>
<li><a title="Başlık" href="Link">Sayfa Başlığı</a></li>
<li><a title="Başlık" href="Link">Sayfa Başlığı</a></li>
<li><a title="Başlık" href="Link">Sayfa Başlığı</a></li>
</ul>
</div>
Not: Kırmızı alanları kendinize göre değiştirebileceğinizi unutmayın.
DönüşümDönüşüm İfadelerİfadeler