Blogger Css Dock Menu Tasarımı

Gönderen TeknoMobi | Salı, Eylül 23, 2008 | Comments

Evet yeni bir Ajax uygulamasının bloggere uyarlanması işlemiyle karşınızdayım. Önceki yazımızda köşeden açılan reklam yani pageear yapımını anlatmıştık. Bu yazımızda ise Css Dock Menü'nün blogger alt yapısında nasıl kullanılabileceğini uygulamalı olarak anlatacağız. Css Dock Menünün ne olduğunu veya nasıl göründüğünü merak ediyorsanız burayı ziyaret edin!.. 
1. Öncelikle buradan üzerinde çalışacağımız dosyaları indirelim. Dosyayı indidikten sonra images klasörü içindeki resimlerin hepsini herhangi bir resim barındırma sitesine veya googlepagesinize yükleyin.
2. Ardından stlye dosyasını Notepad ++ ile veya herhangi bir metin editörü ile açarak url(images/main-bg.gif)şeklinde olan yerlere yüklediğiniz resim dosyasının linkini kopyalayın. Örnek olarak url(http:www.test.googlepages.com/images/main-bg.gif) vb. gibi... Resim linklerini kpyaladıktan sonra dosyayı kaydedin.
3. Şimdi stlye.css , iepngfix , interface.js , jquery.js dosyalarını googlepagesinize veya alternatif bir siteye yükleyin.
4. Artık blogumuza entegre işlemine geçebiliriz. Şimdi HTML düzenleme moduna geçiyoruz. Öncelikle herhangi bir sorunla karşılaşmamak için temamızın bir yedeğini alıyoruz. Şablonu genişlet diyerek işlemimize başlayalım.
5. <head> kodunun hemen altına
<script src='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/jquery.js' type='text/javascript'/> <script src='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/interface.js' type='text/javascript'/> <link href='http://denemeler.weebly.com/uploads/1/1/4/2/1142610/style.css' rel='stylesheet' type='text/css'/> <!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(http://denemeler.weebly.com/uploads/1/1/4/2/1142610/iepngfix.htc) } </style> <![endif]-->  
<style>
kodunu kopyalıyoruz. Yukarıdaki kod içindeki dosya bağlantılarını kendi yüklediğimiz dosyaların bağlantıları ile değiştiriyoruz.
6. <body> kodunun hemen altına bu kodu kopyalıyoruz. Burası işlemlerimizin son aşamasıydı artık buradaki ikonları ve bağlantıları kendi isteğinize göre düzenleyebilirsiniz. Temanızı kaydetmeden önce önizleme yaparak işlemleri doğru yapıp yapmadığınızdan emin olabilirsiniz. Her temada aynı düzende görünmeyebilir.
Css Dock Menünün bloggere uygulanması biraz zahmetli ama yine de çok zor değil takıldığınız bir yer olduğunda yorum yaparak sorununuzu / isteğinizi açıkça belirtirseniz elimden geldiğince yardımcı olmaya çalışırım.

Yazan : TeknoMobi Editörü
Not : Eğer bu yazıyı kendi siteniz veya blogunuzda yayınlamak isterseniz yazınızın altında TeknoMobi ve yazının tam linkini vermelisiniz.



Blogger için Pageear Hazırlama - Köşeden Açılan Reklam

Gönderen TeknoMobi | Pazartesi, Eylül 08, 2008 | Comments

Daha önce Harun Güven'in (Hrn) blogunda yayınladığı pageearı kullanıyordum. Efekt olarak göze çok hoş gelen bu eklenti sayesinde blogunuzun sağ üst köşesinin sayfa yaprağı gibi açılmasını sağlıyoruz, Pageear'dan eklenti diye bahsettim ama aslında blogumuzda ufak bir javascript kodu entegre ediyoruz. Şimdi gelelim bu yazıyı neden kaleme aldığıma.. Hrn blogunda anlattıklarını sorunsuz yapmıştım. Hatta blogunda ve BloggerDestek sitesinde yazdığı yazılarda verdiği JavaScript Kodunu indirmede sorun yaşadığım içinde  .js kodunu bloguna entegre eden Taytanik'ten rica ettim oda sağolsun beni kırmadı ve js dosyasını gönderdi. Bende bloguma entegre ettim ve bir kaç gün öncesine kadarda sorunsuz kullanıyordum. Ne olduysa pageear açılmamaya başladı. Sorunun nereden kaynaklandığını araştırırken gördüm ki .js kodlarının içinde .swf dosyalarının yüklendiği sitede sorun var. Bende pagearı kendim düzenlemeye daha doğrusu bloggere entegre etmeye çalıştım. Bu çalışmamda Hrn'un yazısından öğrendiklerimin çok faydası oldu. 


Şimdi gelelim Blogger'de Pageear'ın (PagePeel) efektini nasıl vereceğimize öncelikle buradan bize gerekli düzenlemeleri yapacağımız dosyaları indirelim. Ardıdan klasörün içindeki pageear.js dosyasını herhangi bir metin editörü ile açalım tavsiyem Notepad ++ dır. Tabi siz istediğinizi kullanbilirsiniz. açtığınız pageear.js dosyasında var pagearSmallImg =  yazan satırdaki resim linki 100x100 px boyutlarında köşe açılmadan önceki resmimiz. var pagearBigImg = ise köşe açılınca görünecek olan 500x500 px boyutundaki büyük resmimiz. Ben sizler için şablon hazırladım ve bir sunucuya yükledim. Siz isteğinize göre düzenleyip pageear.js içindeki linkleri değiştirerek kendi resimlerinizin görünmesini sağlayabilirsiniz.
Köşe açıldığında gidilmesini istediğimiz linki değiştirmek için ise yine pageear.js dosyasında var jumpTo =  satırındaki bağlantı linkini değiştiriyoruz.
Artık pageear.js dosyamızı hazırladık. Şimdi yapmanız gereken pageear.js ve AC_OETags.js dosyalarını  googlepages gibi herhangi bir barındırma sitesine yüklemek. Googlepages'e alternatif olarak Weebly'i de kullanabilirsiniz.
Şimdi ise hazırladığımız pageear.js dosyalarını blogumuza kod ekleyerek çağırmalıyız. HTML  düzenleme  moduna geçerek şablonu genişlet diyoruz Tabi öncelikle temazını yedeğini almayı unutmayın. Ardından <title><data:blog.pageTitle/></title> kodunu ctrl+f ile aratarak hemen altına
<!--<script src="http://www.weebly.com/uploads/1/1/4/2/1142610/ac_oetags.js" type="text/javascript"></script>-->
<!--<script type="text/javascript" src="http://www.weebly.com/uploads/1/1/4/2/1142610/pageear.js"></script>-->
kodlarını yapıştın. 
En son olarak ise </div></div> <!-- fin de capa outer-wrapper --> kodunun hemen altına veya  </body> kodunun hemen üstüne
<script language='javascript' src='http://www.weebly.com/uploads/1/1/4/2/1142610/ac_oetags.js'/>
<script src='http://www.weebly.com/uploads/1/1/4/2/1142610/pageear.js' type='text/javascript'/>
<!-- PageEar function call -->
<script type='text/javascript'>
writeObjects();
</script>
kodunu yapıştırın. Artık işlemlerimiz bitti şablonu kaydetmeden önce önizleme yaparak doğru düzenlediğinize emin olun. 
Yazı sizlere biraz karışık gelebilir ama korkmayın hiçbir zorluğu yok. Yapamadığınız bir yer veya anlamadığınız bir yer olursa yorum yazarak veya iletişim formunu kullanarak sorununuzu / isteğinizi açıkça yazabilirsiniz.


Yazan : TeknoMobi Editörü


Not : Eğer bu yazıyı kendi sitenizde veya blogunuzda yayınlamak isterseniz yazınızın altında  kaynak olarak TeknoMobi  ve sayfanın tam linkini vermelisiniz.



Notepad Chaos Blogger Tema Türkçe

Gönderen TeknoMobi | Cumartesi, Eylül 06, 2008 | Comments

blogger templates,blogger tema,notepad tema, notepad templateSmashing Magazine'nin yayınladığı Notepad Chaos WordPress temasını Yakuter Türkçe'ye çevirmişti. GosuBlogger ise Blogger'e uyarlamasını yaptı. Bende Gosu arkadaşımın yaptığı düzenlemeyi Türkçe'ye çevirdim. Daha doğrusu temanın özelliğinden dolayı bazı yerlerde yazılar kodlar ile değil resim olarak düzenlenmiş. Yakuter temayı nasıl düzenlediğinden bahsederken bu zorluğun altını çizmiş ama sonuçta temayı tamamen Türkçe'leştirmiş.

Bende Türkçe düzenlemeyi yaparken biraz zorlandım diyebilirim. Bazı ölçüleri tam tutturamamaktan kaynaklandı. Tabi sonuçta Yakuter'in hazırladığı resim dosyalarını Gosu arkadaşımın hazırladığı Blogger versiyonuna uydurmak kolay oldu diyemem.

Temayı yükledikten sonra en alt sol taraftaki benim logomun yerine kendi logonuzu koymak için  32x32 px boyutlarında ayarlayın. Ardından logonuzu herhangi bir yere yükleyerek HTML kodlarının içinde http://i39.tinypic.com/dgkmzt.gif diyerek arama yapın ve yerine kendi logonuzun adresini yapıştırın. Ardından logonun altındaki linki değiştirmek için ise http://feeds2.feedburner.com/teknomobi diyerek aratın ve istediğiniz bir url girin.

Sayfa Öğelerinde ;
  • TeknoMobi Rss Adresi : http://feeds2.feedburner.com/teknomobi
  • GosuBlogger Rss Adresi : http://feeds.feedburner.com/gosublogger
  • Yakuter Rss Adresi : http://feeds.feedburner.com/yakuter

Biçimlendirme Ayarları:

notepad teması biçimlendirme


Tema ile ilgili soru ve görüşlerinizi ister konuya yorum yazarak istersenizde iletişim formumuzu kullanarak iletebilirsiniz.


Görüntüle : Notepad Chaos Tema Türkçe Önizleme
Yükle : Notepad Chaos Tema Türkçe
Yararlanılan Kaynaklar : GosuBlogger , Yakuter



FervensC Blogger Tema Türkçe

Gönderen TeknoMobi | Çarşamba, Eylül 03, 2008 | Comments

Fervens C teması solda yazı sütunu, sağda iki tane sütun olmak üzere 3 sütunlu yapıdadır. Bu sefer çevirisini yaptığımız tema ise Fervens serisinin sonuncusu olan FervensC temasıdır.
Fervens A-B-C Temalarının Ortak Özellikleri :  

  • 3 Sütunlu
  • Web 2.0 Tasarım
  • Genişlik Blogger Uyumlu
  • Yuvarlak Köşeler


Fervens C : Önizleme , Xml Dosyası
Yazan : TeknoMobi Editörü

* Sitede sunulan programları kurmadan/çalıştırmadan önce virüs taramasından geçiriniz.  Programların kullanımları sonucu oluşabilecek zararlardan http://teknomobi.blogspot.com sorumlu değildir.



FervensB Blogger Tema Türkçe

Gönderen TeknoMobi | Çarşamba, Eylül 03, 2008 | Comments




FervensB teması solda iki tane sütun ve sağda yazı sütunu olmak üzere 3 sütunlu yapıdadır. Bir önceki yazımızda FervensA temasının Türkçe versiyonunu vermiştik. Şimdi sıra FervensB temasının Türkçe Sürümünde...
Fervens A-B-C Tema Ortak Özellikleri : 





  • 3 Sütunlu
  • Web 2,0 Tasarım
  • Genişlik Blogger Uyumlu
  • Yuvarlak Köşeler

FervensB : Önizleme , Xml Dosyası
Yazan : TeknoMobi Editörü







* Sitede sunulan programları kurmadan/çalıştırmadan önce virüs taramasından geçiriniz. 



Programların kullanımları sonucu oluşabilecek zararlardan http://teknomobi.blogspot.com sorumlu değildir.



FervensA Blogger Tema Türkçe

Gönderen TeknoMobi | Salı, Eylül 02, 2008 | Comments

Yeni bir Blogger tema çevirisi ile karşınızdayım. Sizler için FervensA temasını Türkçe olarak düzenledim. Türkiye'de blogger kullanıcılarının sayısı azımsanmayacak kadar çok diyebiliriz. Eh kullanıcı sayısı bu kadar artıncada bloglarda kullanılan temalar genelde aynı olmaya başladı. Çoğu blogger kullanıcısıda yabancı sitelerden aldıkları temaları kendi bloglarına yükleyerek kullanıyorlar. Fakat bu temaların bazı kısımları ne yazık ki Türkçe olarak gelmiyor. Bunuda HTML içinden düzenlemek gerekiyor. Tabi çoğu kişi bu konuda bilgi sahibi olmadığı için HTML kodları ile oynamaya korkuyor. Daha önce Vibrant temasını Türkçe'ye çevirmiştim. Ayrıca resimlerin görünmeme sorununuda ortadan kaldırdım. Şİmdi ise FervansA-B-C temaları üzerinde çalışıyorum. Fervans A temasını çevirisi bitti.Sırasıyla da Fervens B-C çevirileri gelecek... Takip etmeye devam edin!..
Fervens A-B-C Tema Ortak Özellikleri : 


  • 3 Sütunlu
  • Web 2,0 Tasarım
  • Genişlik Blogger Uyumlu
  • Yuvarlak Köşeler
Fervens A teması bir tane orta sütun, bir tane sağ, bir tanede solda olmak üzere 3 sütunlu yapıdadır. Türkçe çevirisinin yapılmasını istediğiniz blogger temalarını yorumlarınızda belirtirseniz. en kısa sürede Türkçe çevirisini yapmaya çalışırım. 
Fervens A : Önizleme , Xml Dosyası
Yazan : TeknoMobi Editörü


* Sitede sunulan programları kurmadan/çalıştırmadan önce virüs taramasından geçiriniz. 
 Programların kullanımları sonucu oluşabilecek zararlardan http://teknomobi.blogspot.com sorumlu değildir.