Photoshop tasarımlarını Wordpress temasına dönüştürmek.. Ücretsiz!
Photoshop’da tasarladığınız yeni blogunuzun temasını Wordpress teması haline getirmeyi denediyseniz ve eğer CSS, XHTML bilginiz çok az ya da hiç yoksa bunun bir işkenceden farksız olduğunu görmüşsünüzdür.
Profesyonel web sitesi tasarımcıları web sitelerini önce Photoshop gibi bir grafik uygulamasında layerlar halinde tasarlar. Daha sonra bu tasarımı XHTML halinde kodlayıp, bizim “tema” dediğimiz şeyi ortaya çıkarırlar. Ancak dediğim gibi XHTML, CSS ve PHP bilginiz az ise bu iş hiç de görüldüğü kadar kolay değildir.
İşte bu noktada Photoshop (PSD) tasarımlarını XHTML formatına çeviren servisler giriyor devreye. Her ne kadar blogculukla ciddi anlamda uğraşan bir blogcu için bu servisin ücreti o kadar da önemli olmasa da, bu servisin ücretli bir servis olduğu gerçeğini değiştirmiyor.
Ancak artık bu işi ücretsiz olarak yapabilen bir servis daha doğrusu bir Photoshop plugini var: Divine.
Divine, Photoshop CS3 ve CS4 ile çalışabilen bir Photoshop Plugini. Yaptığı şey Photoshop tasarımınızı Wordpress temasına çevirip kaydetmek. Yani hiç XHTML, CSS bilginiz yoksa bile bu eklenti sayesinde Photoshop tasarımınızı kolayca Wordpress teması haline getirebilirsiniz. Ücretsiz olarak dağıtılan Divine’in bazı kısıtlamaları mevcut ancak basit anlamda tasarımlarınızı Wordpress teması haline getirmenize yetiyor. Eklentinin henüz ücretli bir sürümü yok ancak ileride olacak.
Eklentinin nasıl çalıştığıyla ilgili olarak aşağıdaki videoyu izleyebilirsiniz.
http://www.youtube.com/watch?v=nTd0eLHrHuc
Eklentiyi buradan indirebilirsiniz.
CSS ile Buton Tasarlamak
Tasarımla uğraşanların en büyük kabuslarından birisi formları şekillendirmek heralde. -burada CSS ustalarını ayrı tutuyorum- CSS Button Designer adlı servis çok basit bir şekilde CSS ile tasarlanmış butonlar oluşturmanızı sağlıyor. Böylelikle formların o standart ve kaba tasarımından kurtulmuş oluyorsunuz. Hem de tek satır kod yazmadan. Tasarımla uğraşanların çok işine yarayacak bir servis CSS Button Designer.
Kaynak: ToTheTech
Wordpress 2.5+ ve resim hizalama problemi?
Wordpress 2.5+ ile birlikte bir çok yeni özellik de hayatımıza girdi. Bunlardan bir tanesi de “Add Media” modülü. Buraya kadar her şey çok güzel ancak bu şekilde yeni bir imaj dosyasını yazınıza eklemek istediğinizde resim hizalama olayı çalışmayabiliyor.
Bu problem Wordpress 2.5′e geçiş yaptıktan sonra bende de baş gösterdi ancak sonradan, aşağıda anlatacağım yöntemi uygulamadan, kendi kendine düzeldi. Problemi kısaca, eklediğiniz resim dosyasını yazı içerisinde istediğiniz gibi konumlandıramama olarak nitelendirebiliriz.
Bu problem yukarıda da söylediğim gibi bende kendiliğinden düzelti ancak sorun yaşayanlar için küçük bir hack mevcut. Kullandığınız temanızın “style.css” dosyasına aşağıdaki satırları eklediğinizde problem çözülüyor.
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}.alignright {
float: right;
}.alignleft {
float: left;
}
Javascript ile üzerine gelince değişen resim
Web siteniz için bir imaj hazırladınız ve resmin üzerine gelince arka tarafta yüklenmiş başka bir resmin görünmesini istiyorsunuz diyelim. Bunun için çok basit bir Javascript kodu bulunuyor. Öncelikle şu java script kodunu, kullanacağınız sayfada <body> etiketinden sonra tanımlayın:
<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”>
<!– Değişen resim
if(document.images) {
pics = new Array();
pics[1] = new Image();
pics[1].src = “resim1.jpg”;
pics[2] = new Image();
pics[2].src = “resim2.jpg”;
}function changer(from,to) {
if(document.images) {
document.images[from].src = pics[to].src;
}
}
//–>
</SCRIPT>
Daha sonra bu değişen resim çalışmasını kullanacağınız yere aşağıdaki kodu ekleyin:
<a onMouseOver=”changer(‘img1′,2)” onMouseOut=”changer(‘img1′,1)” href=”http://www.teknolojiherseyim.com”>
<img name=”img1″
border=”0″ vspace=”0″ hspace=”0″ src=”resim1.jpg” alt=”alttag”></a>
Artık kullandığınız resim1.jpg üzerine mouse imlecini getirdiğinizde resim2.jpg görünecek, mouse imlecini resmin üzerinden çektiğinizde ise tekrar resim1.jpg görünecek. Çalışan örneği görmek için Teknoloji Herşeyim logosunu deneyin (:
Feedburner sayacını yazı olarak göstermek
Daha önce Feedburner Chicklet Özelleştirme hakkında yazdığım yazıda sizlere FeedBurner’ın kişiselleştirilebilen bazı özelliklerinden bahsetmiştim. Feedburner bilindiği gibi dünyadaki en iyi RSS yönetimi sağlayıcılarından birisi. Feedburner’ı diğerlerinden farklı kılan en önemli özelliği, içerisinde barındırdığı sayısız özelliğin yanında bunları isteğimize göre de özelleştirebiliyor olmamız. Bu özelleştirme işlemini yaparken FeedBurner API den yararlanıyoruz.
Feedburner Counter’ı bir çok blog yazarı bloglarında kullanıyor. Bu sayede kaç tane RSS okuyucuları olduğunu diğer ziyaretçilerle paylaşabiliyorlar. “RSS okuyucu sayımızı paylaşmanın bize ne gibi bir avantajı var?” diyebilirsiniz ancak bir blogun okuyucu sayısı ne kadar çok ise, Google’dan blogunuza ilk kez gelen kişi bu okuyucu sayısına göre blogunuza kafasında bir puan verecek ve yüksek ihtimalle o da takipçileriniz arasına katılacaktır. Böylelikle RSS okuyucu sayınız günden güne artacak ve kendi okuyucu portföyünüzü yaratmaya başlayacaksınız. Bu da size daha fazla bilinirlik ve okunurluk sağlayacak.
Feedburner’ın RSS okuyucu sayısını gösteren sayacını isteğimize göre özelleştirebiliyoruz. Hatta FeedBurner API kullanarak, sayacı standart grafiksel görüntüsünün dışına çıkarıp text biçimimde de görüntüleyebiliriz. Bunun için bir çok Wordpress eklentisi mevcut ancak eklenti kullanmadan da sayacımızı özelleştirebiliyoruz. Öncelikle aşağıdaki kodları, sayacı kullanacağınız sayfa içerisinde uygun bir alana tanımlayın.
<?php
$whaturl=http://api.feedburner.com/awareness/1.0/GetFeedData?uri=FeedburnerBeslemeAdı;
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $whaturl);
$data = curl_exec($ch);
curl_close($ch);
$xml = new SimpleXMLElement($data);
$fb = $xml->feed->entry['circulation'];
?>
Daha sonra FeedBurner sayacınızın görünmesini istediğiniz yere şu kodu ekleyin:
<?php echo $fb;?>
Sonuç, bu yazının altında kullandığım örnek gibi olacak. İsterseniz CSS ile sayacınızı daha da şekillendirip, ziyaretçilerinizin dikkatini çekebilirsiniz.
CSS’i anlamak hiç bu kadar kolay olmamıştı
Şuradaki araç sayesinde, metin kutusuna girdiğiniz içeriği isteğinize göre düzenliyorsunuz ve yandaki kutuda bu içeriği yaratırken oluşturulan CSS kodlarını anında görebiliyorsunuz. CSS’in mantığını yeni öğrenmeye başlayanlar için yararlı bir araç.
Wordpress teması yapıyoruz
Blog açtınız ama binlerce tema arasından size hangisinin en uygun olduğuna karar veremiyorsunuz. CSS’e girince çıkmak mümkün değil zaten vs vs.
Gezinirken öyle güzel bir site ile karşılaştımki her Wordpress Blogger’ının aradığı cinsten. Wordpress Theme Generator‘un yaptığı iş aslında çok basit ve bir o kadar da faydalı. Site adı üzerinde, Wordpress için tema oluşturmaya yarıyor. Sol taraftaki menüden, yaratacağınız temanızdaki her alanı özelleştirip renklendirebiliyorsunuz. Yaptığınız değişiklikler de anında sağ taraftaki önizleme ekranında görünüyor. Temanızı istediğiniz gibi özelleştirdikten sonra, “Save” tuşuna basarak bilgisayarınıza kaydedebiliyorsunuz. Servis isterseniz tek bir zip dosyası halinde de sunabiliyor tasarımınızı. Ayrıca hazırladığınız tasarımı dizine ekleyip tüm blog yazarlarının faydalanmasını da sağlayabilirsiniz. Ve bütün bunların hepsi ücretsiz. E ne duruyoruz daha?[tık]
