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

2 Aralık 2014 Salı

Mobil ve Tablet cihazlarla Uyumlu Resim Slider ve Galerileri

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.

1. Animated Responsive Image Grid

Free Animated Responsive Image Grid
ÖNİZLEMEİNDİR

2. Sequence

Draggable-Dual-View-Slideshow
ÖNİZLEMEİNDİR

3. WmuSlider - Free jQuery Responsive slider

wmuSlider - Free jQuery Responsive slider
ÖNİZLEMEİNDİR

4. iView Jquery Resim, Video ve içerik Slideri

iView jquery resim, video ve içerik slideri
ÖNİZLEMEİNDİR

5. Photo Swipe Free jQuery Image Slider

photoswipe Free jQuery Image Slider
ÖNİZLEMEİNDİR

6. BxSlider

BxSlider
ÖNİZLEMEİNDİR

7. Swiper

Swiper Slider
ÖNİZLEMEİNDİR

8. RTP. Slider

RTP.Slider
ÖNİZLEMEİNDİR

9. Camera Slideshow

Camera Slideshow
ÖNİZLEMEİNDİR

10. Responsly

Responsly Slideshow
ÖNİZLEMEİNDİR

11. Galleria

Galleria image gallery
ÖNİZLEMEİNDİR

12. Flexslider

Flexslider
ÖNİZLEMEİNDİR

13. OWL Carousel

OWL Carousel
ÖNİZLEMEİNDİR

14. Divas Slider

Divas Slider
ÖNİZLEMEİNDİR

15. Draggable Dual-View Slideshow

Draggable-Dual-View-Slideshow
ÖNİZLEMEİNDİR

16. Morphing Devices Slideshow

Morphing Devices Slideshow
ÖNİZLEMEİNDİR

17. JQuery Immersive Slider

Immersive jQuery Image Slider
ÖNİZLEMEİNDİR

18. Fotorama

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.

25 Temmuz 2014 Cuma

jQuery Son Konular Haber Akışı Eklentisi

jQuery Son Konular Haber Akışı Eklentisi
Bu yazımda soldan sağa doğru sıra ile blogunuzda yazdıgınız son yazıların yazılarak geldiği farklı haber bandı uygulaması yapacağız. Diğer adıyla Haber manşet akışı, News Ticker ismiyle çağrılıyor. jQuery ile çalışan bu şık eklenti ziyaretçilerinizin dikkatini çekecek ve son konularınız daha fazla okunacak. Aşağıdaki kod Oluşturucuyla blogunuza ekstra bir görünüm vermek, konularınıza ziyaretçi çekmek için Sadece birkaç tıklama ile bu Son Konular Haber Akışı Eklentisini eklemenizi sağlar. Ana menünüzün hemen altına bu widget'i ekleyebilirsiniz.

Özellikler:

  • 1. jQuery/JavaScript Eklenti.
  • 2. News Ticker daktilo Stil Son Konular kaydırma özellikli.
  • 3. Tam özelleştirilebilir özellikleri ile harika ve şık bir görünüm.

jQuery Son Konular Haber Akışı Eklentisini ekleme

  • 1. Blog Url'nizi girin.
  • 2. Kaydırma için son yazılan sayısını seçin.
  • 3. Kaydırma hızını ayarlayın.
  • 4. Önceki, Sonraki ve Play Basma düğmelerinin gösterilip gösterilmeyeceğini seçin.
  • 5. Eklenti başlığını seçin.
  • 6. istediğiniz rengi seçin.
  • 7. Blogunuzda jQuery Eklentisi var ise Evet, Yoksa Hayır'ı seçin. (Örnek: http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js gibi.)
  • 8. Oluştur ve ardından Önizleme'yi tıklayın.
  • 9. Son olarak Blogger ekle'yi tıklayın.
  • 10. Veya Oluşturulan Kodu kopyalayın ve blogunuzda / web sitenizde istediginiz herhangi bir yere yapıştırın.

● Eklenti Oluşturucu yardımıyla kolayca blogunuza veya web sitesi için bu şık Son Konular Haber Akışı kodunu alabilirsiniz.
● Eklenti oluşturucuyu kullanmadan önce Blogger hesabınıza giriş yapın!

Şimdi Blogunuzu kontrol edin. işlem bukadar.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

13 Temmuz 2014 Pazar

Spacegallery Resim Slayt galerisi

Spacegallery Resim Slayt galerisi
Spacegallery güzel bir 3D efekti ile görüntüler sunan aynı zamanda kullanımı ve özelleştirmek için oldukça kolaydır. Resimler arkadan öne jQuery kullanılarak aktarılıyor. jQuery eklentilere günlük kullandığımız sitelerin birçoğunda rastlamak mümkün. Bunu da hem görsellik yönünden zengin olması hem kullanım kolaylığı hem de kullanılan projelere entegrasyonda kolaylık sağlamasına bağlayabiliriz. Buda jQuery kullanan hoşunuza gideceğini düsündüğüm güzel bir Resim slayt galerisi. İster sidebarınızda, ister resim galerisi olarak, isterseniz yazılarınızda kullanabilirsiniz.

Spacegallery Resim Slayt galerisi Nasıl Eklenir?


1.Adım Blogger kontrol panelinize giriş yapın > Şablon > HTML'yi Düzenle
2.Adım Ctrl+F yardımı ile </head> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://meftun-mede.googlecode.com/svn/trunk/spacegallery.min.js' type='text/javascript'/>
Not: Önceden jQuery şablonunuzda eklenmiş varsa, o kırmızı çizgiyi jquery.min.js kodunu silin.

3.Adım Şimdi tekrar 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.

#myGallery{width:100%;height:670px;}
#myGallery img{border:2px solid #52697E;}
a.loading{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA5nKduepsiPx6CRRZM6ZKvbty_ubIrQhLm-savh-RJJ0QOpxFpKHC1XtvbIOcfDzQddWeLzqmv3r9BxZUGPq3Tyjku0lVHqnWvC_x5gQ8kQnch2tlUFEBl40-Rk1-TZSEtvip8DgHOYtf/s1600/blue.gif) no-repeat center;}
.spacegallery{position:relative;overflow:hidden;width:100;height:100px;}
.spacegallery img{position:absolute;left:50%;}
.spacegallery a{position:absolute;z-index:1000;display:block;top:0;left:0;width:100%;height:100%;}
4.Adım Değişiklikleri kaydetmek için, şablonu Kaydet düğmesine tıklayın.

5.Adım Son olarak 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 kopyalayıp yapıştırın.

<div class="spacegallery" id="myGallery">
<img src="Resim URL'si"/>
<img src="Resim URL'si"/>
<img src="Resim URL'si"/>
<img src="Resim URL'si"/>
<img src="Resim URL'si"/>
</div>

Resim URL'si: Kullanmak istediginiz resimlerinizin linklerini girin.
670px : Space Galerinizin yükseklik boyutunu blogunuza göre değistirebilirsiniz.
Bu kadar. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

4 Temmuz 2014 Cuma

iView jquery resim, video ve içerik slideri

iView slideriView dünyanın en iyi jquery resim, video ve içerik sliderlerinden biridir. Görünüm animasyonlu başlıklar, duyarlı düzeni ve (Video iFrame) slider gibi HTML Elemanları ile jQuery Resim slideri kullanımı kolaydır. Kolayca slaytlar ve başlıklar sınırsız sayıda ekleyebilirsiniz. Resim slideri, resim galerisi, afiş rotator, banner reklamları, hatta sunum olarak kullanabilirsiniz.
Bu jQuery eklentisi tamamen HTML5 veri özelliklerini kullanılarak özelleştirilebilir georgous şık slider, içine basit HTML işaretleme bloğunu dönüştürmek için javascript kullanır. Biçimlendirme tüm içerik her zaman arama motorları için kullanılabilir olmak üzere, geçerli HTML5 ve SEO optimize edilmiştir. Bu eklentiyi kullanırken, sayfa düzeni javascript devre dışı olsa bile tutarlı olacaktır.
Bu slider tamamen yapılandırılabilir ve ve iOS / Android gibi mobil platformlar, (IE9, Firefox, Chrome, Opera, Safari IE6 dahil) tüm büyük tarayıcıları ile uyumlu 35 geçiş efektleri içerir. Birden çok özelleştirilmiş slider örneği aynı sayfada kullanılabilir, ve slider özel komut içinde davranışını kontrol etmek için basit bir API sunar.
Büyük ölçüde sayfa yükleme sürelerini azaltmak için, Resimler slider başlamış olmasından hemen önce yüklü olacak şekilde ayarlanmıştır.

Özellikler

  • jQuery Yetenekleri.
  • Cevap veren mobil uyumu(slider alan ve resimler için geçerlidir).
  • IOS, Android ve diğer dokunmatik cihazlar için Dokunmatik navigasyon.
  • Son derece esnek ve özelleştirilebilir.
  • Hoş kullanıcı Arayüz Tasarımı.
  • Özel Slayt hafifletilmesi.
  • Çoklu dil desteği.
  • Mevcut 35 geçiş efekti.
  • Mevcut çoklu geçişler, ayrıca slayt başına farklı bir geçiş ayarlayabilirsiniz.
  • Birden çok örneği tek bir HTML sayfasında kullanılabilir.
  • Özel Slayt Zaman aşımı kontrolü.
  • Özel efektleri ile animasyonlu HTML başlıkları (fade, move top, move right...).
  • Slaytlar yalnızca geçerli HTML5 işaretleme kullanır. (Optimize edilmiş SEO uyumlu).
  • IOS ve Android cihazlar üzerinde çalışıyor.
  • Hover efekti ile isteğe bağlı duraklama ile otomatik slayt gösterisi.
  • Kolayca yeniden boyutlandırılabilir.
  • Hareketli önyükleyici bar.
  • Klavye desteği.
  • Son derece basit yapılandırma.
  • Navigasyon için Küçük resimler veya madde işaretleri.
  • Özelleştirilebilir geçiş zamanlama fonksiyonu. (hafifletilmesi)
  • Harici yazı fontları ile uyumlu (Google yazı fontları gibi).
  • Tamamen konfigüre edilebilir 3 güzel animasyon ve çapraz tarayıcı sayaçlarını Entegre.
  • CSS dosyası ile kolayca özelleştirilebilir.
  • Block & dilim boyutları ayarlanabilir.
  • Resim yazıları için istediğiniz herhangi bir etiketi kullanabilirsiniz. (Optimize edilmiş SEO uyumlu).
  • HTML belgeleri genişletilmiş.
  • Herhangi bir HTML içeriği slayt ve başlık içine yerleştirilebilir. (HTML5 video etiketi hariç)
  • SEO optimize edilmiş, başlıklar için istediğiniz herhangi bir etiketi kullanabilirsiniz (“h1”, “h2”, “p”...).
  • Güçlü, belgelenmiş API - Herkese Açık yöntemleri, özellikleri, geri çağrıları (slayt'a git, play slideshow vs.).
  • Sınırsız slaytları destekler.
  • Tüm büyük tarayıcılarla uyumludur (IE6 ile IE9 dahil, Chrome, Firefox, Safari ve Opera)
  • Ücretsiz destek ve yükseltmeleri.

ÖNİZLEMEİNDİR

4 Mayıs 2014 Pazar

Websiteleri için Lightbox Eklentisi

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.

1. Seçenek

1. ADIM - JAVASCRIPT VE CSS'Yİ YÜKLEME
  1. Lightbox'un en son sürümünü indirin ve açın.
  2. İNDİR

  3. İndirdikten sonra dosyaları çıkartın. css,img ve js klasörlerini sitenizde scripti kurmak istediğiniz yere atın.
  4. 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.
  5. 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.
  6. 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

    1. Kulumu tamamladıktan sonra nasıl kullanacağımıza geçelim.
    2. 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...

    12 Mart 2014 Çarşamba

    jQuery Facebook Fotoğraf Galerisi Eklentisi

    Facebook jQuery Fotoğraf Galerisi eklentisi

    Facebook kalite hedefli trafik için bir numaralı kaynak olduğunu ortaya koymuş bir sosyal platform. Bugün bu yazıda size Nasıl Blogger'da bir jQuery Facebook Fotoğraf Galerisi Oluşturulur onu göstereceğim. Bu eklenti Facebook sayfanızda paylaştığınız tüm albüm ve fotoğraflarınızı web sitenizde, blogunuzda görüntülemeyi sağlar. Tüm sistem jQuery ile çalışır. Ayrıca Lightbox işlevselliği sayesinde sitenizin içinde fotoğrafları görüntüleyebilirsiniz. Farklı albümlerizi tarayabilir ve başladığınız yere geri yere gidebilirsiniz. Facebookta çok vakit geçiren ve çok fotoğraf paylaşan kullanıcılar için güzel bir eklenti.



    Blogger'da jQuery Facebook Fotoğraf Galerisi Nasıl oluşturulur?


    Facebook fotoğraf galerisini yükleme:

  • Google hesabınıza giriş yapın.
  • Blogger > Şablon
  • Şablonunuzun yedeğini alın!
  • HTML'yi Düzenle > tıklayıp devam edin
  • </head> kodunu bulun ve hemen üstüne aşağıdaki komut dosyalarını kopyalayıp yapıştırın:

  • <link media="all" href="http://meftun-mede.googlecode.com/svn/trunk/Meftun-fancybox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/Meftun_fancybox.min.js"></script>


  • Şablonu Kaydet diyip bir sonraki adıma geçiyoruz.

  • Şimdi Facebook Sayfa profil kimliğini bulmak gerekiyor (şunu hatırlatayım; Herkeze açık profil sayfalarda çalışır).
    Facebook Sayfa kimliği ID'sini bulmak için http://findmyfacebookid.com'a gidin.
    Ve Sayfa URL'sini girin yani http://www.facebook.com/MeftunApart gibi.
    Sayfanızın sayısal kimlik ID'sini almak için “Lookup Numeric ID” butonuna basın.
    Facebook sayısal kimlik ID
    Şimdi Blogger kontrol panelinde Yerleşim sonra eklentiyi görmek istedigimiz yere Gadget ekle sonra HTML/JavaScript'i buluyoruz. Sonra aşağıdaki kodları Sayfa kimliği ID'nizi girdikten sonra kopyalayıp yapıştırın.

    <div id="FB_Album_Frame"></div>
    <script type="text/javascript" src="https://meftun-mede.googlecode.com/svn/trunk/MeftunMede_fancybox.js"></script>
    <script>
    $(document).ready(function ($) {
    $('#FB_Album_Frame').FB_Album({
    facebookID: 'Sayfa_kimliği_ID',
    responsiveGallery: false
    });
    });
    </script>

    Tebrikler :
    Herşey bittikten sonra, yayınlayabilirsiniz. Başarıyla Blogger'da bir Facebook jQuery Fotoğraf Galerisi oluşturduk. Şimdi düzgün bi şekilde çalışıp çalışmadığını kontrol edin.
    Umarım hoşunuza gitmiştir. Kodu kopyalayıp bloğunuza yada websitenizin istediğiniz bölümüne yapıştırın.
    Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    8 Eylül 2013 Pazar

    JavaScript Resimli Manşet Slayt eklentisi

    JavaScript Resimli Manşet Slayt eklentisi
    ● JavaScript Image Slider For Blogger
    ● JavaScript Resimli Manşet Slayt eklentisi


    Bugün sizlerle daha önce paylastığım Jquery Otomatik resim slayt galerisi ve Jquery slider manşet eklentisi yazılarımdan farklı olarak JavaScript versiyon resimli manşet slayt eklentisini paylaşacağım.
    Ziyaretçilerinizi resimlerinizle dikkatini çekmek için kullanabileceğiniz Resimli Manşet Slayt eklentisi JavaScript versiyonu. Haber siteleri tarafından da kullanılan bu slayt manşet eklentisini sizde bloglarınız da kullanabilirsiniz. Resimleri ve linkleri değiştirip sürekli güncelleyebilir ve istediğiniz konuların tanıtımını yapabilirsiniz. Resimler sırayla altında kısa notlarla slayt olarak akar ve Jquery kullanılmadığı için blogu yavaşlatmaz.

    Örnek Slayt

    FethiyeFethiye LimanıFethiye ÖlüdenizFethiye SaklıkentÇalış Plajı Fethiye

    Bu slaytı blogunuza eklemek için;
    1. Blogger Kumanda Panelinize gidin
    2. Yerleşim tıklayın
    3. Üst Bilginin altındaki yere Gadget/Widget Ekle
    4. HTML / JavaScript seçeneğini seçin.
    5. Aşağıdaki kodu kopyalayın ve yapıştırın.

    <style type="text/css">
    #mcis{display:none;}
    #sliderFrame{position:relative;width:532px;border:5px solid #000;margin:0 auto;}
    #ribbon{width:111px;height:111px;position:absolute;}
    #slider{width:532px;height:300px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQtmxKJQJiGLd5Tg2k67arFYprHxiDN7S3b8C8FQH2MzL5tNR5ze1mrqWm_odjnyuFj-IXBU-rdOu2jcrGO_ohCtITfYVQ5Dhuxg2icgs83BQ5DdUX2QmEHK6gNJgAHx9ktW86dZnz9bM/s1600/loading.gif) no-repeat 50% 50%;position:relative;box-shadow:0 1px 5px #999;transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);margin:0 auto;}
    #slider img{position:absolute;border:none;display:none;}
    #slider a.imgLink{z-index:2;display:none;position:absolute;top:0;left:0;border:0;width:100%;height:100%;margin:0;padding:0;}
    div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;left:0;bottom:0;z-index:3;overflow:hidden;font-size:0;padding:0;}
    div.mc-caption-bg{background-color:#000;}
    div.mc-caption{font:bold 14px/20px Arial;color:#EEE;z-index:4;text-align:center;padding:10px 0;}
    div.mc-caption a{color:#FB0;}
    div.mc-caption a:hover{color:#DA0;}
    div.navBulletsWrapper{top:310px;left:200px;width:150px;background:none;padding-left:20px;position:relative;z-index:5;cursor:pointer;}
    div.navBulletsWrapper div{width:11px;height:11px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDGLrztBJ5ugFY8BMmLQSG6JCTY-_wsQLB6TCjyNp1CVInqUhA-h6w5HHHpuQsfixugfCIqCE1Hh5YY5v-zQysNthLBLgc9jYEzNTFvyuuP05ap8bIQ2cprRQI0JlD4f1TIyloqixwGE/s22/bullet.png) no-repeat 0 0;float:left;overflow:hidden;vertical-align:middle;cursor:pointer;margin-right:11px;position:relative;}
    div.navBulletsWrapper div.active{background-position:0 -11px;}
    </style>
    <script src="http://social-media-dosyalari.googlecode.com/files/Meftunapartblog-slayt.js" type="text/javascript"></script>
    <div id="sliderFrame">
    <div id="ribbon"></div>
    <div id="slider">
    <a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
    <a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
    <a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
    <a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
    <a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>

    </div></div>

    Kod içinde kırmızı ile belirtdiğim yerleri Resimlerinizin genişliğine-yüksekliğine göre ayarlayabilirsiniz.
    <a href="Resme tıklayınca açılacak sayfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>
    Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    11 Haziran 2013 Salı

    Blogger Resimli Son Yazılar Eklentisi (Animasyonlu)

    Blogger animasyonlu, Resimli Son Yazılar Eklentisi

    Blogunuza ekleyebileceğiniz bu eklenti animasyonlu, Resimli, son yazdığınız yazılarınızın kayarak aşşağı doğru akarak, listeleyen, bir jquery eklentisi. Bu klasik son yazılar eklentisilerinden farklı, dönerek zoom resim animasyonuyla sitenize renk katacak çok şık bir eklenti. Örnek için blogumun alttaki footer bölümüne bakabilirsiniz.
    ● Blogger animasyonlu, Resimli Son Yazılar Eklentisi.
    ● Aşağıya doğru kayan Jquery stil.
    ● Animated Scrolling Recent Post Widget.

    Aşşağıdaki eklenti oluşturucuyla eklentinizi oluşturabilir,blogunuza ekleyebilirsiniz.

    1. Kumanda paneline giriş yapın.
    2. Yerleşim › Gadget ekle › HTML/Javascript bulun.
    3. Aşağıda Oluşturduğunuz kodu kopyalayıp yapıştırın.


    Yada aşağıdaki kodu manuel olarak blogunuza ekleyebilirsiniz.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
    <style type="text/css" media="screen">
    #MEF-widget{overflow:hidden;margin-top:5px;height:385px;padding:0;}
    #MEF-widget ul{width:295px;overflow:hidden;list-style-type:none;margin:0;padding:0;}
    #MEF-widget li{width:282px;list-style-type:none;float:none;height:80px;overflow:hidden;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamPG3F6IhSVvb5_-ux7lr85wHxT1P1hSxbGCV55pn5YPlcI1QMVdN2y95OHUTq5Kj6cnsxI_ePJeV_DaR1EN5TTOXrvfscKdS0d4dKlfzVwCVlxJc_RDjB20rUmlxKS55CgIkPddE4-s0/s1600/Son_Konularmef.jpg) repeat-x;border:1px solid #ddd;margin:0 0 5px;padding:5px;}
    #MEF-widget li a{text-decoration:none;color:#4B545B;font-size:13px;height:18px;overflow:hidden;margin:0;padding:0 0 2px;}
    #MEF-widget img{float:left;margin-top:10px;margin-right:15px;background:#EFEFEF;border:0;}
    #MEF-widget img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;background:-webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.7);-moz-box-shadow:0 0 3px rgba(0,0,0,.7);box-shadow:0 0 3px rgba(0,0,0,.7);padding:4px;}
    #MEF-widget img:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
    .spydate{overflow:hidden;font-size:10px;color:#0284C2;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;margin:1px 0 0;padding:2px 0;}
    .spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;margin:0;padding:0;}
    </style>
    <script type='text/javascript'>
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 50;
    thumbheight = 50;
    fntsize = 13;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "Yorum";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://MeftunMede.Blogspot.com/";
    limitspy=4;
    intervalspy=4000;
    </script>
    <div id="MEF-widget">
    <script src='http://meftun-mede.googlecode.com/svn/trunk/Resimli_kayan_son_konular_eklentisi.js' type='text/javascript'></script>
    </div>

    Kod içinde;
    boxwidth : Eklentinin genişliğini ayarlayabilirsiniz.
    numposts : Konu sayısını ayarlayabilirsiniz.
    limitspy : Eklentide görünen kolon sayısı.
    intervalspy : kaydırma hızı.
    home_page: blogunuzun adresini yazın.(Sonundaki "/" slash sembolu kalacak.)

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

    15 Nisan 2013 Pazartesi

    Jquery Otomatik resim slayt galerisi yapımı

    Jquery Otomatik resim slayt galerisi
    Sliderlar sitemizi güzelleştirmek ve önemli konuları ön plan da tutmak için kullandığımız görsel öğelerdir. Bloglarınızın daha şık, görsel olarak daha orjinal ve güzel görünmesini sağlayacak bir slider eklentisini paylaşacağım bugün sizlerle. Sağdan sola dogru kayan, numaralandırmalı, kırmızı kurdelesiyle çok şık bir slider. Uygulaması kolay ve herkesin blogunda, sitesinde kullanabileceği güzel bir eklenti.

    ● Jquery Otomatik Galeri Slider
    ● jQuery Auto Slider
    ● Automatic Image Slider with CSS & jQuery
    ● Html Kodlarıyla Otomatik resim galerisi yapımı
    ● jQuery Auto Image Slideshow

    Blogger'a Ekleme

    1. Blogger Kumanda Panelinize gidin
    2. Yerleşim tıklayın
    3. Gadget/Widget Ekle
    4. HTML / JavaScript seçeneğini seçin.
    5. Aşağıdaki kodu kopyalayın ve yapıştırın.

    <style type="text/css">
    .container1{width:660px;margin:0;padding:0;}
    .folio_block{position:absolute;left:50%;top:50%;margin:-140px 0 0 -395px;}
    .main_view{float:left;position:relative;}
    .window{height:240px;width:660px;-moz-box-shadow:0 0 5px #303030;-webkit-box-shadow:0 0 5px #303030;box-shadow:0 0 5px #303030;border:1px solid #000;margin:0;overflow:hidden;position:relative;}
    .image_reel{position:absolute;top:0;left:0;}
    .image_reel img{float:left;}
    .paging_btrix{position:absolute;bottom:10px;right:-7px;width:178px;height:47px;z-index:100;text-align:center;line-height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMcqDqUuyjBYhzRbuDj8XB0OpOrQ_w3zPX7wvSFs86fDqf1NyPpEVYBFIHp-bYdGOmYU7GeA7bu6MT5VxqiMvhYLAWh1dVkVWeDkqF0na3ppWr-cPmhpsYsmHhyjaknuvnxZSB6MkNsIY/s320/paging.png) no-repeat;display:none;}
    .paging_btrix a{text-decoration:none;color:#fff;padding:5px;}
    .paging_btrix a.active{font-weight:700;background:#920000;border:1px solid #610000;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
    .paging_btrix a:hover{font-weight:700;}
    </style>
    <div class="container1">
    <div class="main_view">
    <div class="window">
    <div class="image_reel">
    <a href="http://i.imgur.com/lZN7Lql.jpg"><img src="http://i.imgur.com/lZN7Lql.jpg" alt="Meftun Apart Fethiye" /></a>
    <a href="http://i.imgur.com/rPXebHN.jpg"><img src="http://i.imgur.com/rPXebHN.jpg" alt="Resmin Tanımı" /></a>
    <a href="http://i.imgur.com/H13Lrjy.jpg"><img src="http://i.imgur.com/H13Lrjy.jpg" alt="Resmin Tanımı" /></a>
    <a href="http://i.imgur.com/MpBPxIB.jpg"><img src="http://i.imgur.com/MpBPxIB.jpg" alt="Resmin Tanımı" /></a>
    <a href="http://i.imgur.com/Y1BVB1I.jpg"><img src="http://i.imgur.com/Y1BVB1I.jpg" alt="Resmin Tanımı" /></a>
    <a href="http://i.imgur.com/YdVO1UW.jpg"><img src="http://i.imgur.com/YdVO1UW.jpg" alt="Resmin Tanımı" /></a>
    <!--Burdan itibaren yukarıdaki şekilde resimlerinizi çoğaltabilirsiniz-->
    </div>
    </div>
    <div class="paging_btrix">
    <a href="#" rel="1">1</a>
    <a href="#" rel="2">2</a>
    <a href="#" rel="3">3</a>
    <a href="#" rel="4">4</a>
    <a href="#" rel="5">5</a>
    <a href="#" rel="6">6</a>
    <!--Burdan itibaren kaç tane resim eklediyseniz numaralandırmasını ekleyin-->
    </div>
    </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){$(".paging_btrix").show();$(".paging_btrix a:first").addClass("active");var imageWidth=$(".window").width();var imageSum=$(".image_reel img").size();var imageReelWidth=imageWidth*imageSum;$(".image_reel").css({'width':imageReelWidth});rotate=function(){var triggerID=$active.attr("rel")-1;var image_reelPosition=triggerID*imageWidth;$(".paging_btrix a").removeClass('active');$active.addClass('active');$(".image_reel").animate({left:-image_reelPosition},500)};rotateSwitch=function(){play=setInterval(function(){$active=$('.paging_btrix a.active').next();if($active.length===0){$active=$('.paging_btrix a:first')}rotate()},
    5000)};rotateSwitch();$(".image_reel a").hover(function(){clearInterval(play)},function(){rotateSwitch()});$(".paging_btrix a").click(function(){$active=$(this);clearInterval(play);rotate();rotateSwitch();return false})});
    </script>

    Kodu denemek için Online html editor'ü kullanabilirsiniz.
    Yukarıdaki kırmızı ile belirttiğim alanları kendinize göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    Live Demo

    14 Nisan 2013 Pazar

    Jquery slider manşet eklentisi

    Jquery_slider_manset_eklentisi
    ● Blogger için konu etiketli slider slayt kodu.
    ● Jquery Otomatik Reklam Slider.
    ● Blogunuza Jquery slider(manşet) eklentisi ekleyin.



    1.Blogger Kumanda Panelinize gidin
    2.Yerleşim tıklayın
    3.Gadget/Widget Ekle
    4.HTML / JavaScript seçeneğini seçin.
    5.Aşağıdaki kodu kopyalayın ve yapıştırın.

    <style type="text/css">
    #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    #slides ul,#slides li{list-style:none;position:relative;margin:0;padding:0;}
    #slides ul{height:250px;}
    #slides li{width:49.9%;height:100%;position:absolute;display:none;}
    #slides li:nth-child(1){left:0;top:0;}
    #slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%;}
    #slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%;}
    #slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%;}
    #slides a{display:block;width:100%;height:100%;overflow:hidden;}
    #slides img{display:block;width:100%;height:100%;border:0;background-color:#fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;padding:4px;}
    #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuzhLwKWo8o4WA-G3VuPfUixji-zyzNvpQvnzTRe6701V4rnJ_4tz_COK40javnW54xncXItGLdM3ZOD2DkZdKHUIbRVD5g3K8y5wzTDzdE5OknPV5DuYnbDPtXrPQLGfKhyphenhyphenTK5bD8DBK4/s1600/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #282c2f;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
    #slides h4{position:absolute;bottom:30px;font-size:18px;font-family:Arial;left:0;color:#FFF;z-index:3;line-height:20px;font-weight:400;margin:0;padding:0 10px;}
    #slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px;}
    #slides .label_text{font-size:9px;color:#FFF;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute;}
    #slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
    #slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1;}
    #buttons{text-align:center;background:#282c2f;width:10%;margin:5px auto;}
    #buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative;}
    #buttons a::before{content:"";width:0;height:0;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%;border-color:transparent #fff transparent transparent;border-style:solid;border-width:8px 7px;}
    #buttons a#nextx::before{margin-left:-3px;border-color:transparent transparent transparent #fff;}
    .footer-widget-box-last,#mef-organic-tabs .nav li.last{margin-right:0;}
    #header,#main,#footer,.clearfix,#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4){display:block;}
    #crosscol-wrapper,#PopularPosts1 h2,#BlogArchive1 h2,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none;}
    @media only screen and max-width600px {
    #slides ul{height:600px;}
    #slides li:nth-child(1){width:100%;height:49.8%;}
    #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%;}
    #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%;}
    #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%;}
    }
    </style>
    <div id="featuredpost"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyn6E-1uiXQ8E_IjxefI4ASnEEsjpIDlWiSLAiLwHzdbybWdU7EUKAFaF-_PoH_7lZ7N1NZtEtSRpcEcDonJcuWnDGKXZEyco5_aLZ_7govFFCAUpGbTGMMlEfrGJYJSlnY8vzknF_x_b7/s1600/grey.gif",MonthNames:["Ocak","&#350;ubat","Mart","Nisan","May&#305;s","Haziran","Temmuz","A&#287;ustos","Eyl&#252;l","Ekim","Kas&#305;m","Aral&#305;k"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'" alt="'+k+'" width="'+h.ImageSize+'px" height="'+h.ImageSize+'px"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click()}
    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function () {
    FeaturedPost({
    blogURL:"http://MeftunMede.Blogspot.com",
    MaxPost:8,
    idcontaint:"#featuredpost",
    ImageSize:300,
    interval:5000,
    autoplay:true,
    tagName:false});});
    //]]>
    </script>

    Kodu denemek için Online html editor'ü kullanabilirsiniz.
    Yukarıdaki kırmızı ile belirttiğim alanı kendi adınıza göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    17 Mart 2013 Pazar

    HTML Kodlarıyla Jquery Resim Galerisi

    HTML Kodlarıyla Jquery Resim Galerisi

    HTML kodlarıyla Resim Galerisi.
    Siteme Resim Galerisi Nasıl Eklerim?
    HTML Kodu Jquery Resim Galerisi Yapımı.
    Blogger, WordPress Resim Galerisi Ekle.
    İleri geri butonlu resim galerisi yapımı.

    Jquery bir javascript kütüphanesidir. Hız, performans, kullanım kolaylığı ve kodları inanılmaz şekilde kısaltması sebebiyle birçok sitede, eklentilerde kullanılır. Resim galerileri pek çok sitenin vazgeçilmez öğelerinden biridir. Resimlerinizi ne kadar etkili ve başaralı sunarsanız bu size o kadar artı olarak dönecektir. Bu yazıda HTML kodlarıyla Jquery resim galerisi oluşturacaz. İstediğiniz kadar resmi ekleyebilir, ileri ve geri butonlarıyla yönlendirebilirsiniz. Blogger, WordPress veya websitenizde kullanabileceğiniz uygulaması basit ve güzel bir resim galerisi.

    <style type='text/css'>
    #broder{width:580px;height:440px;background:#333;border:3px solid #666;position:relative;margin:30px auto 20px;}
    #slide{width:480px;height:360px;overflow:hidden;position:absolute;left:49px;top:29px;background:#fff;border:0px solid #698639;border-color:#698639 #e0ebcb #e0ebcb #698639;}
    #slide a{width:480px;height:360px;text-decoration:none;display:block;position:absolute;left:480px;}
    #slide a img{display:block;border:0;}
    #title{width:131px;height:132px;position:absolute;left:5px;top:-30px;}
    #previous{width:74px;height:74px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bMvmWEddobw0UB_eAptbCBKWTC1cuKNZXMGjD4a8lKp6SQLP76MUR0_cxg9rpnz_SOvRlkis4LQy9_-LchukGrHcPadGYgGvkAoCdnEMmrfyaRDwjVNBI_P4jLr-mCBXdjktzyMIkI0F/s1600/slide-left.png);position:absolute;left:5px;top:175px;cursor:pointer;}
    #next{width:74px;height:74px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wuuM4v-VMtNOaXDvvwzukhaW-EHnCeYo9qZjt9169SAZ_K0pJ2wUvPnYCz8JPLonxZ0g0ZkSpVFWnDkUJue6hbLH9ZGFEakzPNU-q0uG51EzMupSm2dV3zRvIkNH_M13Uu3XuK1f884u/s1600/slide-right.png);position:absolute;left:510px;top:175px;cursor:pointer;}
    #buttons{position:absolute;left:50px;top:405px;}
    #buttons div{width:20px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNrN_oUhkNQ0DWsZaYmyDP_uZl8RacwCKvqTDQ0dfbqGA5Xoq_Dme4hzVsIya09LEoffggiazgq5qKLq4qdrFhJOIU7_1OX6nVhI1UrIaRsZj1xwva83i3mhpz8SlBT1eBNUHFjI9veHru/s1600/slide-button.gif);float:left;margin-right:5px;display:inline;}
    #buttons div b{display:block;width:20px;height:20px;line-height:19px;font-family:arial, sans-serif;font-size:11px;color:#16a;text-align:center;cursor:pointer;}
    img#loading{position:absolute;left:240px;top:170px;}
    #previous b,#next b{display:none;}
    </style>
    <script src="http://social-media-dosyalari.googlecode.com/files/jquery-slider.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    current = 1;
    button = 1;
    images = 8;
    width = 480;
    $('#p1').animate({"left": "0px"}, 400, "swing");
    $('#b1').css("backgroundPosition", "left bottom")
    $('#b1 b').css("color","#fff");
    $("#next").click(function() {
    button = current;
    current++
    if (current == (images+1) ) {current = 1}
    animateLeft(current,button)});
    $("#previous").click(function() {
    button = current;
    current--
    if (current == 0 ) {current = images}
    animateRight(current,button)});
    $("#buttons div").click(function() {
    button=current;
    clickButton = $(this).attr('id');
    current = parseInt(clickButton.slice(1));
    if (current > button) {animateLeft(current,button)}
    if (current < button) {animateRight(current,button)}});
    $("#buttons div b").mouseover(function() {
    if (($(this).css("color")) == "#16a" || ($(this).css("color")) == "rgb(17, 102, 170)") {$(this).css("color","#000");}});
    $("#buttons div b").mouseout(function() {
    if (($(this).css("color")) == "#000" || ($(this).css("color")) == "rgb(0, 0, 0)") {$(this).css("color","#16a");}});
    function animateLeft(current,button) {
    $('#p'+current).css("left",width +"px");
    $('#p'+current).animate({"left": "0px"}, 400, "swing");
    $('#p'+button).animate({"left": -width+"px"}, 400, "swing");
    setbutton()}
    function animateRight(current,button) {
    $('#p'+current).css("left",-width+"px");
    $('#p'+current).animate({"left": "0px"}, 400, "swing");
    $('#p'+button).animate({"left": width+"px"}, 400, "swing");
    setbutton()}
    function setbutton () {
    $('#b'+button).css("backgroundPosition", "left top")
    $('#b'+button+' b').css("color","#16a");
    $('#b'+current).css("backgroundPosition", "left bottom")
    $('#b'+current+' b').css("color","#fff");}});
    </script>
    <div id="broder">
    <div id="slide">
    <img alt="loading" id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQtmxKJQJiGLd5Tg2k67arFYprHxiDN7S3b8C8FQH2MzL5tNR5ze1mrqWm_odjnyuFj-IXBU-rdOu2jcrGO_ohCtITfYVQ5Dhuxg2icgs83BQ5DdUX2QmEHK6gNJgAHx9ktW86dZnz9bM/s1600/loading.gif" />
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWRtMOXUShttegTqj3JNgYIg6zF3P_akrCIjpjYQzFsWZl5esiMUVpOr4crV1XkekTGSaWbn5ev6bG65js9GAhuBOJ3gzFF0LxYBACZOB1Wg9U61KyfuhyvURMdwkU1eKrfylfxit6VGq/s1600/ol.jpg" id="p1"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWRtMOXUShttegTqj3JNgYIg6zF3P_akrCIjpjYQzFsWZl5esiMUVpOr4crV1XkekTGSaWbn5ev6bG65js9GAhuBOJ3gzFF0LxYBACZOB1Wg9U61KyfuhyvURMdwkU1eKrfylfxit6VGq/s1600/ol.jpg" width="480" alt="Meftun Apart Front" title="Meftun Apart Front"/></a>
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCxvYpDupuhvACPqUOhshjWPA_YbNeabqeiAxkjfMKb4_X_E8JQ3MWlCzlfYRey6JMYhyphenhyphenDsdNOUkqrTrYj67xtROx30wQcsaNZ5-LFywVWGWK0_PdryGa72aKZmN7tfuxIjUoRBbSGJM3/s1600/havuz.jpg" id="p2"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCxvYpDupuhvACPqUOhshjWPA_YbNeabqeiAxkjfMKb4_X_E8JQ3MWlCzlfYRey6JMYhyphenhyphenDsdNOUkqrTrYj67xtROx30wQcsaNZ5-LFywVWGWK0_PdryGa72aKZmN7tfuxIjUoRBbSGJM3/s1600/havuz.jpg" width="480" alt="Meftun Apart Havuz" title="Meftun Apart havuz"/></a>
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVeFIu3vF0hEqI2q6eU1h_2aMhjoC-sAIPLrKpgWK5xlmtjEHjoJPG8u6ZWCIgtUiL8FbXqJd-aRahoRpRjt4eH1ThEJr0yhcokopgoZT8bOBo1k0C-95Th0NcI6twb6jpnsq-t_42nq5A/s1600/salon.jpg" id="p3"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVeFIu3vF0hEqI2q6eU1h_2aMhjoC-sAIPLrKpgWK5xlmtjEHjoJPG8u6ZWCIgtUiL8FbXqJd-aRahoRpRjt4eH1ThEJr0yhcokopgoZT8bOBo1k0C-95Th0NcI6twb6jpnsq-t_42nq5A/s1600/salon.jpg" width="480" alt="Meftun Apart Salon" title="Meftun Apart Salon"/></a>
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbt-gUpE5GI8TaNO9zYur8LjKcgcQElm4UQhy_7sboWtl7bMbn3RfMWAqlex93GrgqxlCr9sQS1MB_MlT1J2FA1c3iWmh314YaryDv01qYGQGFNTZXqGcrBN7jIpL9iDUIpDkQ7sqLWNX/s1600/balkon.jpg" id="p4"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbt-gUpE5GI8TaNO9zYur8LjKcgcQElm4UQhy_7sboWtl7bMbn3RfMWAqlex93GrgqxlCr9sQS1MB_MlT1J2FA1c3iWmh314YaryDv01qYGQGFNTZXqGcrBN7jIpL9iDUIpDkQ7sqLWNX/s1600/balkon.jpg" width="480" alt="Meftun Apart Balkon" title="Meftun Apart Balkon"/></a>
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0KKiv0EnGhbnEZcVH1znYjKrf6FKBVMTfCkS5F6KA8zvloohI8I7neFZr7cz1EfEBVfjH7U3hETKUwh7G9Tq9TvcsBEhUPnqyqyDDtckmSsRwAVWm-_2IcPNMMMkjWeBLtD9EDFbsLLX/s1600/meftun_aparts9b.jpg" id="p5"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0KKiv0EnGhbnEZcVH1znYjKrf6FKBVMTfCkS5F6KA8zvloohI8I7neFZr7cz1EfEBVfjH7U3hETKUwh7G9Tq9TvcsBEhUPnqyqyDDtckmSsRwAVWm-_2IcPNMMMkjWeBLtD9EDFbsLLX/s1600/meftun_aparts9b.jpg" width="480" alt="Meftun Apart Açık mutfak" title="Meftun Apart Açık Mutfak"/></a>
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfrOMLfZ55DW3sxkzVbJseG88HmYairzGbOcTcHl4UBkA8aa6QZd0rsenZ6NiGcSlr1Z38arxjNA5UceXEU1opa2_4tEBrUWU_qe2Hc-dmUbpC_bB2t7k_b7A_UJu5d1EwiqnDU_no0_l/s1600/meftun_aparts10b.jpg" id="p6"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfrOMLfZ55DW3sxkzVbJseG88HmYairzGbOcTcHl4UBkA8aa6QZd0rsenZ6NiGcSlr1Z38arxjNA5UceXEU1opa2_4tEBrUWU_qe2Hc-dmUbpC_bB2t7k_b7A_UJu5d1EwiqnDU_no0_l/s1600/meftun_aparts10b.jpg" width="480" alt="Meftun Apart Yatak odası-1" title="Meftun Apart Yatak odası-1"/></a>
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3itzFlULdcB-P0jBT6hXL9SmxOzl5akvv6OtS_LhVaLjWPaAbXafI461rqbBbvOTQ8kmswchVpHOVs9F68pC5N2DXnVnZ5RCQCCxiXDMF_NBykOCnWQvV4f_VTdzPTXC_qD3ibZ1eVx2/s1600/5.JPG" id="p7"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3itzFlULdcB-P0jBT6hXL9SmxOzl5akvv6OtS_LhVaLjWPaAbXafI461rqbBbvOTQ8kmswchVpHOVs9F68pC5N2DXnVnZ5RCQCCxiXDMF_NBykOCnWQvV4f_VTdzPTXC_qD3ibZ1eVx2/s1600/5.JPG" width="480" alt="Meftun Apart Yatak odası-2" title="Meftun Apart Yatak odası-2"/></a>
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMHCK9saukfIwJdLZCF-UJU2W3sc2Imi08JbFPGvWWPj4eOwIOtSL2GhidNQj23_DKr1sXK3bzsVTdJT-J-91ETm9NBN_96Bo8cX92EZP3Hx9Ppz8RsPcBF54LE54K9DOIyA2kjuO2Kdg/s1600/7.JPG" id="p8"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMHCK9saukfIwJdLZCF-UJU2W3sc2Imi08JbFPGvWWPj4eOwIOtSL2GhidNQj23_DKr1sXK3bzsVTdJT-J-91ETm9NBN_96Bo8cX92EZP3Hx9Ppz8RsPcBF54LE54K9DOIyA2kjuO2Kdg/s1600/7.JPG" width="480" alt="Meftun Apart WC&Banyo" title="Meftun Apart WC&Banyo"/></a>
    </div>
    <div id="previous">
    <b>Önceki</b></div>
    <div id="next">
    <b>Sonraki</b></div>
    <div id="buttons">
    <div id="b1">
    <b>1</b></div>
    <div id="b2">
    <b>2</b></div>
    <div id="b3">
    <b>3</b></div>
    <div id="b4">
    <b>4</b></div>
    <div id="b5">
    <b>5</b></div>
    <div id="b6">
    <b>6</b></div>
    <div id="b7">
    <b>7</b></div>
    <div id="b8">
    <b>8</b></div>
    </div>
    </div>

    Script kodları arasındaki Mavi renkle belirttiğim alanları kendinize göre düzenleyin.
    images = 8; Kaç tane resim kullanıyorsanız, (Örnekte 8 adet resim kullanılmıştır.)
    width = 480; Kullandığınız resimlerin genişliği

    Ve son olarak Kırmızı renkle belirttigim alanları kendinize göre düzenleyin.
    width:580px;height:440px; (width: Genişlik, height: Yükseklik)
    width:480px;height:360px; (width: Genişlik, height: Yükseklik)
    <a href="Resim Linkiniz" id="p1"><img height="360" src="Resim Linkiniz" width="480" alt="Resmin Adı" title="resmin üstüne gelince çıkacak yazı"/></a>

    Örnek Resim Galerisi Önizleme:
    loadingMeftun Apart FrontMeftun Apart HavuzMeftun Apart SalonMeftun Apart BalkonMeftun Apart Açık mutfakMeftun Apart Yatak odası-1Meftun Apart Yatak odası-2Meftun Apart WC&Banyo
    1
    2
    3
    4
    5
    6
    7
    8


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