• Blogger Eklentileri
  • Sosyal Medya
  • İnternet
  • Filmler

Mobil ve Tablet cihazlarla Uyumlu Resim Slider ve Galerileri

1 yorum

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.

Blogger Yukarı Çık - Sayfa Başına Dön Butonu

0 yorum

Blogger Yukarı Çık - Sayfa Başına Dön Butonu
Blogunuza CSS veya jQuery ile "Yukarı Çık - Sayfa Başına Dön" butonu ekleyin. Uzun sayfalar için oldukça önemli ve yararlı bir eklenti "Başa Dön" bağlantısı. Sayfa uzadıkça sitenin yönlendirme bağlantılarından da uzaklaşılır. Bunları tekrardan kullanabilmek için sayfanın başına gitmek gerekir. Bu yüzden bloglarınıza renk katacak bu eklentiyi iki güzel yöntemle paylaşacağım bugün sizlerle. Hangisi hoşunuza giderse onu kullanabilirsiniz.

CSS Kodlarıyla Sayfa Başına Dön, Yukarı Çık Butonu:

  • Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
  • Ctrl+F yardımı ile </body> kodunu aratıp bulun.
  • Ve hemen üzerine aşağıdaki kodu kopyalayıp yapıştırın.

  • <a title="Sayfa Başına Dön" style="position:fixed;right:15px;bottom:15px;outline:medium none;border:0px none;" href="#"><img border="0" alt="Sayfa Başına Dön" src="https://lh4.googleusercontent.com/-f-cUxK_dOCU/T4_oxtR-oxI/AAAAAAAADLs/AH7QDMZv6dY/s32/up.png" title="Sayfa Başına Dön"/></a>

    Buton Örneği:


    Yukarı Çık - Sayfa Başına Dön Butonu
  • Burdaki buton resmi (Kırmızıyla gösterdim) siyah ve 35x35 boyutlarında. Siz isterseniz zevkinize göre başka bir buton ekleyebilirsiniz.

  • Script (jQuery) Kodlarıyla Sayfa Başına Dön, Yukarı Çık Butonu:

  • Aynı şekilde bunuda </body> kodunun hemen üzerine kopyalayıp yapıştırıyoruz.

  • <style type="text/css">
    #mef-BckTop{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:150px;text-shadow:1px 1px 0 #C9C9C9;background:#EEEEEE;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#000;text-decoration:none;border:1px solid #C9C9C9;padding:5px;}
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type='text/javascript'>
    //<![CDATA[
    eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6(1(a){a.9.7=1(){a(2).c().d("e");"0"!=a(4).5()&&a(2).8("3");f b=a(2);a(4).g(1(){"0"==a(4).5()?a(b).h("3"):a(b).8("3")});a(2).i(1(){a("j, k").l({5:0},"3")})}});6(1(a){a("#m-n").7()});',24,24,'|function|this|slow|window|scrollTop|jQuery|scrollToTop|fadeIn|fn|||hide|removeAttr|href|var|scroll|fadeOut|click|html|body|animate|mef|BckTop'.split('|'),0,{}))
    //]]>
    </script>
    <a href='#' id='mef-BckTop' style='display:none;'>Sayfa Başına Dön</a>
    

    Buton Örneği:


    Sayfa Başına Dön

  • Eğer sayfanızda jquery'nin herhangi bir versiyonu varsa kırmızıyla gösterdiğim jquery.min.js bölümünü silebilirsiniz.
  • Ben Sayfa Başına Dön metnini kullandım, siz isterseniz başka bişey yazabilirsiniz.

  • Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

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

    1 yorum

    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:

    Google Arama Sonuçlarında Star Rating Değerlendirmesi Ö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...

    La Guerre Du Feu - Ateş Savaşı - Quest For Fire 1981 DVDRip indir | Online izle

    0 yorum

    La Guerre Du Feu - Ateş Savaşı - Quest For Fire 1981 DVDRip indir | Online izle
    La Guerre Du Feu - Ateş Savaşı - Quest For Fire 1981 DVDRip indir | Online izle

    http://www.imdb.com/title/tt0082484/

    Yönetmen: Jean-Jacques Annaud
    Türkçe Adı: Ateş Savaşı
    Orjinal Adı: La Guerre Du Feu
    Tür: Macera, Dram, Tarih
    İmdb Puanı: 7,4/10
    Yapım: 1981
    Süre: 100 dakika
    Senaryo: Gérard Brach, J.H. Rosny Sr.
    Müzik: Philippe Sarde
    Görüntü Yönetmeni: Claude Agostini
    Oyuncular: Everett McGill, Ron Perlman, Nicholas Kadi, Rae Dawn Chong, Gary Schwartz

    Konu: Tarih öncesi çağlara, günümüzden 80 bin yıl geriye gidiyoruz... Ulam kabilesine ait mağara adamları için, başında nöbetçi dikip üzerinde titredikleri ateş, en değerli hazineleridir. Doğa olayları sonucu nasıl olduğunu anlamadan buldukları ve nasıl yeniden yakacaklarını bilmedikleri ateş bir gün söner. Aralarından üçünü; Noah, Amoukar ve Gaw'ı, ateşi yeniden bulup getirmekle görevlendirirler.

    Uyumsuz üçlüyü, bu tehlikelerle dolu dünyada çetin bir yolculuk beklemektedir. Tüm yolculuklar gibi, sonunda aradığınız şeyden daha fazlasını bulacağınız bir yolculuk...

    Guerre Du Feu - Ateş Savaşı - Quest For Fire screenshot
    tikla indir
    DepositFiles
    La.Guerre.Du.Feu.1981.DVDRip.rar 997.4 MB

    uptobox
    La.Guerre.Du.Feu.1981.DVDRip.rar 997.4 MB

    turbobit
    La.Guerre.Du.Feu.1981.DVDRip.avi 701,47 Mb

    Alternatif 2 part versiyon:

    netload
    http://netload.in/datei8qhecicaK0/QuFoFi.part1.rar.htm
    http://netload.in/dateif7lHEOzmm8/QuFoFi.part2.rar.htm

    FileFactory
    http://www.filefactory.com/file/4miz67j2f9qx/QuFoFi.part1.rar
    http://www.filefactory.com/file/35qffrinfdq5/QuFoFi.part2.rar

    Filmin Altyazısı

    Not: Filmin altyazıya ihtiyacı yok. Çünkü Filmde hiç konuşma yok. Sadece filmin başlangıcında altta sunduğum metin geçiyo.
    80.000 yıl önce insanlığın güneşi doğdu.
    Prehistorik insan, tabiatın yıldırım, volkanik püskürmeler gibi...
    ...tesadüfleriyle ona sunulan ateşi korumayı öğrendi.
    Ama onu yapay olarak yaratmayı öğrenemedi.
    Bizim için sıradan olan bu ateş insafsız bir rekabetin amacı oldu.
    Bu zalim çağlarda, ateş türümüzün var olmasını sağlıyordu.
    İnsanı korkunç soğuklardan, donmaktan, yırtıcı hayvanlardan...
    ...korumaya ve et kızartmaya yarıyordu.
    Kabileler, onun iyilik ve ışık saçan gücü etrafında organize oluyorlardı.
    Ateşe sahip olan hayata da sahipti.
    - Ateşe Çağrı -
    Meftun MEDE iyi seyirler diler...
    
    online izle

    Jquery Haber Manşet Slider

    0 yorum

    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.

    1. Adım

    1. Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
    2. 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(http://3.bp.blogspot.com/-0I_ABlVtjNY/U5xzR3zJxRI/AAAAAAAAAvU/-59qhk7Slq0/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(http://3.bp.blogspot.com/-0I_ABlVtjNY/U5xzR3zJxRI/AAAAAAAAAvU/-59qhk7Slq0/s1600/caption-bg.png) repeat scroll 0 0 transparent;}
    

    2. Adım

    1. Tekrar Ctrl+F yapıp  </head> kodunu buluyoruz ve hemen üstüne aşağıdaki javascript kodlarını kopyalayıp yapıştırıyoruz.
    2. Ş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="http://3.bp.blogspot.com/-hYTssHI4njI/U1prQDgxPDI/AAAAAAAABPI/WYB3W4qzJT0/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...

    Blogger için Mashable stil ajax navigasyon menü

    0 yorum

    Blogger Mashable stil Ajax Menü
    Blogger için AJAX Navigasyon menüsü Blogger JSON beslemesi API ve AJAX kullanarak Blogger platformu için oluşturulan çok yeni widget. Bu navigasyon menüsü Mashable.com eski sitesinden esinlenmiştir. Tekrardan kodlanmış ve geliştirilmiş bu widget'a özelleştirilebilir özellikler eklendi. Bu widget jQuery kütüphanesi ve Blogger json beslemesi, API tabanlı çalışır. Javascript devre dışı olduğunda menü sadece normal açılır menü gibi çalışır ve javascript etkin olduğunda bu AJAX dönerek açılır ve alt menüleri resimli şekilde açar.

    Bu Eklenti Nasıl Kurulur?

    1. Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
    2. 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.

    .mefmenu *{margin:0;padding:0;}
    ul.mefmenu{list-style:none;line-height:1;overflow:visible!important;}
    ul.mefmenu:after{content:' ';display:block;height:0;clear:both;margin:0;padding:0;}
    #mefajaxmenu {width:960px;background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}
    ul.mefmenu li{list-style:none;position:relative;float:left;margin:0!important;padding:0!important;}
    ul.mefmenu li a{font-family:Arial, georgia, Helvetica, sans-serif!important;color:#6b6b6b!important;text-shadow:0 1px 0 #fff;text-decoration:none;font-weight:400!important;text-transform:capitalize!important;font-size:12px!important;display:block!important;border:0 none!important;margin:0;padding:12px 16px!important;}
    ul.mefmenu li a:hover,ul.mefmenu li a.hoverover{background:#f5f5f5!important;}
    ul.mefmenu ul{position:absolute;display:none;top:100%;border:1px solid #ccc;}
    ul.mefmenu ul li{float:none;min-width:160px;background:#f5f5f5;text-shadow:none;}
    ul.mefmenu ul li a{text-transform:none;font-weight:400;padding:12px 14px;}
    ul.mefmenu ul li a:hover,ul.mefajaxmenu ul li a.hoverover{background:#fff!important;}
    ul.mefmenu ul ul{display:none;left:100%;top:0;}
    ul.mefajaxmenu li div.submenu{display:none;position:absolute;width:600px;z-index:90;left:-1px;top:100%;overflow:hidden;min-height:150px;background:#fff;border:1px solid #ccc;border-top:0 none;}
    ul.mefajaxmenu ul,ul.mefajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important;}
    ul.mefajaxmenu ul li{background:none!important;float:none!important;}
    ul.mefajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#f5f5f5;}
    ul.mefajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;background:none;margin:8px 0!important;}
    ul.mefajaxmenu ul.postslist li{display:block;overflow:hidden;border-bottom:1px #eee solid;position:relative;min-height:60px;padding:8px 8px 8px 110px !important;}
    ul.mefajaxmenu ul.postslist li:last-child{border-bottom:none 0;}
    ul.mefajaxmenu ul.postslist li .imgCont{position:absolute;left:0;top:8px;width:100px;height:60px;overflow:hidden;border:1px solid #dcdcdc;font-size:0;line-height:0;}
    ul.mefajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;width:100px;height:100px;display:block;padding:0;}
    ul.mefajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;}
    ul.mefajaxmenu .loader{background:url(https://lh5.googleusercontent.com/-4qjg1CclZ64/UK6TG-7resI/AAAAAAAAJ6w/z6dE6nRTNKI/s128/loading_icon_1.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px;}
    ul.mefajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #999;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0;}
    ul.mefmenu li:hover > ul,ul.mefajaxmenu li:hover div.submenu{display:block;}
    

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

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/ajaxbloggermenu.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $('#mefajaxmenu').ajaxBloggerMenu({
    numPosts : 4, // Konu Sayısı
    defaultImg : 'http://2.bp.blogspot.com/-yRSXWDTHZlA/T6s8tkMqNnI/AAAAAAAAA7w/SEgoiBELIF4/s1600/no-photo-available.jpeg' // Varsayılan küçük resim
    });});
    </script>
    

    Bu bölümde HTML linklerimizi dikkatli eklememiz gerekiyor, aksi takdirde eklenti doğru çalışmaz.
    AJAX Menü URL'ler üç tür kabul eder. Menüde sadece bu URL'leri kullanmanız gerekir. Bunlar Etiket (Label), Arama Sorgusu (Search Query) ve Etiket ile Arama Sorgusu (Label with Search Query).
    Etiket URL http://blogadresiniz.blogspot.com/search/label/LABELNAME
    Arama Sorgusu http://blogadresiniz.blogspot.com/search?q=SEARCHQUERY
    Etiket ile Arama Sorgusu http://blogadresiniz.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

    • Son olarak Blogger panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin.
    • Ve aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın.
    • Kaydet diyip çıkın.

    <ul id="mefajaxmenu" class="mefmenu">
    <li>
    <a href="http://meftunmede.blogspot.com">ANA SAYFA</a>
    </li>
    <li>
    <a href="#">ÖRNEK 1</a>
    <ul>
    <li><a href="http://meftunmede.blogspot.com/search/label/Sosyal%20Medya">SOSYAL MEDYA</a></li>
    <li><a href="http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri">BLOGGER EKLENTİLERİ</a></li>
    <li><a href="http://meftunmede.blogspot.com/search/label/Yemek%20Tarifleri">YEMEK TARİFLERİ</a></li>
    <li><a href="http://meftunmede.blogspot.com/search/label/Filmler">FİLMLER</a></li>
    </ul>
    </li>
    <li>
    <a href="#">ÖRNEK 2</a>
    <ul>
    <li><a href="http://meftunmede.blogspot.com/search/label/Html%20Kodlar%C4%B1">HTML KODLARI</a></li>
    <li><a href="http://meftunmede.blogspot.com/search/label/Programlar">PROGRAMLAR</a></li>
    <li><a href="http://meftunmede.blogspot.de/search/label/%C4%B0nternet">İNTERNET</a></li>
    <li><a href="http://meftunmede.blogspot.de/search/label/Ara%C3%A7lar">BLOGGER ARAÇLARI</a></li>
    </ul>
    </li>
    <li><a href="http://www.MeftunApart.com">NORMAL LİNK</a></li>
    </ul>
    

    Özelleştirme

    Kırmızıyla işaretli yerlerde;
    1- Style kodlarında width:960px; menünüzün genişliği,
    2- Script kodunda numPosts : 4, // Alt menüde görünmesini istediğiniz konu sayısı
    3- Ve menüde kendi blogumdan örnekler verdiğim kırmızıyla işaretli bölümleri (Linkler ve isimleri) değiştirebilirsiniz, çoğaltabilirsiniz.

    Umarım eklenti hoşunuza gitmiştir. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    Blogger ".tr" Yönlendirmesini Engelleme

    0 yorum

    Blogger
    Google Blogger'a Türkiye’den yapılan ip girişlerinde site uzantısını .com.tr uzantısına yönlendirmeye başladı. Bunun olmasıyla beraber bir çok sitenin alexa,index ve pr değerleri malesef kayboldu yada düştü. Blogger'in şimdilik 18 ülkeye verdiği bu özellik "country-code top level domain (ccTLD)" olarak adlandırılıyor. Bu durumdan rahatsız olanlar için .tr uzantısı yönlendirilmesini engellemek çok kolay. Bu sorunu ufak bir yönlendirme ile halledilebiliyoruz. Blogumuza hangi ülkeden girilirse girilsin ".blogspot.com" şeklinde çıkıyor ve site değerlerimizde herhangi bir düşüş yaşamıyoruz. Böylece global bir blog adresiniz oluyor. Yapmanız gereken aşağıdaki scripti kodunu blogunuza eklemek.

    Ülkeye özgü yönlendirme uygulanan aktif ülkeler listesi

    1. Argentina – Yönlendirir [blogspot.com.ar]
    2. Australia – Yönlendirir [blogspot.com.au]
    3. Brazil – Yönlendirir [blogspot.com.br]
    4. Canada – Yönlendirir [blogspot.ca]
    5. France- Yönlendirir [blogspot.fr]
    6. Germany – Yönlendirir [blogspot.de]
    7. India – Yönlendirir [blogspot.in]
    8. Italy – Yönlendirir [blogspot.it]
    9. Japan – Yönlendirir [blogspot.jp]
    10. Mexico – Yönlendirir [blogspot.mx]
    11. New Zealand - Yönlendirir [blogspot.co.nz]
    12. Portugal - Yönlendirir [blogspot.pt]
    13. Spain - Yönlendirir[blogspot.com.es]
    14. Sweden – Yönlendirir [blogspot.se]
    14. Türkiye – Yönlendirir [blogspot.com.tr]
    15. UK – Yönlendirir [blogspot.co.uk]

    Toplamda Blogger 259 domaine sahip. Ben sadece 15 tane örnek verdim. Merak edenler daha fazlası için buraya bakabilirler.

  • 1- Blogger kontrol panelinize giriş yapın
  • 2- Şablon > HTML'yi Düzenle
  • 3- Aşağıdaki script komutunu <head> kodunun hemen altına kopyalayıp yapıştırın

  • <script type='text/javascript'>var str=window.location.href.toString();if(str.indexOf(&quot;.com/&quot;)==&quot;-1&quot;){var str1=str.substring(str.lastIndexOf(&quot;.blogspot.&quot;));if(str1.indexOf(&quot;/&quot;)==&quot;-1&quot;){var str2=str1}else{var str2=str1.substring(0,str1.indexOf(&quot;/&quot;)+1)}window.location.href=window.location.href.toString().replace(str2,&quot;.blogspot.com/ncr/&quot;)}
    </script>
    

    Barış, huzur, sağlık ve bereket Arkadaşlar!Herkeze kolay gelsin. 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.