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

Blogger Yazı Başlıklarını Özelleştirme

| | Comments

Bu yazımda Blogger kullanıcıları için ufak bir css ipucu vereceğim. Blogunuz da yayınladığınız yazıların başlıklarını istediğiniz gibi özelleştirebilirsiniz. Tamamını büyük harf - küçük harf veya sadece ilk harflerinin büyük olmasını sağlayabilirsiniz. Bu işlemleri nasıl mı yapacağız? Aşama aşama anlatayım o zaman!..

İlk olarak bloğunuzda Css kodlarınız arasında yazı başlığı ile ilgili kod bölümünü tespit etmeniz gerekmektedir. Nasıl mı tespit edeceğiz diye sorarsanız bunun bir kaç değişik yöntemi var. Genellikle temalarda yazı başlığı ile ilgili Css kodu aşağıdaki kod öbekleri gibi oluyor;

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

Bloggerde Yazı Altına Sosyal İkon Yerleştirme

| | Comments

Daha önce yabancı bir blog yazarı Web üzerinden sıkça bağlandığımız servislere ait URL satırlarını saklamamımızı, böylece tek seferde o uzun URL satırını yazmadan ilgili servise erişmemizi olanaklı kılan bir özelliktirsosyal bookmark (Sosyal ikon) scriptinin bloggerde nasıl çalıştırılacağını anlatmıştı. Benim anlatacağım yöntem çok daha basit diyebilirim. Bu yazı altında sosyal ikonda ne oluyor diyenler yazılarımın altındaki imleme sitelerine direk bağlantı ikonları koyduğunu görecekler. Sosyal imleme sitelerinin ikonlarının yazı altına nasıl yerleştirildiğini yazımın sonunda sizlerde kolaylıkla gerçekleştirebileceksiniz.


Diğer Blogger 1999 Ağustos'unda San Fransisko'da Pyra Labs adında ufak bir şirket olarak kuruldu.blogger kullanıcılarınında yararlanabilmesi ve kendilerine göre nasıl özelleştirebileceklerini elimden geldiğince anlatacağım.


1. Öncelikle buradaki kodları Notepad ++ ile veya başka bir metin editörü ile açıyoruz. Ctrl+F tuşlarına basarak arama kutusunu açıyoruz. Kodların içinde teknomobi.blogspot.com yazan yerlere aynı şekilde kendi blogunuzun adresini yazıyorsunuz. Bunu kolayca yapmak için hepsini değiştir diyebilirsiniz.


2. Ardından TeknoMobi diye arama yaptırıyoruz. Kodlardan da farkedeceğiniz gibi title etiketinin karşılığı olarak TeknoMobi yazdım. Bu benim blogumun başlığı sizde kendiniz buraya istediğiniz başlığı yazabilirsiniz.


3. İlk iki aşamayı tamamladıktan sonra Ctrl+S yaparak kaydediyoruz.


4. Şimdi temamızda gerekli yere kodlarımızı entegre edeceğiz. Temamızda Yerleşim - HTML Düzenle - Widget genişlet diyoruz. Tabi ki öncelikle temamızın yedeğini alıyoruz.


5. Ctrl+F yaparak <data:post.body/> kodunu arattırıyoruz ve hemen altına üçüncü aşamada hazırladığımız kodları yapıştırıyoruz. Temamızı kaydetmeden önce önizleme yaparak işlemleri doğru yapıp yapmadığınızdan emin olabilirsiniz.


Acemi kullanıcıların javascript dosyasıyla uğraşmamaları için kendi googlepages sayfama yükledim. İsteyen verdiğim kodların içindeki BaseTM.js dosyasını indirip kendi googlepages sayfalarına yükleyebilirler.

Blogger Css Dock Menu Tasarımı

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

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