image (Resimli) Blockquote

Dostlar sizlere bugün rutin kullandığımız bir olaydan bahsedeceğim. Bu olayın adı blockquote.Yani yazılarımız arasında bir yerlerden alıntı bir yazı yayınladığımız zaman genelde kullanırız. Blogger 'ın bu özelliği yok mu var. Bazen bu özellik kullandığımız şablon yani tema'nın css özelliklerine göre de değişiklik gösterir. Eğer şu anda benim gibi var olan özellikden memnun olmayanlar için bu uygulamayı anlatmayı gerekli gördüm.

Daha önce bu konuda bir yazı yayınlamıştım zaten. Ama bu gün anlatacağım ise daha farklı bir şey. Önceki anlattığım blockquote uygulama açısından biraz zahmetli idi ve ayrıca farklı tarayıcılarda farklı sonuçlar veriyordu. Bu nedenle bugün anlatacağım uygulama daha basit bir uygulama. Uygulama bittiğinde yandaki resimdeki blockquote (Blok Alıntı) düğmesine basmanız yeterli olacak. Uygulaması zahmetli gelebilir. Kolaya kaçmaktan hoşlanmayanlar ve özgün bir şeyler yapmak isteyenlerin hoşuna gidecek bir uygulama olacak bu.

İşe başlayalım hemen. Öncelikle Yerleşim sekmesinde HTML 'yi düzenle bölümüne geleceksiniz orada css style kodlarına ufak bir özellik ekleyeceksiniz. Nereye mi söyleyeyim, tarayıcının düzen menüsünden bu sayfada bul ibaresine tıklayacaksınız. Arama penceresine blockquote yazıp aratacaksınız. CSS kodlarında bulduğunuz blockquote style kodları yerine kopyala yapıştır yaparak aşağıda verdiğim kodları aynen yazacaksınız veya değiştireceksiniz.

CSS STYLE KODLARI:

.post blockquote {
text-align: justify;
width: 400px;
margin-left: 20px;
padding: 10px 0px 0px 30px;
background-position:top left;
background-repeat: no-repeat;
background: transparent url("http://i73.photobucket.com/albums/i235/aziz52/azizname_image/quote-1.gif") top left no-repeat;
}
.post blockquote p {
margin-right: 20px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 0px;
padding-top: 0px;
background: transparent url("http://i73.photobucket.com/albums/i235/aziz52/azizname_image/unquote-1.gif") bottom right no-repeat;
background-position: bottom right;
background-repeat: no-repeat;
}

Eğer beklediğiniz gibi bir sonuç vermesse blog temanızın özelliklerine göre düzeltmeler yapabilirsiniz. Yazılarınızı yazarkende HTML'yi Düzenle sekmesinde yazınızın kodları aşağıdaki gibi görülmeli.

Yazı Kodu:

<p align="justify">When the page loads, the script parses the document, looking for BLOCKQUOTE elements, and then plugs in the two images with their proper attributes (src, alt, class, etc.). If there is a CITE attribute present in the markup, then the script creates a DIV to display the domain name as a link.</p> <blockquote><p>When the page loads, the script parses the document, looking for BLOCKQUOTE elements, and then plugs in the two images with their proper attributes (src, alt, class, etc.). If there is a CITE attribute present in the markup, then the script creates a DIV to display the domain name as a link</p></blockquote>

Uygulama böyle görünecek :

Blockquote için bir başlangıç resmi birde kapanış resmi hazırlıyacağız. Benim yaptığım gibi bir image host, Photo Host sitesine yükleyeceğiz.

Oradan alacağımız resmin URL Adresini yukarıda CSS Style kodlarındaki benim background: URL ("http://adresiniz.com") adresindeki yerine koyacaksınız. İşiniz bittiğinde uygulama aşağıdaki örnekde görüldüğü gibi görülecek. Kolay gelsin...

Web Tasarım kaynakları

Dostlar bu gün çok güzel bir kaynak keşfettim. Bu nedenle de sizlerle paylaşmadan edemedim. WEB DEVELOPERS FIELD GUIDE. Web sayfası tasarlamak yeni nesil yazılımlarla mesele olmaktan çıktı ancak fark yaratmak için hâlâ tasarımcının dikkat etmesi gereken birçok ayrıntı var.

Bu adreste tek bir sayfa içinde web tasarımı üstüne hemen her konudaki en etkin kaynaklara ulaşmanız mümkün. Kolay gelsin….

Kaynak Adres : http://webdevelopersfieldguide.com/

Resimli (image) Blockquote

Sevgili dostlar sizlere bu gün rutin kullandığımız bir uygulamadan bahsedeceğim. Bu uygulamanın adı blockquote. Yani yazılarımız arasında bir yerlerden alıntı bir yazı yayınladığımız zaman genelde kullanırız. Blogger ‘ın bu özelliği yok mu var. Bazen bu özellik kullandığımız şablon yani tema ‘nın css özelliklerine göre de değişiklik gösterir.

Eğer şu anda benim gibi var olan özellik den memnun olmayanlar için bu uygulamayı anlatmayı gerekli gördüm. Lazım olanlara birazcık kolaylık olsun diye. Esasında herkes bunu kullanabilir. Uygulaması zahmetli gelebilir. Kolaya kaçmaktan hoşlanmayanlar ve özgün bir şeyler yapmak isteyenlerin hoşuna gidecek bir uygulama.

Öncelikle şablon sekmesinde HTML ‘yi düzenle bölümüne geleceksiniz orada css style kodlarına ufak bir özellik ekleyeceksiniz. Nereye mi söyleyeyim, tarayıcının düzen menüsünden bu sayfada bul ibaresine tıklayacaksınız. Arama penceresine blockquote yazıp aratacaksınız. CSS kodlarında bulduğunuz blockquote style kodlarının hemen altına da aşağıda verdiğim kodları aynen yazacaksınız.

CSS CLASSES KODU :

blockquote.withquote {background:url(http://www.mandarindesign.com/images/quote.gif)
no-repeat;background-position:top left;padding-left:20px;text-align:justify;}

p.withunquote {background: url(http://www.mandarindesign.com/images/unquote.gif) no-repeat;background-position:bottom right;padding-right:5px;}

Daha sonrada normal yazınızı yazarken de aşağıda ki şekildeki gibi aynen span class kodlarının arasına da benim yaptığım gibi yazılarınızı yazacaksınız. Yalnız burada url leri verilmiş resimleri kendi resim yüklediğiniz yere yüklerseniz daha iyi olur. Yada yerlerine istediğiniz veya kendi yapacağınız resimleri de kullanabilirsiniz. Kolay gelsin.

UYGULAMA KODU :

Daha sonrada normal yazınızı yazarken de aşağıda ki şekildeki gibi aynen span class kodlarının arasına da benim yaptığım gibi yazılarınızı yazacaksınız. Yalnız burada url leri verilmiş resimleri kendi resim yüklediğiniz yere yüklerseniz daha iyi olur. Yada yerlerine istediğiniz veya kendi yapacağınız resimleri de kullanabilirsiniz. Kolay gelsin.

UYGULAMA AYNEN BÖYLE GÖRÜNECEK

Daha sonrada normal yazınızı yazarken de aşağıda ki şekildeki gibi aynen span class kodlarının arasına da benim yaptığım gibi yazılarınızı yazacaksınız. Yalnız burada url leri verilmiş resimleri kendi resim yüklediğiniz yere yüklerseniz daha iyi olur. Yada yerlerine istediğiniz veya kendi yapacağınız resimleri de kullanabilirsiniz. Kolay gelsin.

YENİ CSS KAYNAKLARI

Bir süredir yerleşmeye çalıştığım KÖYCEĞİZ cennetinde kalan hayatımı devam ettireceğim derken en çok kullandığım vücudumun bir uzvu gibi olmuş pc imi Ankarada oğluma bırakıp geldiğimden pc im yoktu. Epeyce araştırma ve uğraşlardan sonra en nihayet bir loptop yani diz üstü bilgisayar edindim. Tabiki internet bağlantım da yoktu. Tam internet bağlantısı edindim diye sevinirken varolan internet bağlantısını ortak kullandığım komşum Çinliler bir iken kısa bir sürede karınca gibi çoğalıp tüm apart oteli istila ettiler. Bende bu yüzden internet bağlantısını ortak kullanma anlaşmasını fesh etmek durumunda kalıp var olan bağlantıyı onlara terk etmek zorunda kaldım. Bir haftalık uğraş sonunda kendime ait özel bir telefon hattı ve ADSL aboneliği edindim nihayet bugün dalavereci ve sahtekar servis elemanı gelip 5 dakikada bağlantımı yapıp hediye olarak gelen WİRELESS ADSL MODEMİMİ kurup gitti. Bende çocuklar gibi bayram ettim. Bu arada bütün bunlar olurken ikinci sevinci yaşadım. Belçika’da yaşayan kavgalı ve küs olduğum kızım Belçikalı eşiyle birlikte çat kapı geldiler. Tabii büyük sürpriz oldu benim için çifte sevinç yaşadım bugün. Anlayacağınız bugün çocuklar gibi şendim. Damadımla karşılıklı rakı içtik. Kızım dediki damadını da türk yapıp kendine benzettin. He he…neyse kel alaka konuları bırakıp sadede gelelim. Epey ara verdiğim HTML celere yeniden devam edelim. Bu günkü konumuz CSS. yeni CSS kaynakları keşfettim. Bu kaynakları cssjuice.com listelemiş. 20 adet online css aracına buradan ulaşabilirsiniz. Listelenmiş kaynakların popüler ve iyi bir tasarıma sahip olanları seçilmiş. Ayrıca burada css box, css navigation menüleri ve daha bir çok kaynak aynı şekilde listelenmiş. Yani analayacağınız css konusunda buradan istemediğiniz kadar kaynağa ulaşmanız mümkün. Eminim css üzerine bir şeyler öğrenmek isteyenler buradan epeyce yararlanacaklar ve dakikalarca ayrılamayacaklar. Ben saatlerce kurcaladım. Önümüzdeki günlerde buradan ulaştığım bazı kaynaklardaki kolay olan uygulamalardan bazılarını sizlere yine buradan anlatacağım.