Light Box Blogger Resim Görüntüleme

Light Box Blogger Resim Görüntüleme

Light Box, bir çoğunuzun bildiği ve belkide blogunda kullandığı ya da kullanmak istediği şık bir resim görüntüleme eklentisi. Blogger resim görüntüleme özelliği hakkında bulabildiğim türkçe kaynakları sizler ile paylaşmak ve konuyu Takip Listem penceresinden sizlere anlatmak istiyorum. Öncelikle, Light Box özelliğinin yaratıcısının, uygulamasını örnekler ile anlattığı yazısını incelemenizi tavsiye ederim; Lokesh Dhakar. Örnek resimlere tıklayarak uygulamanın nasıl çalıştığı hakkında bilgi sahibi olabilirsiniz.

Tabi bu uygulamanın blogger alt yapısına uyumluluğunu merak ediyor olabilirsiniz. Uygulamanın blogger ile uyumlu çalıştığını sizlere göstermek için bir örnek blog oluşturdum. Merak ediyorsanız, Light Box Blogger Resim Görüntüleme uygulamasını alttaki adresten kontrol edebilirsiniz;

Light Box Blogger Resim Görüntüleme Uygulamasını Blogger'a Entegre Etmek

1. Blogger Kontrol Paneline Giriş Yapın.

2. Yerleşim ► HTML'yi Düzenle yolunu izleyin.

3. Alttaki kodu temanızda bulun.

4. Bulmuş olduğunuz kodun hemen bir üst satırına alttaki kodu yapıştırın;

Blogger Sürükle Paylaş

Blogger Sürükle Paylaş

Sürükle paylaş özelliği, Mashable sitesini ziyaret edenlerin dikkatini çekmiştir. Fare (mouse) ile linklerin (özellikle resim) üzerine geldiğinizde 'Sürükle Paylaş' (Drag to Share) yazısı çıkar. Yazı çıkan link farenin sağ tuşu yardımı ile hareket ettirildiklerinde açılan sürükle paylaş sayfasında sosyal ağ bağlantı tuşları ile istenen link paylaşılır.

Blogger Sürükle Paylaş - Önizleme
Kısaca bu şekilde anlatılabilecek olan Sürükle Paylaş özelliği artık blogger içinde kullanılabilir. Görsel olarak nasıl göründüğünü merak edenler PrettySociable, Mashable like sharing sitesini ziyaret edebilir.

Bloggerdaki görünümünü merak edenler Sürükle Paylaş blogundan 'Sürükle Paylaş' ya da 'Tut ve Yay' da diyebileceğim özelliği test edebilirler. Bu örnekte orjinalinden farklı olarak 'Drag to Share' yerine 'Tut ve Yay', 'Share on Facebook' yerine de 'Facebook ile YAY' kullandım. Biraz türkçeleştirmiş oldum. 'Sürükle, Paylaş' kelimelerini ü ve ş harflerinin uyumsuzluğundan dolayı kullanamadım. İsteyenler orjinal halini de kullanabilirler.

Eğer Blogger Sürükle Paylaş özelliğini beğendiyseniz yazının devamını okumalısınız.

Blogger Sürükle Paylaş - Uygulama

Öncelikle temanızın bir yedeğini almayı unutmayın. Bu tarz işlemler için test blogunuzu kullanmanızı öneririm.

Adım 1: Temanızda kodunu CTRL+F tuşlarını kullanarak aratın. Alttaki kodu kopyalayın ve bulmuş olduğunuz kodun hemen bir üst satırına yapıştırın.

Bu işlemlerin ardından temanızı kaydedebilirsiniz.

Adım 3: Yukarıdaki ilk iki adım gerçekleştirildikten sonra, bu özelliği, yazı içerisinde kullanmak için linklerde ufak bir değişiklik yapılmalı. Linklere rel="prettysociable" kodu eklenmeli.

3.1. Web adresleri için Sürükle Paylaş Kullanımı
Sürükle Paylaş özelliğini kullanmak istediğiniz web adreslerinize, eklemeniz gereken kısım ve konumlandırmanız gereken yer alttaki örnekte belirtilmiştir.

rel="prettysociable">Google

3.2. Resimler için Sürükle Paylaş Kullanımı
Sürükle Paylaş özelliğini kullanmak istediğiniz resimlerinizin kodlarına, eklemeniz gereken kısım ve konumlandırmanız gereken yer belirtilmiştir.

rel="prettysociable">

İsterseniz daha önce kullandığınız link ve resimlere rel="prettysociable" kodunu ekleyerek geçmiş yazılarınız güncelleyebilirsiniz.

Tut ve Yay olarak Türkçeleştirmeye çalıştığım şekli yerine orjinalini kullanmak isteyenler adresinden gerekli tüm dosyaları indirebilir. İndirdiğiniz dosyaları bloggerda javascript depolama yazısından yardım alarak kullanabilirsiniz.

Kolay Gelsin.

Blogger Sidebar Başlıklarına Icon Ekleme

Blogger Sidebar Başlıklarına Icon Ekleme

1. Sütunda yer alan Eklenti İsimlerini Bulma

Kodda kırmızı renkler eklenti id adını mavi renkler de blogunuzda görüntülenen adını belirtmektedir. Profile1 profil, Label1 etiket, BlogArchive1 Arşiv, Followers1 İzleyiciler ve HTML1 HTML/Javascript eklentilerini belirtiyor.

2. Eklenti İsimlerine Göre CSS Kodları düzenleme
Yukarda bulmuş olduğumuz id eklenti isimlere özel CSS kodları düzenleyeceğiz. Bu kodlar sayesinde sütunlarda yer alan herbir eklenti için farklı simge kullanılacak.

Örnek olarak ele alınacak eklentiler şu şekildedir;
Profile1 , Label1 , BlogArchive1, Followers1, HTML1

Her bir eklenti için alttaki gibi birer CSS kodu oluşturulacak ve parantez içleri {} kullanıcı tarafından kişiselleştirilecek.

#Profile1 h2{}
#Label1 h2{}
#BlogArchive1 h2{}
#Followers1 h2{}
#HTML1 h2{}

Denemek isteyenler için, örnek CSS kodlarını şu şekilde sıralayabiliriz;

#Profile1 h2{
background:transparent url(http://i48.tinypic.com/bhdi0o.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:15px;
}

Yukarıdaki kod ile Profil bilgimizi gösteren eklenti başlığında kırmızı ile renklendirilmiş olan yere yapıştıracağınız icon adresi görüntülenecektir. Icon, başlığa göre havada ya da altta olabilir. Temanıza göre değişiklik gösterecektir. Padding değerlerini değiştirerek simgenin yerini tam olarak düzenleyebilirsiniz.

3. Temaya Blogger Sütun Başlıklarına Simge Ekle için Gerekli CSS Kodu Ekleme
Uygulamayı önce test blogunuzda denemenizi tavsiye ederim. Profil eklentisine simge ekleme yönteminden sonra arşiv, hakkımda ve diğer eklentiler içinde simge ekleme için aynı CSS kodlarını resim linklerini değiştirerek kullanmak mümkün;

#Profile1 h2{
background:transparent url(http://i48.tinypic.com/bhdi0o.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}
#Label1 h2{
background:transparent url(http://i46.tinypic.com/fbygz5.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}
#BlogArchive1 h2{
background:transparent url(http://i47.tinypic.com/v5gv9t.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}
#HTML1 h2{
background:transparent url(http://i48.tinypic.com/15dv38x.jpg) no-repeat scroll left center;
padding:5px 5px 5px 30px;
margin-top:10px;
}

Yukarıdaki kodda mavi ile renklendirilmiş kısımlara istediğiniz simge (icon) adreslerini yapıştırın. Daha sonra temanızda ]]> kodunun hemen üstüne tüm kodu yapıştırın.

Blogger Sütun Başlıklarına Simge Eklemek için size lazım olacak simgeleri en iyi bedava Icon sitelerinden bulabilirsiniz.