Blogger, Blogger tutorialleri, Blogger dersi, Blogger anlatımı - Tutorialci.Net - Türkiye'nin en kapsamlı Tutorial sitesi



Blogger Sağ Tarafta Kayan Banner Yapımı

25 Ocak 2010 Yazan  
Kategori Web tabanlı uygulamalar

Bir çok websitesinde görmüş olduğunuz sağ tarafta bulunan siz hareket ettikçe aynı doğrultuda hareket eden kayan bannerların blogger için nasıl yapıldığını bu yazıda bulabilirsiniz. Birçok arkadaş biliyordur belki ama ben yinelemekte fayda buluyorum herkes kaynak sayfasından bu kodları bulmakla uğraşmasın burada elinin altında bulunsun. Bu kod ile reklamlarınızı kayan banner olarak yayınlayabilir ziyaretçinizin ilgisini biraz daha çekebilirsiniz..

  1. Banner Kodu linkine tıklıyoruz ve sayfamızın herhangi bir yerine HTML/JavaScript ile ekliyoruz..
  2. Eklediğimiz kodun en altındaki “Reklamkodunuzu buraya ekleyin” ibaresini silip, o alana reklam kodumuzu ekliyoruz.
  3. Düzenleyip sitemizin herhangi bir yerine eklediğimiz kodu Kaydediyoruz..

İşte hepsi bu kadar.

Blogger için Flash Etiket Bulutu Yapımı

25 Ocak 2010 Yazan  
Kategori Web tabanlı uygulamalar

WordPress bloglarında gördüğümüz flash etiket bulutunu Blogger Buster’de blogger’a uygulanışı anlatılmış.İngilizcesi olmayanlar için anlatıyım.Baştan söyliyim Türkçe karakterler çıkmıyor js bilgisi olanlar bunu düzeltebilirler sanırım.

Yerleşim > Html düzenle” de “Ctrl+F” Tuşlarına basıp aşağıdaki kodu arıyoruz.

<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>

Daha sonra yukarıdaki kodun altına aşağıdaki kodu yapıştırıyoruz.

<b:widget id=’Label99′ locked=’false’ title=’Labels’ type=’Label’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
<script src=’http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js’ type=’text/javascript’/>
<div id=’flashcontent’>Blogumulus by <a
href=’http://www.tutorialci.net/’>Tutorialci.Net</a> </div>
<script type=’text/javascript’>
var so = new
SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;,
&quot;tagcloud&quot;, &quot;240&quot;,
&quot;300&quot;, &quot;7&quot;,
&quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0×333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;,
&quot;<tags><b:loop values=’data:labels’
var=’label’><a expr:href=’data:label.url’
style=’12′><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Ve bunları yaptıkdan sonra temamızı kaydediyoruz. Daha sonra sayfa öğesi ekle kısmından  etiketler’i uygun bir yere sürüklüyoruz.

Bitti bu kadar. Hayırı olsun.

Not: Her temada olmuyor,yapılabilmesi için temanızda ilk aramanız için verdiğim kodun olması lazım.

Blogger’da “Devamını Oku” Linki Nasıl Yapılır

22 Ocak 2010 Yazan  
Kategori Web tabanlı uygulamalar

Sizlere bu yazımda Blogger kullanıcılarının büyük eksikliğini yaşadığı “Devamını Oku” linkinin nasıl oluşturacağımızı anlatmaya çalışacağım. Aslında benim yaptığım Dünya’yı kurtarmak değil çünkü bu konu hakkında Blogger Destek sayfasında yazı var, ancak Google’da aramalarım sonucu bir çok kişinin hala sorunlar yaşadığını gördüm, zaten dikkat ederseniz Blogger tabanlı sitelerde bu bağlantıyı oluşturabilmiş site çok az. Şimdi daha fazla uzatmadan nasıl yapılır onu öğrenelim…

Uyarı 1:  Öncelikle site şablonunun yedeğini almalısınız, ileride çıkacak bir sorundan dolayı sonra kapımı aşındırmayın :-)

Uyarı 2:  Burada anlatılan uygulama Blogger’ın eski (klasik) şablonları için geçerli değildir.

Blogger ayarlarından ” Yerleşim -> HTML Düzenle ” moduna geçtikten sonra “Widget Şablonlarını Genişlet” seçeneğinin işaretleyin. Böylece şablon kodlarınızın tümünü görebileceksiniz. Şablon kodlarının tamamını görebildiğimize göre şablonun başında bulunan <head> etiketinden hemen ardından aşaıdaki kodları yapıştırın.

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Daha sonra  <data:post.body/> etiketinin ardından aşağıdaki kodu ekleyin.

<b:if cond=’data:blog.pageType != “item”‘><br/>
<a expr:href=’data:post.url’>Devamını oku..>></a>
</b:if>

Buraya kadar anlattıklarım ile şablonun altyapısını hazırlamış olduk. Bu aşamadan sonra blog’a her yazı yazışımızda gizlemek istediğimiz kısmı belirtmeliyiz. Bunu nasıl yapacağınızı bir örnek ile açıklayayım.

Yazının Gizlenmesi

Uyarı 3: Yazılarınızı yazarken “HTML Düzenle” modunda yazıp, devamını oku kodunu ekledikten sonra yazınıdaki stillendirmeleri en son yaparak oluşabilecek muhtemel sorunların önüne geçmiş olursunuz.

Bu bir deneme yazısıdır.
Bu deneme yazısının 3. cümlesinden sonraki içeriği gizlenecektir.
<span>
Bu cümleyle birlikte yazının geri kalanını gizlemiş olduk…
</span>

Yukarıdaki örnekte görebileceğiniz gibi yazının gizlenecek kısmının başına  <span> etiketini, sonuna ise </span> etiketi koyduk.  Bunu her yazınızda uygulayıp gizlemek istediğiniz kısmı belirtmeniz gerekmektedir.

Not: Bu yazu mafiamax sitesinden alınıp tutorialci.net için  düzenlenmiştir.