Blogger Şablon Siteleri

Dostlar birkaç gündür bazı konularda araştırma yaparken sizlere çok faydası olacağına inandığım bazı yeni ve ilginç konulara rastladım. Bir tanesi yüzlerce blogger şablonu. Eğer Blogger ın klasik şablonlarından hoşlanmıyorsanız bu yazı epeyce ilginizi çekecek ve sizi mutlu edecek demektir. Hepsi çok güzel ve de yeni. Ama dediğim gibi hala üzerlerinde ufak tefek düzenlemeler yapmak gerekiyor. Bu düzenlemeler bazılarınız için basit ama bazılarınız için se biraz zor olabilir.

Ben her açıdan sizlere yardımcı olmaya hazırım. Bu şablonları ben çok beğendim. Bir çoğunu da denedim. Üzerlerinde ufak tefek değişiklikler de yaptım. Ama benim yaptığım değişiklikler daha çok TÜRKÇE olması gereken kısımlar ve de bana uygun değişiklikler. Özde tasarımların orjinallerine, sahiplerine saygımdan dolayı ve de diğer özgün hadiselere dokunmadım. Bu şablonların bir çoğunun CSS Style Sheet kısmında Variable definitions bölümü yok. Ama merak etmeyin ben olmayanların Variable definitions bölümlerini düzenleyip yayınlayacağım.Ayrıca arzu edenlere daha doğrusu ben uğraşamam hazır isterim diyenlere de elimde olan XML şablonları gönderebilirim. Denediğim şablonları aşağıda linklere tıklayarak görebilirsiniz.

Bu şablonların en çoğunu Btemplates de   bulabilirsiniz. Daha sonra da Blog and Web i ziyaret edip orayı karıştırabilirsiniz. Buralarda blogger, css, web tasarımı ve grafik tasarım konularında bayağı çok bilgiye ulaşabilirsiniz. Eminim buraları kurcalarken epeyce işe yarar şey bulacaksınız. Mesela Smashing Magazine ilginç sitelerden biri. Ayrıca Design Disease, Blogcut, Gosublogger gibi yerleri de çok yararlı ve ilginç bulacaksınız. Bu arada Türkçe bloglardan Teknomobi ve diğer blogu Düşüngeç ‘e de uğramadan etmeyin. Sizlere kolay gelsin.....

Not : Denediğim şablonları aşağıda linklerine veya resimlerine tıklayarak görebilirsiniz.

Smashing Theme ; 

 

 

 

 

 

 

TÜRKÇE DEMO : hukukguguk  Design By : Design Disease 

Download Link: Btemplates

Blogy - iPlantilla Theme;

 

TÜRKÇE DEMO : webokulu Design By : Blogger adaptasyon Blog and Web (Orijinal Wordpress Theme Ndesign-Studio )

Download Link: Btemplates

Netspiel Theme;

TÜRKÇE DEMO : Test ve Test Design By : blogcut 

Download Link: Btemplates

Blogy-illacrimo Theme;

 

TÜRKÇE DEMO : Gımıl Badıllı Design By : Design Disease 

Download Link: Btemplates

Blogy – Dilectio Theme;

 

TÜRKÇE DEMO : Morukus Design By : Blogger  adaptasyon Blog and Web  (Orijinal Wordpress Theme design disease)

Download Link: Blog And Web

Notepad Chaos Theme;

TÜRKÇE DEMO : Webarus Design By : Blogger  adaptasyon Gosublogger (Orijinal Wordpress Theme Evan Eckard )

Download Link: Türkçe Teknomobi 

Download Link: Btemplates

ALINTI KAYNAK:  Yazar : ihtiyarus WEB URL: AzizName

 

BLOGGER SİDE BAR ARAÇLARI (GADGET)

Dostlar bugün buraya yine yazacak nefis şeyler keşfettim. Belki bazılarınızın haberi vardır ama ben bu yazıyı bu olaydan haberi olmayanlar yada farkında olmayanlar için kaleme aldım. Yandaki BLOGGER ın logosunu gördüğünüzden zaten yazının içeriğinin BLOGGER ile ilgili olduğunu hemen anlamışsınızdır. Yazının içeriği henüz BLOGGER ile yeni tanışanların da özellikle ilgisini çekecektir.

Şimdi yeni başlayanlar için blogger da bir blog yaratmayı başardınız yada zaten bir blog sahibi olanlar blogger a giriş yapsınlar. Kumanda panelinde blogunuzun yerleşim linkine tıklayınız. Daha sonra side barda ki kutucukların üstünde Gadget Ekle  linkine tıklayınız. Ta taaa....Evet yeni gadget lerle tanışınız. Hatta burada kendi gadget inizi bilem yapıp yayınlayabilirsiniz.

 

Yukarıdaki resimde görüldüğü gibi sol tarafdaki sütunda gadget çeşitleri ve sınıflandırmaları yer alıyor onları tıklayarak kurcalamaya başlayabilirsiniz. Benim en çok hoşuma giden gadgetler İzleyiciler : Blogunuzu izleyen kullanıcıların bir listesini görüntüler ve Abonelik Bağlantıları (yeni!). Tabii bunların başlık adını değiştirebilirsiniz. Özellikle Abone Bağlantıları ile Okuyucularınızın popüler içerik takibi yapmalarını sağlamak için okuyucularınızın blogunuza abone olmasını sağlayın. Diğer gadgetleri de artık siz kurcalayın keşfedin. Kolay gelsin..

BLOGGER ÖZELLİKLERİ

Dostlar epeydir buraya yazı yazmıyordum. Bu gün buraya yazacak birşey buldum. Belki bazılarınızın haberi vardır ama ben bu yazıyı bu olaydan haberi olmayanlar yada farkında olmayanlar için kaleme aldım. Yandaki BLOGGER ın logosunu gördüğünüzden zaten yazının içeriğinin BLOGGER ile ilgili olduğunu hemen anlamışsınızdır. Yazının içeriği henüz BLOGGER ile yeni tanışanların da özellikle ilgisini çekecektir.

Şimdi yeni başlayanlar için blogger da bir blog yaratmayı başardınız yada zaten bir blog sahibi olanlar blogger a giriş yapsınlar. Herhangi bir postu (daha önce yayınlamış olduğunuz bir yazıyı) yada yeni bir yazı yazıp yayınlayın. Yayınlama durumu sekmesine geleceksiniz. Yani aşağıda resmi görülen bölüm.

 

Bu bölümde sağ alt köşede görülen kutucukdaki Blogger Features Page yazan linke tıkla. Aşağıda resmi görülen kutucuk.

Ta taaa...İşte aşağıda BLOGGER ÖZELLİKLERİ sayfasına hoş geldiniz. Çok detaylı hemde türkçe hazırlanmış. Hoşunuza gidecektir umarım. Ben BLOGGER la tanışıp da ilk blog hazırladığım günlerde böyle bir kolaylık yoktu, ya da vardı da belki ingilizce yazdığı için böyle bir hadiseden şahsen benim haberim yoktu. Hem türkçe kaynak bulmamızda çok zordu. Hemen hemen hiç yokdu desem yeridir. Sonra EMREX(Yunus Emre) konuyla ilgili bir grup oluşturdu. Tabiiki yine konuyla ilgili de bir blog. Ondan çok şey öğrendim. Buradan ona sevgilerimi gönderiyorum. Belki şu anda kulaklarıda çınlıyordur. Hepinize kolay gelsin. BLOGGER ÖZELLİKLERİ sayfasının da resmi ahanda aşağıda.......

 

Hala bir blog hazırlamadıysanız bu sayfaya direk buradanda Blogger Features Page gidebilirsiniz. Kolay gelsin.......

PDF lerinizi E_DERGİ olarak yayınlayın

Evet dostlar epeydir buraya yazı yazmıyordum ancak bu gün WOLKANCA'nın Volkan’ı bana bir sitenin adresini göndermiş. Bende bu siteyi inceledim ve de çok hoşuma gitti. Sitenin adı issuu, siteye buradan ulaşabilirsiniz. WEB 2.0 sitesi. Bu siteye önce üye oluyorsunuz daha sonrada hazırladığınız PDF formatındaki belgeleri yüklüyorsunuz.

Yine daha sonrada sitenizde veya başka bir yerde aşağıdaki gibi yayınlayıp herkesle paylaşıyorsunuz. Site hizmeti beleş. Sizlerde den eyip eğer hoşunuza giderse kullanabilirsiniz. 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/

CSS Inline Style (shadow Filter)

Float Right

Origin of
Dubya

The origin of 'Dubya' from us a weekend says that the columnist Molly Ivins coined it in 1995; it's the spelled-out Texas-drawl version of Bush's middle initial (for "Walker"). Her editor at the Fort Worth Star-Telegram tells us Ivins "owned 'Dubya' from the mid-'90s to 1999, then it caught on with everyone else." Well, not really everyone.

Close friends call Bush "George W." His dad sometimes calls him "Quincy," a reference to John Quincy Adams, the only son of a president to become president. And almost everybody else calls him "Mr.President.""

Yukarıda Cördüğünüz uygulamanın kodlarını aşağıda yayınlıyorum. Kopyala yapıştıır yaparak sizde deneyerek uygulamayı yapablirsiniz. İngilizce yazan metin yerinede istediğiniz gibi yazınızı yazabilirsiniz. Aynı uygulamayı solda da gösterebilirsiniz. Sadece float: right; ifadesini float: left; olarak değiştireceksiniz.

UYGULAMA KODU :

<div align="justify"><p><span style="font-weight: bold; font-size: large; color: #ffcc33">Float Right</span> <div style="padding-left: 20px; filter: shadow(color:silver); float: right; padding-bottom: 12px; font: 24pt haettenschweiler; width: 135px; color: navy">Origin of <br />Dubya</div> <p style="text-align: justify"><span style="font-weight: bold; font-size: large">"</span>The origin of 'Dubya' from usaweekend.com says that the columnist Molly Ivins coined it in 1995; it's the spelled-out Texas-drawl version of Bush's middle initial (for "Walker"). Her editor at the Fort Worth Star-Telegram tells us Ivins "owned 'Dubya' from the mid-'90s to 1999, then it caught on with everyone else." Well, not really everyone. Close friends call Bush "George W." His dad sometimes calls him "Quincy," a reference to John Quincy Adams, the only son of a president to become president. And almost everybody else calls him "Mr. President."<span style="font-weight: bold; font-size: large">"</span></p></p></div>

Matted Style CSS Border Gold

Dostlar yandaki resmi ve çerçevesini beğendinizmi. Hah işte bu gün resimlerinizi şık ve hoş bir şekilde nasıl yayınlayacağızı tarif edeceğim. Yine burada CSS in nimetlerinden yararlanacağız. Yani anlayacağınız sayfalarınızda bu tür uygulamaları CSS ile daha kolay halledebilirsiniz. Burada "inline CSS" yöntemini kullanacağız. Yani makalemizi yazarken gereken kodları da aynı yerde yazacağız.

Kodlar arasınada makalenizi yerleştireceksiniz anlayacağınız.. Aşağıda bu makalenin uygulama kodunu bulacaksınız. Blogunuza kopyala yapıştır yöntemiyle deneyebilirsiniz. Bu makale yazısının da yerine kendi makalenizi yerleştirebilirsiniz. Yalnız Kodlar içindeki bold yani kalın yerlere kendi resimlerinizin ölçülerini ve adresini yazmayı unutmayın lafın kısacası. Kolay gelsin...

UYGULAMA KODU :

<div align="justify"> <p><span style="border-right: black 1px solid; padding-right: 10px; border-top: black 1px solid; padding-left: 10px; background: gold; float: left; padding-bottom: 10px; margin: 15px; border-left: black 1px solid; padding-top: 10px; border-bottom: black 1px solid"><img style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid" height="<strong>100</strong>" src="<strong>http://i151.photobucket.com/albums/s125/ihtiyarus/ataturk14vh7-1.jpg</strong>" width="<strong>75</strong>" /></span></p> <p><span style="border-right: darkkhaki 1px solid; padding-right: 5px; border-top: darkkhaki 1px solid; margin-top: 5px; font-size: 80px; background: khaki; float: left; border-left: darkkhaki 1px solid; color: white; line-height: 60px; margin-right: 6px; padding-top: 2px; border-bottom: darkkhaki 1px solid; font-family: times">D</span>ostlar yandaki resmi ve çerçevesini beğendinizmi. Hah işte bu gün resimlerinizi şık ve hoş bir şekilde nasıl yayınlayacağızı tarif edeceğim. Yine burada CSS in nimetlerinden yararlanacağız. Yani anlayacağınız sayfalarınızda bu tür uygulamaları CSS ile daha kolay halledebilirsiniz. Burada "inline CSS" yöntemini kullanacağız. Yani makalemizi yazarken gereken kodları da aynı yerde yazacağız. Kodlar arasınada makalenizi yerleştireceksiniz anlayacağınız.. Aşağıda bu makalenin uygulama kodunu bulacaksınız. Blogunuza kopyala yapıştır yöntemiyle deneyebilirsiniz. Bu makale yazısının da yerine kendi makalenizi yerleştirebilirsiniz. Yalnız Kodlar içindeki bold yani kalın yerlere kendi resimlerinizin ölçülerini ve adresini yazmayı unutmayın lafın kısacası. Kolay gelsin... </p></div>

ÖRNEK UYGULAMA :

UYGULAMA KODU :

<div align="justify"><p><span style="border-right: black 1px solid; padding-right: 10px; border-top: black 1px solid; padding-left: 10px; background: gold; float: left; padding-bottom: 10px; margin: 15px; border-left: black 1px solid; padding-top: 10px; border-bottom: black 1px solid"><img style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid" height="100" src="http://i151.photobucket.com/albums/s125/ihtiyarus/ataturk14vh7-1.jpg" width="75" /></span></p></div><br />

Digg butonunun Blogger a uygulanması

Evet dostlar yine bugün ne zamandır (daha çok wordpress veya typepad) birçok blog da gördüğüm ama nasıl yapıldığını ve acaba tema özelliğimidir? Diye merak ettiğim bir uygulamadan bahsedeceğim. Digg denen sosyal network oluşumunu bilmeyeniniz yok dur sanıyorum. Bilmeyenler de buradan ne olduğunu hem öğrenip hem de buraya üye olabilirler.

Evet şimdi dediğim gibi birçok blog da ne zamandır dikkatimi çeken bir hadise vardı. Bu da postların sol üst tarafında veya sağ üst tarafında pul şeklinde digg düğmesinin olması.  Bu nasıl oluyor diye benimde üyesi olduğum digg i kurcalarken orada bunun nasıl blog veya web sayfalarına adapte edilebileceğinin tarif edildiği sayfayı bulmamla bu merakım çözüldü. Ancak tarif İngilizce olduğundan bende de İngilizce nizani oluşundan dolayı sevgili genç dostum emrex den bu sayfayı okuyup bana anlatmasını rica etmiştim. Oda sağolsun yememiş içmemiş google da benim akıl edemediğim gerekli (ihtiyarlık işte beyin lopları artık eski performansını yitirdiğinden) aramayı yaparak bana iki site adresi verdi. Ancak bunların da İngilizce dil ile tarif yapıyor olmasına rağmen bir tanesinde buradakinde resimlerle anlatımından da yararlanarak iyi kötü ne demek istediğini anladım ve orda anlatılanları aynen uyguladım. İşte burada sayfayı incelerseniz uygulamanın örneğini post başlarındaki digg düğmelerini de göreceksiniz

Bende şimdi bunu sizlere anlatacağım. Bu düğmeleri sol tarafa veya sağ tarafa hatta altta bir yere koymanız mümkün o artık sizlere kalıyor hatta digg sitesinde daha başka düğme çeşitleri de var. Onlardan herhangi birinide beğeninize göre koyabilirsinizde.

Önce kontrol panelden blogunuzun yerleşim düzenine geçmek için resimdeki yerleşim ibaresine tıklıyoruz.    Daha sonra yine aşağıdaki resimde de gösterilen HTML 'yi Düzenle ibaresine tıklıyoruz.    Yine daha sonra aşağıdaki resimde de gösterilen Widget Şablonlarını Genişlet ibaresinin yanındaki kutuyu işaretliyoruz.           Daha sonra aşağıdaki kod bölümündeki seçili ifadeyi tarayıcımızın toolbarındaki düzen menüsünden bu sayfada bul arama kutusuna aşağıdaki kodu aynen yazıp HTML kodları içerisindeki bulunduğu yeri buluyoruz.

<p><data:post.body/></p>

Bu seçili kodların üzerine aşağıdaki gibi dolgun siyah yazan kodları aynen kopyalayıp yukarıda ki bulduğumuz kod satırının üstüne aynen yapıştırıyoruz. Aşağıda görüldüğü gibi. Daha sonra şablonumuzu kaydedip yayınlıyoruz.

 

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

Daha sonra yayınlayıp baktığımızda aşağıdaki gibi görülecektir.

Yok solda olsun derseniz Kod içerisinde aşağıda siyah seçilmiş bölümleri yine aşağıdaki gibi düzelteceksiniz.

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

Daha sonra yayınla düğmesine basıp aşağıdaki gibi göreceksiniz.

Yok ben aşağıda postun yani yazılarımın altında yayınlansın derseniz de yine kodları aşağıda gösterildiği gibi yukarıda bulduğumuz kod satırının bu sefer altına koyacaksınız.

<p><data:post.body/></p> <div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

Yayılanmış hali yani butonun aşağıda yer alması da resimde görüldüğü gibi olacaktır.

eğer diğer buradan Digg buton şekillerini ve uygulanış biçimlerini merak ediyorsanızda her ne kadar ingilizce de olsa benim yararlandığım kaynağa buradan da bakabilirsiniz. Bu uygulamalar digg in kendi sitesinde de anlatılıyor ama ben oradaki anlatımı anlamakta biraz zorluk çektim. Sana da çok teşekkür ediyorum emrex. Hepinize kolay gelsin.

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.

Windows Live Writer

Dostlar bu gün sizlere şahsen benim çok hoşuma giden Microsoftun hazırlayıp free yani tamamıyle bedava dağıttığı bu küçük bir nevi web editörü olan programı tanıtacağım. Yani Windows Live Writer sizlerinde hoşunuza gider umarım.

Windows Live Writer (Beta)

Writer, blogunuzda zengin içerik yayımlamayı kolaylaştıran bir masaüstü uygulamasıdır.

Blog hizmetinizle uyumlu

Writer uygulaması Windows Live Spaces, Sharepoint, WordPress, Blogger, LiveJournal, TypePad, Moveable Type, Community Server ve diğer birçok weblog hizmetinde içerik yayımlayabilir.

WYSIWYG düzenleme

Writer blogunuzun görsel temasını bilir. Bu nedenle, postalarınızı yazarken tam olarak nasıl görüneceklerini yayımlamadan önce görebilirsiniz. Postalarınızın çevrimiçi önizlemesine bakmak için zaman ayırmanız gerekmez.

Zengin medya yayımlama

Writer zengin medya yayımlama işlemini e-posta göndermek kadar basitleştirir. Fotoğrafları, haritaları, etiketleri ve daha birçok başka ilginç malzemeyi ekleyin ve özelleştirin—sonra da “Yayımla” düğmesini tıklatın. İşte bu kadar kolay.

Güçlü düzenleme özellikleri

Tabloları ekleme ve düzenleme, yazarken yazım denetimi yapma, içeriği biçimlendirme ve köprü ekleme yetenekleri elinizin altında olduğunda, çekici blog postaları oluşturmak çok daha kolay olur.

Çevrimdışı düzenleme

Artık istediğiniz zaman, istediğiniz yerden blog yayımlayabilirsiniz. Writer blogunuzdaki taslaklarla çevrimdışı olduğunuz sırada yaptığınız değişiklikleri eşitler, böylece farklı sürümleri birbirine uydurmak için uğraşmak zorunda kalmazsınız.

Zengin ilave eklentiler

Onlarca ilave Plugin ile yine onlarca uygulamayı çok kolay ve gelişmiş özelliklerle yapma ve yayınlama. Eklentileri buradan inceleyip indirebilirsiniz. Şu ana kadar anlattığımız bu küçük programı yani Windows Live Writer Beta 'yı ise buradan indirebilirsiniz.

AJAX NEDİR? AJAX TÜRKİYE

Evet dostlar bu gün yine güzel bir konudan yani bununla ilgili nette gezinirken ne zamandır zaten takip ettiğim başarılı gençlerin üç sitesi bahse konu olacak. XHTML ve CSS bilmek bazen de yeterli olmuyor. Zaman zaman rastladığım harika uygulamaların, hiç bilmediğim belki ölmezde yaşarsam mutlaka öğreneceğim WEB sayfalarının PROGRAMLAMA ayağı yani XML, DOM, PHP, MySQL ve AJAX meselesi Nasılda atlamışım.

Şu aralar merak sardığım PHP ve buna bağlı hadiseler. Bunlardan biride AJAX. İlk önce Burcu DOĞAN ‘dan bahsetmeden geçersem olmaz. Çünkü PHP meselesinde daha doğrusu WordPress ‘ den dolayı dürtükledi beni. Nasılmı? Önce Burcu Doğan ‘ı TÜRKÇE BLOG YAZARLARI ‘ndan tanıdım. Daha sonrada EMREX bu gence dikkatimi çekti. Bende gittim blogunu inceledim. Bir baktım ki ne göreyim bu genç bu kadar şeyi ne zaman öğrenmiş?, neler yapmış? ve de yapmakta. Kendimden utandım. Her neyse onun sayfalarında dolaşırken zaten ne zamandır duyduğum, rastladığım AJAX konusu üzerine yazdıkları ilgimi çekti. Hemen bahsettiği siteleri gezmeğe ve AJAX üstüne nette ne var ne yok altını üstüne getirmeye başladım. Bana bir tarihlerde gfxdizayn ın yaratıcısı dostum Yassi (kulakları çınlıyordur kim bilir) bahsetmişti de o zamanlar pek Türkçe kaynak bulamadığım içinde AJAX ‘ın peşini bırakmıştım. Neyse ilk baktığım yerden yani buradan ajaxnedir? den epeyce güzel şeyler öğrendim. Bu sayfanın yaratıcısının gerçek adını merak ediyorsanız gidip sayfalarını karıştırmanız gerekiyor. He he :) Efendim esas AJAX konusunda gerçekten bir şeyler öğrenmek istiyorsanız ve birkaç blogları varki onların yaratıcıları YAKUTER, EBURHAN ve diğer adlarını sayamadığım arkadaşları kimdir diye de merak ediyorsanız Türkiye AJAX adlı sitelerine mutlaka bakın. Eh be bre yakışıklı gençler eğitimciyken eğitimciliğimden utandırdınız beni. İşte eğitici site buna derim. OpenSource Community ‘e deki editörlere bildireceğim. Bu siteleri eğitim kategorisinde ilk sıraya alsınlar. Sizlerin de buradan gözümde büyüttüğüm AJAX ı öğrenmeden ayrılmayacağınızdan eminim. Hatta ben burada her gün herhalde iki saatimi en azından geçiririm. Bu konudaki cehaletimden ilerde nasılsa öğreneceğim de sabredemedim onlara bazı şeylerde sordum herhalde bu başarılı ve de güzel işleri çıkartan gençler beni umarım aydınlatacaklardır. Sizlerde eğer AJAX , yukarıda bahsettiğim diğer konular ve kişiler hakkında öğrenmek istiyorsanız ki eminim mutlaka çook şeyler öğreneceksiniz . Buralara, bu kişilere uğramadan geçmeyin, ayrıcana da mimleyin. Böyle başarılı gençleri nedense çok seviyorum….

MESAJ FORMU YAPALIM

Bu gün epeydir nasıl yapabileceğimi düşündüğüm İLETİŞİM FORMU üzerine bir Program keşfettim. Kesinlikle nefis bir alet çok da güzel çalışıyor. Spam tehlikesine de çözüm getirilmiş. Gönderilen mesajlar filitreleniyor. İşin güzel yanı hazır formların yanı sıra kendi formlarınızı kendiniz hazırlayabileceğiniz gibi programın kendi kütüphanesinde hazır e-mail ve kontak formlarda var. Yalnız ufak tefek düzeltmeler gerekiyor. Birkaç aşamadan sonra formu istediğiniz gibi yayınlayabilirsiniz. Programı veren site sizin formunuza birisi mesaj yazıp gönderdiği zaman gönderilen mesaj önce programın sitesine gidiyor spama karşı filitreleniyor daha sonrada sizin postanıza geliyor. Bu iletişim formunun BLOGGER ve WORDPRESS uygulaması da var. Ben size bu İLETİŞİM FORMU ‘nun BLOGGER için olanını nasıl hazırlayıp blogunuza nasıl koyacağınızı aşama aşama anlatacağım.


BLOGGER İÇİN



1. Öncelikle buradan formu hazırlayacağımız küçük programı indirip kuracağız.



2. Yine aynı programı aldığımız siteye (acount alacağız) üye olacağız.






3. Daha sonra e-mailimize gelen (Your Form ID: ) Form ID no’muz ve password ‘ümüzle siteye giriş yapacağız.

















4. Siteye girdikten sonra karşınıza gelen hesap formunu dikkatli doldurmanız gerekiyor.

NOT: Ancak burada formu doldurmadan önce bir tane İLETİŞİM FORMU dolduran ziyaretçinin yönlendirileceği teşekkür sayfası birde HATA bildiren sayfa hazırlamanız gerekiyor veya teşekkür yerine tekrar blogunuzun ana sayfasına da yönlendirebilirsiniz. Peki bir teşekkür mesajının yayınlandığı sayfa nerde olacak. Bloggerda böyle bir sayfa hazırlama imkanımız yok. Ne yapabiliriz. Bunun için yine elimizin altında ki bir GOOGLE hizmetinden yararlanacağız. O işlemi de ayrı bir başlıkta aşağıda anlatacağım.

5. Daha sonra dönüp bilgisayarımıza kurduğumuz programı çalıştırıyoruz. Basit bir program. Kütüphanesindeki hazır formları açıp nasıl yapıldığını inceleyin. Bu formları türkçeye çevirip yayınlayabilirsiniz. Formu hazırladıktan sonra resimde görülen CREAT CODE yazan butona basıyoruz.




Yine resimde görülen MY USER ID: karşısına mailinize gönderilmiş ID inizi resimdeki gibi yazıyorsunuz.








Daha sonra continue düğmesine basıp resimlerdeki gibi düğmeleri işaretliyorsunuz.


















En son geldiğiniz yerde FORM unuzun kod larını göreceksiniz. buradaki Preview in your default browser düğmesine basarsanız tarayıcıda bitmiş halini görebilir ve geriye dönüp gerekli düzeltmeleri yapabilirsiniz. Export as text düğmesine basarak text dosyası olarak kaydedebilirsiniz. Copy to clipboard düğmesine basarak formunuzun kodlarını kopyalabilirsiniz. Biz copy to clipboard düğmesine basacağız. Daha sonra blogumuzu açıp kontrol panelde yeni gönderi linkine basıyoruz. Resimde görüldüğü gibi HTML düzeninde kopyaladığımız kodları yapıştırıyoruz. İletişim Formunun başlığını yazıyoruz. Aşağıda resimde görüldüğü gibi aşağıda sol köşedeki yazı seçenekleri linkine tıklıyoruz resimdeki daire içindeki seçimleri yapıp yazıyı yayınla tuşuna basıp formumuzu yayınlıyoruz.








Benim bitmiş Formumun resmi aşağıda. Hepimize geçmiş olsun. Yeni iletişim formunuzu güle güle kullanın...





















TEŞEKKÜR VE HATA SAYFALARININ YAPIMI

Tarayıcımızda Google ana sayfayı açalım. Sağ üst köşedeki oturum açın linkine tıklayacaksınız. Açılan sayfada resimde görülen aynı köşede bu sefer hesabım linkine tıklayacaksınız.








Yine açılan sayfada resimde görülen sayfa oluşturucu linkine tıklayacaksınız.
















Eğer bu linki göremiyorsanız telaşa kapılmayın sayfanın altında yine resimde görüldüğü gibi daha fazla linkini bulup tıklayacaksınız. Daha sonra açılan sayfada yine resimde görüldüğü gibi Labs linkine tıklayın. Google Page Creator linkini bulup tıklayacaksınız.


















Biraz uzun oldu ama az kaldı. Burada açılan sayfada I'm ready to create my pages düğmesini bulup tıklıyoruz. Gözünüz aydın geldik. Oda ne…! Şimdi karşımıza hazır yapılmayı bekleyen bir web sayfası çıktı. He..he …Evet burada resimlerdeki gibi iki tane basit sayfa hazırlayıp yayınlayacağız. Sonra bunların tarayıcının adres çubuğundaki URL lerini WebFormDesigner sitesindeki acount formunda ilgili yerlere koyacağız. Yani bir TEŞEKKÜR sayfası birde HATA sayfası adreslerini (URL) ilgili yerlerine koyacağız. Evet şimdi İletişim Formu muzu yapıp test edebiliriz. Kolay gelsin. Oh be……






















NOT: Acount formu İngilizce olduğundan bende İngilizce bilmediğimden buradaki online tercüme sitesinden yararlandım sizinde denemenizi tavsiye ederim. Çok güleceksiniz……! he he…..!Sayfaları yaptığımız google daki yere istediğiniz kadar resim, video, mp3, doc, v.s. dosya yükleyebilirsiniz Kapasite 100 Mb a kadar aklınızda bulunsun. Yükledikten sonra dosya üstüne tıklayıp tarayıcıdaki adresleri ile de bu dosyaları blogunuzda bir download listesi oluşturup dostlarınızla paylaşabilirsiniz.

BU FORMUN RESMİ
















AHANDA BURADAKİ DE ÇALIŞAN KENDİSİ

BANA BURADAN MESAJ GÖNDEREBİLİRSİNİZ...

*isminiz:

*e-mail adresiniz:

* indicates a required field

Mesaj

WebFormDesigner