CSS3 Süper Sayfa Navigasyonu oluşturmak 0

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.

https://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.

https://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.

https://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.

https://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.

https://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

Internet Explorer 7 ve 8’deki Arka Plan problemi 0

Her zamanki gibi Internet Explorer problem çıkartıyor bu seferkide arka plan’dı. Aslında bu problemi çok önceden çözmüş ve aşmıştım ama tabi aradan zaman geçiyor ve lazım olduğunda tekrar bulmam gerekiyor.

Problemin çözümünü örnek vererek gösteriyorum.

https://1.bp.blogspot.com/-wTlQr7g7PtA/Uqn59CaxDII/AAAAAAAAWVE/LA2klP6KIf0/s1600/css-for-ie.jpg

<div class="rooteto">
 <h2>Rooteto Başlık</h2>
  <p>Bu alan bana özel yazdığım alan.</p>
</div>

Misal yukarıdaki gibi bir yapı var karşımda ben .rooteto class’ına arkaplan (background) ekleyeceğim bunu CSS ile alttaki gibi yapabiliyoruz.

.rooteto{
 background: ('resim/yolu.png');
}

Bu tüm tarayıcılarda malesef aktif çalışmıyor Internet Explorer’da bu problemi aşmak için alttaki gibi kullanmanız yeterli.

.rooteto{
 background: ('resim/yolu.png');
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/home.jpg', sizingMethod='scale');
}

IE 7 ve IE8‘de problemim vardı onlar düzeldi.

Olayı belki biraz uzattım yukarıdaki kodu eklemeniz yeterli diyebilirdim belki ama olsun anlatmışda olalım 🙂

Tarayıcılara göre işlemde yapabilirsiniz: Tüm tarayıcılar için CSS düzeltmeleri yapın.

Google Penguin 2.0 Güncellemesi Bitti. 0

Penguin güncellemesi Mayıs ayınca çıkacağı söyleniyordu Mayısın başında bekledik ancak Mayıs’ın sonuna doğru güncellemenin başlandığı bildirildi.

Mayıs 22’sinde başladı ve 23’ünde güncelleme tamamen bitti. Bu Google‘nin Spam uzmanı Matt Cutts tarafından Twitter ve Blog’undan bildirildi. Genelde Google twitter hesabında bu tip duyurular yapıyordu ancak bu sefer Matt yaptı.

SEO‘cu olarak şunu söylemem gerekiyor eğer siteniz tamamiyle yok olmadıysa yani 3-4 sayfa gerilediyse 1-2 hafta süre verin komple bir değişikliğe kesinlikle gitmeyin ancak ben herkezin bundan etkileneceğini düşünmüyorum zaten genede tedbirli olun.

https://2.bp.blogspot.com/-vgwHRnaM_uI/UZ3MkACL4sI/AAAAAAAARe8/si-XvpuzItI/s1600/Penguin-2.0.jpg

Matt Cutts Tweet’inde blog’unun bağlantısını vermiş Blog’unu incelediğimde güncellemenin dün başladığını 3 saat önce attığı tweet’tede bittiğini söyledi.

Güncelleme illada sizi vuracak değil doğru işler yapıyorsanız korkmanıza gerek yok zaten. Ancak bazı kelimelerinizde gerileme olabilir bunuda güncellemeye bağlamak yerine kelimenin gücünede dikkat edebilirsiniz.

İLGİNİZİ ÇEKEBİLİR: Panda Güncelleme Sonrası: Kaliteli içerik yazmak için 7 ipucu

Matt bu algoritma değişikliğinin tamamlandığını söylüyor ancak diğer ülkelerde hızlıca bunun etkisini göremeyebiliriz bunuda söylüyor. Türkiyedeki değişiklikler hızlıca gözünüde çarpmayabilir 1-2 hafta içerisinde web sitenizdeki değişiklikleri inceleyebilirsiniz. Hitinizin düşmesi konusunda algoritma değişikliğinden sonra bende spam’a düştüm endişesine kapılmayın. Artık yaz geliyor okullar tatil olacak ve çoğu kişi tatile çıkacak internet kullanımı blog’larda biraz daha artabilir yada tam tersi olabilir bunları bilmiyorsanız yanlış anlayabilirsiniz Penguinciği 🙂

Herkezin şu anda beklediği aslında bu güncelleme değildi Webmaster’ların daha çok yoğunlaştığı olay Pagerank Güncellemesi buda hala gerçekleşmedi. Mayıs bitmeden bekliyoruz açıkcası sizde takip edin.

Most Popular Topics

Editor Picks