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

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.

Blog Editörleri incelemesi ScribeFire - Live Writer - Zoundry Raven - KBlogger

| | Comments

Bir süredir yazmayı planladığım daha doğrusu taslak olarak birazını kaleme aldığım bu yazıyı nihayet yayınladım. Bu yazımda blogunuza yazı göndermeniz de sizlere kolaylık sağlayacak bir kaç blog editörünü tanıtacağım.

ScribeFire Blog EditorScribeFire Blog Editor, benim en beğendiğim ve şahsen de kullandığım en kullanışlı editör budur. ScribeFire Blog Editör ile blogunuza web arayüzüne gerek duymadan blogunuza yazı gönderebilirsiniz. Hatta yazınızı yazdıktan sonra taslak olarak kaydedebilir veya ileri bir tarih ve saat belirleyerek yazınızın otomatik yayınlanmasını sağlayabilirsiniz... ScribeFire Blog Editörünü kullanmak için internet bağlantısı olmasına gerek yok. Çevrimdışı olarak da yazınızı yazabilir daha sonra internet bağlantısı sağlandığında yayınlayabilirsiniz.

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


ScribeFire Blog Editörünün Desteklediği Blog Servisleri

ScribeFire Blog Editor eklentisini buradan Firefox web tarayıcınıza yükleyebilirsiniz. Eklentiyi yükledikten sonra tarayıcınızı yeniden başlatın. ScribeFire Blog Editör ikonu tarayıcınızın durum çubuğunda görünecektir. İster bu ikona tıklayarak isterseniz de F8 tuşuna basarak ScribeFire Blog Editörünün arayüzünü açabilirsiniz. Arayüzü ilk açtığınızda sizden blog tanımlamanızı isteyecek. sizden istediği bilgileri girerek blogunuzu tanıtabilir ve ScribeFire ile blogunuza daha kolay yazı gönderebilirsiniz!..

ScribeFire Blog Editörünün kurulum ve kullanımı ile ilgili video ders hazırlayacağım. Video hazırlandığında bu yazıya ekleyeceğim.

Bilgi için : ScribeFire Resmi Sitesi , ScribeFire Firefox Eklenti Sayfası

Windows Live WriterWindows Live Writer, bu editör çoğu kişinin bildiği Windows Live Messenger ile otomatik kurulum yaptığı Microsoft uygulamasıdır. Windows Live, Wordpress, Blogger, Live Journal, TypePad, SharePoint, Community Server ve daha pek çoğunu içeren hemen hemen bütün blog hizmetlerinde yayımlama yapmanıza olanak verir.

Ben her nedense Live Writer'a pek alışamadım. Belkide ilk çıktığı zamanlar test için kullandığımda yaşadığım bir kaç olumsuzluk yüzünden hala etkisinde kalmış olabilirim. Windows Live Writer'ın mantığı blogunuz ile ilgili bütün dosyaları kendi özel bir klasör oluşturup depoluyor. Yani blogunuzun bir kopyasını çıkartıyor ve bu sayede blogunuzu rahatlıkla tanıyabiliyor.

Windows Live Writer gerçekten çok gelişmiş zamanla... Live Writer kullanmaya başladığınızda çeşitli eklentiler ile editörünüzü güçlendirebiliyorsunuz. Flickr eklentisi ile resimlerinizi direkt olarak flick hesabınıza gönderebilir ve yazınıza hemen ekleyebilirsiniz. Aynı şekilde Digg ve Twitter ekletileride mevcut...

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


Eğer direk masaüstünüzden blogunuza yazı göndermek istiyorsanız Windows Live Writer'ı deneyebilirsiniz. Windows Live Writer gelişmiş WYSIWYG Editör'ü ile yazılarınızı şekillendirmenizi kolaylaştırıyor.

Bilgi için : Windows Live Writer

zoundry ravenZoundry Raven, açık kaynak olan bu blog editörünü Oğulcan'ın junkchorn adlı blogunda gördüm ilk olarak ben çok fazla değinmeyeceğim. Sağolsun Oğulcan Zoundry Raven blog editörü ile ilgili güzel bir yazı hazırlamış. Zoundry Raven editörünü nasıl kullanıcağınızı Oğulcan'ın blogundan okuyabilirsiniz.

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

Zoundry Raven blog editörü Live Writer ile benzer mantıkta çalışıyor. 10 mb büyüklüğündeki kurulum dosyasını isterseniz usb flash diskinize de kurabilirsiniz. Program portable kullanımıda destekliyor. Böylece blogunuzu cebinizde taşıyabilirsiniz.

Bilgi için : Zoundry Raven , Junkchorn (Detaylı Anlatım Türkçe)

KBlogger, Linux dağıtımları kullanıyorsanız yine masaüstünden KBlogger editörü ile yazılarınızı yayınlayabilirsiniz. KBlogger'i KDE arayüzü kullanan bütün Linux dağıtımlarına paket depolarından yükleyebilirsiniz. Kullandığınız Linux dağıtımının paket deposunda KBlogger diye arattığınızda büyük ihtimalle karşınıza çıkacaktır.

Pardus kullanıcısıysanız Pisi paket yönetim sisteminde KBlogger diye aratarak KBlogger editörünü sisteminize bir tık ile kurabilirsiniz. KBlogger kuruduktan sonra masaüstünüzden bloglarınıza yazı gönderebilirsiniz.

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


Pardus için KBlogger'in kullanımına Özgürlükiçin.com'da bulunan KBlogger ile Blog Yazın sayfasından yararlanabilirsiniz.

Bilgi için : KBlogger Ana Sayfa , KBlogger Pardus Wiki , KBlogger KDE Apps

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

TeknoMobi Tema v1 ile Karşınızdayım Blogger Tema

| | Comments

Uzun zamandır Blogger için bir tema yapmayı düşünüyordum. Ve sonunda bu amacıma ulaştım. TeknoMobi Tema v1 adını verdiğim Blogger teması ile karşınızdayım. Karşınızdayım diyorum ama bu temayı tasarlarken bana grafiklerin hazırlanmasında özveri ile yardım eden Orçun Kılıç olduğundan karşınızdayız demek daha doğru olur sanırım.

Gelelim temamızın özelliklerine;
  • 2 Sütunlu
  • Css Nav Menü
  • Dinamik Tab Content
  • Dinamik Slide Menü
Tarayıcı Uyumluluğu;
  • Firefox 3
  • Chrome 1
  • Safari 3
  • Opera 9
  • İE 8 + İE 7 de %99 sorunsuz...

Temamızın genel özellikleri bu şekilde diyebilirim. Temamızın ekran görüntüsü aşağıdaki gibidir.

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

Temayı yükledikten sonra yapılacak gerekli düzenlemeler

Header bölümünü kendinize göre değiştirmek için 2zq8klk.png resmini temada aratın ve kendi header resminiz ile değiştirin.

Css Nav Menüdeki linkleri düzenlemek için tema kodlarında <a alt='blogcu forum' href='http://www.blogcuforum.net/portal.php' target='_blank' title='Blogcu Forum'><span>Blogcu Forum</span></a> yazan bölümde bulunan linkleri kendi isteğinize göre değiştirin.

Slide bölümünü düzenlemek için <!-- Painel 01 --> bölümü bularak gerekli düzenlemeleri yapabilirsiniz. Slide bölümünde kullanacağınız resimlerin boyutu 300x200 px dir.

Sponsor reklam kutuları bölümü 125x125 px boyutundadır. Burayı düzenlemek için tema kodlarında <div id='sidebar-wrapper'> bölümü bulup hemen altındaki bölümden gerekli düzenlemeyi yapabilirsiniz.

Temada gözümden kaçan ufak tefek hatalar olabilir. Gördüğünüz hataları lütfen yorumlarınızda belirtin. Geri dönütleri ne kadar fazla alırsam TeknoMobi Temamın diğer versiyonlarında bu hataları gideririm.

Kodlama ile uğraşmak insanın çok fazla zamanını alıyor. Tabi resimlerin barındırılması ayrı bir dert diyebilirim. Daha önce hazırladığım çeşitli eklentilerde resimleri PhotoBucket hesabıma yükleyip kullanıcıların hizmetine sunuyordum. Javascript dosyalarınıda kendi barındırıcıma yüklüyordum. Tabi buda belli başlı sorunları beraberinde getiriyor. Hazırladığım temada bant genişliğine uğramaması için farklı bir resim barındırıcı kullandım.

Bundan bir hafta kadar önce PhotoBucket hesabım bant genişliği sınırını aştı. Dolayısıyla benim hazırladığım eklentileri kullananlar bir süre sorun yaşadı. Bu sorunu düzeltmek için hesabımı Pro olarak yükseltmem gerekiyordu. Tabi bunun içinde belli bir miktar para gerekti.

Bir arkadaşım Paypal'dan bana 12 dolar kadar bağışta bulundu. Kendisi yakın zamanda çok güzel bir alan adı ile site açacak... Site yayına başladığı zaman hemen tanıtımını yapacağım.

Arkadaşımın yaptığı bağış ile PhotoBucket hesabımı 3 ay süre ile Pro'ya çevirdim. Bu 3 ay bitiminde tekrar hesabımı Pro'ya yükseltmem için Paypal'dan bağışta bulunabilirsiniz.

Paypal'dan bağışta bulunmak için burayı tıklayabilir veya sidebarın altında bulunan Paypal bağış butonuna tıklayabilirsiniz...

TeknoMobi Tema v1 nasıl olduğunu bu iki blogda görebilirsiniz. Demo Sayfası , Şekillendirilmiş Hali

Temanın kodları ile beraber resimler ve javascript dosyalarınıda buradan indirebilirsiniz

Güncelleme 06 Temmuz 2009: Bu gün itibari ile temada bir kaç düzenlemeye gidilmiştir. Javascript dosyalarının barındığı host daha hızlı olan bir yere taşınmıştır. Yazı altında text olarak bulunan sosyal imleme siteleri bağlantıları ikonlar ile görselleştirilmiştir.Bir kaç seo optimizasyonu yapılmıştır. Sosyal imleme ikonları Dryicons Free Sosyal ikonlardan oluşmaktadır. http://dryicons.com/free-icons/preview/socialize-icons-set/

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

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

Blogum 1 Ben 26 Yaşına Girmiş Bulunmaktayım!..

| | Comments

Başlığa bakıldığı zaman benim doğum günümün bugün olduğu sanılabilir. İlk olarak belirtmeliyimki benim doğum günüm 7 Aralık.. Doğum günümde bu yazıyı hazırlamayı düşünüyordum ama Kurban Bayramı tatili için memlekete gidince yazıyı yazmam gecikti. Gerçi geçikmesi bir yönden de iyi oldu denilebilir. Bu gecikme sayesinde Blogumun birinci yılını doldurması dolayısıyla hazırlayacağım yazıyı aynı anda yazabildim.

Blogumu ilk açtığımdan bu yana çok fazla değişiklik yapmadım. Blogger altyapısını çözdükten sonra kendi temamı düzenledim. Blogumun temasını bir çok kişi beğendi. Sadece bir tane olumsuz yorum aldım. Gerçi pek olumsuz diyemem biraz hakaretvari bir yorumdu ama ben yinede iyi niyeti elden bırakmayarak olumsuz diyorum.


Bir yıl içinde blogumda yazılım incelemeleri, donanım incelemeleri, cep telefonu programları incelemeleri, ajax uygulamaları, Blogger tema düzenlemeleri, wordpress eklentilerinin blogger entegrasyonu üzerine yazılar hazırladım.

Son zamanlarda Blogger Geliştirme yazılarına ağırlık verdim. Blogger geliştirme yazılarımda kullanıcıların daha kolay anlayabilmeleri için en ince ayrıntılara bile dikkat etmeye çalıştım. Yazılarımda anlattığım uygulamaları video ders olarak nasıl yapıldığınıda elimden geldiğince paylaşmaya çalıştım.

Bu arada sadece kendi blogumda değil TeknoDergi ve Düşüngeç'te de yazıyorum. Ayrıca BlogcuForum sitesinde forum ortamında elimden geldiğince sorulara cevap vermeye çalışıyorum.

Blogumda bu yazı ile beraber 100 adet yazı bulunmakta... 100 adet yazı biraz az gibi gözükse de yazılarımı hazırlamak kolay olmuyor. Çünkü çeşitli uygulamaları Blogger için uyarlarken bir sürü test yapmak zorunda kalıyorum. Bunların üstüne yazıyı en iyi şekilde anlaşılabilir kılmak için ince eleyip sık dokuyorum denilebilir. Tabi birde video ders hazırlama girince yazılarımın arasında ki süre biraz artıyor. Araya mim yazılarıda giriyor.

Evet benim bir yıllık Blog serüvenim bu şekilde... 2009 yılında da inşallah güzel konularda herkesin yararlanabileceği yazılar yazmak hedefindeyim.

MultiBox Blogger Entegrasyonu Ders 3

| | Comments

Uzun bir bayram tatilinden sonra yazı dizisine devam ediyorum. Bu seferki anlatımımızda multibox uygulaması ile online video izlenebilen sitelerdeki videoları kendi blogumuz içinde açılır pencere şeklinde nasıl oynatacağımızı göstereceğ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..

Blogger blogunuzda youtube 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://youtube.com/v/Pvwy8MdUB64&amp;hl=en" id="YouTube Video" rev="width:425 height:344 scrolling:no caption:`Kat DeLuna - Run the Show`" title="Kat Deluna">YouTube Video Oynatımı Örneği için Buraya Tıklayın</a>
<div class="multiBoxDesc YouTube Video">
Kat DeLuna - Run the Show </div>

Ardından hangi youtube videosunu göstermek istiyorsanız videonun linkinde v= den sonraki kısımı(Alttaki resimde kırmızı ile belirtilen yer)

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

kopyalayıp yukarıda verdiğim kodda v/ dan sonraki Pvwy8MdUB64 nin yerine kopyalayın. Artık yazınızı yayınlayabilirsiniz. Önizleme de efektli halini göremezsiniz.

Bir sonraki yazımda Goole Videolarının entegre edilme işlemini anlatacağım... Yorumlarınızı esirgemeyin!..

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

MultiBox Blogger Entegrasyonu Ders 2

| | Comments

Buradaki yazımda MultiBox uygulamasını blogger şablonumuza entegre etmiştik. Artık sıra MultiBox uygulamasının nimetlerinden yazılarımızda nasıl faydalanacağımızı anlatmaya geldi. İkinci dersimizde yazılarımıza eklediğimiz resimleri ziyaretçilerin blogunuzdan hiç ayrılmadan nasıl görebileceğini anlatacağım. Öncelikle aşağıdaki verdiğim demo sayfasında bulunan resmin üzerine tıklayarak ne demek istediğimi görebilirsiniz.

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

Şimdi ilk dersimizde ki gibi aşama aşama anlatımımızı yapalım.

YÖNTEM BİR

1. Aşama

Blogger'de yazılarımıza ekleyeceğiniz resimleri öncelikle Photobucket veya Tinypic gibi web üzerinde resim barındıran sitelerelere yükleyin. Bloggerin kendi resim hostu lightbox ve türevlerine pek alışamadı.

2. Aşama

Yayınlayacağımız yazıya resmimizi ekleyelim. Ardından HTML'yi düzenle seçeneğine gelerek resmimizin kodunu bulalım.
Resmi büyütmek için üzerine tıklayın!..

Büyük ihtimalle aşağıdaki gibi bir kod olacaktır.

<a href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>

3. Aşama

Yukarıdaki görmüş olduğunuz koda birkaç ekleme yapacağız. Yukarıdaki kodda yaptığımız değişiklikle aşağıda kırmızı renk ile gösterilmiştir.

<a href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" id="mb1" class="mb" title="Bodrum"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>

4. Aşama

Resimin altına açıklama eklemek içinde aşağıdaki kodu ekliyoruz.

<div style="display: none;" class="multiBoxDesc mb1">Resim açıklamasını buraya giriyorsunuz.</div>

5. Aşama

Eğer bütün aşamaları doğru yaptıysanız yazınızın içindeki resme tıklanıldığında sayfanızdan ayrılmadan ziyaretçileriniz resimi büyük boyutta görebilirler. Bütün aşamalardan sonra elimizde aşağıdaki gibi bir kod olacak...

<a class="mb" href="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" id="mb1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Bodrum"><img border="0" height="184" src="http://i489.photobucket.com/albums/rr259/TeknoMobi/TeknoMobi/yazi/akyarlar.jpg" width="420" /></a>
<div class="multiBoxDesc mb1" style="display: none;">
Akyarlar Koyu Sahilinden Bir Gorunum.</div>

YÖNTEM İKİ

Eğer ben bu kadar uğraşmak istemiyorum veya tam olarak anlamadım diyorsanız. Biraz daha basitleştireyim sizler için...

Öncelikle resminizi tinypic veya başka bir yere yükleyin. Şimdi aşağıdaki kodu yazınızda istediğiniz yere yapıştırın.

<a class="mb" href="ResimLinki" id="mb1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Bodrum"><img border="0" height="184" src="ResimLinki" width="420" /></a>
<div class="multiBoxDesc mb1" style="display: none;">
Resim Açıklaması.</div>

Yüklediğiniz resmin direk linkini yukarıda kırmızı işaretli yerdeki Resim Linki yazılarının yerine yapıştırın. Resim açıklamasını da isteğinize göre girebilirsiniz.

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

MultiBox Blogger Entegrasyonu Ders 1

| | Comments

Buradaki yazımda MultiBox ile ilgili bir giriş yazısı yayınlamıştım. Artık MultiBox uygulamasının anlatımına başlıyoruz. İlk yazımda anlatım yapmamıştım. Dediğim gibi onu giriş yazısı niyetine yayınlamıştım. MultiBox uygulamasının Blogger'e entegrasyon işlemi biraz zahmetli ve detaylı olduğundan tek bir yazıda değil bir kaç yazı halinde yayınlayacağı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..

Entegrasyon işlemimize aşama aşama başlayalım. İlk olarak temamızı entegrasyon işlemine hazır hale getirelim.

1. Aşama

İlk olarak Yerleşim - HTML Düzenle - Widget Şablonlarını Genişlet diyoruz. Ardından her ihtimale karşı Tam Şablonu Yükle diyerek Şablonumuzun bir tane yedeğini alıyoruz.

 

2. Aşama

Şimdi Ctrl+F yaparak şablonumuzda ]]></b:skin> kodunu aratıyoruz.


3. Aşama

Temamızda bulduğumuz ]]></b:skin> kodunun hemen altına aşağıdaki kodları yapıştırıyoruz.

<link href='http://dl.getdropbox.com/u/1704149/Mbox/css/multibox.css' rel='stylesheet' type='text/css'/>
<!--[if lte IE 6]><link rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Mbox/css/ie6.css" type="text/css" media="all" /><![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/Mbox/js/overlay.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/Mbox/js/multibox.js' type='text/javascript'/>

<style type='text/css'>

#htmlElement {
padding: 10px;
background-color: #000;
}

</style>

4. Aşama

Şimdi ise şablonumuzun en altına gidip </body> kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz.

<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>


5. Aşama

Artık şablonumuzu kaydedip blogumuzu kontrol ediyoruz. Herhangi bir sorun yok ise bir sonraki yazımı bekliyorsunuz.

MultiBox uygulamasının bütün dosyalarını kendi hostumda barındırıyorum. Kodlar ve dosyaları yüklemek ile uğraşmanıza gerek kalmadı.

Aşağıdaki videoda anlatımını yaptığım aşamaların eğitim görseli... Kodları nereye nasıl yerleştireceğinizi görsel olarak izleyebilirsiniz!. İster online olarak izleyin! İsterseniz de HD Çözünürlükteki xViD dosyasını bilgisayarına indirerek izleyin!..


Buradaki linke tıklayarak eğitim videosunun HD kalitesindeki avi dosyasını bilgisayarınıza indirebilirsiniz!..

Bir sonraki yazımda MultiBox uygulamasını yazılarımızda kullandığımız resimlerde, Mp3'lerde, Videolarda, Youtube - Google Video - DailyMotion - Yahoo Video - Vimeo - Msn SoapBox gibi sitelerdeki videoları kendi sitemizde görsel olarak nasıl kullanabileceğinizi tek tek ele alacağım.

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

MultiBox İle Blogger'inizi Coşturun!..

| | Comments

TeknoMobi

Bir önceki yazımda sizlere yeni bir yazı dizisi ile karşınızda olacağımdan bahsetmiştim. Ehh artık Blogger kukllanıcılarını fazla bekletmeden blogunuzu çok daha kullanışlı hale getirebileceğimizi gösterelim. Şimdi bazılarının aklına yazı dizisi neden yapıyorsun bir yazıda anlatsan olmaz mı diyenler çıkabilir. Ama yapacağımız işlemlerin detaylı olması ve acemi kullanıcıların kolaylıkla anlayabilmesi için yazı dizisi olarak yayınlamayı uygun gördüm. Ama şunu belirtmeliyim ki ülkemizde Blogger uygulamaları ile uğraşan pek fazla kişi yok olanlarda bir süre sonra kendini kenara çekiyor. Neden diye kendimize sorarsak yazılara yeterli ilginin gösterilmemesi daha doğrusu yazılara geri dönütün sağlanmaması diyebiliriz. Yorum yapılmaması vb.

Bende elimden geldiğince Blogger alt yapısı ile yayın yapan blogculara bloglarını daha kullanışlı hale getirebilmeleri için çalışıyorum. Ama yukarda bahsettiğim gibi gerekli geri dönütleri aldığım pek söylenemez. Neyse konuyu fazla uzatmayacağım.

LightBox uygulamasını çoğu kullanıcı biliyordur. Mutlaka bir blogda veya sitede denk gelmiştirsiniz. LightBox ile resimleri blogumuzdan ayrılmadan hoş bir şekilde gösteriyoruz. LightBox'un Blogger'e entegre etme işlemini Düşüngeç'teki yazımda anlatmıştım.

Şimdi ise LightBox'un çok daha gelişmiş bir türevi olan MultiBox uygulamasını Blogger için kullanılabilir hale getirdim. MultiBox ile neler mi yapabiliriz.

  • Resimleri blogumuzdan ayrılmadan açılır hale yani pop-up şeklinde açabiliriz. 
  • swf, flv gibi flash videoları 
  • mov uzantılı quicktime videoları
  • wmv uzantılı  windows media videoları
  • rv / rm / rmvb uzantılı real mediavideolarını
  • mp3 formatındakimizik dosyalarını
  • ve Youtube, Vimeo, Dailymotion, Google Video, Yahoo Video sitelerindeki videoları blogunuzdan hiç ayrılmadan ziyaretçilerinize dinletebilir / izletebilirsiniz. Bunların hepsinin örneklerini aşağıda verdiğim demo sayfasındaki bağlantılara tıklayarak görebilirsiniz.

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

Multibox uygulamasının tarayıcı uyumluluğu : Firefox 3/3.5 , Chrome 2-3 , Safari 3-4 , İnternet Explorer 7-8 , Opera 9-10

MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7

Blogger Sağ Üst Köşeye Şehitler Ölmez Arması Yerleştirelim

| | Comments

Blogger alt yapısı kullandığımız bloglarımızın sağ üst köşesine aşağıdaki resimde gördüğünüz Şehitler Ölmez Vatan Bölünmez armasını yerleştirelim. Daha önce sol üst köşeye Türk Bayrağımızı yerleştirmeyi değişik bloglar yer vermişti. Türk Bayrağını yerleştirirken CSS kodlarına ekleme yapmamız gerekiyordu. Gerçi zor değil ama acemi kullanıcılar yerleşimde hatalar yapabiliyorlardı.



Şehitler Ölmez Vatan Bölünmez armasını yerleştiriken sizlere kolaylık olması için javascript kod dosyası hazırladım. Şimdi armamızı blogumuza nasıl yerleştireceğimizi anlatayım.

Öncelikle her türlü soruna karşı Yerleşim > HTML Düzenle diyerek Widget Şablonlarını Genişlet diyoruz. Ardından Tam Şablonu Yükle diyerek şablonumuzun yedeğini alıyoruz.


Ardından şablonumuzun en alt kısmına giderek </body> ve </html> kolarının arasına aşağıdaki kodu yerleştiriyoruz. Kodu nereye yerleştireceğinizi aşağıdaki resimden görebilirsiniz.



<script language='javascript' src='http://tm52.weebly.com/uploads/1/3/6/1/1361393/sehitlerolmezarmasi.js' type='text/javascript'/><noscript><a href='http://teknomobi.blogspot.com/'>TeknoMobi</a></noscript>
Ardından şablonumuzu kaydedip kontrol ediyoruz. İlk kontrolde görünmeyebilir. ikinci kere sayfayı yenilediğinizde artık Şehitler Ölmez Vatan Bölünmez arması Blogger blogumuzda görünecektir. 

Soru / Görüş / İstek ve Önerilerinizi yorum yaparak veya iletişim formunu kullanarak iletebilirsiniz.Bu arada Blogger için çok hoş bir yazı dizisi hazırlıyorum. Örnek olarak aşağıdaki Ceza ft. Doa - Müziğin Doası yazısına tıklayın 

Ceza ft. Doa - Müziğin Doası
Müziğin Doası

25 Kasım 2008 Güncelleme Notu : Şehitler Ölmez Vatan Bölünmez Armasının blogunuza ekleyeceğiniz kod iyileştirilmiş olarak yenileniştir. Eğer daha önce verdiğim kodları yerleştirdiyseniz onların yerine yukarıda verdiğim yeni kodları yerleştirin.

İntense Debate Yorum Formuna Geçiş Yaptım

| | Comments


Blogger kullanıcılarının çoğu Wordpress bloglarındaki yorum formlarıda iç geçirerek bakıyorlar. Keşke bloggerde de wordpress tarzı yorum formu kullanabilsek diyenlerin sayısı bir hayli fazladır sanırım. Google yakın zamanda blogger yorum formlarını Aşağı Katıştırılmış olarak draft üzerinden kullanıma sunmuştu. Bende aşağı katışık yorum formunu kullanıyordum. Daha önce başka bir blog üzerinde İntense Debate'nin yorum formunu test etmiştim. Hatta Javascript kodları üzzerinde oynama yaparak Türkçe çevirisinide yaptım fakat çevirinin aktif olabilmesi için İntense Debate'nin oanyı gerekiyor. İntense Debate'nin sayfasında henüz diğer diller ile ilgili bir çalışmalarının olmadığını okudum. Sanırım sistemi tam olarak çalışır hale getirdikten sonra çeviri işine el atacaklar.



Blog Wolkanca İntense Debate ile ilgili güzel bir yazı yazmış. Tabi Wolkanca wordpress altyapısını kullandığı için wordpress ile ilgili bilgi vermiş.


Bende yakında İntense Debate yorumlama sisteminin bloggerde kullanımı ile ilgili beğeneceğiniz bir yazı dizisi ile karşınızda olacağım. Tabi önce başka bir yazı dizisi hazırlıyorum. Özellikle Blogger kullanıcısı olan arkadaşların blogumu RSS bağlantısından takip etmesinde yarar var...


Bilgi için : intensedebate

İntense Debate Yorum Formu