PC Merkez - Bilgisayar Telefon

Bugün sitenize renk katacak bir eklentiyi sizlerle paylaşmak istiyorum. 18 sosyal medya, 1 rss butonu, beyaz ve siyah olmak üzere 2 renk temasıyla uygulaması kolay bir eklenti. Sitenizin Sol, Sağ, Yukarı veya sayfanın aşağı tarafında konumlandırabileceğiniz şık bir eklenti. Dilerseniz lafı fazla uzatmadan anlatıma geçeyim.

Blogger'a JQuery Animasyonlu Sosyal Medya Sekme Butonlarını ekleme:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<div id="mefmed">
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/Meftun_Sosyal_bar.js"></script>
</div>
<link href='http://meftun-mede.googlecode.com/svn/trunk/Meftun_Sosyal_bar.css' rel='stylesheet' type='text/css'/>
<!-- Blogger İçin Sosyal Medya Bar By MeftunMede.blogspot.com -->
<script type="text/javascript">
$(document).ready(function(){
$.mefSocialBar({
items: {
facebook: { url: '#', text: 'Facebook Profili' },
twitter: { url: '#', text: 'Twitter Profili' },
google: { url: '#', text: 'Google+ Profili' },
youtube: { url: '#', text: 'Youtube Profili' },
pinterest: { url: '#', text: 'Pinterest Profili' },
stumbleupon: { url: '#', text: 'Stumbleupon Profili' },
reddit: { url: '#', text: 'Reddit Profili' },
rss: { url: '#', text: 'RSS Feed' },
},
show: 8,
position: "left",
skin: "clear"
});
});
</script>

Özelleştirme

• URL'yi ekleme: "#" işaretli olan yerlere sosyal medya hesaplarınızı yazın.
• Pozisyonları değiştirme: Widget konumunu isteğinize göre değiştirin:
  Kodlama:
  “left” = Sol,
  “right” = Sağ,
  “top” = Yukarı,
  “bottom” = Aşağı
  Unutmayın: Büyük Harfler kullanmayın, aksi takdirde çalışmaz.
• Sosyal Medya butonları: Sosyal medya butonları yukarıdaki örnekte "8" tanedir. Azaltmak veya çoğaltmak isterseniz; istemediğiniz buton bölümünü script kodundan silerek, yada istediğiniz butonu ekleyerek, show: 8, yazan yerdeki sayısal değeri 10 veya 7,6,5 gibi değiştirebilirsiniz.
• Kullanabilir Butonlar: Yeşille işaretlediğim yerlerde bu sosyal medya iconlarını kullanabilirsiniz;
  twitter, facebook, rss, google+, youtube, stumbleupon, reddit, pinterest, instagram, vk, linkedin, tumblr, xing, myspace, digg, flickr, foursquare, vimeo, soundcloud
• Arayüzü değiştirme: Sosyal Medya Barda iki Tema var yani “clear” = açık renk ve “dark” = siyah renkte arka plan. Güncel “clear” = açık renk temasını değiştirmek için JavaScript kodlamada “dark” = siyah renk olarak değiştirebilrsiniz.

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

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ı

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

<b:if cond='data:blog.pageType == &quot;index&quot;'>
Slider gadget'a ait kodlarınız buraya gelecek 
</b:if>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
Popüler yayınlar gadget'ına ait kodlarınız buraya gelecek 
</b:if>

Diğer sayfalarda kullanabileceğiniz kodlar

<b:if cond='data:blog.pageType == &quot;index&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;index&quot;'> (.....) </b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot; '> (.....) </b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;archive&quot; '> (.....) </b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot; '> (.....) </b:if>

<b:if cond='datapost.isFirstPost'> (.....) </b:if>

<b:if cond='data:blog.searchLabel'> (.....) </b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>(.....) </b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'> (.....) </b:if>

<b:if cond='data:blog.pageType == "data:blog.isMobile"'> (.....) </b:if>
<b:if cond='data:blog.pageType != "data:blog.isMobile"'> (.....) </b:if>

<b:if cond='data:blog.pageType == "ERROR_PAGE"'> (.....) </b:if>
<b:if cond='data:blog.pageType != "ERROR_PAGE"'> (.....) </b:if>

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>

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

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

2- Resim özellikleri

<a href="resim linki"><img alt="resmin açıklaması" src="resim linki" border="0" title="resmin açıklaması" height="298" width="485"></a>

3- Meta keywords

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

<meta content='kelime 1, kelime 2, kelime 3' name='keywords'/>