blogger ipuclari etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger ipuclari etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Yazının Kaç Kere Okunduğunu Gösterme - Blogger

| | Comments

Blogger Page Views Post View Hit Counter

Bu yazıyı hazırlamamın asıl nedeni bir sonraki yazım için kaynak teşkil etmesidir. Bu yazımda blogger kullanıcılarının bloglarında yayımladıları yazıların kaç kere görüntülendiğini gösterebilmelerini sağlayan bir kodu paylaşacağım.

Eklentiyi temanıza eklemeden önce ilk yapmanız gereken şablonunuzun bir yedeğini almak olmalıdır. Yedeği aldığınız zaman herhangi bir sorunda kolayca çözüme ulaşabilirsiniz.

Şimdi eklentiyi nasıl ekleyeceğimizi görelim;

Blogger için Facebook Share Widget

| | Comments

Ülkemizde Facebook kullanıcı sayısı bir hayli fazla... Bu potansiyelden yararlanmak isteyenler için ufak bir ipucu vereyim. Blogunuzda ki yazılarınızın Facebook'ta kolayca paylaşılmasını istemez misiniz? İsteriz dediğinizi duyuyor gibiyim.

Blog yazılarınızın baş tarafına facebook butonunu nasıl ekleyebileceğinizi kısaca anlatayım.

İlk olarak yapmanız gereken şablonunuzun bir yedeğini almak olmalı ki herhangi bir sorun ile karşılaştığınızda kolayca düzeltebilesiniz.

Blogger'de Alınan Hataların Genel Çözümü

| | Comments

Blogger altyapısı ile yayın yapan arkadaşların en fazla dert ettiği konu Blogger'e yeni şablon yüklerken aldıkları bx- diye başlayan hatalar oluyor.

Bu hatalara karşı alınabilecek tedbir ilk olarak şablonunuzun yedeğini almayı unutmamanızdır. Herhangi bir hata durumunda sorunun nereden kaynaklandığını bulabilmeniz için elinizin altında şablonun bir yedeğinin bulunması işinizi kolaylaştıracaktır.

Öncelikle Blogger'de şablon hatasına neden olan sebeplerden bir tanesi şablonu düzenlerken kodlarda ufak eksiklikler yapmak veya yanlışlıkla silmek oluyor. Bu sorun ile karşılaşmamak için şablonunuzu düzenledikten sonra kaydetmeden önce önizleme yaparsanız hatanın nereden kaynaklandığı şablon penceresinin hemen üstünde kırmızı olarak yazacaktır. Böylelikle hatanın neden kaynaklandığını görüp kaydetmeden müdahale şansınız olacaktır.

SexyBookmarks v2 Blogger Eklentisi Entegrasyonu

| | Comments

Blogger'de blog yazılarınızın altına sosyal ağlar için paylaş butonu eklemek isteyenler için bir çok alternatif bulunmaktadır. Fakat bu alternatifler içinde görsel olarak en göze çarpıcı olanı SexyBookmarks eklentisidir.

SexyBookmarks eklentisi aslında Wordpress için hazırlanmış bir eklentidir. Fakat Cssreflex sitesi Blogger kullanıcıları için bu eklentiyi optimize etmişlerdi. SexyBookmarks v1 de sosyal ağ sitelerinin ikonları tek sıra halinde görülüyordu. ikinci versiyonda ise sosyal ağ ikonlarının yarısı alta kaydırılmış. Tabi dinamik bir yapı ile alta kaydırılmış. Altta bulunan ikonlar sürekli görünür halde bırakılmamış. Böylece sayfanızda kalabalık ve dağınık bir görüntü oluşması engellenmiş. Altta kalan ikonların görünmesi için herhangi bir sosyal ağ ikonunun üzerine geldiğinizde alt menü otomatik olarak görünüyor. Görsel olarak çok güzel görünüyor.

sexybookmarks v2 blogger, blogger eklentisi


Sözü fazla uzatmadan Cssreflex sitesinde yapılan anlatımı kısaca paylaşayım.

Blogger Yeni Etiket Bulutu Sayfa Öğesi Eklentisi

| | Comments

Blogger etiket gösteriminden çoğu blogger kullanıcısı şikayet etmiştir. Bloggerin kendi etiket gösterim yöntemini beğenmeyenler genelde üçüncü parti eklentileri kullanıyorlar.

Artık Blogger etiket gösterimine yeni bir özellik getirdi. Wordpress ten aşina olunan etiket bulutu gösterimi Blogger içinde yayına sunuldu. Hemde harici bir eklenti kullanmaya gerek duymadan blogunuza sayfa öğesi olarak etiket öğesini eklediğinizde karşınıza çıkan seçeneklerde bulut özelliğine tıklamanız gerekiyor. sadece kendi istediğiniz etiketlerin görünmesini sağlayabiliyorsunuz. Etiket sayfa öğesini etiketlerin kullanılma sıklığını görede sıralayabiliyorsunuz.

blogger,tag cloud, etiket bulutu,blogger,tag cloud, etiket bulutu,

Artık Blogger'in etiket gösterim şekli biraz daha kullanışlı oldu. Yakında yeni özelliklerde açıklanacaktır.Beklemede kalın...

Bilgi için : Blogger Buzz

Draft Blogger Nedir? Nasıl Kullanılır?

| | Comments

Blog dünyasına yeni adım atıp Blogger'de blog açan kullanıcılar genellikle bloggerin standart yönetim panelini kullanırlar. Bir müddet standart yönetim panelini kullandıktan sonra ise standart yönetim paneli bazı isteklerini karşılamıyor. Özellikle web tasarımdan anlayan blogcular için bloggerin standart yönetim paneli bazı durumlarda yetersiz kalıyor.

Peki blogger kullanıcısı olarak standart yönetim paneline mahkum mu kalacağız! Tabi ki hayır!

Blogger bildiğiniz üzere Google tarafından satın alındıktan sonra bayağı bir geliştirildi. Dünyada ve ülkemizde bir çok kullanıcı ücretsiz ve kullanışlı olan bu blog sistemine çok fazla ilgi gösterdi. Google'da bu ilgiyi karşılıksız bırakmamak için sürekli geliştirme çalışmaları yapmaktadır.

Google blogger için geliştirdiği uygulamaları veya bloggerde kullanacağımız yeni özellikleri acemi kullanıcıların etkilenmemesi için draft blogger denilen yönetim panelinden kullanıma sunuyor.

Peki draft blogger panelini kullanırsak bize ne gibi avantajları/dezavantajları olur?

Draft bloggerden blogunuza giriş yaptığınızda normal yönetim panelinden çok da farklı olmayan bir ekran ile karşılaşabilirsiniz. Fakat kullanım olarak standart yönetim panelinde bulunmayan çoğu özellik draft panelinde bulunmaktadır. Örnek verecek olursak;

blogunuza resim yüklerken draft blogger panelin biraz daha opsiyon bulunmakta (sağa/sola yasla vb.).

Draft blogger panlinden yeni yazı yazacağınız zaman karşınıza çıkan yazım editörü çok daha kullanışlı ve kullanıcı dostu diyebilirim.

Draft blogger paneli yukarıda bahsettiğim gibi bloggerin test mekanı olduğundan bazı eksileride bulunmaktadır. Bunlardan en öne çıkanı test edilen uygulamaların stabil olmaması dolayısıyla da blogunuzda bazen ufak tefek sorunlara veya çakışmalara neden olabiliyor. Draft bloggere test edilmek için yeni özellik geldiğinde bazen ufak çaplı kesintiler olabiliyor. Tabi bu durumda hemen normal blogger panelinden giriş yapıp işlemlerinizi gönül rahatlığıyla yapabilirsiniz.

Bu yazıyı hazırlamadan bir iki gün önce draft bloggerden bloguma giriş yapıp yeni yazmaya çalıştığımda yazı editörünün sorunlu olduğunu daha doğrusu yazım editörünün görünmediğini farkettim. Bende hemen normal blogger paneline geçiş yaptım ve blogumu bir iki gün bu şekilde kullandım. ara sıra draft panelini kontrol ettim ve sorun düzelince tekrar darft panelinden blogumu yönetiyorum.

Blogger'e yeni adım attıysanız sizlere tavsiyem ilk başlarda normal blogger yönetim panelini kullanmanız yönündedir. Çünkü yeni öğrenmeye başladığınız bir sistemde stabil olarak kullandığınızda karşılaşacağınız hatalara daha kolay çözüm bulabilirsiniz.


blogdergisi,online dergi,edergi,Not : Bu yazı Blog Dergisi (BD) 1. sayısı için özel olarak hazırlanmıştır. Bu yazı birinci sayıda 9. sayfada yayınlanmıştır. Blog Dergisi 1. sayıya buradan ulaşabilirsiniz. Blog Dergisi'nin birinci sayısını ister online okuyabilir, isterseniz de PDF formatında bilgisayarınıza indirebilirsiniz.

Blogger'e Otomatik Devamını Oku Özelliği Eklentisi

| | Comments

Daha önce TamBirBlog'da Blogger Otomatik Devamını Oku Bağlantısı-2 adı altında yayınlanan eklentiyi bazı blogger kullanıcılarından gelen istek üzerine biraz daha kullanışlı hale getirmeye çalıştım.

Devamını oku kısmının arka planına css kodları ile kullanışlı bir arkaplan atadım. Şimdi bazıları çıkıp biz kendimiz direk resim ile de yapabilirdik diyebilirler. Ama resim ile eklendiğinde w3 doğrulamasında hata olarak görebiliyor. En temizi css kodları ile arkaplan (backround)belirlemek.

Otomatik Devamını Oku Eklentisinin Kurulum Aşamaları

1. Css kodlarınızın en altına aşağıdaki kodları ekleyin.

/* Devamını oku */
.links {
display: block;
width: 130px;
height: 33px;
margin-top: 20px;
padding-top: 7px;
background: url(http://i30.tinypic.com/papo5.gif) no-repeat right top;
text-align: center;
text-transform: uppercase;
font-size: 10px;
color: #F3F4F4;
}
/* -------------------------------- */


Arkaplanda kullandığım resmi değiştirmek isterseniz. Üstteki http://i30.tinypic.com/papo5.gif resim dosyasının yerine kendi hazırladığınız resmin bağlantısını verebilirsiniz.

2. Tema kodları arasında </head&gt; kodunun hemen üstüne aşağıdaki kodları yerleştiriyoruz.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://tm52.weebly.com/uploads/1/3/6/1/1361393/summary-post.js' type='text/javascript'/>


Yukarıdaki kodda bulunan summary-post javascript dosyasını buraya sağ tıklayıp farklı kaydet diyerek summary-post.js dosyasını bilgisayarınıza indirin. Ardından kendi googlepages sayfanıza veya alternatif bir hosta yükleyip yukarıda bulunan http://tm52.weebly.com/uploads/1/3/6/1/1361393/summary-post.js bağlantı linki ile değiştirin.

3. Son aşama olarak temanızın kodları arasında <data:post.body/> kodunu bulup aşağıdaki kod ile değiştirin.


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url' class='links'> Devamını oku "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


Yukarıdaki aşamalar tarafımdan test edilerek yayınlanmıştır. Bütün tarayıcılarda sorunsuz çalışmaktadır.

Bu yazı hazırlanırken yararlanılan kaynaklar : TamBirBlog (Blogger Otomatik Devamını Oku Bağlantısı-2)

Blogger'e Afilli Feedback Butonu Ekleyelim

| | Comments

Benden BlogcuForum'da en fazla istek alan uygulamayı Blogger'de kullanılabilir hale getirmemi isteyen birçok kişi oldu. Elimde bir kaç proje olduğundan bu uygulamayı hazırlamam biraz gecikti. Bu gecikmeden dolayı istekte bulunan bütün arkadaşlardan özür dilerim.

Blogger'de afilli bir feedback butonu için yapmanız gereken adımları kolayca anlayabileceğiniz şekilde anlatacağım. Anlatacağım aşamaları düzgün bir şekilde yaparsanız benim blogumda sağ tarafta bulunan Feedback butonuna tıkladığınızda karşınıza çıkan iletişim ekranı gibi bir özelliğe kendi blogunuzda da sahip olabilirsiniz.



1. İlk olarak yapmanız gereken daha önce anlatımını yaptığım Colorbox uygulamasını kurmalısınız. Colorbox uygulamasının blogger entegrasyonunu iki bölüm halinde yayınlamıştım. Colorbox Bölüm 1 , Colorbox Bölüm 2


2. Colorbox uygulamasını blogunuza sorunsuz entegre ettiğinizi düşünerek anlatıma devam ediyorum. Şimdi yapmamız gereken. Blogumuzun yanına yerleştireceğimiz feedback butonunun Css kodlarını blogumuzda ki Css kodlarınına eklemeye.. Aşağıdaki kodları blogunuzun Css kodlarının en altına kopyalayın.

/* FeedBack Butonu */

#feedbackright img {
border:0px;
float:right;
position:fixed;
right:-10px;
top:160px;
}

#feedbackright img:hover {
right:-5px;
}

/* -------------------------------- */

3. Feedback butonunun css kodlarınıda ekledikten sonra sıra blogumuzun Html kod bölümünde yapacağımız düzenlemeye... Blogunuzun Html kodları arasında
<div id='wrapper'> veya <div id='outer-wrapper'>
kodlarını aratın. Eğer bu kodlar temanızda bulunmuyorsa Header div kodunun hemen üstüne aşağıdaki kodu kopyalayın.
<div id='feedbackright'>
<a href='açılmasını istediğiniz sayfanın bağlantısı' id='websayfa' target='blank'>
<img src='http://tinyurl.com/dldzh5'/>
</a>
</div>

4. Yukarıdaki kodda feedback butonunu değiştirmek için http://tinyurl.com/dldzh5 bağlanısının yerine kendi istediğiniz resmin bağlantısını verebilirsiniz.

Bu anlatımı yaparken şurada bulunan "Blogger'de Sağ Tarafa Feedback Butonu Yapalım" makalesinden yararlanılmıştır.

Soru/Öneri/Görüşlerinizi bu yazıya yorum yaparak veya iletişim formundan iletebilirsiniz!..

ColorBox Blogger Eklentisi - LightBox Klonu Bölüm 2

| | Comments

colorbox blogger
ColorBox uygulamasının anlatımını yaptığım ilk bölümde de bahsettiğim gibi biraz detaylı anlatım yaptım. Blogger'e yeni geçiş yapmış blogcu arkadaşlar için daha anlaşılır olması için detaylı anlatımın daha yararlı olacağını düşündüm. ColorBox uygulamasının ilk Demo (Demo 1) örneğinin uygulanış biçimini ilk bölümde anlattıktan sonra sırasıyla diğer demoların anlatımlarını yapalım.

Demo 2 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example2/colorbox-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example2/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.bgOpacity = '0.5';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İl bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

Demo 3 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example3/colorbox-custom.css' title='example' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example3/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true}); $('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İlk bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

Demo 4 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example4/colorbox-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example4/colorbox-custom-ie.css' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.8';
$.fn.colorbox.settings.contentCurrent = '({current}/{total})';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İlk bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

ColorBox uygulaması bütün tarayıcılarda sorunsuz çalışmaktadır. Güle güle kullanın. Bloguma destek olmak istiyorsanız sidebarda bulunan Paypal Bağış butonunu kullanarak bağışta bulunabilir. Veya blogunuzda bağlantı kutularınıza (30x30 px) aşağıdaki kodları ekleyebilirsiniz...

<a href="http://www.teknomobi.net" target="_blank" title='TeknoMobi'><img src="http://i44.tinypic.com/2u56k9t.gif" border="0" alt="teknomobi"></a>

ColorBox Blogger Eklentisi - LightBox Klonu - Bölüm 1

| | Comments

colorbox blogger
MultiBox uygulamasının Bloggger'e uyarlanması bayağı bir zamanımı almıştı. Uygulamayı bitirdikten sonra biraz mola verdim sayılır. Ama şimdi sizlere yeni ve çok beğeneceğiniz başka bir uygulamanın Blogger'e uyarlanmış halini vereceğim.

Öncelikle ColorBox uygulaması daha önce anlatımını yaptığım LightBox uygulamasının bir benzeri fakat hem görünüş hem de boyut açısından daha optimize bir uygulamadır.

ColorBox uygulamasının Blogger'de nasıl çalıştığını merak ediyorsanız aşağıda verdiğim demo adreslerinde ki resimlere tıklayabilirsiniz.

Demo 1 , Demo 2 , Demo 3 , Demo 4

Yukarıda verdiğim demo sayfaları benim blogger için hazırladığım  demo sayfalarıdır. ColorBox uygulamasının kendi demo sayfalarına buradaki sayfada bulunan view demosration bölümünden ulaşabilirsiniz.

Demoları incelediyseniz sırayla anlatımı yapmaya başlayayım.. Hangi demoyu beğendiyseniz aşağıda o demonun anlatımındaki kodları belirttiği şekilde blogunuza uygulayın. İlk anlatımı biraz detaylı olarak yapacağım diğer üç anlatımı biraz daha sade yapacağım.

Demo 1 Uygulanış Biçimi Anlatımı
  • İlk olarak Temamızda Yerleşim - HTML'yi Düzenle diyoruz. Tam şablonu yükle diyerek temamızın bir yedeğiniz alıyoruz. Ardından Widget Şablonlarını Genişlet diyoruz.
  • Şimdi temamızda </head> kodunu aratıyoruz ve bu kodun hemen üstüne aşağıdaki kodu yerleştiriyoruz.

<link href='http://tm52.110mb.com/colorbox/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://tm52.110mb.com/colorbox/example1/colorbox-custom.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example1/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&#39;jquery&#39;, &#39;1.3.2&#39;);</script>
<script src='http://tm52.110mb.com/colorbox/jquery.colorbox.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.9';
$.fn.colorbox.settings.contentCurrent = 'Resim {current} - {total}';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Üstteki kodu yerleştirdikten sonra şablonumuzu kaydediyoruz. Tema ile ilgili işlem bu kadar artık yazılarımız üzerinde düzenleme yapacağız.
  • Yazımızı yazdıktan sonra oluştur bölümünün solunda bulunan HTML'yi Düzenle kısmına girerek yazımızdaki resimlerin kodlarını görüyoruz. Eğer yazınıza resim eklediyseniz resmin kodu aşağıdaki gibi olacaktır.
<a href="http://i44.tinypic.com/5v2bdz.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i44.tinypic.com/5v2bdz.jpg" width="420" /></a>

  • Eklediğimiz resimin ColorBox penceresi ile açılması için yukarıdaki koda class="resim" etiketini ekliyoruz. Sonuçta resim kodumuz şu şekilde olacak.

<a href="http://i44.tinypic.com/5v2bdz.jpg" imageanchor="1" class="resim" title="Marylou on Cumberland Island" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i44.tinypic.com/5v2bdz.jpg" width="420" /></a>

  • Eğer birden fazla resim eklediyseniz ve bunların tek pencerede peş peşe tıklama ile gösterilmesini istiyorsanız(Demo 1 sayfasında alttaki üç resim). Yukarıda eklediğimiz etikete ek olarak birde rel="ailem" şeklinde bir etiket daha ekliyoruz. Grup olarak göstereceğimiz reismlerin kodlarıda şöyle oluyor...

<a href="http://i44.tinypic.com/ve6802.jpg" imageanchor="1" class="resim" rel="ailem" title="Me and my grandfather on the Ohoopee." style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="http://i44.tinypic.com/ve6802.jpg" width="96" /></a>

<a href="http://i44.tinypic.com/htsjrd.jpg" imageanchor="1" class="resim" rel="ailem" title="On the Ohoopee as a child" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="http://i44.tinypic.com/htsjrd.jpg" width="96" /></a>

<a href="http://i44.tinypic.com/53r4w8.jpg" imageanchor="1" class="resim" rel="ailem" title="On the Ohoopee as an adult" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="http://i44.tinypic.com/53r4w8.jpg" width="96" /></a>

  • Blogumuzda verdiğimiz herhangi bir bağlantının ColorBox penceresinde açılmasını istiyorsak aşağıdaki kodu kullanıyoruz.

<a id="websayfa" href="http://www.google.com.tr/">Web Sayfası - Iframed Content</a>

Bu bölümde ilk demonun anlatımına yer verdim. Bir sonraki yazımda diğer demoların uygulanış biçimlerine yer vereceğim.

Blogger Yorumlarını Renklendirme

| | Comments

Blogger altyapısı kullanan blogunuzda yazdığınız yazılara yapılan yorumları daha göz alıcı yapmak istermisiniz. Cevabınız evet ise şablonumuzun kodlarında ufak bir değişiklik yapmamız gerekiyor... Yapılan yorumları nasıl renklendireceğimizi anlatayım. Aşağıdaki ilk resim yorumların düzenlenlenmeden önceki hali, ikinci resim ise düzenleme yapıldıktan sonraki halidir... Resimleri büyütmek için üzerlerine tıklayın!..

blogger,blogger yorum formu, yorum formu renklendirmeblogger,blogger yorum formu, yorum formu renklendirme



  1. İlk olarak Yerleşim - HTML Düzenle kısmına geçelim.
  2. Tam Şablonu Yükle diyerek temamızın bir yedeğini alalım.
  3. Widgetları genişlet kutusuna tıklayalım.
  4. Şimdi CTRL + F yaparak temamızın kodları arasında aşağıda verdiğim kodları bulalım.

    <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd>
  5. Yukarıda vediğim kodları aşağıdaki kodlar ile değiştirelim.

    <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <b:if cond='data:comment.author == data:post.author'> <p> <div style='color:#99FF00; background-color:#FF6633;padding:5px;'> <data:comment.body/> </div> </p> <b:else/> <p><data:comment.body/></p> </b:if> </b:if> </dd>
  6. Artık gerekli düzenleyi bitirdik. Şimdi temamızı kaydediyoruz ve kontrol ediyoruz.

Yorumların arkaplanını ve yazı rengini kendi isteğinize göre düzenlemek için beşinci aşamada verdiğim kodların arasındaki color:#99FF00; renk kodu yazı rengi, color:#FF6633; renk kodu da arkaplan rengidir. istediğiniz gibi renklendirme yapabilirsiniz... Ben belirgin olsun diye arkaplanı turuncu yazı renginide parlak yeşil olarak belirledim. Gerekli düzenlemeyi kendi blogunuzun renk uyumuna göre değiştirebilirsiniz!..

Blogger MetaTag Oluşturma ve Yerleşimi Blogger Seo

| | Comments

Ülkemizde Blogger kullanıcılarını sayısı giderek artmakta fakat buna paralel olarak blogunu verimli kullanabilen kişi sayısı ne yazık ki çok fazla değil. Çoğu kullanıcı Blogger'den kendine kişisel bir blog açtıktan sonra ilk işi içeriğine uygun bir tema aramak ve hoşuna giden bir temayı yüklemek ile işlemlerin tamamlandığını düşünüyor. Ama iş burada bitmiyor. Bazı optimizasyonları yapmamız gerekiyor...

Blogger alt yapısını kullandığımız blogumuza metatag yani meta etiketleri bizim eklememiz gerekiyor. Aşağıda verdiğim meta kodlarını <head> kodunu hemen altına yerleştiriyoruz.

<meta name='Name' content='Adınız'/>
<meta name='author' content='root'/>
<meta name='Creator' content='Adınız'/>
<meta name='Publısher' content='Adınız'/>
<meta name='Copyrıght' content='Bazı Hakları Saklıdır'/>
<meta name='Dıstrıbutor' content='Global'/>
<meta name='Ratıng' content='General'/>
<meta name='Robots' content='All'/>
<meta name='Revısıt-After' content='1 days'/>
<meta name='Generator' content='TeknoMobı Meta Olusturucu www.teknomobı.net'/>
<meta name='DESCRıPTıON' content='Blog açıklamanızı buraya yazıyorsunuz'/>
<meta name='KEYWORDS' content='Anahtar kelimelerinizi aralarına vırgül koyarak buraya yazıyorsunuz'/>

Meta kodlarını yerleştirdikten sonra şablonumuzu kaydediyoruz.

Meta kodlarında anahtar kelimelerinizi girerken blog içeriğiniz ile örtüşen anahtar kelime seçmeniz yararınıza olur. Örneğin; Blog içeriğiniz bilgisayar oyunları ile ilgili ise siz anahtar kelime olarak şu sıralar daha popüler olan online film izle, film indir vb. kelimeler seçerseniz pek yararınıza olmaz. Arama motorları anahtar kelimelerinizin içeriğinizle alakalı olup olmadığınıda kontrol edebilecek taramalar yapıyor. Ve sizin aldatıcı hareketlere giriştiğinizi farkeder ise Sandbox'a benim deyimim ile Karadeliğe düşebilirsiniz...

Blogger izleyiciler Eklentisi Güncellemesi

| | Comments

Son birkaç gündür çoğu kişi Blogger izleyiciler kısmında takip edenlerinin sayısında düşüş olduğundan şikayet ediyordu. Bunun neden kaynaklandığı nihayet ortaya çıktı. Google yine boş durmamış Blogger için izleyiciler eklentisini Google Friend Connect ile senkronize etmeye başladı. Tabi şuan için tam senkronlama tam gerçekleşmemiş gibi görünsede bir müddet sonra tam olarak rayına oturacaktır.


Daha önce çok basit bir şekilde görülen Blogger izleyiciler eklensiti şimdi görsel olarak biraz daha iyileştirilmiş olarak karşımıza çıktı.

Artık beğendiğiniz blogları Google Hesabınız, AOL Hesabınız, Yahoo Hesabınız ve Open ID hesabınız ile takip edebilirsiniz...



Yeni izleyiciler eklentisinin görünümü aşağıdaki gibi!..

Resimleri büyütmek için üzerlerine tıklayın!..

İkinci resimde görülende sayfa öğlerinden izleyiciler eklentisini aktif ettiğinizde sizlere sunulan kişiselleştirme ayarlarının görünümüdür. Hadi hayırlısı bakalım... Google Blogger'e başka neler ekleyecek...

Blogger izleyiciler eklentisinin kullanım videosu
Blogger izleyiciler eklentisinin kullanım videosu

Bilgi için : Blogger Buzz

Lightbox js ile Blogger'de Resimlere Efekt Verelim

| | Comments

Daha önce Düşüngeç'te ki yazımda Lightbox'un Blogger üzerinde nasıl çalıştırılacağını ve nasıl kullanılacağını anlatmıştım. Lightbox üzerinde birkaç iyileştirme yaptım. Ayrıca efektlerin next-prev-close resimlerini ileri-geri-kapat şeklinde güncelledim. Yani bir nevi Türkçe'leştirdim.

Lightbox'un Blogger'de kullanılabilmesi için temanıza eklemeniz gereken dosyaları sizler için kendi dosya barındırma depoma yükledim. Sizlerin tek yapması gereken aşağıda anlattıklarımı uygulamak...

İlk olarak Ligtbox uygulamasının blogger üzerinde nasıl çalıştığını görmek için buraya göz atabilirsiniz. (Bu verilen bağlantıda bir önceki lightbox anlatımımdaki dosyaları kullandım. Sadece örnek olması için bakabilirsiniz)

Lightbox Blogger Entegrasyon İşlemleri

  • Öncelikle temamızda Yerleşim > HTML Düzenle > Widgetları Genişlet diyoruz.Her ihtimale karşı şablonumuzun yedeğini alıyoruz.
  • Ardından Ctrl+F yaparak </head> kodunu aratıyoruz. Bu kodun hemen üstüne aşağıdaki kodları yapıştırıyoruz.

<link rel="stylesheet" href="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/lightbox.css" type="text/css" media="screen"/>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/prototype.js" type="text/javascript"></script>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/scriptaculous.js?load=effects,builder" type="text/javascript"></script>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/lightbox.js" type="text/javascript"></script>

Öncelikle şablonda önizleme yap diyoruz. Blogumuz açılıyorsa şablonu kaydet diyoruz. Artık LightBox'u blogumuza entegre ettik. Bu aşamadan sonra yapacaklarımız blogumuza gönderdiğimiz yazılar üzerinde gerçekleşecek.

Blogumuza LightBox'u entegre ettik. Yazılarımızı yayınlarken yüklediğimiz resimlerin üzerine ufak bir kod eklememiz gerekiyor.

  • Eğer bir tane resim eklediysek yazımızı yayınlamadan önce Yazının HTML'yi Düzenle sekmesine tıklıyoruz (Oluşturun Yanındaki). Resim kodumuzun içindeki imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox" yazıyoruz. (Örnek sayfadaki ilk resim)

  • Eğer bir tane değilde daha fazla resim göstereceksek yine üstteki gibi resim kodlarının içlerinde ki imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox[TeknoMobi]" vb. gibi yazıyoruz. burada yazdığım TeknoMobi Aynı pencerede peşpeşe görünecek resimlerimizi belirliyor.(Örnek sayfadaki 2,3,4 üncü resimler)

Resiminizin altında açıklayıcı bilgi vermek isterseniz yukarıda verdiğim rel= kodlarından sonra title='Açıklama' şeklinde yazabilirsiniz.

Evet arkadaşlar blogunuza entegre ettikten sonra görüşlerinizi bildirirseniz sevinirim!..

Blogger'e Monetize Özelliği Eklendi

| | Comments

Google son hız güncellemelerine devam ediyor. Google son günlerde bütün servislerinde gözle görülür iyileştirmelere gittiğini yazmıştım. Şimdide Blogger'de daha önce Yerleşim - Sayfa Öğeleri yolu ile eklenebilen Adsense Reklam yayınlama özelliği biraz daha düzene sokulmuş gibi görünüyor.

Blogger'de Yerleşim sekmesine geldiğimizde en sağa Monetize yazısı eklenmiş. Monetize tuşuna bastığımızda aşağıdaki gibi bir ekran ile karşılaşıyoruz.

 
Resmi büyütmek için üzerine tıklayın!..

  • İlk seçenek kenar çubuğumda ve kayıtlarımda reklam göster seçeneği... Google tarafından önerilen de bu seçenek
  • İkinci seçenekte ise sadece kenar çubuğunda reklam göster seçeneği
  • Üçüncü seçenekte ise sadece kayıtlarımda reklam göster seçeneği

Üstteki seçeneklerden herhangi birini seçtikten sonra aşağıdaki gibi bir ekran ile karşılaşıyoruz.
 
Resmi büyütmek için üzerine tıklayın!..

  • Burada da ilk seçenek henüz Adsense hesabı olmayanlar için 
  • İkinci seçenek ise Mevcut Adsense hesabı olup blogunda reklam yayınlamak isteyenler bu seçeneği kullanmalılar. Bu seçenek kodlar ile uğraşmak istemeyenler için kolaylık sağlayacak cinsten...
 
Resmi büyütmek için üzerine tıklayın!..

Üstteki resimde de Adsense'ye ilk defa başvuracakların karşılaşacağı örnek ekran görüntüsü var.

Google Blogger'e yeni özellikler katmaya ve iyileştirmeler yapmaya devam ediyor. Ama bence ilk olarak Blogger için yapılması gereken Devamını oku özelliğini standart olarak sunulmasını sağlamak olmalı. Hadi Google Devamını Oku özelliğini standart hale getirde çoğu Blogger kullanıcısı rahatlasın!..

Blogger Yazı Gönderim Tarihi Yeniliği

| | Comments

Google bizleri şaşırtmaya devam ediyor. Bir yandan Gmail'e yeni özellikler eklenirken bir önceki yazımda belirttiğim Google Hesapları sayfasında yapılan yenilik...

Google bu arada Blogger kullanıcılarınıda unutmamış. Blogger'de yazı yayınlarken sağ alt köşede bulunan Kayıt Seçenekleri bölümünde ufak bir değişiklik yapılmış. Belki çoğu kişi bu değişikliği farketmeyebilir bile.

Blogger'de yapılan ufak değişiklik yazı gönderim tarihleri bölümü ile ilgili.. Daha önce sadece elle düzenlene bilen yazı gönderim tarihine şimdi de otomatik özellği eklenmiş. Daha tam olarak Türkçeleştirilmediğinde sanırım sadece Draft Blogger kullanıcıları için açık sanırım. Ben bütün bloglarımı Drafttan kullandığım için normal Blogger ekranlarına da bu özellik geldi mi bilmiyorum.

 
Resmi büyütmek için üzerine tıklayın!..


Google bu özelliği büyük ihtimalle taslak olarak kaydedip sonradan yayınladığımız yazılarda meydana gelen taslağın kayıt edildiği zamandaki tarih ile yayınlaması olarak düşünüyorum. Bence Google Blogger için yerinde bir iyileştirme yaptı.

MultiBox Blogger Entegrasyonu Ders 7

| | Comments

MultiBox Blogger Entegrasyonu derslerimizin sonuncusuna gelmiş bulunuyoruz. Bu dersimizde kendi bilgisayarımızdan herhangi bir hosta yüklediğiniz mp3, flv,swf,mov,wmv,rmvb dosyalarının ve verdiğiniz linkin ziyaretçi blogunuzdan ayrılmadan ziyaret etmesini sağlayabileceğiniz kodları vereceğim...

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için Hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

<a href='files/curly.flv' rel='width:400,height:300' id='flv' class='mb' title='Flv'>flv oynatımı</a>
<div class='multiBoxDesc flv'>flv oynatımı</div>

<a href='files/music.mp3' rel='' id='mp3' class='mb' title='Music'>mp3 oynatımı</a>
<div class='multiBoxDesc mp3'>mp3 oynatımı</div>

<a href='files/curly.wmv' rel='width:400,height:350' id='wmv' class='mb' title='Movie'>wmv oynatımı</a>
<div class='multiBoxDesc wmv'>wmv oynatımı</div>


<a href='files/curly.mov' rel='width:400,height:310' id='mov' class='mb' title='Mov'>mov oynatımı</a>
<div class='multiBoxDesc mov'>mov oynatımı</div>

<a href='files/curly.rmvb' rel='width:400,height:300' id='rmvb' class='mb' title='Movie'>real oynatımı</a>
<div class='multiBoxDesc rmvb'>real video oynatımı</div>

<a href='blank.htm' rel='width:400,height:300' id='mb9' class='mb' title='iFrame'>HTML Sayfası</a>
<div class='multiBoxDesc mb9'>html</div>

MultiBox'u Blogger'e %100 entegre eden ilk kişi benim inşallah yararını görürsünüz. Takıldığınız yerleri yorumlarda belirtirseniz elimden geldiğince yardımcı olmaya çalışırım. Yorumlarınızı ve desteklerinizi bekliyorum. Blogumu takip ederseniz çok yakında yeni bir sürpriz ile karşınızda olacağım!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6

MultiBox Blogger Entegrasyonu Ders 6

| | Comments

MultiBox Blogger Entegrasyonu Ders 5'te Dailymotion videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğini anlatmıştım. Bu yazımda ise Yahoo Videolarının MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Yahoo Videolarını MultiBox İle Blogger'e Entegre Edelim!.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda Yahoo videolarının yukarıda verdiğim demo sayfasındaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.4&amp;id=v40349578&amp;vid=2043149" id="Yahoo Video" rev="width:388 height:323 scrolling:no caption:`Beautiful Liar`" title="Beyonce feat Shakira">Yahoo Video Oynatımı</a>
<div class="multiBoxDesc Yahoo Video">
Beautiful Liar</div>

Ardından hangi Yahoo Videosunu göstermek istiyorsanız videonun linkinde aşağıdaki resimde gösterilen renklere göre yukarıdaki kodda aynı renkli olan yerdeki kodların yerine yerleştirin.

 
Resmi büyütmek için üzerine tıklayın!..

Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Shakira yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Yahoo Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın videonun efektli halini önizlemede göremezsiniz.

MultiBox Blogger Entegrasyonu derslerinde son bir tane yazım daha kaldı. Son yazıda görüşmek üzere yorumlarınızı eksik etmeyin...

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 5

| | Comments

MultiBox Blogger Entegrasyonu Ders 4'te Google videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğiniş anlatmıştım. Bu yazımda ise Dailymotion Videolarının MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda google videolarını yukarıda verdiğim demo sayfasındaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://www.dailymotion.com/swf/x3yqdo&amp;related=1&amp;canvas=medium" id="Dailymotion Video" rev="width:480 height:348 scrolling:no caption:`Shakira`" title="Shakira"> Dailymotion Video Oynatımı</a>
<div class="multiBoxDesc Dailymotion Video">
Ojos Asi</div>

Ardından hangi Dailymotion Videosunu göstermek istiyorsanız videonun linkinde /video/ ile ilk _ işaretinden önceki kısımı kopyalayıp (Aşağıdaki resimde kırmızı belirtilen yer)

 
Resmi büyütmek için üzerine tıklayın!..

yukarıda verdiğim kodlarda swf/ ile & arasına yapıştırın. Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Shakira yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Dailymotion Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın önizlemede efektli halini göremezsiniz. Bir sonraki anlatımda görüşmek üzere yorumlarınızı eksik etmeyin!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 6 , MultiBox Ders 7

MultiBox Blogger Entegrasyonu Ders 4

| | Comments

MultiBox Blogger Entegrasyonu Ders 3'te YouTube videolarının MultiBox ile açılır pencerede nasıl gösterilebileceğiniş anlatmıştım. O yazımın sonunda bir sonraki dersin Google Video olacağını belirtmiştim. Bu yazımda Google Video üzerinde bulunan videoların MultiBox ile nasıl açılır pencerede gösterileceğini anlatacağım.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Blogger blogunuzda google videolarını yukardaki gibi multibox ile açılır pencere şeklinde göstermek için aşağıdaki kodu yayınlayacağınız yazıda HTML'yi Düzenle kısmında uygun bir yere yapıştırın.

<a class="mb" href="http://video.google.com/googleplayer.swf?docId=97340551995132925&amp;hl=en&amp;playerMode=mini" id="Google Video" rev="width:556 height:372 scrolling:no caption:`Unquiet Visions`" title="Shakira">Google Video Oynatımı</a>
<div class="multiBoxDesc Google Video">
Hips Don't Lie Bamboo Fifa 2006 Live</div>

Ardından hangi Google Videosunu göstermek istiyorsanız videonun linkinde docid=- iden sonra ilk & işaretine kadar olan kısmı kopyalayıp [eksi işaretini almayın] (Aşağıdaki resimde kırmızı belirtilen yer)

 
Resmi büyütmek için üzerine tıklayın!..


yukarıda verdiğim kodlarda docid= den sonraya yapıştırın. Göstermiş olduğunuz videonun altında çıkmasını istediğiniz yazı içinde yine yukarıdaki kodda Hips Don't Lie Bamboo Fifa 2006 Live yazan kısmı değiştirebilirsiniz. Videonun link yazısı için ise Google Video Oynatımı yazan yeri değiştirebilirsiniz.

Artık yazınızı yayınlayabilirsiniz. Unutmayın önizlemede efektli halini göremezsiniz. Bir sonraki anlatımda görüşmek üzere yorumlarınızı eksik etmeyin!..

MultiBox Giriş Yazısı , MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7