MENU

CSS3 Süper Sayfa Navigasyonu oluşturmak

Anasayfa » CSS / CSS3 » CSS3 Süper Sayfa Navigasyonu oluşturmak
CSS3 Süper Sayfa Navigasyonu oluşturmak

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.

http://1.bp.blogspot.com/-MVzavGWdi6g/T2nwVCZu3tI/AAAAAAAAGUE/4FUoDjq2BEU/s1600/css3-sayfa-navigasyonu.jpg

Google Sayfa Navigasyonu

Google sayfa navigasyon sistemini değiştirmişti. Şu anda bu navigasyon sistemi çok beğeniliyor hatta çok kullanılıyor.

http://2.bp.blogspot.com/-C_KAhsaRDpk/T2nxfkXvRAI/AAAAAAAAGUM/X5-7AQyzaOE/s1600/sayfa-navigasyonu-google.JPG

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.

http://4.bp.blogspot.com/-8NherzIUkoM/T2nzZlWKehI/AAAAAAAAGUU/rvJUd2snQEA/s1600/google-navigasyon-sistemi.JPG

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.

http://2.bp.blogspot.com/-RstLKIJua1Q/T2pPBsf1kwI/AAAAAAAAGUc/4Ezs0iCqvtw/s1600/google-navigasyon.JPG

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.

http://2.bp.blogspot.com/-gsUTUm6uumA/T2pPCQXIRFI/AAAAAAAAGUg/5hH32GrX59w/s1600/navigasyon-css3.JPG

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

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.