25 Aralık 2015 Cuma

Bilmeyenler için blogger SEO teknikleri

  Hiç yorum yok

Bilmeyenler için blogger SEO teknikleri

Bu yazı blogger kullanıcılarını az da olsa SEO konusunda bilgilendirmek amacıyla yazılmıştır.

Belki bir çok blog yazarının ya da web site sahiplerinin kafasında SEO nedir? sorusu yatmaktadır. Kısaca özetlemek gerekirse SEO web sitenizin sağlık durumudur. Arama motorları ve kodlama açısından optimize edilmesidir. Bu yazımda özellikle blogger kullanıcıları için bir kaç küçük SEO tekniğinden bahsedeceğim. Böylelikle en çok yapılan hataları da en aza indirmiş olacağız.

Bilmeyenler için blogger SEO teknikleri

1. Başlık hataları

Örnek yazı başlığımız

En çok yapılan SEO Hataları olsun. Yazı başlığında olan bazı Türkçe karakterler bağlantı adresimizde gözükmeyecektir. Dolayısıyla aramalarda da çıkması zor olacaktır.


Üstteki resimde de gördüğünüz gibi otomatik bağlantı Yapılan ve hataları kelimelerindeki I harflerini görmedi. Bu sorunu ortadan kaldırmak için ya uyumlu başlıklar girmemiz ya da hemen altta bulunan Özel Kalıcı bağlantı sekmesini tıklayarak bağlantı adresimizi elle düzeltmeniz gerekmektedir.

2. Etiketler

Etiketler, yazınızın kalbi gibidir. Öncelikle yazı başlığınızı kopyalayarak etiketler kısmına yapıştırma işlemini her zaman yapın. İlk etiketiniz her zaman konu başlığınız olsun. İkinci etiketiniz ise; oluşturduğunuz kategoriler doğrultusunda ekleyebilirsiniz. Örn. (Yaşam, Sağlık, Teknoloj). Üçüncü etiketiniz ise konunuz ne ile alakalı ise konuya uygun bir etiket olmalıdır.

En fazla 5-10 kadar etiket girmek uygundur. Çok fazla ve yazınızla alakası olmayan etiketleri girmenizin size yararından çok zararı olacaktır. 

3. Açıklamalar

Açıklamalar genellikle çoğu blog yazısının umursanmayarak boş bırakılan kısmıdır. Açıklama kısmı google aramalarında bağlantınızın hemen altında görünür. Bu yüzden ilgi çekici ve konuyu açıklayıcı bir kaç satır eklemeniz ziyaretçileriniz açısından faydalı olacaktır.

Bu yazımız için örnek olarak eklediğimiz açıklamalar şu şekildedir.
Blogger Seo Teknikleri

4. Görseller için optimize 

İnternetten indirdiğiniz bir görseli blog yazınıza eklemeden önce o fotoğrafın adını mutlaka kontrol edin. Çünkü genellikle mkdas.jpg gibi anlamsız ya da uzun isimleri olduğu için bunları değiştirmeniz SEO açısından oldukça faydalıdır.

mkdas.jpg yerine,
en-cok-yapilan-seo-hatalari.jpg
blogger-seo-teknikleri.jpg

gibi isimlerle değiştirmeniz görsel aramalarda da kolayca bulunmanızı sağlayacaktır.

Bu değişiklikten sonra yazınıza eklediğinizde ikinci bir ayar daha yapmanız gerekmektedir. Fotoğrafın üzerindeyken Özellikler bağlantısına tıklayarak alt ve title etiketi eklemeniz de önemli bir SEO ayarıdır.

Örnek:


 5. Makale içinde biçimlendirme kullanımı

Makalenizi yazdıktan sonra vurgulamak istediğiniz metinler için mutlaka biçimlendirme kullanın. Altı çizili - italic - kalın - im - alt başlık ve başlık gibi. Bu işlem hem SEO açısından faydalı hem de botlar için yol göstericidir.

Temel anlamda bu maddelere dikkat ederseniz SEO ya olumlu etkileri olacaktır.

Çoklu Demo ve Download Butonları

  Hiç yorum yok
Çoklu Demo ve Download Butonları blogger download butonları

Her ne kadar blogger üzerinden film ya da illegal program paylaşımı Google yayıncılık ilkelerini ihlal etse de, kendi özgün çalışmaları ya da PSD dosyalarını paylaşanlar için işe yarar bir eklenti olan çoklu download ve demo butonları bir çok kullanıcının işini kolaylaştıracaktır.

Bu özellik aslında diğer şekillerde de kullanılabilir. Ama ben bu özelliği genellikle kod paylaşan siteler ve demo link veren kullanıcılar için paylaşacağım...


1. Blogger kumanda panelinden / şablon /HTML Düzenle / ]]></b:skin> kodunu aratarak hemen üzerine aşağıdaki kodları ekleyin.


/* Demo ve Download */
.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border-radius:3px;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#20a3cb;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.download:hover h1{margin-left:100%;opacity:0.7;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#20a3cb;color:#fff;border-radius:2px;}
.download-info{background:#1c94b9;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.download-info h1{background-color:#20a3cb;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background-color:#a3acb2;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.demo:hover h1{margin-left:100%;opacity:0.7;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#a3acb2;color:#fff;border-radius:2px;}
.demo-info{background:#8f979c;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.demo-info h1{background-color:#a3acb2;}

2.Temanızı kaydederek çıkın.

3.CSS kodlarımınızı ekledikten sonra butonların gözükmesi için yazılarınızın sonuna (HTML) kısmına gelerek eklemeniz yeterli olacaktır.

Her download adresi farklı olacağı için, HTML kodlarını her zaman elle yazı sonuna eklemeniz gerekir.

<div class="download download-info">
<h1> DOWNLOAD </h1>
<ul>
<li><a href="#" target="_blank"> DOWNLOAD 1</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 2</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 3</a></li>
<li><a href="#" target="_blank"> DOWNLOAD 4</a></li>
</ul>
</div>
<div class="demo demo-info">
<h1> DEMO </h1>
<ul>
<li><a href="#" target="_blank"> DEMO 1 </a></li>
<li><a href="#" target="_blank"> DEMO 2 </a></li>
<li><a href="#" target="_blank"> DEMO 3 </a></li>
<li><a href="#" target="_blank"> DEMO 4 </a></li>
</ul>
</div>

Demo
click to view


24 Aralık 2015 Perşembe

Wordpress tarzı renkli kategoriler widgeti

  Hiç yorum yok
Eklenti tamamen etiketlere bağlı olarak çalışmaktadır. Yani burada yapacağımız işlem sadece temamızda bulunan label başlığı için still dosyası atamak olacak. Ayrıca kodlar bazı temalar için uyumlu olmayabilir. 


Bu kodları daha önce hatırlarsanız kendi blog sayfamda paylaşmıştım. Fakat hem blogumdan bu tür yazıları kaldırmak hem de Blogduzenim sayfasını zenginleştirmek adına buraya taşımayı daha uygun buldum.
Bu eklentiyi wordpress sitelerde çok görmüşsünüzdür. Ama blogger için pek de rastlanır bir eklenti değildir. Bu yüzden fark yaratmak isteyenlerin aradığı bir eklenti de diyebiliriz.


Eklentimizin resmi şu şekildedir. 
blogger menü

Canlı örneği de zaten sayfamda mevcut. Şimdi gelelim kodlarımıza.

Öncelikle sayfanıza etiketlerinizi ekleyin. Ayarlarınızın da  şu şekilde olmasına dikkat edin. 

wordpress style blogger menu
Her etiketteki kayıt sayısını ister gösterin ister saklayın size kalmış. 

Şimdi kumanda panelinde şablon düzenle - HTML bölümüne tıklayınız. Aşağıda vermiş olduğum kodları kopyalayıp /head ın hemen üstüne yapıştırın. Hepsi bu kadar. Biraz daha farklılık isteyen arkadaşlar renk kodlarıyla oynayıp tek renk ya da daha farklı renkler de kullanabilir. 



<style type='text/css'>


/* Silversword */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:0;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;transition:all .3s}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:&quot;&quot;;position:absolute;width:2px;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{background:#45a2db;position:relative;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:all .3s}
#sidebar-wrapper .label-size a{display:inline-block;color:#fff;padding:4px 6px;font-weight:400;transition:all .3s}
#sidebar-wrapper .label-count{display:inline-block;background:#3a91c7;color:#fff;padding:5px 8px;text-align:center;transition:all .3s}
#sidebar-wrapper .label-size a:hover{color:#fff;text-decoration:underline}
#footer-wrapper .label-size{background:#2e2e2e;color:#eee;display:block;float:left;margin:0 1px 1px 0;font-size:11px;transition:initial;}
#footer-wrapper .label-size a{display:inline-block;color:#eee;padding:4px 6px;font-weight:400;transition:all .3s}
#footer-wrapper .label-size a:hover {color:#fff;text-decoration:underline}
#footer-wrapper .label-count{white-space:nowrap;background:#2e2e2e;display:inline-block;color:#eee;padding:5px 8px;text-align:center}
#footer-wrapper .Label li{padding:5px 0;margin:0;text-align:left;border-bottom:1px solid #444;transition:all .3s}
#footer-wrapper .Label li a {color:#eee;transition:all .3s;}
#footer-wrapper .Label li span{background:#2e2e2e;float:right;color:#eee;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;transition:all .3s;}
#footer-wrapper .Label li a:hover,#footer-wrapper .Label li:hover,#footer-wrapper .Label li span:hover {color:#fff;text-decoration:underline}
</style>

Kodlar bazı temalarda çalışmayabilir lütfen bunu göz önünde bulundurun

İlk kez 1 delinin günlükleri sayfasında paylaşılmıştır!


23 Aralık 2015 Çarşamba

Makale uzunluğuna göre zaman sayacı

  Hiç yorum yok
Makale uzunluğunun ne kadar zamanda okunulabilir olduğunu gösterir.

Söz verdiğim gibi, her yerde olmayan ve farklı eklentileri paylaşıyorum. Çünkü uzun zamandır blogger kullanmama rağmen ilk defa böyle bir eklentiye denk geldim. Eklenti ArlinaDesign sitesinden alınmadır arkadaşlar. Ben sadece kurcalayıp ne işe yaradığını çözüyorum o kadar.
Makale uzunluğuna göre zaman sayacı blogger

Bu eklenti her makale için bir zaman sayacı oluşturuyor. Örneğin çok çok uzun bir makale ise okuyucuyu 4 dk ya da 5 dk şeklinde bilgilendiriyor.

Ya da çok kısa yazılar için (Bir dakikadan az) şeklinde bir bilgilendirme yer alıyor. Çünkü herkesin zamanı kıymetli herkes hemen okuyup geçeyim derdinde. Kodu tabiki kendi sayfamda uyguladım. Eğer hemen demoyu görmek isterseniz en alttaki demo adresinden bakabilirsiniz. Çok uzun ya da çok kısa bir makaleye girdiğinizde zaman sayacının değiştiğini fark edeceksiniz.

Kullanmak isteyenler için işte kodlar.


Öncelikle aşağıdaki kodları temanızdaki </head> kodunun hemen üzerine ekleyin.


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Bu kodu eğer daha önceden eklediyseniz bu adımı atlayın.


1. Blogger kumanda panelinden > Şablonu düzenle ve HTML Düzenle diyerek > aşağıdaki kodları ]]></b:skin> ya da </style> kodunun hemen üzerine yapıştırın.


span.right {float:right;display:inline-block;padding:10px 5px;}


2. Daha sonra </body> kodunun hemen üzerine aşağıdaki kodları ekleyin.


<script type='text/javascript'>
//<![CDATA[
// Reading Time Author: Michael Lynch http://michaelynch.com Licensed under the MIT license
!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="min";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="min";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="min";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="min";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="min";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="min";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="min";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="min";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)u>0?e(a.readingTimeTarget).text(a.prependTimeString+u+" "+l):e(a.readingTimeTarget).text(a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);
$(function(){$('.post-body').readingTime();});
//]]>
</script>


Bu kodlar herhangi bir yazınızın toplam okuma süresidir.

wordsPerMinute:270 : 1 dakikaya tekabül eden kelime sayısır.

Less than a minute : Bir dakikadan az bildirimidir.


3. Son olarak temanızda <div class='post-header'> kodunu aratarak altına ya da uygun gördüğünüz başka bir alana aşağıdaki kodları ekleyin.


<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/></span>


4. Temanızı kaydedin.

Demo
click to view


11 Aralık 2015 Cuma

Blogger kendini güncelliyor

  Hiç yorum yok
Blogger için yeni güncellemeler geliyor

Son aylarda gelen blogger güncellemeleri

Çoğu kişi bir web site açarken wordpress mi açsam yoksa Blogger mi diye düşünürken SEO açısından daha iyi olduğu ve daha hızlı olduğunu düşünerek wordpress tercih ediyor.Öte yandan daha önceden de wordpress kullananlar için blogger oldukça karmaşıktır. Bu durum tabi blogger kullanıcıları için de geçerli olduğu için wordpress karmaşık gelmektedir.
Son aylarda blogger uzun zamandan beri ilk kez kendini güncellemeye başladı. İsterseniz şimdi bu güncellemelerin neler olduğuna göz atalım..


1. Site haritası

Google'ye göndermiş olduğunuz
atom.xml?redirect=false&start-index=1&max-results=500 

gibi sitemap adresleri yerine sadece

sitemap.xml 

adresinden site içeriğinizdeki konuları görmektedir. Bu yüzden sitemap.xml adresinizi mutlaka google haritalarına eklemeniz gerekmetedir.

Ayrıca robot.txt dosyanızda da sitemap.xml tanımlı olması gerekiyor.


2. Resim yükleme

Yazı içine resim ekle butonu yardımıyla resim yüklemek yerine masaüstünüzde bulunan bir resmi sürükle bırak yöntemiyle de artık yazılarınızın bulunduğu alana yükleyebilirsiniz. 
Oldukça kullanışlı ve güzel bir yenilik. 

3. Öne çıkan yayın widgeti

Güzel ve oldukça kullanışlı bir widget olan öne çıkan yayın. Vurgulamak istediğiniz bir konudan bir paragraf oluşturarak blog ziyaretçilerinize daha kolay bir gezinme imkanı sunuyor. 



Blogger hakkında yeni haberlere ulaşmak ve güncellemelerden haberdar olmak için takipte kalın. 

20 Kasım 2015 Cuma

Etiket sınırlandırma nasıl yapılır?

  Hiç yorum yok
Blogger labels Etiket sınırlandırma nasıl yapılır?

Etiketlere bağlı olan bağlantı adreslerine tıklandığında gösterilen post sayısını düzenleme

Blogunuz için küçük dokunuşlar her zaman faydalı olacaktır. Yaptığınız her değişiklikle beraber kendinize şu soruyu sormalısınız. Blogum şu anda daha mı kullanışlı? Görsellik bir yana ziyaretçilerinizin sayfanızda kolaylıkla gezebilmesi aradığını kolayca bulabilmesi çok önemlidir. Burada kesinlikle etiketlerin rolü oldukça büyüktür.

Fakat özel olarak editlenmiş temalar dışında bir çok tema etiket sınırlandırma işlemini kullanmıyor.

Etiket sınırlandırma nedir? Ne işe yarar?

Etiket sınırlandırma nasıl yapılır?
Kafanızdaki soru işaretlerini gidermek adına biraz bundan bahsetmek istiyorum. Bir etikete tıkladığınızda karşınıza o etikete bağlı olan yazılar sıralanır. Ama bu sıralama aşağı doğru uzayıp gider. Çünkü (o etiketteki tüm yazılarınız tek seferde listelenir.) Fakat etiket sınırlandırma işlemini uyguladığınızda tıpkı ana sayfadaki gibi görüntelenecek post sayısını belirleyebilirsiniz.

Daha iyi anlayabilmeniz için şu örnek sayfaları inceleyebilirsiniz.

Etiket sınırlandırma uygulanmış sayfa : Demoyu görmek için tıklayın
Etiket sınırlandırma olmayan sayfa: Demoyu görmek için tıklayın

Uygulama :

1. Blogger kumanda panelinizden şablon > HTML Düzenle > diyerek aşağıdaki kodları arayın:

Muhtemelen iki adet olması gerekiyor.


expr:href='data:label.url'


2. Daha sonra Bulduğunuz kodları aşağıdaki ile değiştirin:


expr:href='data:label.url + &quot;?&amp;amp;max-results=5&quot;'


max-results=5 buradaki 5 etikete tıklandığında göstermek istediğiniz yazı sayısıdır.


Manuel linkler için :

Manuel olarak sayfanıza eklemiş olduğunuz bağlantılar için (sayfalar gibi) uygulamak isterseniz aşağıdaki manuel link kodu örneğine bakarak uygulayabilirsiniz.


<a href='http://1deliningunlukleri.blogspot.com.tr/search/label/yaşam'>yaşam</a>


Bağlantınızın sonuna max-results eklentisiyle aşağıdaki gibi yapabilirsiniz


<a href='http://1deliningunlukleri.blogspot.com.tr/search/label/yaşam?&max-results=5'>yaşam</a>


6. Son olarak temanızı kaydedin.


Blogger etiketleri nasil duzenlenir
Rated 4.2/5 based on 725 reviews

18 Kasım 2015 Çarşamba

Sidebar Multi-Tab widget alanı nasıl eklenir?

  Hiç yorum yok
Sidebar Multi-Tab widget alanı nasıl eklenir? 3 sütunlu blogger widget ekleme

Sidebar alanında çok fazla widget bulunan bloglar için multi-tab (3 sütunlu widget alanı) ekleme.

Multi-tab widget nasıl eklenir?

Multi-tab widget alanı nedir? öncelikle sizlere biraz bundan bahsedeyim. Bu eklenti sidebar alanında yeni bir widget alanı oluşturur, 3 sütunludur. Belki bir çoğunuz diğer blog sayfalarında da denk gelmişsinizdir. Blog sayfanızda çok fazla widget varsa, sayfanız bu yüzden aşağı doğru uzayıp gidiyorsa Blogger muti-tab widget alanı sayesinde en azından biraz sıkıştırarak daha sade ve kullanışlı bir görünüm elde etmiş olursunuz.


Kurulum :


Öncelikle Blogger kumanda panelinde > Şablona tıklayın > daha sonra HTML Düzenleyi seçerek kodlarınızı açın. >  ]]></b:skin> kodunu aratarak hemen altına aşağıdaki kodları ekleyin.


/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}


Hemen ardından </body> kodunu bularak üzerine aşağıdaki kodları ekleyin.


<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>


Daha sonra  <div id='sidebar-wrapper'> kodunu şablonunuzda aratın. Bulduğunuz kodun hemen altına da aşağıdaki kodları ekleyin.

<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>


Temanızı kaydederek çıkın.

Temanızın yerleşim alanına geldiğinizde üç sütunlu bir widget alanı göreceksiniz. Şimdi istediğiniz wigetleri bu alana sürükleyebilir ya da yeni widgetlerinizi ekleyebilirsiniz.


Demo
click to view


14 Kasım 2015 Cumartesi

RSS Aracı ile blog takibi nasıl yapılır?

  Hiç yorum yok
Bir çok blogu aynı anda takip etmek için ipuçları.

RSS Aracı ile blog takibi nasıl yapılır? blog takip etmek

RSS Aracı ile blog takibi nasıl yapılır? - Blog takip etmek en az blog yazmak kadar önemlidir. Çünkü çoğu yazar yeni yazıları için diğer bloglardan ilham alır. Fakat gün geçtikçe okuyucu kitlemizin genişlemesiyle beraber takip ettiğimiz blog sayısı da fazlalaşıyor. Hal böyle olunca blog ana sayfadan takip etmek oldukça zorlaşıyor.

Benim de takip ettiğim bloglar günden güne arterken fark etmediğim gözden kaçan yazılar oluyordu. Çünkü yeni yayınlanmış yazıların çoğunu www.Blogger.com/home sayfasından takip ediyordum. Her halde bir çok kişi de öyle yapıyordur. Ancak buna bir çözüm bulmam lazım diye düşünürken tam da aradığım şeyi buldum.

Daha önceleri google reader vardı belki hatırlayanlar vardır. Ama ne yazık ki google bu uygulamayı kaldırdı. Eğer siz de benim gibi aynı dertten muzdaripseniz, şimdi gerçekten çok işinize yarayacak bir tarayıcı eklentisinden söz edeceğim.

Takip ettiğiniz tüm blogların yazılarını anında görebileceğiniz güzel bir uzantı. Kullandıktan sonra eminim bana hak verirsiniz.
Bir kaç uzantı daha vardı fakat kullanıcı sayısı en yüksek (474,769 kullanıcı) olduğu için en verimli uzantının bu olduğunu düşündüm.

RSS Aracı ile blog takibi nasıl yapılır?


Şimdi ilk olarak google chrome tarayıcınızı açın. Rss Feed Reader uzantısını tarayıcınıza eklemek için buraya tıklayın.

Herhangi bir yere kayıt olmanız ya da email adresinizi girmeniz gerekmiyor. Tarayıcınıza ekledikten sonra tarayıcınızın sağ üst köşesinde şu şekilde  bir simge gözükür. Simgeyi gördüyseniz işlem tamamlanmıştır.
Blogları ve rss beslemelere sahip sayfaları ziyaret ettiğinizde, bu simge değişerek şu şekli alır.  

+ simgesine tıkladığınız karşınıza iki üç adet follow şeklinde buton çıkar. Takip etmek için herhangi birini seçmeniz yeterli olacaktır.

11 Kasım 2015 Çarşamba

Blogger için en kullanışlı sitemap eklentisi

  Hiç yorum yok
Blogger için en kullanışlı sitemap eklentisi

Blogger için en kullanışlı sitemap eklentisi
Toplam yazı sayısını gösteren, ayrıca post adı, tarihi ve etikete göre özel filtreleme işlemi yapabilen sade ve çok kullanışlı bir sitemap eklentisidir.

Değerli arkadaşım Ruhsuz atmaca bu sitemap eklentisi için daha önce istekte bulunmuştu. Ben de bu yüzden onu kıracak değilim. Kendi sayfamda kullanmış olduğum Blogger sitemap eklentisini kurmadan önce en altta demosuna da göz atabilirsiniz. Olur ki kafanıza yatmaz ya da beğenmezseniz diye söylüyorum.

Kurulum


Öncelikle blogger kumanda panelinizden Sayfalar / Yeni sayfa / Html bölümüne geliniz ve aşağıdaki kodları ekleyiniz. (Sayfa adınızı sitemap olarak yazmayı unutmayın)

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>


Daha sonra sayfayı yayınlayın


Ardından, Blogger Şablon > HTML Düzenle > diyerekaşağıdaki kodları kopyalayıp</style> kodunun hemen üzerine ekleyin. 


/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}


Blogunuza uygun yazı tipi ya da renkleri belirlemek isterseniz kodlar içinde küçük değişiklikler yapabilirsiniz.

Kodlarınızı ekledikten sonra Temanızı kaydedin. 

Ek bilgi:

Eğer çok fazla yazınız bulunuyorsa ve sayfanızın aşağı doğru uzamasını değil de belirli bir yükseklikte olmasını istiyorsanız yukarıda vermiş olduğumuz ilk kodu silerek yerine aşağıdaki kodları eklemeniz yeterli olacaktır :


<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<style scoped="" type="text/css">
#comments {display:none;}
</style>


İlk satırda bulunan max-height değerini değiştirerek uygun bir yükseklik verebilirsiniz.

Tavsiye:

Kodların kaynağı olan şu sayfadan, https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js kodların tamamını kopyalayarak bilgisayarınızda bir txt dosyasına kaydederek yedeğini almanızı öneririm. Dış kaynaklı bir bağlantı olduğu için silinmesi durumunda zor durumda kalmamak için yedeğini almakta fayda var.


Demo
click to view

6 Kasım 2015 Cuma

Kodsuz son yazılar ve yorumlar nasıl gösterilir?

  Hiç yorum yok
Kodsuz son yazılar ve yorumlar nasıl gösterilir? Blogger

Kod kullanmadan son yorumlar ve yazılar nasıl gösterilir?

Kodsuz son yazılar ve yorumlar nasıl gösterilir?
Daha önce nasıl fark etmediğimi bilmiyorum. Ama bugün rss aracılığı ile hiç bir kod kullanmadan blog sayfamızda son yorumları ve yazılarımızı nasıl göstereceğimizi fark ettim..

Adımları uygulamadan önce Feedburneri daha önceden kurmuş olmanız gerekiyor tabi. Çoğu blogda olduğu için o yüzden bu adımı geçiyorum.

Blogger kumanda panelinizden sırasıyla Yerleşim/Gadget ekle/ İçerik takibi widgetini seçiyoruz.

Daha sonra karşımıza çıkan pencerede içerik takibi urlsi yazısını göreceksiniz.

Oraya,

Yorumlar için : http://blogadınız.blogspot.com/feeds/comments/default

Son yazılar için : http://blogadınız.blogspot.com/feeds/posts/default

Şeklinde yazmanız yeterli olacaktır.

Sevgiyle kalın.

Bloggeri geliştirmeye ve yenilikleri keşfetmeye devam..

4 Kasım 2015 Çarşamba

Google Plus hesabı blogger için önemli midir?

  Hiç yorum yok
Google Plus hesabı blogger için önemli midir? Google plus blogger


Google Plus ın blogger ve diğer web siteleri için önemi nedir?

Giriş

Google Plus hesabı blogger için önemli midir?
Google Plus Dünya'ca ünlü arama motoru devi olarka adlandırılan Google'nin bir diğer paylaşım ağıdır. Peki Google Plus ın blog sayfamıza ve internet sitelerimize ne gibi faydaları olabilir.

Öncelikle şunu iyi bilmelisiniz. Google kendi paylaşım ağı olan Plus gönderilerine mi öncelik verir yoksa diğer paylaşım ağlarındaki gönderilere mi? Ya da siz google olsanız hangisine öncelik verirdiniz? Ya da hangisine ulaşmak sizin için daha kolay olurdur?

Tüm bu soruların cevabı Google Plus tır.

Google Plus ın faydaları


Google bünyesinde barınan bir ağ olduğunu söylemiştik. Bu durumda her blog sayfasının ve web sitesinin mutlaka bir google plus hesabı olmalıdır. İleri ki zamanda bunun ne kadar önemli olduğunu kullanmaya başladıktan sonra fark edeceksiniz.

Google Plus vs Blogger takipçi widgeti


Bu ikisi arasında çok fark vardır. Blog sayfalarınıza eklemiş olduğunuz takipçi widgetleri sadece (sizin diğer blog yazarlarıyla olan bağlantınızdır)
Onlarda sizin gibi blogger.com sayfasına giriş yaptığında kolaylıkla sizin yazılarınıza ulaşır.
Fakat google plus ise Dünya'ya açılan pencerenizdir. Sadece bloğunuzu takip edenler değil etmeyenler de kolaylık la ulaşabilir. Bu yüzden blogger takipçi widgetiyle 10 züyaretçi kazanmaktansa gplus hesabınızdan 5 çerçeveye eklemiş kişi her zaman daha iyidir.

Google Plus ın işleyişi nasıl çalışır?


En çok kullanılan tarayıcılardan biri google chrome dur. Bu durumda google kendi arama motorunu size anasayfa olarak sunar. Kesinlikle bir çoğumuzun anasayfasının google olduğunu söylemek de yanlış olmaz.

Örneğin Gplus hesabı olan bir sayfayı kendi gplus hesabınızla takip etmeye başladınız. Bu sayfa da blogger eklentiler ya da SEO içerikli makaleler yazıyor. Google de bu konularda bir araştırma yaptığınız da (gplus hesabınızla takip ettiğiniz sayfa) yazıları size google tarafından üst sıralarda gösterilir.

Burda anlamanız gereken şudur:
Google diyor ki: Bak sen bu kişiyi takip ediyorsun ya da bu senin arkadaşın aradığın konu ile ilgili o da bir şeyler yazmış. Ve ben de arkadaşın olduğu için o kişinin yazdıklarını öncelikli olarak gösteriyorum sana.

Evet google kesinlikle bunu diyor.
Şu fotoğrafa bakarak demek istediklerimi daha iyi anlayacaksınız.


Google arama motoruma girip ''blogger SEO akıllı bağlantı'' yazarak arattığımda blogdüzenim adıyla yazmış olduğum bu yazımız 3. sırada karşımıza çıkmaktadır. Bunun nedeni dediğim gibi Blogdüzenim sayfasının gplus hesabını çerçevelere eklemiş olmamdır.

Sonuç olarak yazılarınızın daha kolay index alıp daha fazla okuyucuya ulaşmasını istiyorsanız Google Plus hesabı kullanmanız şattır. Ve unutmayın google plusta çevreniz ne kadar geniş olursa sayfanızı ziyaret eden kullanıcılar o oranla fazla olacaktır.

31 Ekim 2015 Cumartesi

Blogger renkli popüler yazılar widgeti

  Hiç yorum yok
Renkli popüler yazılar widgeti Blogger popular post widget


Renkli popüler yazılar widgeti - Blogger Popular Post widgeti şüphesiz bir blogun olmazsa olmaz temel widgetlerinden biridir. Çünkü ziyaretçileriniz mutlaka en çok okunan yazılarınızı merak edecekleri için gözleri Popüler Post yayınlarınızı arayacaktır.

İnternette aradığınızda karşınıza yüzlerce popüler yazılar eklentisi çıkabilir. Fakat Arlina Design tarafından hazırlanmış olan bu widget daha gösterişli hoş ve sıcak bir arayüze sahiptir.


Kuruluma geçmeden önce popüler yazılar ayarlarınızı lütfen aşağıdaki gibi yapın:



1. Blogger kumanda paneli > Şablon > HTML Düzenle > daha sonra aşağıdaki kodları kopyalayarak
]]></b:skin> kodunun hemen üzerine yapıştırın.



/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}


2. Yukarıdaki kodları ekledikten hemen sonra aşağıdaki kodları kopyalayarak </body> kodunun üzerine yapıştırın.


<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>


3. Temanızı kaydederek çıkın.

Eğer daha önceden eklemiş olduğunuz popüler post kodlarınız varsa kodların birbiriyle çakışmaması için lütfen silmeyi unutmayın. 

Demo
click to view

30 Ekim 2015 Cuma

Blogger Seo Akıllı Bağlantıları nasıl yapılır?

  Hiç yorum yok
Blogger Seo Smart link kurulum Blogger Seo Akıllı Bağlantıları nasıl yapılır?

Seo Akıllı Bağlantıları, makaleniz içinde bağlantı verilmesini istediğiniz kelimelere otomatik olarak bağlantı verir.

Seo Akıllı Bağlantıları nasıl yapılır? - İlk kez Blogduzenim adresinde paylaşılan Seo Smart links eklentisi. Seo açısından sizi bir adım yukarı taşıyacaktır.


SEO Smart Link Nasıl Çalışır?


Örneğin apple ürünleri ile bir bloga sahip olduğunuz varsayarsak, eklenti içindeki etiket adına apple yazdığınız takdirde yazdığınız tüm yazılarınızdaki apple kelimesi otomatik olarak bir bağlantı haline gelecektir.

SEO Smart Link Kurulum:


Blogger kumanda paneli > Şablon > HTML Düzenle > daha sonra aşağıdaki kodları kopyalayarak </body> kodunun hemen üzerine yapıştırın.


<script type='text/javascript'>
function smartLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout(&quot;f.createAnchor()&quot;, 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new smartLink();
f.add(&quot;SEO&quot;, &quot;http://www.blogduzenim.blogspot.com/&quot;);
f.startScript();
</script>


Kod içindeki SEO link vermek istediğiniz kelime ve http://www.blogduzenim.blogspot.com adresi o kelimeye vermek istediğiniz bağlantı adresidir.  Bu bölümleri istediğiniz şekilde düzenleyerek temanızı kaydedin.


Ek Bilgilendirme : 

Bağlantı isimleri büyük küçük harf duyarlı olduğu için yazdığınız her kelimede gözükmeyebilir. Örneğin kod içine bağlantı adınızı Blogger olarak yazdığınızda makale içindeki blogger ya da BLOGGER kelimeleri ototmatik bağlantı almayacaktır.


Birden fazla kelime için otomatik bağlantı oluşturmak istiyorsanız. Aşağıdaki şekilde ikinci ve üçüncü satır olarak ekleyebilirsiniz.


f.add(&quot;SEO&quot;, &quot;http://www.blogduzenim.blogspot.com/&quot;);
f.add(&quot;Template&quot;, &quot;http://www.blogduzenim.blogspot.com/&quot;);
f.add(&quot;Blogger&quot;, &quot;http://www.blogduzenim.blogspot.com/&quot;);


Uyarı ! 

Ekleyeceğiniz anahtar kelimeler 1 ile 3 arasında olmalıdır. Aşırı anahtar kelimeler tavsiye edilmez. 

27 Ekim 2015 Salı

Blogumu nasıl duyururum?

  Hiç yorum yok
Blogumu nasıl duyururum? Blog yazılarınız okunmuyor mu?

Blogunuzu daha fazla kitlelere duyurmanın yolları hakkında ipuçları:

Hevesle yeni bir blog açmak:

Günümüz istatistiklerine göre 260 milyon blog olduğu tahmin ediliyor. Hatta yakın arkadaşlarınız ya da tanıdıklarınız arasında blog yazarları da olabilir. Siz de bu geniş blog ağına katılıp ilk blogunuzu hevesle açarsınız. İlk başlangıç her zaman en zor olan kısımdır. Düzeni oturtmanız hayli zaman alabilir. Gerek teması, gerekse ne tür içerikler paylaşacağınız konusunda ciddi bir çalışma yapmalısınız.

Yazılarınızı paylaştıktan sonra:

Herşeyin tamam olduğundan emin olmaya başladığınız anda yazılarınızı yazmaya başlarsınız. Bir kaç ziyaretçi de kazanmışsınızdır muhtemelen. Ama yine de yazılarınıza yapılan yorumlar, paylaşımlar ya da ziyaretçi sayısı sizi tatmin etmeyecektir. Kendinizi ''acaba nerede yanlış yapıyorum'' sorusunu sorarken bulacaksınız.

Hayır aslında siz her şeyi doğru yaptınız. Sadece biraz desteğe ihtiyacınız var. 

Sosyal ağlar bu konuda elbette size yardımcı olacaktır. Yazdığınız yazıları facebook, twitter gibi ağlarda paylaşmanızın olumlu etkileri mutlaka olacaktır. Fakat yine de yeteri kadar ziyaretçi almadığınızı düşünüyorsanız o halde farklı şeyler de denemelisiniz.

Faydalı kaynaklardan yardım almak:

Çok eski bir blog yazarı arkadaşınızdan bu konuda yardım isteyebilirsiniz. Sizin adınıza paylaşım yaparak ufak da olsa bloğunuzun duyulmasına katkı sağlayabilir. Bu işi özenle yapan blog siteleri de mevcuttur.
Blogumutanit.com'da bu sitelerden biridir. Her ne kadar arkadaşlarımızdan ya da sosyal ağlardan gelen trafikle ayakta durmaya çalışsak da ''yeni bloggerler için'' blogumutanit sayfası çok faydalı olacaktır.

Nasıl çalışır?

Blogumutanit sayfası yerel bir blog ağı sayfasıdır. Veritabanı başta kişisel bloglar olmak üzere bir çok kategoride blog barındırır. Yeni bir blog keşfetmek isteyenler için de ayrıca güzel bir kaynaktır. Blogunuz blogumutanit dizinine eklendiğinde artık farklı kitlelerden ziyaretçiler sayfanızı ziyaret edecek ve yazılarınız daha fazla insana ulaşmaya başlayacaktır.

Önünüzde yüksek bir duvar olduğunu düşünün. Duvarın arka tarafında ise yüzlerce milyonlarca insan. Emin olun ki o insanlar arasında size ulaşmak isteyenler olacaktır. Ama şunu da bilmelisiniz ki önce sizin o duvarı aşıp o insanlara kendinizi gösterip, ben burdayım demeniz gerekir.

Ben bile bazen öylesine güzel bloglar görüyorum ki şimdiye kadar nasıl fark etmemişim ya da denk gelmemişim diye merak ediyorum. Nedeni aslında gayet açık tam da üzerinde durduğumuz konu ile alakalı. O blog herhangi bir ağ üzerinden tanıtım yazısı yayınlamamıştı. Siz de en azından blogumutanit gibi ağlara blogunuzu ekleyerek yazılarınızın daha fazla kitleye ulaşmasını sağlayabilirsiniz.

25 Ekim 2015 Pazar

Mobil ziyaretçileriniz için whatsapp share butonu

  Hiç yorum yok
Blogger whatsapp nasıl eklenir?

Blog sayfanıza mobilden giren ziyaretçiler için whatsapp share buttonunu gösterir.

Ocak 2015 yılı itibari ile 700 milyon aktif Whatsapp kullanıcısı olduğu tahmin ediliyor. Bu gerçekten ciddi bir rakam. Bu durumda sayfamızı ziyaret eden ziyaretçilerimiz için whatsapp share butonu eklememiz bizim yararımıza olacaktır. Aslında ne zamandır bu kodu arıyordum bulur bulmaz da hemen paylaşmak istedim.
Kodlar sadece mobilde ve yazı sayfalarında gözükür şekilde ayarlıdır.

Blogger whatsapp butonu

Nasıl eklenir?
Blogger kumanda panelinizden Şablon / HTML Düzenle diyerek
Kodları paylaşım butonlarınızın olduğu kısımda uygun gördüğünüz bir yere eklemeniz yeterli olacaktır.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share on Whatsapp : </span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>
</b:if></b:if>

Kodlar içinde yapabileceğiniz küçük değişiklikler :
wa_btn_m (Standard buton için) veya
wa_btn_l (Büyük WhatsApp butonu için)

Blogger mobil ziyaretçileriniz için whatsapp share butonu

Yedek js kodlar:
Olur ki ileri bir zamanda kodlarınızda bir sıkıntı yaşarsanız aşağıdaki kodları kopyalayıp kendi dropbox hesabınıza ya da hostunuza atarak url ile çağırabilirsiniz.
(function(){"use strict";var root=this,WASHAREBTN=function(){this.buttons=[],this.isIos===!0&&this.cntLdd(window,this.crBtn)};WASHAREBTN.prototype.isIos=navigator.userAgent.match(/Android|iPhone/i)&&!navigator.userAgent.match(/iPod|iPad/i)?!0:!1,WASHAREBTN.prototype.cntLdd=function(win,fn){var done=!1,top=!0,doc=win.document,root=doc.documentElement,add=doc.addEventListener?"addEventListener":"attachEvent",rem=doc.addEventListener?"removeEventListener":"detachEvent",pre=doc.addEventListener?"":"on",init=function(e){("readystatechange"!==e.type||"complete"===doc.readyState)&&(("load"===e.type?win:doc)[rem](pre+e.type,init,!1),!done&&(done=!0)&&fn.call(win,e.type||e))},poll=function(){try{root.doScroll("left")}catch(e){return void setTimeout(poll,50)}init("poll")};if("complete"===doc.readyState)fn.call(win,"lazy");else{if(doc.createEventObject&&root.doScroll){try{top=!win.frameElement}catch(e){}top&&poll()}doc[add](pre+"DOMContentLoaded",init,!1),doc[add](pre+"readystatechange",init,!1),win[add](pre+"load",init,!1)}},WASHAREBTN.prototype.addStyling=function(){var s=document.createElement("style"),c="body,html{padding:0;margin:0;height:100%;width:100%}.wa_btn{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTguMTI5LDAuOTQ1Yy0zLjc5NSwwLTYuODcyLDMuMDc3LTYuODcyLDYuODczDQoJCQljMCwxLjI5OCwwLjM2LDIuNTEyLDAuOTg2LDMuNTQ5bC0xLjI0LDMuNjg4bDMuODA1LTEuMjE5YzAuOTg0LDAuNTQ0LDIuMTE2LDAuODU0LDMuMzIxLDAuODU0YzMuNzk1LDAsNi44NzEtMy4wNzUsNi44NzEtNi44NzENCgkJCVMxMS45MjQsMC45NDUsOC4xMjksMC45NDV6IE04LjEyOSwxMy41MzhjLTEuMTYyLDAtMi4yNDQtMC4zNDgtMy4xNDctMC45NDZsLTIuMTk4LDAuNzA1bDAuNzE1LTIuMTI0DQoJCQljLTAuNjg2LTAuOTQ0LTEuMDktMi4xMDMtMS4wOS0zLjM1NGMwLTMuMTU1LDIuNTY2LTUuNzIyLDUuNzIxLTUuNzIyczUuNzIxLDIuNTY2LDUuNzIxLDUuNzIyUzExLjI4MywxMy41MzgsOC4xMjksMTMuNTM4eg0KCQkJIE0xMS4zNTIsOS4zNzljLTAuMTc0LTAuMDk0LTEuMDItMC41NS0xLjE3OC0wLjYxNUMxMC4wMTQsOC43LDkuODk4LDguNjY2LDkuNzc1LDguODM3QzkuNjUyLDkuMDA3LDkuMzAxLDkuMzksOS4xOTMsOS41MDUNCgkJCUM5LjA4OCw5LjYxNyw4Ljk4NCw5LjYyOSw4LjgxMiw5LjUzM2MtMC4xNzEtMC4wOTYtMC43My0wLjMtMS4zNzgtMC45MjNjLTAuNTA0LTAuNDg0LTAuODM0LTEuMDcyLTAuOTMtMS4yNTINCgkJCWMtMC4wOTUtMC4xOCwwLTAuMjcxLDAuMDkxLTAuMzU0QzYuNjc3LDYuOTI4LDYuNzc4LDYuODA1LDYuODcsNi43MDZjMC4wOTEtMC4xLDAuMTI0LTAuMTcxLDAuMTg3LTAuMjg2DQoJCQljMC4wNjItMC4xMTUsMC4wMzgtMC4yMTgtMC4wMDMtMC4zMDhDNy4wMTIsNi4wMjMsNi42OTQsNS4xNDYsNi41NjEsNC43OUM2LjQyOCw0LjQzNCw2LjI4LDQuNDg2LDYuMTc3LDQuNDgyDQoJCQlDNi4wNzUsNC40NzksNS45NTgsNC40NTksNS44NDEsNC40NTZDNS43MjQsNC40NTEsNS41MzMsNC40ODcsNS4zNjYsNC42NTdjLTAuMTY3LDAuMTctMC42MzcsMC41NzYtMC42NjksMS40MzkNCgkJCXMwLjU2NSwxLjcyMiwwLjY0OCwxLjg0MWMwLjA4NCwwLjEyMSwxLjE0LDEuOTkxLDIuODk3LDIuNzYyYzEuNzU2LDAuNzcsMS43NjYsMC41MzQsMi4wODgsMC41MTgNCgkJCWMwLjMyMi0wLjAxOCwxLjA1NS0wLjM4NiwxLjIxNS0wLjc4OWMwLjE2Mi0wLjQwNSwwLjE3Ni0wLjc1NSwwLjEzNS0wLjgzMUMxMS42MzksOS41MjEsMTEuNTIzLDkuNDc1LDExLjM1Miw5LjM3OXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==);border:1px solid rgba(0,0,0,.1);display:inline-block!important;position:relative;font-family:Arial,sans-serif;letter-spacing:.4px;cursor:pointer;font-weight:400;text-transform:none;color:#fff;border-radius:2px;background-color:#5cbe4a;background-repeat:no-repeat;line-height:1.2;text-decoration:none;text-align:left}.wa_btn_s{font-size:12px;background-size:16px;background-position:5px 2px;padding:3px 6px 3px 25px}.wa_btn_m{font-size:16px;background-size:20px;background-position:4px 2px;padding:4px 6px 4px 30px}.wa_btn_l{font-size:16px;background-size:20px;background-position:5px 5px;padding:8px 6px 8px 30px}";return s.type="text/css",s.styleSheet?s.styleSheet.cssText=c:s.appendChild(document.createTextNode(c)),s},WASHAREBTN.prototype.setButtonAttributes=function(b){var url=b.getAttribute("data-href"),text="?text="+encodeURIComponent(b.getAttribute("data-text"))+(b.getAttribute("data-text")?"%20":"");return text+=encodeURIComponent(url?url:document.URL),b.setAttribute("target","_top"),b.setAttribute("href",b.getAttribute("href")+text),b.setAttribute("onclick","window.parent."+b.getAttribute("onclick")),b},WASHAREBTN.prototype.setIframeAttributes=function(b){var i=document.createElement("iframe");return i.width=1,i.height=1,i.button=b,i.style.border=0,i.style.overflow="hidden",i.border=0,i.setAttribute("scrolling","no"),i.addEventListener("load",root.WASHAREBTN.iFrameOnload()),i},WASHAREBTN.prototype.iFrameOnload=function(){return function(){this.contentDocument.body.appendChild(this.button),this.contentDocument.getElementsByTagName("head")[0].appendChild(root.WASHAREBTN.addStyling());var meta=document.createElement("meta");meta.setAttribute("charset","utf-8"),this.contentDocument.getElementsByTagName("head")[0].appendChild(meta),this.width=Math.ceil(this.contentDocument.getElementsByTagName("a")[0].getBoundingClientRect().width),this.height=Math.ceil(this.contentDocument.getElementsByTagName("a")[0].getBoundingClientRect().height)}},WASHAREBTN.prototype.crBtn=function(){for(var b=[].slice.call(document.querySelectorAll(".wa_btn")),iframes=[],i=0;i<b.length;i++)root.WASHAREBTN.buttons.push(b[i]),b[i]=root.WASHAREBTN.setButtonAttributes(b[i]),iframes[i]=root.WASHAREBTN.setIframeAttributes(b[i]),b[i].parentNode.insertBefore(iframes[i],b[i])},root.WASHAREBTN=new WASHAREBTN}).call(this);


24 Ekim 2015 Cumartesi

Duyarlı sosyal paylaşım butonları

  Hiç yorum yok
Blogger duyarlı sosyal paylaşım butonları

Duyarlı sosyal paylaşım butonları ve daha fazlası için widgets sayfasını ziyaret ediniz.

Blog yazılarının altında ya da üstünde bulunan sosyal paylaşım butonlarını özelleştirip toplam paylaşım sayınızı gösterir.


Sosyal paylaşım butonları, bir blogda ya da web sitesinde olması gereken en önemli eklentilerden biridir. Ziyaretçiler sayfanıza girdiğinde bu eklentileri mutlaka kullanırlar. Böylelikle yazılarınızı daha bu eklentiyle fazla kitleye kolaylıkla ulaştırmış olursunuz. SEO seo

Eklenti bütün temalarda çalışmayabilir. Ayrıca Font Awsome iconlarını daha önceden yüklemeniz gerekmektedir.

Duyarlı sosyal paylaşım butonları kurulum:



1. CSS kodlarını ekleme:
Blogger kumanda panelinden şablon> HTML Düzenle > CTRL + F kombinasyonuyla ]]></b:skin> kodunu bulun. Hemen üzerine aşağıdaki kodları ekleyin.



/* Share Button dengan Counter untuk Blogger by http://twistedshape.blogspot.com */
.arlina_share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.arlina_share_button .share_blog {display:block;}
.arlina_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.arlina_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.arlina_share_button .share_blog ul {margin:0;padding:0;}
.arlina_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.arlina_share_button .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.arlina_share_button .share_blog .btn_fb{background:#3a579a}.arlina_share_button .share_blog .btn_fb:hover{background:#314a83}.arlina_share_button .share_blog .btn_twtr{background:#00abf0}.arlina_share_button .share_blog .btn_twtr:hover{background:#0092cc}.arlina_share_button .share_blog .btn_gplus{background:#df4a32}.arlina_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.arlina_share_button .share_blog .btn_pntrst{background:#cd1c1f}.arlina_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.arlina_share_button .share_blog .btn_linkdin{background:#2554BF}.arlina_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.arlina_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.arlina_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.arlina_share_button .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
@media only screen and (max-width: 979px) {
.arlina_share_button .share_blog .btn_linkdin {width:34px;}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn{display:none}}
@media only screen and (max-width:768px) {
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.arlina_share_button .share_blog .wrap{min-width:34px}.arlina_share_button .share_blog .btn_linkdin,.arlina_share_button .share_blog .btn_pntrst{width:30px}.arlina_share_button .share_blog ul li{margin:1px 3px}}
@media only screen and (max-width:479px) {
.arlina_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.arlina_share_button .share_blog ul li{width:25px;margin:2px;}.arlina_share_button .share_blog .wrap{display:none}.arlina_share_button .share_blog ul li .fa{width:25px}}


2. HTML kodlarını ekleme:
Aşağıdaki kodları eğer yazılarınızın üst kısmında gözükmesini istiyorsanız <data:post.body/>üzerine, alt kısmında gözükmesini istiyorsanızda
<div class='post-footer'> kodunun üzerine ekleyin.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='arlina_share_button'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='btn_fb'><a expr:href='&quot; http://www.facebook.com/share.php?v=4&amp; src=bm&amp; u=&quot; + data:post.url + &quot; &amp; t=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @BlogDuzenim - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-twitter'/></div>
<div class='wrap'>Tweet</div>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'>
<div class='wrap1'><i class='fa fa-google-plus'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot; http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-pinterest'/></div>
<div class='wrap'>Pin</div>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='btn_linkdin'><a expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp; url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title + &quot; &amp; summary=&amp; source=&quot; ' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-linkedin'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>


Twitter paylaşımlarında kullanıcı adınızın gözükmesi için lütfen kod içindeki BlogDuzenim kısmını düzenlemeyi unutmayın.



3. Javascprit kodlarını ekleme :
Son olarak aşağıdaki kodları da temanızda </body>  üzerine ekleyin.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by twistedshape.blogspot.com
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>


4. Temanızı kaydedin.



22 Ekim 2015 Perşembe

Blogger yorumları gizleme ve gösterme

  Hiç yorum yok
Blogger yorumları gizleme ve gösterme nasıl yapılır?

Blogger yorumları gizleme ve gösterme ve daha fazlası için Tips Blogger başlıklarına da göz atabilirsiniz.
 Bu eklenti blogger yorumlarınızın gizle/göster şeklinde gözükmesini sağlar. Kodlar içindeki renk kodlarıyla oynayarak temanıza uygun hale de getirebilirsiniz.


1. Blogger Kumanda Paneli/ Şablon/ HTML Düzenle kısmına geliniz :

HTML editörü sayfanızda CTRL + F tuşu kombinasyonuyla aşağıdaki kodu aratın.


<div class='comments' id='comments'>


Bulduğunuz kodu hemen aşağıdaki ile değiştirin

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
<div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>


2. Daha sonra yine temanız içinde ]]></b:skin> kodunu aratın:

Hemen üzerine aşağıdaki kodları yapıştırın.

/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}


3. Son adım olarak </body>kodunu aratın:

Bulduğunuz kodun üzerine aşağıdaki kodları ekleyin.


<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>


4. Temanızı kaydedip çıkabilirsiniz.

Demo için aşağıdaki sayfayı ziyaret edebilirsiniz :


Demo
click to view

14 Ekim 2015 Çarşamba

Blogger takipci widgetini duzenleme

  Hiç yorum yok
Blogger takipçi widgetini düzenleme

Blogger followers eklentisi ziyaretçilerin bir blogu kolaylıkla takip etmesi ve okuması için tasarlanmış blogger özelliklerinden biridir.

Genel olarak her blogun sağ ya da sol kenar (sidebar)'ında rastlarız bu eklentiye. Fakat son zamanlarda oluşan bir hata nedeniyle üye profilleri gözükmemektedir. Bir takipçi avatarına tıkladığınızda eklenti tamamen içe gömülü bir şekilde kaybolmaktadır. Eğer bu hatanın farkında değilseniz hemen şimdi kendi blog sayfanızda bir takipçi avatarına tıklayıp görebilirsiniz.

Hem bu hatayı gidermek hem de blogger takipçi eklentinizi özelleştirmek için aşağıdaki adımları uygulayın:


1. Takipçiler widgeti ekle

Blogunuzda henüz bir takipçi widgeti yoksa Blogger kumanda panelinden Yerleşim/Gadget ekle/Diğer/İzleyiciler diyerek gadgetinizi ekleyin ve kaydedin. 

Blogger followers widget edit

2. Öğeyi denetleme

Widgetinizi ekledikten sonra sayfanızda widgetinizin üzerine gelip farenizin sağ tuşuna tıklayarak öğeyi denetle sekmesine tıklayın. Hemen altta karşınıza çıkan kodlara bir kez tıklarak ardından CTRL + F kombinasyonu yardımıyla arama kutucuğunu açın. Oraya friendconnect yazarak enter tuşuyla aramaya başlayın. Ta ki şu kodlar çıkana dek aramaya devam edin. 
Blogger followers widget code
Resmi büyültmek için tıklayın
Kırmızı kutu içinde işaretlenmiş olan iki adet kodumuz var. Şimdi masaüstünüzde bir not defteri açarak bu kodları (sadece tırnak içinde olanlar) kopyalayarak not defterinize yapıştırın. 

3. Yeni bir widget ekle

Öncelikle widgetinizi eklemeden sayfanızda bulunan izleyiciler widgetini mutlaka kaldırın. Daha sonra yeni bir HTML widgeti ekle diyerek içine aşağıdaki kodları yapıştırın. 

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">
</script>
<div id="div-KISAKODBURAYA" style="width: 50%;">

</div>
<script type="text/javascript">
var skin={};skin.FACE_SIZE="32", /* 7 */
skin.HEIGHT="350", /* yükseklik değeri */
skin.TITLE="Turkish",
skin.BORDER_COLOR="#fff", /* 4 */
skin.ENDCAP_BG_COLOR="#b4a7d6", /* 1 */
skin.ENDCAP_TEXT_COLOR="#000000", /* 2 */
skin.ENDCAP_LINK_COLOR="#FF0000", /* 3 */
skin.ALTERNATE_BG_COLOR="transparent",
skin.CONTENT_BG_COLOR="#3399FF", /* 9 */
skin.CONTENT_LINK_COLOR="#006600", /* 6 */
skin.CONTENT_TEXT_COLOR="#FFFF00", /* 8 */
skin.CONTENT_SECONDARY_LINK_COLOR="#ccc",
skin.CONTENT_SECONDARY_TEXT_COLOR="#FFFFFF",
skin.CONTENT_HEADLINE_COLOR="#9933FF", /* 5 */
skin.FONT_FACE="arial", /* yazı tipi */
google.friendconnect.container.setParentUrl("/"),google.friendconnect.container.renderMembersGadget({id:"div-KISAKODBURAYA",

height:300,

site:"UZUNKODBURAYA",locale:"tr"},skin);
</script>



Şimdi not defterinize yapıştırdığınız kısa kodlarınızı (KISAKODBURAYA-2 TANE VAR) yazan yerlere ve uzun kodunuzu (UZUNKODBURAYA) yazan yere yapıştırın.

4. Blogunuza uygun olarak tasarlayın

Kodların sonunda bulunan /* 2*/ gibi numaralar aşağıdaki resimde bulunan değerleri göstermektedir. Bu şekilde takipçiler widgetinizi sayfanıza özel hale getirebilirsiniz. Ayrıca kodlar eklemiş olduğunuz herhangi bir sayfa içinde de çalışabilir. Demo için buradan bakabilirsiniz.

Blogger followers widget düzenleme
Ayrıca göz atabilrsiniz : Blog takip etmenin en kolay yolu 

Bu kodlar Portekiz ve İndonezya kaynaklı blogger sitelerinden alınmıştır.