• BLOGGER EKLENTİLERİ
  • SOSYAL MEDYA
  • İNTERNET
  • FİLMLER

Profesyonel CSS katlama efektli Dikey Sidebar Menü

0 yorum

Profesyonel CSS katlama efektli Dikey Sidebar Menü
Bu eklenti sadece CSS ve bazı betik kodları ile yapılmıştır. Son derece kullanıcı dostu ve blogunuza uyulamanız kolaydır. Bu eklenti bazı yerlerde JavaScript'i kullanılarak yapılmıştır. Ama ben CSS kodlarıyla yaptım. Çünkü script kodlar genel olarak site açılısını yavaşlatan kodlardır. Sitenizde ne kadar az script kodu bulunursa okadar iyidir. CSS katlama efektli dikey sidebar menüsü, buton üzerine gelindiginde içe dogru katlanma efekti ile şık bir görünüm yaratır. Ve blogunuza profesyonel görünüm verir. Ayrıca açılıp kapanma fonksiyonuda var. Etiketlerinizi, sosyal medya linklerinizi yada sabit sayfalarınızı bu menüyle sidebarınızda kullanabilirsiniz.

Menüyü sidebarınıza eklemek için

  • Blogger panelinize giriş yapın 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.

<!--Profesyonel CSS katlama efektli Dikey Sidebar Menü by MeftunMede.blogspot.com-->
<style>
.medekatlamamenu{vertical-align:middle;width:300px;display:inline-block;font-family:arial, sans-serif;transform:translate3d(0,0,0);}
.medekatlamamenu input{position:absolute;left:-9999px;}
.medekatlamamenu #togglemedekatlamamenu:checked ~ ul{max-height:300px;padding-bottom:1em;}
.togglemedekatlamamenu{background:#FC634B;color:#FFF;display:block;text-align:center;cursor:pointer;font-family:arial, sans-serif;padding:.75em;}
.togglemedekatlamamenu:before{content:"\2630";font-size:22px;font-family: initial;vertical-align:middle;}
.medekatlamamenu ul{margin-top:1px;text-align:left;max-height:0;overflow:hidden;padding:0;transition:300ms ease all;list-style:none;line-height:1;}
.medekatlamamenu li{margin-bottom:1px;position:relative;z-index:10;transition:300ms ease all;}
.medekatlamamenu li a{display:block;position:relative;width:100%;font-size: 14px;font-weight: 600;background:silver;text-decoration:none;color:#FFF;box-sizing:border-box;transition:300ms ease all;padding:1em;}
.medekatlamamenu li:hover a{width:99%;margin-left:1%;box-shadow:inset 300px 0 300px -300px rgba(255,255,255,0.6);}
.medekatlamamenu li:before{content:"";position:absolute;width:50%;height:30%;left:1%;bottom:16px;box-shadow:10px 0 0 #000;transition:300ms ease all;transform:rotate(0deg);}
.medekatlamamenu li:hover:before{box-shadow:10px 0 30px #000;transform:rotate(-4deg);bottom:6px;}
.medekatlamamenu li:hover + li{z-index:1;}
</style>
<nav class="medekatlamamenu">
 <input type="checkbox" id="togglemedekatlamamenu" checked />
 <label for="togglemedekatlamamenu" class="togglemedekatlamamenu"></label>
  <ul>
   <li><a href="http://meftunmede.blogspot.com/search/label/Seo">SEO</a></li>
   <li><a href="http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri">Blogger Eklentileri</a></li>
   <li><a href="Bağlantı linki">Menü Adı</a></li>
   <li><a href="Bağlantı linki">Menü Adı</a></li>
<!-Burdan itibaren yukarıdaki şekilde menünüzü çoğaltabilirsiniz->
  </ul>
</nav>
<!--Profesyonel CSS katlama efektli Dikey Sidebar Menü by MeftunMede.blogspot.com-->

Kırmızıyla işaretlediğim bölümleri istediğinize göre değiştirmeyi unutmayın. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

Blogger Koşullu Etiketler Nedir, Nasıl Kullanılır!

0 yorum

Blogger koşullu Etiketlerin kullanımı
Bu yazımda blogumuza eklediğimiz her hangi bir bölümü, eklentiyi veya gadgetı, blogger yapısında bulunan özel kodlar, koşullu Etiketler sayesinde HTML kodlarına müdahalede bulunarak istediğimiz yerde gösterip, istemediğimiz yerde göstermemeyi örneklerle açıklamaya çalışacağım. Koşullu Etiketler, daha fazla esneklik sağlayan Blogger şablon etiketleridir. Koşullu Etiketler olarak adlandırılmalarının sebebi, belirli durumlarda oluşan şablon değişikliklerini belirtmenize olanak tanımalarıdır. Bunlar şu şekilde işler: Blog şablon kodunuzu yine tek bir noktada saklamakla beraber, bu Koşullu Etiketleri sayfaya bağlı olarak göstermek veya gizlemek istediğiniz öğelerin etrafına yerleştirirsiniz. Her hangi bir bölümü istediğiniz sayfada gizleyebilir veya sadece o sayfada görünmesini sağlayabilirsiniz.
Bloggerda temel olarak Ana sayfa, Yazı sayfaları, Sabit(statik) sayfalar olmak üzere 3 çeşit sayfa olduğunu söyleyebiliriz. Bunların dışında yorum sayfaları ve arşiv sayfaları da bulunmaktadır. Yorum sayfaları dışarıdan bağlantı verilerek, pop up veya dışarıdan "iframe" ile yazı sayfalarının içinde açtırılabilirler. Arşiv sayfaları da, yine ana sayfa formatında görüntülenir. Blogger sayfa yapısı hakkında bu kısa bilgilendirmeden sonra sayfalar arasında fark yaratabileceğimiz koşullu Etiketleri örneklerle anlatıma geçebiliriz.

Blogger koşullu Etiketlerin kullanımı

Bloggerda blogumuza eklediğimiz her hangi bir bölümü veya gadgetı, HTML kodlarına müdahalede bulunarak yalnızca ana sayfada görüntülenmesini sağlayabilir veya gizleyebilirsiniz.
Örnek olarak blogunuza aşağıdaki slider yada resim galerisi eklentilerinden birisini eklediniz.
  1. HTML Kodlarıyla Jquery Resim Galerisi
  2. Jquery slider manşet eklentisi
  3. Jquery Otomatik resim slayt galerisi yapımı
  4. JavaScript Resimli Manşet Slayt eklentisi
  5. Spacegallery Resim Slayt galerisi
  6. Jquery Haber Manşet Slider
Genel olarak sliderlar görsel açıdan yerleşim sekmesinden, blog kayıtlarının hemen üzerine eklenir. Buraya eklediğiniz bu eklentiyi yanlızca anasayfanızda görünmesini istiyorsanız, Blogger kontrol paneli > Şablon > HTML'yi Düzenle yolunu takip ederek slider kodlarınızı bulmanız gerekiyor. Eklediğiniz herhangi bir eklentiyi bulmak için bu eklentiye verdiğiniz başlık ismine göre arama yapmanız gerekiyor. Örneğin Yerleşim sekmesinden Blog kayıtları nın hemen üzerine bir slider eklediniz.
Blog kayıtları uzerine Gadget HTML Javascript
Başlık olarak Galeri adını verdiniz (Bu başlığı daha sonra silebilirsiniz). Blogger kontrol panelinizden > Şablon > HTML'yi Düzenle yapıp, CTRL+F tuş kombinasyonuyla açılan arama kutusuna Galeri yazıp eklediğiniz slider gadget kodlarını buluyorsunuz.
Blogger index koşullu Etiketinin eklenmesi
Ve bu gadgetın başına ve sonuna aşağıda gösterdiğim kodları eklemeniz artık sliderınızın sadece anasayfada görünmesini sağlayacak.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
Slider gadget'a ait kodlarınız buraya gelecek 
</b:if>

Konunun daha iyi anlaşılması için 2. bir örnek veriyorum. Blogger popüler yayınlar eklentisini anasayfada görünmesini istemiyorsunuz. Yani anasayfada görünmesin diğer sayfalarda görünsün. Bunun için yine Blogger kontrol paneli > Şablon > HTML'yi Düzenle yolunu takip ederek CTRL+F yardımıyla arama kutusuna Popüler yayınlar (Başlıgınız herneyse) yazıyorsunuz.
Popüler yayınlar anasayfada gizle
Ve aşağıda gösterdiğim gibi kodları gadgetınıza ekleyin.
<b:if cond='data:blog.pageType != &quot;index&quot;'>
Popüler yayınlar gadget'ına ait kodlarınız buraya gelecek 
</b:if>

Yukarıdaki resimde Popüler yayınlar eklentisini kodları kapalı gösterdim;
<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>...</b:widget>.
Çünkü kodu açınca () resme sığmıyordu ve eklentinin bitiş kodu (</b:widget>) görünmüyodu. Son kodu görünmesi açısından resme sığmayan uzun kod dizisinin son bitiş kodunu göstermiş oldum. Burdan şunuda anlamış olalım, arama yapıp kodunuzu buldunuz ama hangisi son bitiş kodu bilemediyseniz; bulduğunuz Gadget başlangış satırının solundaki bölüme tıklayın. Bu işareti görünce kod kapanmış ve eklentinin son bitiş koduda görünmüş olur. Böylece </b:if> satırınıda gadgetın sonuna ekleyebilirsiniz.
Konuyu daha iyi anlaşılması için resimlerle açıklamaya çalıştım. Genel olarak gadgetların şablonda nasıl göründügünü, nasıl başlayıp, bittiğini ve kod yapısınıda anlamış olduk. Hemen hemen hepsi aynı yapıya sahip.
Yukarıdaki işlemde eklediğimiz kodlarda bulunan ünlem(!) işareti bir gadget’ın ana sayfada gösterilmesini engellediği gibi biz oradaki ünlem yerine eşittir(=) işareti yazarsak gadget’ımız sadece ana sayfada görünür hale gelecektir. Yani şöyle:

Ana sayfaysa gizle: <b:if cond='data:blog.pageType != &quot;index&quot;'>
Ana sayfaysa göster: <b:if cond='data:blog.pageType == &quot;index&quot;'>

Diğer sayfalarda kullanabileceğiniz kodlar


Yukarıda anlattığım işlemi blogger’ın diğer sayfaları için uygulamanız mümkün. Diğer sayfalarda kullanabileceğiniz kodları da aşağıda inceleyebilirsiniz.

Ana sayfada Göster/Gizle (index= anasayfa, etiket sayfaları ve arşiv sayfalarını içerir)
<b:if cond='data:blog.pageType == &quot;index&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;index&quot;'> (.....) </b:if>

Yazı sayfalarında Göster/Gizle
<b:if cond='data:blog.pageType == &quot;item&quot;'> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot; '> (.....) </b:if>

Arşiv sayfalarında Göster/Gizle
<b:if cond='data:blog.pageType == &quot;archive&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;archive&quot; '> (.....) </b:if>

Sabit(statik) sayfalarda Göster/Gizle
<b:if cond='data:blog.pageType == &quot;static_page&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot; '> (.....) </b:if>

İlk yazı (post) ise Göster
<b:if cond='datapost.isFirstPost'> (.....) </b:if>

Etiket-Arama sayfalarında ise Göster
<b:if cond='data:blog.searchLabel'> (.....) </b:if>

Blog’un ana sayfa URL’si ise Göster/Gizle
<b:if cond='data:blog.url == data:blog.homepageUrl'>(.....) </b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'> (.....) </b:if>

Mobil sayfalarında Göster/Gizle
<b:if cond='data:blog.pageType == "data:blog.isMobile"'> (.....) </b:if>
<b:if cond='data:blog.pageType != "data:blog.isMobile"'> (.....) </b:if>

404 Hata sayfasında Göster/Gizle
<b:if cond='data:blog.pageType == "ERROR_PAGE"'> (.....) </b:if>
<b:if cond='data:blog.pageType != "ERROR_PAGE"'> (.....) </b:if>

Bu kadar. Umarım herkeze yardımcı bir makale olmuştur. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

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

0 yorum

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

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

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

İçeriğinizi Kopyalatmayan Script

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

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

<script type='text/javascript'>
//<![CDATA[
var message="Fonksiyon Devre Dışı !"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false")
//]]>
</script>
Bu kadar. Kırmızıyla işaretlediğim text bölümünü istediğiniz gibi değiştirebilirsiniz.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

Blogger En Önemli Seo Ayarları

1 yorum

Blogger en önemli seo ayarları
Blogger meta tagları ve Seo üzerine gelen sorular üzerine bu makaleyi hazırladım. Burda bloggerda olması gereken temel meta tag ve Seo puanınızı nasıl yükseltebileceğiniz hakkında gereken başlıca bilgileri bulacaksınız. Arama Motoru Optimizasyonu anlamına gelen SEO, blog'unuza gelen trafiği artırmaya ve içeriğinizi hedef kitlenizle bir araya getirmenize yardımcı olur. Seo puanınızı yükseltmek ve arama motorları tarafından blogunuzun daha iyi indexlenmesini istiyosanız, bu yazımı okuyup uygulayın.

1- Arama Açıklaması - Meta Description

Öncelikle blogger kontrol panelinizden → AyarlarArama tercihleri segmesine tıklayıp üstteki meta etiketler açıklamasını Düzenle seçeneğini tıklayın. Evet'i seçin, Metninizi yazın ve Değişiklikleri kaydet'i tıklayın. Bu meta description'dır. Blogunuzun neyle ilgili olduğunu açıklayan kısa bilgidir. Sadece ana sayfanız içindir.
meta description - arama acıklaması 1
Aşağıda birkaç blog arama açıklaması örneği görebilirsiniz:
  • "Blogger uygulamaları ve yenilikleri hakkında güncel haberler."
  • "Sosyal ağlar ve web tasarımıyla ilgili bir blog."
  • "Yaptigim gezilere ait bir günlük."
  • "Sağlıklı, güney stilinde yemekler".

Bu özellik etkinleştirildiğinde Yayın Ayarları panelinde, her yayın için arama açıklaması girmenizi sağlayan bir "Arama Açıklaması" seçeneği görünür. Yayın ayarları blog yazılarınızı yazdığınız bölümde etiketleri vs. eklediğiniz sağdaki paneldedir.
meta description - arama acıklaması 2
Yazdığınız makalelerin arama motorlarında neyle ilgili olduğunu gösteren bir cümlelik açıklama belirtmeniz gerekir.

2- Resim özellikleri

● Konularınızda paylaştığınız resimlere mutlaka "alt" ve "title" özellikleri ekleyin. Bunları eklemek için Yayın Düzenleyicinizde bir resmi tıklayın ve Özellikler'i seçin. Resminize "alt" ve "title" özelliklerini ekleyebileceğiniz bir metin kutusu görünür. "Alt" özelliği, resmi görüntüleyemeyen (tarayıcı uyumluluğu veya görme bozukluğu gibi nedenlerle) kullanıcılar için resmin bir açıklaması niteliğini taşır, "title" özelliği ise resimle ilgili daha uzun açıklamalar eklemek için kullanılabilir.
Resim özellikleri
● Yazılarınızda kullandığınız resimlere mutlaka genişlik (width) ve yükseklik (height) değerlerini giriniz. Bu sayede arama motorlarının resim optimizasyonu için fayda sağlanabilir. Seo puanı için önemlidir.
Örnek:
<a href="resim linki"><img alt="resmin açıklaması" src="resim linki" border="0" title="resmin açıklaması" height="298" width="485"></a>
● Şimdi blogger'ın alt etiketi girilmemiş resimlerini bulup sileceğiz. Buda seo puanınızı düşüren bir etki. Yerleşim sekmesine tıklayın, Blog KayıtlarıDüzenle yapıp "hızlı düzenlemeyi göster" ve "e-postayla gönder" kutucukları işaretliyse bunlardaki işareti kaldırın. Ve kaydedin.
icon18_wrench_allbkg, icon18_edit_allbkg Bu resimlerin alt etiketi girilmediği için Seo uyumsuzluğu var malesef.
Bu resimleri tamemen silmek için ŞablonHTML'yi düzenle tıklayın. <b:include name='quickedit'/> Kodlarını bulup tek tek silin. Bunlar blogunuz üzerinden gadgetlarınızı düzenleme kodları. Düzenleme yapacaksanız, blogger kontrol panelinden yapabilirsiniz.

3- Meta keywords

Meta keywords, anahtar kelimeler için kullanılan meta etiketidir. Sitenizin içeriğinde bulundurulan ana başlıklar ve içerikte geçen kelimeler için kullanılmaktadır. Anahtar kelime meta etiketi 260 karakterden az olmalıdır. 260 karakterden uzun olması arama motorları tarafından spam olarak değerlendirilebilir.
<b:include data='blog' name='all-head-content'/> kodunu bulun hemen altına asağıdaki kodları ekleyin.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title> 
</b:if>

Yukarıda gösterdiğim bölüm sizde varsa eklemenizi gerek yok. Aynı şeyi tekrar eklememeye dikkat edin. Yukarıdaki kodların hemen altına virgülle ayırarak blogunuzun anahtar kelimelerini yazın.
<meta content='kelime 1, kelime 2, kelime 3' name='keywords'/>

Meta taglarla ilgili ayrıntılı bilgiye burdan ulaşabilirsiniz. Peki Seo analizimi nerden yapabilirim diyosanız; benim çok güvendiğim WM Aracı'nı kullanabilirsiniz. Şimdilik bu kadar. Bu birinci bölümdü. Bunlar blogger seo için en önemli temel bilgilerdir. Umarım herkeze faydalı olur.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

Blogger en çok yorumlanan yazılar eklentisi

0 yorum

blogger en çok yorum yapilan yazılar eklentisi
Bugün sizler için hazırladığım blogger en çok yorumlanan yazılar eklentisini paylaşacağım. Öncelikle eklentiyi hazırlamamda yardımcı olan Yahoo pipe sistemine teşekkür ediyorum. Eklenti hakkında kısaca bilgi vermek gerekirse; ziyaretçilerinizin en çok yorum yaptığı konuları, yanındaki sayaçla birlikte blogger'ın popüler yayınlar eklentisi gibi gösterir. Sizlerle iki stil paylaştım. Rengarenk resimli ve sade beyaz resimsiz stil olmak üzere. İsteğinize göre kaç blog yazınız görünsün veya rengini, boyutlarını vs. ayarlayarak sidebar'ınızda kullanabilirsiniz. Umarım beğenirsiniz.

Blogger'a ekleme

  • Blogger kontrol panelinize giriş yapın.
  • Yerleşim Gadget Ekle HTML/JavaScript yolunu takip edin.
  • HTML/JavaScpript Gadget Ekle
  • Ve aşağıdaki kodları isteğinize göre ayarlayarak, kopyalayıp yapıştırın.
  • Kaydet diyip çıkın.

  • En çok yorum alan yazılar eklentisi 1. Stil

    <!--En çok yorum alan yazılar eklentisi by MeftunMede.blogspot.com-->
    <style>
    .yorum-sayaci {
    background:none repeat scroll 0 0 #fff;
    color:#000;
    font-family:arial,Helvetica,sans-serif;
    font-size:14px;
    float:right;
    padding:5px;
    margin:2px 3px;
    }
    .encok-yorumlananlar ul {
    font-family:arial,Helvetica,sans-serif;
    padding:0!important;
    margin: 12px 0px;
    }
    .encok-yorumlananlar ul li {
    list-style-type:none;
    color:#555;
    margin-top:-10px;
    padding:6px 0px 2px 4px;
    }
    .encok-yorumlananlar ul li a {
    color:#000;
    font-weight:700;
    text-decoration:none;
    font-size:12px;
    margin-top: 0px;
    }
    .encok-yorumlananlar ul li p {
    color:#444;
    font-weight:400;
    text-decoration:none;
    font-size:11px;
    padding: 0px;
    margin: 0px;
    }
    .encok-yorumlananlar ul li img {
    float:left;
    width:60px;
    height:60px;
    margin:0 5px 0 0;
    }
    .encok-yorumlananlar:nth-child(1n+0) {
    background:none repeat scroll 0 0 #F49A9A;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(2n+0) {
    background:none repeat scroll 0 0 #FCD092;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(3n+0) {
    background:none repeat scroll 0 0 #ee6107;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(4n+0) {
    background:none repeat scroll 0 0 #B1DAEF;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(5n+0) {
    background:none repeat scroll 0 0 #ff0;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(6n+0) {
    background:none repeat scroll 0 0 #c7e93d;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(7n+0) {
    background:none repeat scroll 0 0 #f8e000;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(8n+0) {
    background:none repeat scroll 0 0 #fcad37;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(9n+0) {
    background:none repeat scroll 0 0 #ee377a;
    width:100%;
    height:72px;
    }
    .encok-yorumlananlar:nth-child(10n+0) {
    background:none repeat scroll 0 0 #5ebded;
    width:100%;
    height:72px;
    }
    </style>
     <script type="text/javascript">
    function stripTags(s,n) {
        return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
    }
    function mostcommented(feed) {
        var i;
        for (i = 0; i < feed.count ; i++) {
    var postURL = "'" + feed.value.items[i].link + "'";
    var postTitle = feed.value.items[i].title;
    var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" alt='" + feed.value.items[i].title + "'/>";
    var postDescription = feed.value.items[i].postdescription;
    var postComments = feed.value.items[i].commentcount;
    var postList = '<div class="encok-yorumlananlar"><ul><li><div class="yorum-sayaci">' + postComments + "</div>" + postthumbnail + "<a href=" + postURL + '>'
     + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
     document.write(postList);
         }
     }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?
    BlogAdresiniz=http://meftunmede.blogspot.com
    &YaziSayisi=5
    &_id=646ff03c0c31474866da421f8a061632
    &_callback=mostcommented
    &_render=json"
    type="text/javascript"></script><span style="float:right;"><a style="font-size:11px;color:#FFF !important;" href="http://meftunmede.blogspot.com">Created by Meftun MEDE</a>
    </span>
    <!--En çok yorum alan yazılar eklentisi by MeftunMede.blogspot.com-->
    

    En çok yorum alan yazılar eklentisi 12. Stil

    En çok yorum alan yazılar eklentisi 2. Stil

    <!--En çok yorum alan yazılar eklentisi by MeftunMede.blogspot.com-->
    <style>
    .yorum-sayaci {
    background:none repeat scroll 0 0 #292D30;
    width:30px;
    float:left;
    font-weight:700;
    font-size:17px;
    font-family:arial,Helvetica,sans-serif;
    text-align:right;
    color:#FFF;
    text-shadow:4px 1px #202022;
    position:relative;
    top:5px;
    margin:0 5px 5px;
    padding:8px 7px 8px 0;
    }
    .yorum-sayaci:after {
    content:" ";
    position:absolute;
    width:0;
    height:0;
    top:35px;
    right:6px;
    border-color:#292D30 #292D30 transparent transparent;
    border-style:solid;
    border-width:5px 8px;
    }
    .encok-yorumlananlar ul {
    font-family:arial,Helvetica,sans-serif;
    margin:4px 0;
    padding:0!important;
    }
    .encok-yorumlananlar ul li {
    list-style-type:none;
    color:#555;
    border-bottom:1px dashed #dedede;
    line-height:20px;
    margin:0;
    padding:5px 0;
    }
    .encok-yorumlananlar ul li a {
    color:#000;
    font-weight:700;
    text-decoration:none;
    font-size:12px;
    margin-top:0;
    }
    .encok-yorumlananlar ul li p {
    color:#444;
    font-weight:400;
    text-decoration:none;
    font-size:11px;
    margin: 0px 0px 0px 48px;
    padding:0;
    }
    .encok-yorumlananlar:nth-child(n) {
    background:none repeat scroll 0 0 #FFF;
    width:100%;
    height:auto;
    }
    </style>
     <script type="text/javascript">
    function stripTags(s,n) {
        return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
    }
    function mostcommented(feed) {
        var i;
        for (i = 0; i < feed.count ; i++) {
    var postURL = "'" + feed.value.items[i].link + "'";
    var postTitle = feed.value.items[i].title;
    var postDescription = feed.value.items[i].postdescription;
    var postComments = feed.value.items[i].commentcount;
    var postList = '<div class="encok-yorumlananlar"><ul><li><div class="yorum-sayaci">' + postComments + "</div>" + "<a href=" + postURL + '>'
     + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
     document.write(postList);
         }
     }
     </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?
    BlogAdresiniz=http://meftunmede.blogspot.com
    &YaziSayisi=5
    &_id=646ff03c0c31474866da421f8a061632
    &_callback=mostcommented
    &_render=json"
    type="text/javascript"></script><span style="float:right;"><a style="font-size:11px;color:#FFF !important;" href="http://meftunmede.blogspot.com">Created by Meftun MEDE</a>
    </span>
    <!--En çok yorum alan yazılar eklentisi by MeftunMede.blogspot.com-->
    

    En çok yorum alan yazılar eklentisi 2. Stil

    Özelleştirme

    Kodlar içinde mavi renkle işaretlediğim yerlerde arkaplan renklerini değiştirebilirsiniz.
    Kırmızıyla işaretlediğim yerlerde;
    BlogAdresiniz= Blog adresinizi yazın.
    YaziSayisi=5 ; Kaç blog yazınız görünsün, çoğaltabilir veya azaltabilirsiniz.
    postDescription,10 ; Eklentideki konu açıklamasının karakter sayısal değerini azaltabilir yada çoğaltabilirsiniz.
    Son olarak eklenti yorumların sayısını belirtiyor. Eğer "15" yazması yerine "15 yorum" yazmasını isterseniz; aşağıda gösterdiğim değişikliği yapabilrsiniz.
    <div class="yorum-sayaci">' + postComments + "</div>"
    
    Yerine
    <div class="yorum-sayaci">' + postComments + " Yorum" + "</div>"
    
    Bu bölümü yazabilirsiniz.
    Bu kadar. Kodu denemek için Online html editor'ü kullanabilirsiniz.
    Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    Mobil ve Tablet cihazlarla Uyumlu Resim Slider ve Galerileri

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

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