26 Aralık 2012 Çarşamba
Η Προέλευση του Εορτασμού των Χριστουγέννων
ΕΘΙΜΑ ΤΩΝ ΧΡΙΣΤΟΥΓΕΝΝΩΝ ΣΤΗΝ ΡΟΥΜΕΛΗ
CSS Filtreler İle Resimlere Efekt Verme
Yazılarıma yapılan yorumlar yeni yazı fikirleri için beni besleyen en iyi kaynak. Gelen yorumlarda sorulan soruları daha sonra açıklamak üzere bir yere not alıyorum. Bunlardan biri de resimlerin etrafındaki gölgeyi kaldırmakla ilgili yazdığım yazıya Değmesin Yağlı Boya’nın yaptığı yorumdu. Yorumunda resmin üzerine gelince efekt verilip verilmeyeceğini sormuştu.
Bu yazıda size CSS programlama dilinin filtre özelliğinden bahsedeceğim. CSS’te filtre kodlarını kullanarak resimlere bazı özel efektler verebiliyoruz.
Kodlara geçmeden önce şunu belirteyim, aşağıda verdiğim kodları Şablon > HTML’yi Düzenle dedikten sonra Ctrl+F tuş kombinasyonu yardımıyla kolayca bulabileceğiniz ]]></b:skin> kodunun üstüne ekleyeceksiniz.
1. Resme Siyah-Beyaz Efekti Verme
.post-body img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
}.post-body img:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
}
2. Resme Bulanıklık Efekti Verme
.post-body img {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}.post-body img:hover {
filter: blur(0);
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);
}
3. Resme Şeffaflık Efekti Verme
.post-body img {
opacity:0.3;
}.post-body img:hover {
opacity:1;
}
4. Resme Zoom Efekti Verme
.post-body img {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}.post-body img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Efektlerin görünümünü aşağıdaki videoda arka arkaya sıraladım.
İpucu: Farkettiyseniz hepsinde .post-body img ve .post-body img:hover şeklinde kod var.Bunlarda .post-body img resmin sayfadaki görüntüsünü temsil eder, post-body img:hover ise üzerine gelinceki görüntüyü temsil eder. Siz tam tersi efekt istiyorsanız bunların altındaki kodları yer değiştirebilirsiniz.
24 Aralık 2012 Pazartesi
Dikey Minimal Slayt
Geçtiğimiz günlerde yatay minimal slayt eklentisini paylaşmış ve dikey versiyonunu da paylaşacağımı söylemiştim. O gün bugün :)
Eklenti hakkında fazla şey yazmaya gerek yok. Yatay versiyonu blogun altına ve üstüne ekleyebiliyorken bu versiyonu blogunuzun sağ veya sol kenar çubuğuna ekleyebiliyorsunuz. Bunun dışında tüm özellikleri aynı.
Blogda nasıl durduğunu ve nasıl çalıştığını görmek için aşağıdaki videoyu izleyebilirsiniz.
Eklentiyi blogunuzu eklemek için Şablon > HTML’yi Düzenle > Devam Et yolunu izleyin ve Ctrl +F tuş kombinasyonunun yardımıyla </head> kodunu bulun. Hemen üzerine şu kodları ekleyin.
<link href='https://docs.google.com/file/d/0BxxMpDce-fNUM19IN3VEc09XcDQ/edit' rel='stylesheet' type='text/css'/>
<script src='http://yourjavascript.com/29411949153/modernizr-custom-17475.js'/>
ikinci olarak yine şablondan </body> kodunu bulun ve hemen üzerine şu kodları ekleyin.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/19312220424/jquerypp-custom.js' type='text/javascript'/>
<script src='http://yourjavascript.com/24134092153/jquery-elastislide.js' type='text/javascript'/>
<script type='text/javascript'>
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
</script>
Son olarak Yerleşim sekmesini açın ve burada kenar sidebar alanındaki Gadget ekleme yerine HTML/JavaScript olarak şu kodları ekleyin.
<!-- Blog Hocam Minimal Dikey Foto Galeri Eklentisi -->
<ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRIfDyxGvC9Bz4yyZy6480Fg3XkqxGKvGYXqgnYJw_YM3kF_DzFVikAJv-IedPNsZ1pHAevXExYZKCb-zUhsbk_tu2e0H-r0SHmkRVJZIhesmWK60IZmeyE6UmwrD4mc-jwwxHgGCKyVYz/s160/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pfHxcLLRiFL4KYl-l9Yv9lZ4_SB8jhw2GdShioUwpsFjOVVW1H6lIsmE6gBAP5LKJql-Ok8D7IBi8n4WMLRBre9nGgaLJIJMvtjtTFdK2Lt7QU3r7WAeY4ktgzqwZsCBHyaENRxUgYCF/s160/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpA0fvDC4E2pO-xSiAFHw7djneOadfCV2Oleyta-guzgf1jog-vyemZ-eTJI40AitUp-QkHcSuZP9vPy4xNpyaisqJmks6UBtSXcvVsBAOl48yXyxXQExrgGD1t1npbYscMg5VrcAbwkbJ/s160/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg29Yhs4ay565O08VIum6IhcMUzqwiAVZHRr-yS0eJpUBSjFXKTjuqPh_cPl5V_RRwzHwj2LyDGYZfPC00hhseTfyxCZgBCmDqSHJ9xI_BmZoxldhybGFTEhIg8Y6u9yTXrv71v-zvyatTg/s160/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFAB2-JAu5SRHgr1cZyfZGM7KurWHt_vjZatGxqtwp0bi60oXB-3SXa2Q8-oQ4rCn-WEamOL_yQJgAyMq_hoHFEhB3Z1r5BHNyt02E4OevmO1n82667-W98AVlVtwVIqBOODpCSLdX7Qb-/s160/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxT_x6OZHlNb5ObgMbcbTc_x-ObJLL9DQrmXttuZHaB1FFpixTIebne9PBykNJpDL8_1ITVDV0-Q6SplbEumPzgLPpanoB-ExD9pDVsLPur5xhNLOtpp7ipOB0cCPDHKkJlTSV4D0s8iQ/s160/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw5xgG4ixawwYgdZ2xhykS1pe7fRCfst02lK2BKOkTIsai2SGfnykxi9jXDfQzcwQ8NxtEL5iynu33yhKdZW_PYUOYkFrF-FkTB-lh5H-R8EdZRUBFT8c0Htqqat52UaOSNFZJPm4opscx/s160/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqoLybg3aOd7BYHwI67Kd56Hzu1qqRckjal6hEDoS4vdlCG1kOZIaVdnXAM4PXo0CGzY1AutnrPtGE122Ktjj9qBHtOTc9t0xcH1hiCNSaXKnUPIufbCyvDFHKIjh0cg9cHk5t5ZpQih4/s160/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2aF-stSAZIF-afJzjYUfHXGqnUO4Hg0aEvgPnaPgHj5NISfxPaEuhGXcLVHOlQxsG94_wxwtM1We5x1q1W-ME35dAVU94DFDC4OZqdGRDTjcDCHVROxqGN1q6F80eTuGzZqx6TATbBbb/s160/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippyRqS5iwIFXWFtoBUJxKRvqtx7Qd7TDl9tLH5TzzEljXalfvQ3owO8zTD18U01pR2HLPlpipHC2tggq9p8DZcSeUSetst3GP_DuS_GkId-ziShcEwg8PWfW3Gxrq1StpNzEJaTR4ft1_/s160/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDdN-egUorNSmJwtUGQFrheumPGM8j2cFgiWRwPQveaaASBJntqC61HRwOmuH0oJavNTtTwLnatEFgjvc4apuq0g11xc_mTPzZABo6dwJ9Y25fWBw4BuzOYzBqgCqqbNANNbnIdhGUs2pv/s160/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqLBxZdpNuX8_WxRQ4JY1eWqcPaPxEApcN3ejAcJaAXnQHz34DDbylfLXncVy1ZvgDqVcEKPtDz2mOOi-JU5hBUTYti7QQ1pQ6_EJuyccC_5tObYJgJAX4ahPgrvpaBNXv-yy9UHgRk1al/s160/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNjw_wtlVVfDTrMqVZEdDr3v5RxaWXCfEnW-UEBj_fUv_3m4dBR0Ld41x_gMIfjhJu_9TrVt342_8FDKtYThW5WJfxZYLHi1CjDOlU0gbcCRVUc175pm_KhOVTYap0IGAWA28ZmSS-63pX/s160/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcrTV_xURJCDQm-GqtNu9ujN8yWM66lMWBwVeBG0jK-wWigA5wludQNWB8CG567PaLZFMJourDvdm2jYvSlsdMbt2d8n0hKaqPOajOVkftbROaoQ6OYNOcXZt0HZ9mVCq4hPOY3y83P6v/s160/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2Ay4uqviwDUW8-2Ewxq1c5AgzgcS3WP80uLfxMMF0TCWNlhoZZPUrMgq-KZCwIYsImldpRquWY_q34fcDw87QH9tZAvEh2xpPeUjtp8E0_pscMH0McXizM3wqJQINZMgMHfOsz-0Bdo7/s160/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRmwk5Ksw2X_h8zzx_qG6ozzVWDcJmOKD4O2koAGaso77YtNDsEbFs0ZxwMI02Xxr-NhgKnUOKxBJJwo9aYjC665NhLZftFKNeWMvrfvt6X3Uo9q7452bWAfLSuBb0IIbtbNkuPLkZELb8/s160/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAR058MC6RnXpYckr1D0pVDNdCHNBoZ3nFDyYb_RWzW3P1mL1AEn96PVTkzRFBVti3UNqurmRm4F1mNX8D0fDVbGmSRqBZa4lJJUW9Gr2rLOiZKH9u8WQqSfxEI6jsTswYE0J4kVJJYWpH/s160/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_LRd06Hs4IB2KOj4Wy6B3lFxj9pwPlApNKKLmvL5VFxrEH6UyJ70i9ujPO-xtX6mJRibcXU3l2O2e453ndF_Kj_DrLPYEB_6lyRWDvjUVKznOWXhg1R15baIi1CcVLCjTB21gMRdqzwzZ/s160/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSoZp0eb53HPr6QmOvr4z0ueL7MZ-SdtCPEo_Q9GCBGpM09n8uacswFdfeBLQAB78TXijjScO9oNCg2DKSR-jyBaZZddDkhHIVmdi4a2WjEen3OCTyPZs7oihchxCLpuGy2ADCdtRoZ3ld/s160/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9IbTa2RxSnN32WMpthv_g8nWU-0DCoK4CI8PdtzSPM1vRbN_eek5CcRf157FKbvFssQb2pOm3JQm39_tGUNoLnpJVoaSWYdB6vXgRzAzMEdLukq1soA0gl9-3VaamFxunXvCfmdV-OhI/s160/20.jpg" alt="image20" /></a></li>
</ul>
<!-- Blog Hocam Minimal Dikey Foto Galeri Eklentisi -->
- Galeride göstermek istediğiniz resimlerin URL’lerini benim yazdığım .jpg uzantılı URL’lerle değiştirin.
- Resme tıklayınca açılmasını istediğiniz sayfaları # işaretinin olduğu yerlere yazacaksınız.
- alt="image01-20” olarak gördüğünüz yerlere ise resim hakkında bir tanım metni yazın.
Eklentiyi eklerken takıldığınız bir yer olursa yorum bölümünden sorabilirsiniz. Blogunuzun kenar çubuğunda kullanmanız için bu eklentinin dikey versiyonunu da yakında paylaşacağım.
21 Aralık 2012 Cuma
Google+ Toplulukları Hakkında Bilmeniz Gereken Herşey
Aktif bir Goggle+ kullanıcısıysanız muhtemelen son zamanlarda sık sık topluluk davetlerine maruz kalmışsınızdır. Golge+ toplulukların ne olduğu ve nasıl kullanılması gerektiği konusunda hala bilgi sahibi değilseniz bu yazı sizi bilgilendirme amacıyla yazıldı.
Google+ Toplulukları Nedir?
Google+ toplulukları, aynı ilgi alanına sahip kullanıcılarının bir araya gelerek ilgi alanları hakkında konuştukları yerdir. Toplulukların işleyişini daha iyi anlamak için aşağıdaki videoyu izleyebilirsiniz.
Bir Topluluğa Katılma
Google+ sayfanızın sol tarafındaki topluluklar simgesine tıklayarak topluluklar sayfasına ulaşabilirsiniz.
Bu sayfada 1 numara ile gösterdiğim yerde üye olduğunuz toplulukların listesi yer alır, 2 numara ile gösterdiğim yerde önerilen topluluklar yer alır, 3 numara ile gösterdiğim yerde ise katılmanız için gönderilen topluluk davetiyeleri yer alır. Ayrıca arama kutusuna ilgi alanınızı yazarak o konuyla ilgili toplulukların listesini görebilirsiniz.
Şimdi bir topluluğa nasıl katılabileceğinizden bahesdelim. Katılacağımız topluluk Blog Yazarları isimli topluluk olsun. Bu topluluğun sayfasını açtığınızda üst tarafta Join community butonunu göreceksiniz. Buraya tıklayarak o topluluğa katılabilirsiniz.
Topluluğa katıldıktan sonra o toplulukta olup bitenden haberdar olmak için bildirimleri açmanızı öneririm. Sol tarafta Off olarak gözüken ve zil resmiyle simgelenmiş bildirimi On olarak değiştirirseniz toplulukta yapılan yeni paylaşımlardan haberdar olabilirsiniz.
Toplulukta Paylaşımda Bulunma
Topluluğa üye olduktan sonra klasik bir Google+ ileti gönderme penceresi ile karşılaşırsanız. Buraya topluluk üyeleriyle paylaşmak istediğiniz mesajı yazdıktan sonra paylaşmak istediğiniz kategoriyi seçerek paylaşabilirsiniz.
Google+ Topluluk Oluşturma
Siz de kendi topluluğunuzu oluşturmak isteyebilirsiniz. Bunun için Google+ Topluluklara sayfasına giderek BİR TOPLULUK OLUŞTUR butonuna basın. Bu butona bastığnızda ne tür bir topluluk oluşturmak istediğiniz sorulacak. Topluluk türleri arasındaki farklı şu şekilde özetleyebiliriz:
- Herkese Açık - Herkes katılabilir: Google+'da, ilgili alanlarınızı paylaşan kullanıcılarla tanışma için ideal.
- Herkese Açık - Katılım için moderatör onayı gereklidir: İçeriği herkese açık olarak paylaşma ancak içerik oluşturabilenleri sınırlama
- Gizli- Kullanıcıların, topluluğu arama yoluyla bulmasını ve katılım isteğinde bulunmasını sağlama: Belirli kuruluşları için kapalı topluluklar oluşturma için ideal.
- Gizli- Topluluğu arama sonuçlarından gizleyin: Daha gizli sohbetler eden küçük gruplar için ideal.
Topluluğunuzun türünü seçtikten sonra ismini yazın ve topluluğu oluşturun.Daha sonra topluluğunuza en az 250x250px boyutunda bir profil resmi, topluluğunuzla ilgili kısa açıklama, hakkında bölümü için topluluğunuzu tanımlayacak bir yazı ve son olarak bir kaç kategori ekledikten sonra düzenleme işlemini tamamlayabilirsiniz.
Söz Sizde
Google+ toplulukları ile ilgili hemen herşeyden bahsederek sizleri bilgilendirmeye çalıştım. Google+ toplulukları hakkında ne düşünüyorsunuz? Katılmayı veya oluşturmayı düşünüyormusunuz? Tavsiye edebileceğiniz topluluklar var mı?