Sayfa navigasyonu web sitelerinde SEO uzmanlarının sıkça kullandığı bir özelliktir ki Google arama motoru bu tarz navigasyon sistemi kullananlar için arama sonuçlarında kategorileri ayrıca gösteriyor. Buda web sitenizin kalitesini arttırır.
Bir web sitesinde olmazsa olmazlardan diyebilirim çünkü sadece SEO için yapmak değil ziyaretcilerinde nerede olduklarını bilmesi lazım öyle değilmi? Bu yazıda Google’nin sayfa navigasyon sistemini göstericem çok şık bir sayfa navigasyon sistemi sizde tercih ediceksiniz.
Google Sayfa Navigasyonu
Google sayfa navigasyon sistemini değiştirmişti. Şu anda bu navigasyon sistemi çok beğeniliyor hatta çok kullanılıyor.
Google destek kısmında bir arama yapın ve kendinizde bu özelliği inceleyin siteyi daha profesyonel ve daha tatlı gösteriyor.
Örneğin ben bir arama yaptım sizde buradan bakabilirsiniz.
Google’nin SEO’ya ne kadar önem verdiğini biliyorsunuz. Şimdi sizlere sayfa navigasynu kullananların arama sonuçlarında nasıl göründüklerini göstericem.
CSS3 Sayfa Navigasyon Sistemi
Şimdi arkadaşlar css ve html kodlarını ayrı ayrı veriyorum. 2 Farklı navigasyon sistemi var ikisinide css’si ile ayrı ayrı vericem inş. 🙂
Alttaki Googledeki gibi sadece sağ tarafı ok işareti gibi. Resmide ekliyorum kafanız karışmasın.
HTML Kodu
<div id="content"> <div id="breadcrumb"> <ul class="crumbs"> <li class="first"><a href="#" style="z-index:9;"><span></span>Blog Home</a></li> <li><a href="#" style="z-index:8;">Archives</a></li> <li><a href="#" style="z-index:7;">2011 Writing</a></li> <li><a href="#" style="z-index:6;">Tips for jQuery Development in HTML5</a></li> </ul> </div> </div>
CSS Kodu
/* Google Navigasyonu - rooteto.com */
#content { padding: 0 55px; font-family: Arial, Tahoma, Verdana, sans-serif;}
#breadcrumb{ float: left; display: block; }
#breadcrumb ul{ list-style: none; }
.crumbs { display: block; }
.crumbs li { display: inline; }
.crumbs li.first { padding-left: 8px; }
.crumbs li a, .crumbs li a:link, .crumbs li a:visited { color: #666; display: block; float: left; font-size: 12px; margin-left: -13px; padding: 7px 17px 11px 25px; position: relative; text-decoration: none; }
.crumbs li a { background-image: url('../img/bg-crumbs.png'); background-repeat: no-repeat; background-position: 100% 0; position: relative; }
.crumbs li a:hover { color: #333; background-position: 100% -48px; cursor: pointer; }
.crumbs li a:active { color: #333; background-position: 100% -96px; }
.crumbs li.first a span { height: 29px; width: 3px; border-left: 1px solid #d9d9d9; position: absolute; top: 0px; left: 0px; }
- “../img/bg-crumbs.png” dosyası ek içindedir sunucunuza yüklemeyi unutmayın.
Resim Olmadan Navigasyon
Yukarıdakinin biraz daha değişi yani resim olmadanki halini yapıcaz şimdi altta nasıl durduğuna bakalım.
HTML Kodu
<div id="content"> <div id="breadcrumb2"> <ul class="crumbs2"> <li class="first"><a href="#">Blog Home</a></li> <li><a href="#">Archives</a></li> <li><a href="#">2011 Writing</a></li> <li class="last"><a href="#">Tips for jQuery Development in HTML5</a></li> </ul> </div> </div>
CSS Kodu
/* Resim olmadanki hali - rooteto.com */
#content { padding: 0 55px; font-family: Arial, Tahoma, Verdana, sans-serif; }
#breadcrumb2 { float: left; display: block; }
#breadcrumb2 ul { list-style: none; }
.crumbs2 { display: block; margin-left: -13px; padding: 0; }
.crumbs2 li { display: inline; }
.crumbs2 li a, .crumbs2 li a:link, .crumbs2 li a:visited { color: #666; display: block; float: left; font-size: 12px; padding: 7px 16px 7px 19px; position: relative; text-decoration: none; border: 1px solid #d9d9d9; border-right-width: 0px; }
.crumbs2 li a {background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(241,241,241)),color-stop(0.73, rgb(245,245,245)));
background-image: -moz-linear-gradient( center bottom, rgb(241,241,241) 45%, rgb(245,245,245) 73%);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";}
.crumbs2 li.first a {border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
.crumbs2 li.last a {border-right-width: 1px; border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.crumbs2 li a:hover {border-top-color: #c4c4c4;border-bottom-color: #c4c4c4;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(241,241,241)),color-stop(0.73, rgb(248,248,248)));
background-image: -moz-linear-gradient( center bottom, rgb(241,241,241) 45%, rgb(248,248,248) 73%);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1)";
color: #333; -moz-box-shadow: 0px 2px 2px #e8e8e8; -webkit-box-shadow: 0px 2px 2px #e8e8e8; box-shadow: 0px 2px 2px #e8e8e8;}
.crumbs2 li a:active {border-top-color: #c4c4c4; border-bottom-color: #c4c4c4;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.45, rgb(224,224,224)),color-stop(0.73, rgb(235,235,235)));
background-image: -moz-linear-gradient( center bottom, rgb(224,224,224) 45%, rgb(235,235,235) 73%);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebebeb, endColorstr=#e0e0e0)";
color: #333; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset;}
Son olarak Dosyayı bilgisayarınıza indirip hazır olarak kullanabilirsiniz.
Evet arkadaşlar artık sizinde bir sayfa navigasyonunuz oldu SEO Açısından büyük önem taşıyan bir işi tamamlamış oldunuz.
WordPress Kullanıyorsanız Breadcrumbs eklentisini kurmanız yeterli css’sini değiştirebilirsiniz.
Kaynak: Coding a Graceful Breadcrumb Navigation Menu in CSS3
