24 Şubat 2010

Her Blogger, çoğu yazısında en azından bir tane resim kullanır. Kullanılan resimlerde öncelikli olarak çözünürlük, özgünlük, konu ile alaka gibi hususlar önemlidir. Bunun yanında resmin çerçevesi ve başlığı da bir o kadar önemlidir. jQuery ile resimlere başlık ekleme yazısı ile resimlere hem şık bir çerçeve hem de devamlı görüntülenen başlık ekleyebileceğiz. Aşağıdaki örnek resimde resim çerçevesini ve başlığı görebilirsiniz.

muhabbet-kusu-ask

Resimlere jQuery ile Başlık Eklemek için yapılması gerekenler şöyle;
Temanızın yedeğini almayı unutmayın.

Adım 1: jQuery Kodunu Eklemek
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' type='text/javascript'/>
Yukarıdaki kodu kopyalayın ve temanızda yer alan </head> kodunun bir üst satırına yapıştırın. Temanızı kaydedin.

Adım 2: CSS Kodunu Eklemek
/* jQuery ile Resimlere Başlık Ekleme
--------------------------------------------------- */
div.addCaption {
margin-bottom:1.5em;
padding:10px;
text-align:center;
background:#f0f0f0;
border:1px solid #ccc;
color:#565656;
display:inline-block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

div.addCaption img {
display:block;
}
Yukarıdaki kodu kopyalayın ve temanızdaki ]]></b:skin> kodunun bir üst sırasına yapıştırın. Temanızı kaydedin.

Adım 3 : Resimlere Başlık Ekleme
resim-balik-ekle

jQuery kodlarını ve CSS kodlarımızı ekledikten sonra tema kaydedildi. Ancak bu özeliğin devreye girebilmesi için yüklenen ya da yüklenecek resimlerin kodlarında ufak bir düzenleme yapılmalıdır. Yukarıdaki örnek resim kodunda, kırmızı ile kutucuğa alınan iki kodu her kullanmak istediğimiz resime elle yazılmalı. Resime addCaption ve title eklemelisiniz. Burada dikkat etmeniz gereken nokta şudur; addCaption ve title kodları, resim kodunun img ile başlayan kısımdan hemen sonra eklenmelidir. Örnek;
<img class="addCaption" title="Resim-Başlık"/>

Resimlere Zoom Ekleme özelliğinin ardından yine resimlerle alakalı faydalı bir özellik daha anlatılmış oldu. Anlaşılmayan kısımlar olursa lütfen yorumlar kısmında belirtin.

Kolay Gelsin...
Yorum
tyler78 dedi ki...
Bu özellik yakın zamanda eklenmişti zaten ek bir şeye gerek kalmadan. Resimin üstüne tıkladığınızda Başlık Ekle diye seçenekle de ekleyebiliyorsunuz.
Sade dedi ki...
Benzer olmak ile aynı olmak arasındaki farkı görebilene saygımız sonsuzdur. Normal başlık ekleme ile nasıl bu özelliği bir tutunuz anlayamadım.
cosar dedi ki...
sayın sade; sabahtan beri blogumda yeni kayıt giremiyorum veya kayıtları düzenleyemiyorum. sistemde bir sorun mu var acaba.Yoksa benle mi ilgili diye dusunmeye basladim. size oluyor mu? yeni kayıt diyorum; başlığı yazabiliyorum,etiket hanesini de yazabiliyorum ve kaydedebiliyorum ama ama asıl konuyu yazman gereken kısımda dönen bir daire var bekleyip duruyorum.yani sadece konu başlığı ve etiket girip kaydedebiliyorum
.:gelincik:. dedi ki...
Merhabalar, yorumunuzla birlikte sayfama yapmış olduğunuz düzenlemeleri gördüm ve çok beğendim, ellerinize emeğinize sağlık. Yapamadığımız şeyleri beğenmeme gibi bir lüksümüzü olurmu hiç. Çok şık çok kullanışlı olmuş, vaktiniz oldukça diğer taleplerimi yapacağınızı belirtmişsiniz, sanırım 3 eklenti kaldı galiba, ogün bahsettimmi mailde size bilmiyorum ama, "yazının devamını" oku sizinde yazılarınızda belirttiğiniz gibi oldukça önemli, bununla birlikte arşivlerin liste halinde yazılması ve sosyal tuşu ekleme kaldı sanıyorum (çok az şey istemişim değilmi)

Menü harika olmuş, zamanla onu bloguma göre uyarlıycam, retwitter tuşuda öyle, diğerleride hepsi çok güzel çok yararlı olmuşlar, tekrar teşekkür ediyorum.

Paylaşmınıza gelince çok şık bir eklenti olacak bu resim olayı, ancak en son kısmı anlamadım, CSS ve div kodlarını yerlleştikten sonra her resimde yazı değişecek mi anladım, doğrumu, resmi eklediğimizde html düzenle kısmındamı yapılacak yani yeni konu gönderme penceresindeki mi yoksa css kodlarının olduğu html düzenledemi, bunu açıklarsanız sevinirim. Paylaşımlarınız ve destekleriniz için teşekkürler.
cosar dedi ki...
ayarlar>temel> Güncellenmiş düzenleyici seçeneği işaretliyken çalışmıyor. Eski düzenleyici seçtiğimde çalışıyor. google de sordum bakalım birşey denecek mi.
.:gelincik:. dedi ki...
zeynel bey yine ben, dünden beri denememeiştim yeni gönderim yapmayı, ama sabahtan beri aynı, herkes şakır şakır paylaşım yapıyor, ben yapamıyorum, pencere tam aktif olmuyor, sürekli dönen login durumu var, bu eklediğim photobucket vs bir ilgisi olablirmi, draftan çıkardım blogu yine aynı. bu belki dünden beri böylediyde ben bugün göndermek isteyince farkına vardım, siz benim yerime ordan bakarmısınız sizdememi aynı benim blog, çok özür diliyorum ama böyle sizi yoruyorum hep.
Sade dedi ki...
@Cosar çok teşekkürle çözüm önerisi için. Aynı sorunu yaşayanlar için çözüm önerisi oldu. Birde yazı altında yer alan
etiketlerini kullanın seçeneğini seçip, yazıyı kaydedin ve yeni bir yazı oluşturun. Buda başka bir öneri ;) kolay gelsin...
cosar dedi ki...
ben teşekkür ederim sn.sade...
Bu arada dikkatimden mi kaçıyor göremedim,"Bu Yazıyı Okuyan Bunları da Okur!" özelliğini anlatmış mıydınız.o da çok hoş. adresini verir misiniz bir uygulamak istiyorum
Sade dedi ki...
Yorum kısmının altındaki Google Arama ile "Yazı Sonuna Resimli Benzer Yazı Ekleme" şeklinde aratabilirsiniz. Çok kolay bir şekilde blogunuza ekleyebilirsiniz. Umarım işinize yarar ;)
gez-ye-ic dedi ki...
Merhaba Sade,
Ben kayıtlarımdaki resim albümleri için picasaweb i kullanıyorum. Fakat hoşuma gitmiyor.
Bunu yerine, thumbnail leri ve daha büyük olarak resmi gösteren uygulamayı merek ediyorum. Sanırım Jquery ile yapılıyor. Picasaweb deki albümlerini bu şekilde yapmak istiyorum. Ancak her albümdeki resim sayısı yüksek olduğu için, elle tek tek herhangibir birşey girmemem lazım diye düşünüyorum. Bu konuda ne tavsiye edersiniz, veya nasıl yapabilirim?
Şimdiden teşekkürler
Sade dedi ki...
Resimleri büyük boyutlarda blogunuzda mı kullanmak istiyorsunuz? Slideshow mu yapmak istiyorsunuz?
gez-ye-ic dedi ki...
Merhaba,
Yapmak istediğim, slideshow yerine, resimlerin küçüklerini göstermek, birini tıklayınca veya üstüne gelince, büyümesi.
Internetde lightbox gibi uygulamalar gördüm ama, ya birkaç resimden oluşuyor ve onun yolunu tek tek girdiriyor, veya tüm resimlerin site ile aynı yerde web hosting yapılmasını istiyor. Benim albumlerim picasa web de ve heribiri, 30-50 gibi büyük sayıda resim içeriyor. Bu arada, jquery scriptleri de bir yerde upload olarak tutmam gerekiyor değil mi?
Picasa da, album menüsü altında "html olarak dışa aktar" diye güzel bir uygulama var ama o da bunun site ile aynı yerde host edilmesini istiyor. blogpsot olmasaydı, güzel bir uygulamaya benziyor.
Teşekkürler desteğiniz için.
Sade dedi ki...
Blogger bedava bir platform, picasa da öyle tabi böyle olunca çoğu şey kısıtlı. Sizin istediklerinizi yapmak için hosting şirketleri ile görüşüp alan almak ve bu ve benzeri uygulamaları uygulamak lazım. Yoksa bu kısıtılı imkanlarla size uzun ve zahmetli gelen yol maalesef tek yol. Tek tek resimleri düzenlemek kolay değil ama bedavadan bu kadar :) Belki profesyonel bir blogger'dan yardım alabilirsiniz. Bu ben olmuyorum, zira ben amatörüm :)

Jquery için gerekli dosyalarınızı da silinmesinden endişe duymayacağınız bir yere yüklerseniz tabiki rahat edersiniz.
gez-ye-ic dedi ki...
Haklısınız, hosting i düşünmeyince bunlara katlanacağız.
Colorbox ile deneme yapmaya başladım. Üç resim koydum, fakat herbiri ayrı ayrı kayıt sayfasına geliyor ve herbirini tıklayınca istediğim colorbox uygulaması açılıyor ve ileri, geri tuşları çalışıyor. Colorbox'ın üçüncü uygulaması güzel, kullanılabilir. Fakat, neden her resim , sayfada alt alta gözüküyor çözemedim. Siz acaba hiç kullandınız mı colorbox ı? lightbox ın yeni versiyonu deniyor. Sanırım, basit bir hata yapıyorum ama bulamadım. fikriniz olursa memnun olurum.
gez-ye-ic dedi ki...
Merhaba,
Sonunda bu Colorbox uygulamasını hallettim. Bu konuda Türkiyedeki bloglarda sadece bir yazı ve onun kopyaları var. Bu nedenle ilgilenenlere örnek olsun diye yazıyorum. Benim blogdaki kaleiçi yazısının resimlerini colorbox a çevirdim. Resim adeti fazla olunca , işleri kolaylaştırmak için, biraz class falan tanımladım oldu. Resim galerileri için, siyah background olduğu için , güzel bir uygulama, tavsiye ederim.
Sade dedi ki...
@gez-ye-iç: Merhaba, Güzel olmuş. Güle güle kullanın.
Tesettür Mayo dedi ki...
çok güzel bir eklenti teşekürler.
sudamlası dedi ki...
bu eklenti kendi eklediğimiz arkaplandada çalışıyormu? teşekkürler...