Arama formunuza sesli arama özelliği ekleyin

Google Voice Search’ın aramak istediğiniz kelimeleri seslendirerek arama yapmaya olanağı sağlayan hizmetini kendi arama formunuzda kolayca kullanabilirsiniz şuan itibari ile sadece Google Chrome de çalışan bu özellik ülkemizde en fazla kullanılan tarayıcının Chrome olduğu düşünülürse bence kullanılması gereken bir özellik.

 

sesli-arama

 

HTML5’in yeniliklerini sonuna kadar kullanan Google Chrome kullanıcıları için bu özelliği kolayca arama formunuza ekleyebilirsiniz.

Bunun içinde yapmanız gereken oldukça basit bir işlem arama formunuza aşağıdaki HTML5 etiketini eklemeniz yeterli. 

 

x-webkit-speech='x-webkit-speech'

 

Blog’unuzun kodları içerisinde arama formunuza ait kodları bulduktan sonra yukarıdaki kodları arama yapılan bölümün kodlarına ekleyin yapmanız gereken bu kadar basit.

 

Örnek:

<form action='/search' method='get'>

<input class='searchtext' id='s' name='q' type='text' value='' x-webkit-speech='x-webkit-speech'/>

<input alt='Search' id='searchsubmit' src='' type='image' value='Ara'/>

</form>

Paylaş !

20 yorum:

  1. hocam elinize sağlık. bide hiç biyerde bulamadım, şu dost siteler eklentisini paylaşırsanız, hmm hani şu mini icon'lu şekilde olanından :)) ileriki günlerde ben dahil, bir çok blogcunun ilgisini çekecektir. biraz ısmarlama oldu ama kusura bakmayın. :)) iyi bloglar efenim.

    YanıtlaSil
    Yanıtlar
    1. Yorum geldi aslında istediğin eklenti çokta zor değil bir ara boş kalırsam kodlarını buradan da paylaşırım..

      Sil
    2. sırası ile Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek şablonundaki kodlarda bu ]]></b:skin> kodu bulup aşağıdaki CSS kodlarını hemen üstüne ekle ve kaydet.

      a.linkopacity img {
      filter:alpha(opacity=50);
      -moz-opacity: 0.5;
      opacity: 0.5;
      -khtml-opacity: 0.5;}

      a.linkopacity:hover img {
      filter:alpha(opacity=100);
      -moz-opacity: 1.0;
      opacity: 1.0;
      -khtml-opacity: 1.0; }



      daha sonra yerleşim bölümüne yani gadget eklyip kaldırdığın bölüme geçerek gadget ekle dedikten sonra açılan pencerede HTML/Javascript gadget ekleye tıkla seni karşılayan yeni pencereye aşağıdaki kodları yapıştır.

      <a href="SİTEMİZİN LİNKİ" class="linkopacity" title="SİTE ADI"><img src="32X32 RESİM ADRESİ" alt="SİTEMİZİN ADI" height="32" width="32"></a>


      <a href="http://www.bloggermodifiye.com/" class="linkopacity" title="Blogger Modifiye"><img src="http://3.bp.blogspot.com/-3htfyMLuDaw/T1fGUdl3hdI/AAAAAAAAAwo/qjAX_M-lJ0M/s1600/blogger-modifiye.png" alt="Blogger Modifiye" height="32" width="32"></a>

      kodlarda gerekli bölümleri değiştirerek istediğin kadar siteye yer verebilirsin örnek olsun diye bizim blog'da ekledim daha sonra yerine istediğin siteyi aynı şekilde eklersin.

      Sil
    3. hocam çok sağolun, elinize sağlık. harcadığınız zaman için çok minnettarım. iyi bloglar.

      Sil
    4. rica ederim işine yaramasına sevindim..

      Sil
  2. HOCAM merhaba selamlar sana bir soru sorcaktım şimdi benim blogumdaki tüm etiketler görünmüyor yani hani yazı yazma bölünü var ya admin paneli gibi işte onda tüm etiketlere tıklayınca hiç biri görünmüyor sorun ne olabilir acaba işte sorunun resmi
    http://img192.imageshack.us/img192/6451/screenshot1si.png

    YanıtlaSil
    Yanıtlar
    1. müjdat sayar aga, aynı şey bende de oluyor, sorun yok bence. http://img851.imageshack.us/img851/1126/screenshot1sil.png

      Sil
    2. Müjdat haklı aslında şuan bu şekilde görnüyor ama daha önce oradaki butona tıklanıldığı zaman tüm etiklerin olduğu bir pencere açılması gerekiyordu.

      bu görselde olduğu gibi.


      Blogspot Yeni tasarıma geçtikten sonra böyle ufak tefek hatalarla karşılaşmak mümkün ama bunlarda sanırım zamanla giderilecektir.

      Sil
  3. bi'de benim sorum olacaktı tayfun hocam ayrıca.
    şimdi benim anasayfamdaki postlarımda ''devamını oku'' görünsün tamam ama sayfalarım da ''devamını oku''nun görünmesini istemiyorum. bunu nasıl yapabilirim bir fikriniz var mı?

    örnek resim ve adres:

    http://img838.imageshack.us/img838/4096/yorumumgelditakipet.jpg

    http://yorumyorum.blogspot.com/p/takip-et_25.html

    bu ''takip et'' sayfamda, diğerlerinde de aynı.

    YanıtlaSil
    Yanıtlar
    1. sanrım yazılarını otomatik devamını oku bağlantısı kullanıyorsun, sabit sayfalarda devamını oku bağlantısı da bu yüzden görünüyordur.

      Bu kodları aşağıdaki kodların içine alırsan sabit sayfalarda görünemz.

      <b:if cond='data:blog.pageType != "static_page"'> devamını bağlantısını kodları </b:if>

      bu kodları benim görmem mümükün olmadığı için şablonunda bulup kendin yapmalısın.


      Ayrıca burada bu konu hakkında daha ayrıntılı bir yazı ve kodları bulabilirsin, yukarıdaki kodlar yorum formuna eklendiğinde bozulabiliyor, burada kodların orjinalini bulabilirsin.

      Sil
    2. öncelikle teşekkür çok teşekkür ederim zaman ayırdığınız için.
      hocam dediğinizi yapınca sayfaların içinde kayboluyor çok iyi, anasayfada normal görüküyor tamam. ama postların içinde çıkıyor bu kez de. linkwithin i de kırmızı yapıyor :D anlamadım.
      sizi de uğraştırdım kusura bakmayın.
      mesela her hangi bir post;
      http://yorumyorum.blogspot.com/2012/02/yayn-baslg.html

      Sil
    3. yaptım hocam tamam :) tekrardan teşekkürler. elinize sağlık.

      Sil
    4. sana cevap yazmayı unutmuştum neyse kendin halletmişsin :)

      Sil
  4. çok teşekkürlerde bir sorum olucak arama kutsunda metin var benimkinde kutuya tıklayınca metin siliniyo normalı bu da sesli arama yapıp konuştuktan sonra silmiyor kutudaki yazınn yanına yazıyor onu nasıl düzeltebiliriz :)

    YanıtlaSil
    Yanıtlar
    1. oradaki metni tamamen kaldırman gerekir, sesli arama direk tarayıcının özelliklerini kullandığı için senin arama formunda kelime girildiğinde metnin kaybolmasını sağlayan javascripti çalıştırmıyor.

      yani ya eski haliyle kalacak, yada oradaki metni tamamen kaldıracaksın.

      Sil
  5. selamlar

    blogmuhtar.tk adresinde bir blog rehberi gibi bir şey başlattık ve size de yer verdik..
    kişisel bloglar/blog teknik destek segmentinte bir göz atabilir ve gerekli gördüğünüz değişiklik veya olmasını istediğiniz şekli ile html olarak gönderebilirseniz yayınlamaktan mutlu olacağız..

    saygılar

    YanıtlaSil
  6. kardeş yardımcı olsa olmuyo

    YanıtlaSil
  7. yaptım ama önizlemesinde doğru şekilde biçimlendireilemedi felan yazdı onu hallettim daha sonrada sesli mesaj kısmı ile arama butonu tam uymadı birbirine çarpraz durdu bir böylede kötü durdu

    YanıtlaSil
  8. yapılası gereken basit bir işle, yapamıyorsanız demek ki olmuyor .

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz