İnternet etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

4 Ocak 2015 Pazar

Sağ Tık ve Kopyala Yapıştır Engelleme

Bu yazımda sitenizde, blogunuzda yazdığınız yazıların kopyalanarak "çalınmasını" engelleyecek kodu sizlerle paylaşacağım. Kimse yazısını kaynak belirtmeksizin orada, burada görmek istemez ama sadece ordan burdan kopyaladığı yazıları paylaşarak blog yazanlar var. Eğer sizde böyle şahışlar tarafından kopyalanan içeriğin önüne geçemiyorsanız, bu eklenti sayesinde bir nebzede olsa blogunuzdaki içeriği koruyabilirsiniz. Basit bir kod yapısına sahip olan bu eklenti, kopyala yapıştır yapan kişileri engellemek için geliştirilmiştir. Sizlere iki alternetif sunuyorum. İlk kodda sayfanızdaki yazılarınızın üzeri çizilemez, böylece işaretlenemeyen içerik kopyalanamaz. ikinci kodda yazılarınız işaretlenir ama kopyalamak için sağ tıklayınca, bu fonksiyonun devre dışı olduğunu belirten küçük bir uyarı penceresi çıkar. Hangisi hoşunuza giderse onu kullanabilirsiniz.

Blogger Kopyala Yapıştır Engelleme kodunu Ekleme :

Blogger panelinize giriş yapın Şablon → HTML'yi Düzenle yolunu takip edin.
CTRL+F tuş kombinasyonuyla </head> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodlardan beğendiğinizi kopyalayıp yapıştırın.
Kaydet diyip çıkın.

İçeriğinizi Kopyalatmayan Script

<script language='JavaScript1.2'>
//<![CDATA[
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
//]]>
</script>

Sağ tıklanınca uyarı penceresi çıkan Script


<script type='text/javascript'>
//<![CDATA[
var message="Fonksiyon Devre Dışı !"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false")
//]]>
</script>

Bu kadar. Kırmızıyla işaretlediğim text bölümünü istediğiniz gibi değiştirebilirsiniz.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

2 Aralık 2014 Salı

Mobil ve Tablet cihazlarla Uyumlu Resim Slider ve Galerileri

Günümüzde mobil teknolojilerinin yükselişi web tasarımcılarınıda mobil ve tablet cihazlarla uyumlu ve duyarlı eklentiler yazmaya sevketti. Birçok websitesi yada blog sahibinin en çok endişe ettikleri konu, sayfalarına ekledikleri herhangi bir kod yada eklentinin mobil uyumlu olup olmamasıdır. Bu yazımda sizler için arayıp bulduğum, piyasadaki mobil ve tablet cihazlarla uyumlu resim slider ve galerileri sizlerle paylaşacağım. Bunlar hem bütün tarayıcılarda hemde mobil ve tablet cihazlarla uyumlu ve dokunmatik duyarlı slider eklentileri. Önizleme butonuyla bakıp beğendiginizi indirebilir ve sayfanıza entegre edebilirsiniz.

18. Fotorama

ÖNİZLEME İNDİR
Herhangi birini kullanıp test etme olanağına sahip olan arkadaşlar, diğerlerininde bilgilendirilmesi açısından olumlu veya olumsuz bir değerlendirme yorumu yapabilirler.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin.

18 Kasım 2014 Salı

Google Arama Sonuçlarında Star Rating Değerlendirmesini gösterme

Star Rating google’ın kullanıcılar için sunduğu bir derecelendirme sistemidir. Google’ın web siteleri için sunmuş olduğu ücretsiz optimizasyon tekniklerinden biri olan Star Raiting, web sitelerinin Google arama sonuçları sayfasında yıldızlı olarak görünmesini sağlar. Google, sitenizde yazmış olduğunuz bir yazı(genellikle multimedya içerikli yazılarda uygulanıyor) hakkında sizin derecelendirmenizi alıp, aramalarda sayfa başlığınızın altında gösteriyor. Google’ın sizin siteniz hakkında olumlu düşünmenizi sağlattıran bir uygulama. İkinci olarak arama sonuçlarında yıldız çıkan ile çıkmayan iki aynı başlığa sahip yazıdan, yıldızlı içeriğe tıklanma olasılığı daha fazladır. Çünkü ziyaretçi o sitenin güvenilir ve kaliteli olduğunu düşünür. Bu şekilde ek bilgiler ile seo teknikleri alanında biraz daha ilerleyebilir ve ziyaretçilere sitenizin kaliteli olduğunu hissettirip, sitenize çekmeyi başarabilirsiniz. Star rating sitenize ziyaretçi ile köprü olur.

Rich Snippet (Zengin snippet) Nedir?

Rich Snippet' i kısaca açıklamak gerekirse sitenizin içeriğini arama motorlarına çok daha ayırıntılı gösterme biçimi olarak tanımlayabiliriz. Snippet'ler, her arama sonucunun altında çıkan birkaç satır metin olup kullanıcılara sayfada neler olduğuyla ve sorgularıyla neden alakalı olduğuna ilişkin fikir vermek için tasarlanmıştır. Bir kullanıcının arama yaptığı konularda kararı çoğunlukla bu zengin snippet ve yıldız değerlendirmesine bağlıdır. Bu zengin snippet'ler, kullanıcıların siteniz aramalarıyla alakalı olduğunda bunu fark etmelerine yardımcı olur ve sonuç olarak sayfalarınız daha fazla tıklanabilir.

Blogger'da Star Rating Değerlendirmesini ayarlama

1. Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle

2. Ctrl+F yardımı ile aşağıdaki kodu aratıp bulun.

<div class='post-footer'>

3. Bu koddan iki tane bulacaksınız, bizim aradığımız ikinci kod.

4. Ve hemen altına aşağıdaki kodları kopyalayıp yapıştırın.

<!-- Google Arama Sonuçlarında Star Rating Değerlendirmesi -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div style='display:none;'>
Item Reviewed: <span itemprop='itemreviewed'><data:post.title/></span>
Description: <span itemprop='description'><data:blog.metaDescription/></span>
Rating: <span itemprop='rating'>5</span>
Reviewed By: <span itemprop='reviewer'><data:post.author/></span>
</div></div></div>
</b:if>
<!-- Google Arama Sonuçlarında Star Rating Değerlendirmesi -->

5. Şablonu Kaydet diyip çıkın.

6. Şimdi yapısal veri test aracını kullanarak sitenizi test edin.

Örnek:

Star rating değerlendirmesi hemen aramalarda çıkmayabilir.Biraz zaman alacaktır. Örneğin, bir restoran snippet'i ortalama yorum ve fiyat aralığını gösterebilir; bir yemek tarifi sayfası snippet'i toplam hazırlama süresini, bir fotoğrafı ve yemek tarifinin yorumlarda aldığı kullanıcı oyunu gösterebilir; müzik albümü ise şarkıları sunarken snippet kullanarak her şarkının yanında dinlemek için bir bağlantı görüntüleyebilir. Google, aşağıdaki içerik türleri için zengin snippet'leri destekler:

Google, video içeriğin işaretlenmesini de tanır ve arama sonuçlarını geliştirmek için kullanır.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

5 Kasım 2014 Çarşamba

Jquery Haber Manşet Slider

Merhaba arkadaşlar, biliyorsunuzki javascript ile manşet alanı birçok sitede kullanılan bir yöntem. Bu yazımda sizlerle javascript'in bir kütüphanesi olan jquery kullanarak birçok haber sitesinde görebileceğiniz bir slider paylaşacağım. Tıklanabilir linkler, tıklanabilir slayt, numaralı geçişleri tanımlayabilirsiniz. Haber makale başlıklarınızı ister resimlerinizde isterseniz altyazı bülümünde yazabileceğiniz çok şık bir haber manşet slider eklentisi. Birçok internet tarayıcısı (Internet Explorer, Firefox, Google Chrome, Safari) ile test edilen eklenti sorunsuz olarak çalışmaktadır.

Jquery Haber Manşet Slider önizleme

1. Adım

Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

/*---jQuery Haber Manşet Slider by MeftunMede.blogspot.com---*/
.MEFmanset{border:1px solid #dcdbdb;width:648px;height:302px;}
.eleman{display:block!important;}
.MEFmanset .manset_resimler img{border:0 none;text-decoration:none;width:630px;height:265px;}
.MEFmanset .manset_resimler a,.MEFmanset .manset_butonlar a{text-decoration:none;color:#6f6f6f;display:block;font-size:11px;padding:0;}
.MEFmanset .manset_butonlar a{display:block;text-align:center;}
.MEFmanset .manset_resimler a{padding:0;}
.MEFmanset .manset_resimler,.MEFmanset .manset_butonlar{list-style:none;margin:0;padding:0;}
.MEFmanset .manset_butonlar{border-top:1px solid #ccc;border-bottom:0 none;height:24px;}
.MEFmanset .manset_resimler li,.MEFmanset .manset_butonlar li{list-style:none;background-color:#FFF;font-size:14px;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:center;margin:0;padding:0;}
.MEFmanset .manset_resimler{width:648px;height:277px;}
.MEFmanset .manset_resimler li{position:relative;width:648px;height:277px;display:none;}
.MEFmanset .manset_resimler li img{width:640px;height:270px;margin:4px;}
.MEFmanset .manset_butonlar li{float:left;width:29px;line-height:24px;height:24px;border-right:1px solid #ccc;background:linear-gradient(tobottom,#efeded0,#fff7f750%,#efeded100%);font-family:Arial,sans-serif;}
.MEFmanset .manset_butonlar li.tumu{width:47px;height:24px;border-right:0 none;background-color:#f8f8f8;}
.MEFmanset .manset_butonlar li.tumu a{color:#6F6F6F;}
.MEFmanset .manset_butonlar li.tumu:hover{background:#fd0000!important;}
.MEFmanset .manset_butonlar li.aktifbuton,.MEFmanset .manset_butonlar li:hover{background:#fd0000 url(http://i.imgur.com/FgOGXrJ.gif?1) no-repeat top center;color:#FFF!important;}
.MEFmanset .manset_butonlar li.aktifbuton a,.MEFmanset .manset_butonlar li:hover a{color:#FFF;border:1px solid #900;border-top:0 none;}
/*-----Altyazı bölümü-----*/
.MEFmanset span{width:640px;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHcztU7G3-LoWnylNZemDN_J1OiIQIpFtA6KKGIzEyZPUCeUbyojLPjmUHsiY_cCMLDILr9KqrVy1_aejuMhuN8BiIenzuGTIe5CgvVW6Sozkl71Efqoao8Mj-cL1_WPLGUxMoBuPnZU/s1600/caption-bg.png) repeat scroll 0 0 transparent;display:block;text-shadow:1px 1px 0 #000;font-size:20px;color:#FFF;font-family:Arial,sans-serif;font-weight:400;overflow:hidden;top:225px;left:4px;text-align:center;position:absolute;z-index:4;margin:0;padding:8px 0 0;}
.MEFmanset span:hover{color:#CCC;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHcztU7G3-LoWnylNZemDN_J1OiIQIpFtA6KKGIzEyZPUCeUbyojLPjmUHsiY_cCMLDILr9KqrVy1_aejuMhuN8BiIenzuGTIe5CgvVW6Sozkl71Efqoao8Mj-cL1_WPLGUxMoBuPnZU/s1600/caption-bg.png) repeat scroll 0 0 transparent;}

2. Adım

Tekrar Ctrl+F yapıp </head> kodunu buluyoruz ve hemen üstüne aşağıdaki javascript kodlarını kopyalayıp yapıştırıyoruz.
Şablonu Kaydet diyip çıkın.

<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='http://meftun-mede.googlecode.com/svn/trunk/JQuery_Haber_Manset_Slider.js' type='text/javascript'></script>

3. Adım

Şimdi Blogger panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin.
Ve aşağıdaki kodları Online HTML Editör ile isteğinize göre ayarlayarak, istediğiniz bölüme kopyalayıp yapıştırın.
Kaydet diyip çıkın.

<div class="MEFmanset">
<ul class="manset_resimler">
<li  class="eleman">
<a href="Haber_Linki.html" title="Haber_Başlığı" target="_blank"><img src="Resim_Linki.jpg" alt="Resmin tanımı" width="Resmin orjinal genişliği" height="Resmin orjinal yüksekliği"/></a>
<!--Örnek-1 Başlık-resim altyazısı bölümü başla-->
<span>Başlık-resim altyazısı</span>
<!--Örnek-1 Başlık-resim altyazısı bölümü bitiş-->
</li>
<!--Örnek-1 bölümü bitiş-->
<li >
<a href="http://www.örnek.com/örnek_yazi.html" title="Örnek yazı" target="_blank"><img src="http://www.örnek.com/images/örnek_yazi.jpg" alt="Örnek yazı" width="580" height="385"/></a>
<span>Örnek yazı</span>
</li>
<!--Örnek-2 bölümü bitiş-->
<li >
<a href="http://www.meftun-demo.blogspot.com/2014/08/googledan-kontakt-lens-kamera.html" title="Google'dan kontakt lens kamera" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYIC2Wm_FdI7pNtbXkofkSIVNfJ_CIcNHBayVwJ173lgYF2pqu8rF3OG7DfKOlqJ8SBexsWQDBhxxYiLbJxg6f8g9HAJobqGyeAa27OFvlenGsMRBe1zTdgahcQjc5uiQEvoWsKk_mkCI/s1600/contact-lens-google-glass-eyeball-670.jpg" alt="Google'dan kontakt lens kamera" width="670" height="440"/></a>
<span>Google'dan kontakt lens kamera</span>
</li>
<!--Örnek-3 bölümü bitiş-Burdan itibaren istediginiz kadar çoğaltabilirsiniz-->
</ul>
<!--manşet resimler bölümü bitiş-->

<ul class="manset_butonlar">
<li class="aktifbuton">
<a href="Haber Linki.html" title="Haber Başlığı" target="_blank">1</a></li>
<li>
<a href="http://www.örnek.com/örnek_yazi.html" title="Örnek yazı" target="_blank">2</a></li>
<li>
<a href="http://www.meftun-demo.blogspot.com/2014/08/googledan-kontakt-lens-kamera.html" title="Google'dan kontakt lens kamera" target="_blank">3</a></li>
<!--Burdan itibaren istediginiz kadar çoğaltabilirsiniz-->
<li class="tumu">
<a href="#" title="Tüm Haberler" target="_blank">TÜMÜ</a></li>
</ul>
</div>

Özelleştirme

Style kodlarında Kırmızıyla işaretli yerlerde;
1 - width:648px; slider çercevesi genişliği, height:302px; slider çercevesi yüksekliği
Mavi işaretli yerlerde;
2 - width:640px; Resmin genişliği, height:270px; Resmin yüksekliği
Yeşil işaretli yerlerde;
3 - width:640px; Başlık-resim altyazısı bölümü şerit genişliği, height:40px; Başlık-resim altyazısı bölümü şerit yüksekliği
4 - Eğer altyazı başlık şerit'ini istemezseniz; 1. adımdaki style kodlarından işaretlemiş olduğum bölümü ve 3. adımdaki span kodlarını silebilirsiniz.
5 - Bu haber manşet slider'ındaki style kodları 20 resim ve konuya göre ayarlanmıştır. isterseniz bunu çoğaltabilir veya azaltabilirsiniz. Buna göre style kodlarında yukarıda belirttiğim width ve height değerlerini değiştirmelisiniz.
6 - Yapamayanlar yorum kısmına "yapamadım" yazmak yerine, Lütfen bana iletişim bölümünden resim liklerini, yazı linklerini, boyutlarını vs. ayrıntılı bi şekilde yazarak göndersinler. Ben istediğiniz şekilde hazırlayıp geri gönderirim sizlere. Ondan sonra güzel bi yorum yazabilirsiniz:)
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

15 Ekim 2014 Çarşamba

Meta Tag Etiketleri nedir, Nasıl kullanılır?

Meta Tag etiketleri nedir, nasil kullanilir?

Meta etiketler, web yöneticilerinin arama motorlarına siteleri hakkında bilgi vermesi saglayan, <head> bölümüne eklenen bilgi etiketleridir. Sayfanın <head> alanında kullanılan meta etiketleri (tag) tarayıcılara, arama motorlarına, robotlara, link analiz vb. programların hepsine sayfa hakkında ihtiyaç duydukları bilgileri sağlar. Bu bilgiler, meta etiketinin name özelliğinin ismini, content özelliğinin değerini oluşturduğu isim-değer çifti olarak sağlanır. Sitenizin bu arama motorlarınca doğru bir şekilde gösterimi için bazı Meta tag’ları kullanmakta fayda var. Tamamının isteğe bağlı olarak belirtildiği bu değerlerin popüler kullanıma sahip olan özellik isimleri aşağıdaki listede gösterilmektedir. Meta tag etiketleri hakkında yeterince bilgi aldıktan sonra Meta Tag Oluşturucu ile Meta taglarınızı oluşturabilir, bu konuyu daha iyi kavrayabilirsiniz.

author
abstract
content-language
content-type
copyright
description
designer
distribution
expires
generator
keywords
language
publisher
reply-to
revisit-after
refresh
robots
title

robots
Bu tag arama motorlarına nasıl davranmaları hakkında ön bilgi veriyor. Sayfanın arama motorlarında listelenip listelenmemesini bu tag ile belirleyebiliyoruz. Bu tagın alternatifi olarak robots.txt dosyası da bu işlevi görebiliyor. content özelliği aşağıdaki değerleri alabilir. Virgül ile ayrılarak birkaç değer birden belirtilebilir.
index : Sayfanın dizine eklenmesini bildirir.
follow : Sayfa içindeki bağlantıların/linklerin izlenmesini bildirir.
archive : Sayfanın ön izleme için ekran görüntüsünün oluşturulmasını bildirir.
noindex : Sayfanın dizine eklenmesini engeller.
nofollow : Sayfa içindeki bağlantıların/linklerin izlenmesini engeller.
noarchive : Sayfanın ön izleme için ekran görüntüsünün oluşturulmasını engeller. Daha önce oluşturulduysa silinmesini sağlar. (Önizlemenin silinmesi arama motorlarına göre farklılık gösterebilir.)
all : Tüm olumlu bildirimleri uygular. Arama motorları index, follow ve archive bildirimlerinden farklı bildirimleri de kabul ediyor olabilir. Bu yüzden arama motorunun yardım/destek sayfasına bakınız.
none : Sayfanın gözardı edilmesini bildirir.
noodp : Eğer sayfa DMOZ dizininde kayıtlı ise arama sonuçlarında DMOZ dizinindeki açıklamanın yerine sayfanın kendi açıklamasının kullanılmasını sağlar. Bu değer, özellikle MSNBOT (live.com) için geçerlidir.
Bir arama motoru robotu aksi belirtilmediği sürece bir sayfayı dizine ekleyebilir, sayfadaki linkleri takip edebilir ve sayfanın önizlemesini oluşturabilir. Bu yüzden robots özelliği ile all, index, follow ve archive değerlerinin kullanımının çok özel bir anlamı yoktur. Bunlar yerine sadece robotu engellemek amacıyla, engelleme amacına göre none, noindex, nofollow ve noarchive değerlerinin kullanımı daha doğru olacaktır. Aşağıdaki örnek, index, follow ve archive değerlerinin uygulamasını göstermektedir.
<meta name="robots" content="all" />
Aşağıdaki örnek, arama motoruna sayfayı dizinine eklememesini fakat, sayfadaki linkeri takip etmesinin bildirilmesini göstermektedir.
<meta name="robots" content="noindex, follow" />
Aşağıdaki örnek, arama motoruna sayfayı dizine eklemesini fakat, sayfadaki linkeri takip etmemesinin ve sayfanın önizlemesinin oluşturulmamasının bildirilmesini göstermektedir.
<meta name="robots" content="index, nofollow, noarchive" />

title
Arama motorunun dizininde gösterilecek başlığı belirler. Aslında bir Meta Etiketi değildir. Fakat meta etiketi şeklinde kullanımı vardır ve aynı kategoridedir. Sayfanın başlığını verir ve Google açısından en önemli etikettir. Buraya yazılanlar tarayıcının üst bilgi kısmında, arama motorunda sayfa listelenirken ve sayfanız sık kullanılanlar gibi bir yere kaydolurken gözükecek olan kısımdır. Sayfa içeriği ile ilgili en uygun başlık yazılmalıdır. Aynı şekilde HEAD etiketi içerisine yazılır.
<meta name="title" content="HTML Meta Etiket Değerleri" />

Açıklama

Bir META etiketi (tag), sağladığı bilgiyi ihtiyaç duyan programlara bildirmek için sayfaya eklenir. Yukarıdaki listede bir kısmı HTTP protokolü ile bildirilmiş, bir kısmıda arama motorları ve W3C organizasyonu tarafından önerilerek kabul görmüş META değerleri bulunmaktadır. Örneğin, nofollow değerini ilk Google kullanmış, ardından diğer arama motorları da kabul etmiştir. Bu listedeki META etiketi (tag) özellik değerleri haricinde daha binlerce etiket değeri bulunmaktadır. Bunlardan bazıları, keyphrases, subject, classification, geography, rating vs. vs. şeklindedir. Bu değerlerin çok büyük bir kısmı birçok program ve arama motoru tarafından tanınmadığı için sayfalarda kullanılmamalıdır. (Hatta, bu listedeki birkaç değer bile fazlalıktır.) Eğer META etiketleri ile herhangi bir konuda özellikle bilgilendirilmesi gereken bir program veya arama motoru varsa ilgili programın veya arama motorunun yardım bölümünde mutlaka ilgili etiket ile ilgili bilgi vardır. Örneğin, herhangi bir sayfanın Google ve YandexBot dizininde listelenmesini engellemek için aşağıdaki META etiketlerinin kullanılacağı Google ve Yandex yardım sayfalarında yer verilmiştir.

<meta name="googlebot" content="noindex" />

<meta name="YandexBot" content="noindex" />

* googlebot ve YandexBot özellik değerlerine, listede gösterilen robots değerinin alabileceği değerler de atanabilir. Ayrıca Google, site yöneticisi araçları bölümüne giriş yapan bir kullanıcının sitenin sahibi olup olmadığını kontrol etmek için aşağıdaki gibi verify-v1 değerini içeren rastgele üretilmiş bir anahtar kodun sayfaya eklenmesini isteyebilir. Eğer kullanıcı sayfanın kaynak koduna erişip bu etiketi sayfaya ekleyebiliyorsa sitenin sahibi olduğunu ispatlamış olur.

<meta name="verify-v1" content="XXXXXXXXXXXXXXXXXXXX" />

Bununla beraber programlar, arama motorları veya internet hizmeti veren siteler, site yöneticilerinden verify-v1 değerine benzer bir çok META etiket değerini sayfalara eklemesini isteyebilir. Hangi etiketin hangi değerle ekleneceği yalnızca ilgili sitenin yardım sayfalarında bulunabilir. Son olarak, Google, Yahoo ve Yandex gibi popüler arama motorlarının yardım sayfalarına bakıldığında en önemli META özellik değerlerinin sadece description ve keywords olduğu görülmektedir. Tüm meta etiketlerinin opsiyonel olmasına rağmen bu iki değerin ve bunlar ile birlikte title etiketinin de kullanımı arama motorlarının sayfayı doğru analiz etmesi açısından önemlidir ve fayda sağlar. Diğer binlerce META özellik değeri bilgilendireceği bir hedef (arama motoru vs.) olmadığı sürece sayfaya eklenmesinin hiç bir anlamı olmayacaktır. Örneğin, yukarıda bahsedilen "rating" değeri, sözde sayfanın hitap ettiği kamu kesimini belirler ki bu Amerikan standartlarına göre 5 farklı değere sahip bir derecelendirmedir. Fakat, bu özellik 1996-97 yıllarındaki çalışmalarda HTML 3.2 önergesinin beraberinde önerilmiş ve hemen ardından iptal edilmiş bir değerdir. Yani en az 10 yıldır herhangi bir geçerliliği olmayan ve güncel olarak popüler arama motorlarının, hakkında bir bildirimi olmayan bir değerdir.

4 Mayıs 2014 Pazar

Websiteleri için Lightbox Eklentisi

Bu yazımda websiteleri yada WebBloglar için Lightbox sistemini nasıl sitenize uygulayacağınızı anlatacam. Umarım biçok kişiye yardımcı olur. Lightbox birçok web sitesinde gördüğümüz, küçük önizlemesi verilen resimlerin tıklayıp büyütülmesine yarayan, jQuery ile çalışan bir sistemdir. Diğer javascript/jQuery yazılımları gibi farklı türde uygulamaları/örnekleri bulunur. Lightbox bir resme tıkladığınızda arka planı karartma efekti vererek sizin dikkatinizi resme çekmeye çalışmaktır. Web sayfalarındaki resimleri daha esnek ve çekici görüntülemek için kullanılan basit ve kullanışlı bir uygulamadır.

Lightbox önizlemesi için tıklayın

1. Seçenek

1. ADIM - JAVASCRIPT VE CSS'Yİ YÜKLEME

Lightbox'un en son sürümünü indirin ve açın.

İNDİR

İndirdikten sonra dosyaları çıkartın. css,img ve js klasörlerini sitenizde scripti kurmak istediğiniz yere atın.
Jquery-1.11.0.js ve lightbox.js bulmak ve bu dosyaların ikisinide yüklemek için js klasörünün içine bakın. Lightbox.css style dosyasını bulmak ve yüklemek için css klasörünün içine bakın.
Close.png, loading.gif, prev.png ve next.png bulmak için img klasörünün içine bakın. Bu dosyaları lightbox.css kullanılır. Varsayılan olarak, lightbox.css img adında bir klasör bu görüntüler için arayacaktır.
Aşağıdaki kodları lightbox scriptini kullanmak istediğiniz sayfanın <head>...</head> tagları arasına ekleyin.

<link rel="stylesheet" href="http://www.siteniz.com/css/lightbox.css" type="text/css" media="screen"/>
<script src="http://www.siteniz.com/js/jquery-1.11.0.js" type="text/javascript"></script>
<script src="http://www.siteniz.com/js/lightbox.js" type="text/javascript"></script>

Burda style dosyası olan lightbox.css adlı dosyayı sitenizin ana dizinindeki css adlı klasöre attığınız varsayılmıştır.
jquery-1.11.0.js ve lightbox.js script dosyaları sitenizin ana dizinindeki js adlı klasöre attığınız varsayılmıştır.Dilerseniz değiştirebilirsiniz.

Eğer sitenizin ana dizininde img adında bir klasör oluşturup Lightbox'un resim dosyaları olan Close.png, prev.png ve next.png image dosyalarını içine atmadıysanız; sitenizde bulunan başka bir klasöre attıysanız şu değisikligi yapmalısınız;
css klasöründe bulunan lightbox.css dosyasını Notepad++, Dreamweaver ya da herhangi bir metin editörü ile açın ve aşağıda yazmış olduğum kodları Ctrl-F yardımıyla aratıp bulun.

../img/close.png

../img/loading.gif

../img/prev.png

../img/next.png

Burda style dosyası olan lightbox.css adlı dosyada Lightbox icin gerekli resimler sitenizin ana dizinineki img klasörü içinde olarak varsayılmıştır. Resimleri başka klasöre attıysanız aşağıdaki gibi değişiklik yapabilirsiniz. Yoksa dokunmayın!

Örnegin sitenizin ana dizinindeki resimler klasörünüze attıysanız şöyle değiştirin;

../resimler/close.png

2. Seçenek

Eğer 1. seçenekteki adımları uygulayamadım, yapamadım diyosanız; aşağıdaki kodları <head>...</head> tagları arasına kopyalayıp yapıştırın.

<link rel="stylesheet" href="http://meftun-mede.googlecode.com/svn/trunk/lightbox.css" type="text/css" media="screen"/>
<script src="http://meftun-mede.googlecode.com/svn/trunk/jquery-1.11.0.js" type="text/javascript"></script>
<script src="http://meftun-mede.googlecode.com/svn/trunk/lightbox.js" type="text/javascript"></script>

Bu kadar, Kulumu tamamladık.

NASIL KULLANILIR

Kulumu tamamladıktan sonra nasıl kullanacağımıza geçelim.
Lightbox'u etkinleştirmek için herhangi bir görüntü bağlantısı için bir data-lightbox özniteliğini ekleyin. Niteliğin değeri, her bir görüntü için benzersiz bir ad kullanın.

Örneğin:

<a href="../resimler/resim-1.jpg" data-lightbox="resim-1" data-title="Resmin başlığı"><img src="../resimler/thumb_resim.jpg" width="100" height="40" alt="resmim"/></a>

İsteğe bağlı: Bir resmin başlığını göstermek istiyorsanız data-title özniteliğini ekleyin.
Mesela bir albümünüz var, Fethiye'de çekilmiş, albüm isminiz Fethiye olsun ,data-lightbox:Fethiye ve 1. resim Ölüdeniz'de çekilmiş, resmin altında görünecek başlık Ölüdeniz ise data-title:Ölüdeniz yazmanız gerekir. Yani aşağıdaki gibi örnekleyebiliriz.

<a href="../resimler/resim-1.jpg" data-lightbox="Fethiye" data-title="Ölüdeniz"><img src="../resimler/thumb_resim-1.jpg" width="100" height="40" alt="Ölüdeniz"/></a>
<a href="../resimler/resim-2.jpg" data-lightbox="Fethiye" data-title="Kayaköy"><img src="../resimler/thumb_resim-2.jpg" width="100" height="40" alt="Kayaköy"/></a>
<a href="../resimler/resim-3.jpg" data-lightbox="Fethiye" data-title="Çalış Plajı"><img src="../resimler/thumb_resim-3.jpg" width="100" height="40" alt="Çalış Plajı"/></a>

İşlem tamam. Artık resimlerinize tıklandığında Lightbox içinde görünecektir.
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

5 Mart 2014 Çarşamba

Linklerinize CSS3 ile Gökkuşağı Renk Efekti

CSS3 Animasyon ile Gökkuşağı Renk Efekti

Link, Türkçe anlam olarak İlişim ya da Bağlantı demektir. İnternet sayfalarında hypertext kullanılarak kullanıcının başka bir web sayfasına ya da uygulamaya yönlenmesini sağlayan bir bağlantıdır. Bu bağlanan web sayfaları aynı websitesi üzerinde olabileceği gibi başka bir websitesinde yani başka bir adreste de olabilir. İnternette dolaşmayı bu linkleri kullanarak yapıyoruz. Genelde sitelerde Linkler renkleri mavi ve altı çizili olarak görünür. Aşağıda vereceğim CSS3 animasyon kodları sayesinde linklerinizin üzerine gelindiğinde gökkuşağı gibi çesitli renklere dönüşecek. Tüm tarayıcılarda uyumlu, olan bu eklenti sitenize renk katacak. CSS3 Animasyon ile Hover Bağlantı Gökkuşağı Renk Efekti sitenizde büyük yer kaplamaz ve sitenize girenler üzerinde hoş bir etki yaratır.

Gökkuşağı Renk Efekti

Blogger için Hover Bağlantı Rengi Ekleme

Blogger panelinize giriş yapın
Şablon → HTML'yi Düzenle
Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
Ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

@keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-o-keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-ms-keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-moz-keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-webkit-keyframes MEFhovergokkusagi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
a:hover{
animation:MEFhovergokkusagi 4s infinite; /* Standart */
-o-animation:MEFhovergokkusagi 4s infinite; /* Opera */
-ms-animation:MEFhovergokkusagi 4s infinite; /* IE */
-moz-animation:MEFhovergokkusagi 4s infinite; /* Firefox */
-webkit-animation:MEFhovergokkusagi 4s infinite; /* Safari ve Chrome */
}

Şablonu Kaydet diyip çıkıyoruz. Bu kadar.

Hover Metin Link Gökkuşağı Etkisi için CSS3 animasyonu kullanır:

CSS3 animasyonunu Tüm tarayıcılar desteklemektedir.
Hala eski tarayıcıları kullanıyorsanız Mozilla Firefox gibi güçlü bir tarayıcıyı hemen indirin.
CSS3 animasyon kodunu kullanarak daha verimli ve özlü yapılmış, bu yüzden blog yükleme çok etkilenmez hale gelir.
Bloggerda gökkuşağı etkisi yaratmak, çeşitli renkler oluşturmak için CSS3 kodu kullanma kolay bi yöntemdir.
Blogcular için Yeni efektler (ek bir etki) çeşitliliğini geliştirmek için CSS3 animasyon kodunu kullanabilirler.

Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

27 Şubat 2014 Perşembe

Websiteleri için Flash Animasyonlu Etiket Bulutu Oluşturma

web siteleri icin flash animasyonlu etiket bulutu

Bugün Blogger için Flash Animasyonlu Etiket Bulutu Oluşturma adlı yazımda çok sorulan websitemde nasıl bunu kullanabilirim sorusuna bu konuyla cevap verecem. TagCanvas etiket bulutu websiteleriniz için HTML 5 flash animasyonlu etiket bulutu yaratır. TagCanvas bir JavaScript sınıfı HTML5 Canvas Etiket Bulutudur. LGPL v3 lisansı altında açık kaynak olarak serbestdir. Dilerseniz anlatıma geçelim.

<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/excanvas.js"></script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/tagcanvas.js"></script>
<script type="text/javascript"> 
//<![CDATA[
var oopts = {
textFont: 'Impact,Arial Black,sans-serif',
textHeight: 20,
maxSpeed: 0.1,
decel: 0.9,
depth: 0.99,
outlineColour: '#f6f',
outlineThickness: 3,
pulsateTo: 0.2,
pulsateTime: 0.5,
wheelZoom: false
}, ttags = 'taglist', lock, shape = 'sphere';
window.onload = function() {
TagCanvas.textFont = 'Trebuchet MS, Helvetica, sans-serif';
TagCanvas.textColour = '#000';
TagCanvas.textHeight = 15;
TagCanvas.outlineColour = '#FA7029';
TagCanvas.maxSpeed = 0.03;
TagCanvas.minBrightness = 0.2;
TagCanvas.depth = 0.92;
TagCanvas.pulsateTo = 0.6;
TagCanvas.initial = [0.1,-0.1];
TagCanvas.decel = 0.98;
TagCanvas.reverse = true;
TagCanvas.hideTags = false;
TagCanvas.shadow = '#ccf';
TagCanvas.shadowBlur = 3;
TagCanvas.weight = false;
TagCanvas.imageScale = null;
TagCanvas.fadeIn = 1000;
try{TagCanvas.Start('tagcanvas','taglist');TagCanvas.Start('smallCanvas','moreTags',oopts);f('options')}catch(e){document.getElementById('cmsg').style.display='none';document.getElementsByTagName('canvas')[0].style.border='0'}};function BGImage(e){document.getElementById('tagcanvas').style.backgroundImage=(e.checked?'url(images/canvas_bg1.png)':'none')}function f(a){TagCanvas.Start('otherCanvas',a,oopts);return false}function restart(){TagCanvas.shape=shape;TagCanvas.lock=lock;TagCanvas.Start('tagcanvas',ttags)}function changetags(t){ttags=t;restart()}function changeshape(s){var locks={hcylinder:'x',vcylinder:'y',hring:'x',vring:'y',sphere:''};lock=locks[s]||'';shape=s;TagCanvas.initial=(lock=='x'&&[0,0.2])||(lock=='y'&&[0.2,0])||[0.2,0.2];restart()}function tpu(s){document.getElementById('sout').innerHTML=s.innerHTML;return false}
//]]>
</script>
<canvas id="tagcanvas" width="250" height="250"></canvas>
<div style="display: none">
<div id="taglist">
<ul>
<li><a href="Buraya etiket linkiniz" target="_blank">Etiket adı</a></li>
<li><a href="http://örnek.com/örnek.html" target="_blank">Örnek</a></li> 
</ul>
</div>
</div>

Yukarıdaki kodu kendi isteğinize göre özelleştirerek websitenizde kullanabilirsiniz.

Özelleştirme:

TagCanvas.textFont = Yazı fontunuzu ayarlayın.
TagCanvas.textColour = Yazı rengi
TagCanvas.textHeight = Yazı boyutu
TagCanvas.outlineColour = Yazı çerçevesi rengi
width="250" : Flash etiket bulutunuzun genişliği
height="250" : Flash etiket bulutunuzun yüksekliği

Eğer isim yerine resim, logo gibi görseller kullanmak istiyosanız, <ul>...</ul> kodları arasını aşağıdaki gibi uygulayın.
Örnek:

<li><a href="Buraya etiket linkiniz" target="_blank"><img src="Buraya resim linkiniz" border="0" title="Resmin/bağlantının ismi" alt="Resmin/bağlantının ismi" width="Resmin genişliği" height="Resmin yüksekliği"/></a></li>
<li><a href="http://MeftunMede.Blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB9NdQ6615yopspfEwi2vrl8nHXCVSqyBaIzwxaeM-DQSxPFD0htPqLGrIVvbgQcLAAKvYkUbzuBS16FCIPliTlFC3_0Esg32Bta_mYj532V8evVhImnbtCEQgnhV7xOEvoZEkKlK71149/s1600/Angel-MEF.png" border="0" title="Meftun LOGO" alt="Meftun LOGO" width="80" height="15"/></a></li>
<li><a href="http://Blogger.com" target="_blank"><img src="http://img2.blogblog.com/img/b36-rounded.png" border="0" title="Blogger LOGO" alt="Blogger LOGO" width="80" height="15"/></a></li>

Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. Kolay gelsin...

6 Ocak 2014 Pazartesi

Web sitesi oluşturmak için en iyi 10 web sitesi üreticileri

Web sitesi oluşturmak için en iyi 10 Web Sitesi Üreticileri
Top 10 Website Builders To Create Your Own Website

Günümüzde bir web sitesi oluşturmak çok kolay oldu. Bir web sitesi yapmak istiyorsunuz, fakat nereden başlayacağınızı bilmiyorsanız,web sitesi kurma sitelerinde aradığınızdan fazlasını bulacaksınız. Bu internet sitesi yapma siteleri ile hiçbir tasarım kodlama ve teknik bilgiye sahip olmanız gerekmez. İstediğiniz her kategoride web sitesi açmak çok basite indirgendi. Sıradan bilgisayar kullanıcılarına tasarlandığı için artık herkes site kurabilecek. Burada sizler için ücretsiz online web sayfası oluşturabileceğiniz en iyi siteleri seçtim.