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...

Pop-up Facebook beğen, Twitter takip & Email Box eklentisi

Pop-up Facebook beğen, Twitter takip & Email Box eklentisi
Bu eklenti, ziyaretçileriniz blogunuza, websitenize girdiğinde bir kereye mahsus otomatik olarak ekranın ortasında popup açılır ve ziyaretçileriniz facebook sayfanızı beğenebilir, twitter'da sizi takip edebilir ve ayrıca mail takip yoluyla yazılarınıza abone olabilirler. Bu gerçekten çok güzel ve tamamen özelleştirilmiş. Aşağıda eklenti oluşturucu ile eklenti rengini değiştirebilirsiniz. Blogger ve aynı zamanda wordpress üzerine eklemek için kolay. Bu eklenti 15 gün varsayılan ayarı ile birlikte geliyor, ihtiyacınıza göre değiştirebilirsiniz.
Sizde Pop-up Facebook beğen, Twitter takip & Email Box eklentisini kullanmak isterseniz aşağıdaki kod Oluşturucuyla bilgilerinizi girip eklentinizi Oluşturabilirsiniz.

Özellikler:

  • 1. jQuery/JavaScript eklenti.
  • 2. Yeni bir ziyaretçi web sitenize geldiğinde otomatik olarak ekranın ortasında açılır.
  • 3. Harika ve Şık görünüş.
  • 4. Facebook beğen, Twitter takip et ve E-posta Abone eklentisi bulunuyor.

Pop-Up Takip Kutusunu Blogunuza/web sitenize ekleme?


  • 1. Benim kullanıcı adı olan bölümleri değiştirin.
  • 2. renk kutusundaki eklenti renginizi seçin.
  • 3. Eğer istiyorsanız her ziyaretimde görünür? Evet / Hayır'ı seçin.
  • 4. Eklenti için blogda görünür gün ayarını Ayarlayın.
  • 5. Oluştur ve ardından Önizleme'yi tıklayın.
  • 6. Son olarak Blogger ekle'yi tıklayın.
● Eklenti oluşturucuyu kullanmadan önce Blogger hesabınıza giriş yapın!
● Kodu Manuel eklemek isteseniz Yerleşim >> Gadget ekle >> HTML/JavaScript şeklinde istediğiniz yere ekleyebilirsiniz.
Şimdi Blogunuzu kontrol edin. işlem bukadar.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

En-Boy Oranı Hesaplayıcı (Aspect Ratio Calculator)

En-Boy Oranı Hesaplama
Aspect Ratio bir resmin çerçeve oranı eni ve boyu arasındaki oransal ilişkiyi tarif eder. Bilgisayarlı grafik işlemlerinde, bir çerçevenin veya bir görüntünün yatay ölçülerinin, dikey ölçülerine göre oranı. Bu oranın korunması veya kontrol edilmesi, bir görüntünün sağlanması veya baskıya geçirlmesi için önemlidir. Belirli bir boy oranı için eksik değerini hesaplamak için aşağıdaki formu kullanın. Fotoğrafları yeniden boyutlandırma yararlıdır.

Örneğin, 1600 x 1200 piksel bir fotoğraf var ki, ama blogunuza sadece 400 piksel genişliğinde bir fotoğraf için yer var. Boy oranını koruyarak, fotoğrafınızın yeni yüksekliğini bulmak için, aşağıdaki hesaplamayı yapın:
height = 1200 / 1600 x 400
height = 300

En-Boy Oranı Hesaplama (Aspect Ratio Calculator)

Hesaplama: Orijinal genişlik değerleri için sola (W1) girin & orijinal yüksekliği (H1), sonra sağda Kalan değeri hesaplamak için yeni bir genişlik (W2) veya yeni yükseklik (H2) girebilirsiniz.

Başlangıç değerlere döndürmek için ayarları sıfırla.

W1


H1

=

W2


H2

Değerleri sıfırla

En boy oranı: 4 : 3

Örnek

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(http://2.bp.blogspot.com/-T3whmFR9AHc/UeJp7HjiaXI/AAAAAAAAHoY/9aoe-xvtfFI/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...

Yorumlarda HTML Kodu Kullanma

Yorumlarda HTML Kodu Kullanma
Yorum yaparken Html Kodları Blogger tarafından desteklenmez. Bazen blog yorum formları html ve javascript kodlarını yayınlamak için çok gerekli hale gelir. Birçok yazar yorumlarda Html yazmaya çalıştığında hata alır. Blogger Yorum formu HTML ve JavaScript doğrudan göndermeyi desteklemez. Aynı kodu bir metin halinde kodlayarak değiştirirseniz herhangi bir hata olmadan yazabilirsiniz. Bunu yapmak için aşağıdaki aracı kullanabilirsiniz. Basit metin, HTML karakterlerini değiştirmek için yardımcı olacaktır. Ayrıca gömülebilir bir forma adsense kodu dönüştürmek için de kullanabilirsiniz. Bu şekilde özel karakterleri çevirir,

  • '<' Dönüştürünce› '&lt;'
  • '>' Dönüştürünce› '&gt;'
  • '"' (çift ??tırnak) Dönüştürünce› '&quot;'
  • ''' (tek tırnak) Dönüştürünce› '&#039;'
  • '&' Dönüştürünce› '&amp;'
HTML KODLAYICI: Şimdi dönüştürmeye başlayın!

Blogger Şablon Yedekleme

Blogger Şablon Yedekleme
Blogumuzun şablonunda değişiklik yapmak istediğimiz zaman eklediğimiz kodlar çalışmazsa ya da mevcut kod düzenimizde istemediğimiz türden bir değişiklik oluşturursa eğer şablonunuzu yedeklemediyseniz maalesef geriye dönmeniz mümkün olmayacaktır! Blogumda şablonunuzu güzelleştirmek adına zaman zaman blogger eklentileri yayınlıyorum. O yazılarda da fark edeceğiniz üzere şablonunuzda yer alan kodlarda bir takım değişiklikler yapmanız gerekiyor. Sağlıklı bir değişiklik yapmak için şablonunuzun önceki halini yedeklemeniz ileriye dönük size fayda sağlayacaktır.
Şablonunuzu yedeklemeniz sadece kodlarda yapacağınız değişikliklerin olumsuz olmasına karşın değil, bloğunuzun başına gelebilecek herhangi bir durum için de gerekli olacaktır.O yüzden kodlarda değişiklik yapın ya da yapmayın, ayda-2 ayda bir şablonunuzu yedeklemeyi ihmal etmeyin.

Blogger şablon nasıl yedeklenir?

Şablon değiştirmek istediğimizde yaptığımız işlemi bir bakıma tekrar ediyor olacağız.
  • Blogger hesabınıza giriş yapın.
  • Şablon menüsüne tıklayın.
  • Sağ üst köşede yer alan Yedekle / Geri yükle butonuna tıklayın.
  • Karşınıza çıkan pencerede tam şablonu indir butonuna tıklayın.

Blogger Şablon degistir
Bu adımları doğru yaptığınız takdirde şablonunuzu bilgisayarınıza kaydetmiş olacaksınız.İndirdiğiniz dosya farklı rakamlardan oluşan anlamsız bir isme sahip.Siz şablon adı ve tarih şeklinde bir isim vererek ilerleyen dönemde yaptığınız değişikliği hatırlayabilirsiniz.
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

Blogger sayfa numaralandırma eklentisi

Blogger sayfa numaralandirma eklentisi
Blogger şablonlarının çoğunda sayfa numaralandırma eklentisi yok. Sayfalar arasında geçiş, sayfa sonunda alt tarafta bulunan "daha eski kayıtlar", "daha yeni kayıtlar" gibi linklerle sağlanıyor. Şimdi yapacağımız sayfa numaralandırma eklentisi bence herkesin blogunda olmasını istediği ve gerçekten olması gereken bir eklenti. Ziyaretçiler yazılarınıza bakarken örneğin en eski yazılarınızı görmek için 10-15 kere önceki kayıt butonuna basmak zorunda kalır fakat bu eklenti ile buna gerek kalmayacak. Sayfanın altındaki önceki kayıt ve sonraki kayıt yazılarını kaldırıp onun yerine sayfa numaralarını nasıl ekleyeceğinizi anlatmaya başlayalım.

1. CSS style kodlarını ekleme


1. Adım :
  • Blogger kontrol Paneli > Şablon > HTML'yi Düzenle tıklayıp devam edin:
  • Herhangi bir yerde kod alanının içinde Blogger arama kutusunu açmak için CTRL + F tuşlarına basın.
  • Arama kutusunun içine aşağıdaki etiketi yapıştırın ve onu bulmak için Enter'a basın:
  • ]]></b:skin>
    2. Adım :
  • Şimdi Aşağıdaki numaralandırılmış sayfa navigasyon stillerinin birini seçin ve hemen altındaki kodu kopyalayın.
  • ]]></b:skin> kodunun hemen üst satırına kullanmak istediğiniz stil kodunu kopyalayıp yapıştırın:

  • Style 1

    Blogger sayfa numaralandırma eklentisi style 1
     #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
    .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
     .showpageOf{display:none!important}
    #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
     #blog-pager .pages{border:none;}

    Style 2:

    Blogger sayfa numaralandırma eklentisi style 2
     #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
    #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

    Style 3:

    Blogger sayfa numaralandırma eklentisi style 3
     #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
    .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
    a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
    #blog-pager .pages{border:none;background: none;}

    Style 4:

    Blogger sayfa numaralandırma eklentisi style 4
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    Style 5

    Blogger sayfa numaralandırma eklentisi style 5
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
    #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    Style 6

    Blogger sayfa numaralandırma eklentisi style 6
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    Style 7

    Blogger sayfa numaralandırma eklentisi style 7
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    2. Script Komut Dosyasını Ekleme


    3. Adım :
  • Simdi (CTRL + F) tuş kombinasyonu yardımıyla aşağıdaki kodu bulun:
  • </body>

  • Hemen üstüne aşağıdaki komut dosyasını ekleyin:
  • <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
      /*<![CDATA[*/
        var perPage=7;
        var numPages=6;
        var prevText ='« Önceki';
        var nextText ='Sonraki »';
        var urlactivepage=location.href;
        var home_page="/";
      /*]]>*/
    </script>
      <script src="http://meftun-mede.googlecode.com/svn/trunk/sayfa_numaralandirma_eklentisi.js"/>
    </b:if>
    </b:if>

    Yapılandırma


    Yükledikten sonra, bu varsayılan ayarları değiştirmek isteyebilirsiniz:
    perPage: 7,
    numPages: 6,
    var prevText ='« Önceki';
    var nextText ='Sonraki »';
    }
    - perPage: mesajların sayısı her sayfada gösterilir. (7)
    - numPages: sayfa sayısı sayfa navigasyon gösterilir. (6)
    - "« Önceki" and "Sonraki »" metnini değiştirebilirsiniz.

    4. Adım :
  • Son olarak Şablonu kaydet diyip çıkıyoruz. işlem bukadar!

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

     
    • Meftun Apart

      Meftun Apart Fethiye

      Apartlarımız deniz ve plaja 50 metre mesafede olup, klimalı, full eşyalı 2+1, 1+1, 4-6 kişilik ve havuzlu apartlardan oluşmaktadır.

    • Meftun Mede Blogger

      MEDE Blogger Tema Yardım

      Blogger şablonuzda, temanızda yardımamı ihtiyacınız var? Hertürlü blogger tema yardımı ücretsiz yapılır...

    • Sitemap sayfası oluşturma

      Sitemap sayfası oluşturma

      Sitemap bir web sitesinin haritasıdır.Arama motorlarının web sitelerini hızlı, daha çabuk ve tam olarak indexlemesi için oluşturulurlar.

    • hit arttırma

      Sitenizin hitini arttırın!

      Kaliteli hit arttırma sitemi ile ücretsiz hit kazanın, sitenizi Google'da yükseltin! Sitenizi ekleyin ve binlerce ziyaretçi kazanın!

    • Sosyal Medya!

      Sosyal Medya

      Sosyal platformların sayısı artmaya devam etmektedir ve Sosyal medya içeriğine internet aracılığıyla her zaman her yerden erişilir.