Kendi Widgetinizi Nasıl Yaparsınız?

Dostlar bugün bir kardeşim  "BLOGGER SİDE BAR ARAÇLARI (GADGET)" Yazıma “hocam bişey sorcam ben. gadget ekleme kısmında kendinizinkini ekleyin diye biyer var. nasıl ekleniyor? nasıl gadget yapılıyor? bi bilgi verirsen sevinirim.” diye bir yorum bırakmış. Bende bu gün bu konuya değinmeye karar verdim.

Daha önce anlattım mı hatırlamıyorum ama ben yine de anlatacağım. Hani bazı bloklarda butonlar görürüz. Technorati, feedburner, furl, magnolia sosyal sitelerin bookmark butonları gibi bende kendi butonumu yaptım. Sizlerde benimki gibi bir butonu FİREWORKS veya PHOTOSHOP gibi bir grafik, resim editörü programı ile yapın. Dosya boyutu küçük olacak bir resim formatında kaydedin.  Bu butonun ebatlarını ben 100X36 yaptım. Siz istediğiniz boyutta yapabilirsiniz. Her neyse butonu yapın ve photobucket gibi bir beleş siteye yükleyin. Tam bu noktada sizlere google unda elinizin altında böyle bir imkanı var. Bir zamanlar kapasitesi 100 mb idi şimdi ne kadar bilmiyorum ama bayağı işimi görüyor. Buraya her türlü dosya yükleyip blogger da link vererek çalıştırabilirsiniz. Bilgisayarınızda kullandığınız tarayıcınızı açın. Burada google ın arama ana sayfasına yani http://www.google.com.tr/ ye  gidiyorsunuz. Burada sağ üst köşede oturum açın linkine tıklıyorsunuz. Gmail hesabınıza ait e-mail inizi ve şifrenizi girip oturum açıyorsunuz. Açılan sayfada google hizmetleri var. Aşağıda resimde görüldüğü gibi daha fazla linkine tıklıyorsunuz.  Açılan sayfada yine aşağıda ki resimde görüldüğü gibi ya türkçe sayfa oluşturucu olarak yada ingilizce google page creator linki şeklinde olan linki bulup tıklıyorsunuz.     Açılan sayfada da size daha basit bir web sayfası yapma olayı geliyor. Gelişigüzel bir sayfa oluşturun ve devam edin. Sayfayı oluşturduktan sonra sağ üst köşede aşağıda ki resimde görüldüğü gibi bir yer de uploaded stuff   diye bir kutu var. Kutunun altında upload yazan linke tıklayın. Gözat linkine tıklayın ve hazırladığınız buton resmini bulup yükleyin. Resim yüklendikten sonra listede resim dosyasının adını göreceksiniz. Bu dosyanın üstüne tıklayın. Yeni bir tarayıcıda resminiz açılacak. Tarayıcının adres satırındaki adres resminizin URL si. Bu URL ile Resminizi artık her yerde yayınlayabilirsiniz. Sonuçta resmininizi nereye yüklerseniz oradaki adresini widgetteki yerine koyacaksınız. İşte bu bölüme resim haricinde her türlü formatta dosya da yükleyebilirsiniz. Resminize aşağıdaki resimde görüldüğü gibi blogunuzun adresini gireceksiniz. Yani resme tıkladığınızda tarayıcı sizin blogunuzu açacak. Diğer yerede resmi yüklediğiniz yerdeki adresini gireceksiniz.

Widget bittiğinde widget xhtml kodunun tamamında renkli görülen bölümler aşağıda görüldüğü gibi size ait bölümler olacak.

Şimdi tekrar bir tarayıcı açın ve adres satırına http://code.google.com/intl/tr/apis/gadgets/docs/legacy/gs.html#GGE adresini kopyala yapıştır deyip yapıştırın veya üşenmeyip aynen yazın.

 

 

Açılan sayfada yukarıda resimde ki yeri bulun ve aşağıdaki kodu kendinize göre daha önce resimlerle anlattığım gibi düzenleyip aşağıda resimlerle sırasıyla gösterdiğim gibi widget html kodunu ilgili yere koyuyorsunuz.

Kopyala Yapıştır Kodu:

 

 

Title başlığı yani aşağıdaki resimde görüldüğü gibi düzenliyorsunuz.

 

Daha sonra aşağıda resimde görüldüğü gibi widgetimizin Preview sekmesine tıklayıp ön izlemesine bakıyoruz.

 

 

Daha sonra sırasıyla resimlerdeki gibi save e tıklayıp kaydetme işlemine geçiyoruz. Widgetimize bir ad veriyoruz.

 

Kaydettikten sonra resimde görüldüğü gibi widgetimizin adına tıklıyoruz.

 

Tarayıcıda açılan sayfada resimdeki gibi adresi kopyalıyoruz.

İşte eylem artık çok kolay. Yerleşim sekmesinde side bar da gadget ekle linkine tıkladınız,

Gadget Ekle aracı açıldı, solda aşağıda Kendinizinkini ekleyin linkine tıklıyorsunuz, açılan pencerede Blogunuza eklemek istediğiniz widget in kopyaladığımız URL'sini giriyoruz..

Resimlerdeki gibi işlemleri sırasıyla yapıyoruz.

Ta taaaaa…. He he! Widgetiniz tamam. 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/

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.