02 Şubat 2011

Kendi Widgetinizi Nasıl Yaparsınız?

 

 

 

Dostlar bu yazıyı 12 Aralık 2008 tarihinde yazmıştım. Ancak bu gün blogumu ziyaret eden bir dost BLOGGER SİDE BAR ARAÇLARI (GADGET) yazıma bir mesaj bırakmış. Bıraktığı mesajla ilgili daha önce bir yazı yazdığımı hatırladım. Ama daha önce yazdığım yazının artık güncelliğini yitirdiğini, o günden bu güne köprülerin altından çok sular aktığını gördüğüm için bu yazıyı güncellemeye karar verdim. O zamanlar yazımda bahsettiğim GOOGLE ın hizmetlerinden GOOGLE PAGE CREATOR (SAYFA OLUŞTURUCU) artık yok. Hizmetten kaldırdı yerine GOOGLE SİTES i oluşturup oradaki abone verilerini de GOOGLE SİTES e taşıdı. Tabi GOOGLE SİTES in sunduğu bazı araçlar burada farklı çalışıyor. O nedenle bu yazıda anlatacağımız olayda kısaca artık burası bizim işimize yaramıyor. O nedenle burayı artık kullanmayacağız. Burasının yerine başka bir online depolama alanını size önereceğim ama tabii sizler diğer onlarca online depolama alanlarından her hangi bir tanesini de kullanabilirsiniz.  Gelelim konumuza o günlerde 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ıştı. Bende bu yorum üzerine o günlerde bu yazıyı yazmıştım.

Hani bazı bloklarda butonlar görürüz. Technorati, feedburner, furl, magnolia, Facebook v.s 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 boyutunu küçük olacak bir resim formatında kaydedin.  Bu butonun ebatlarını ben 100X36 yaptım. azizname-2 Siz istediğiniz boyutta yapabilirsiniz. Her neyse butonu yapın ve photobucket gibi bir beleş siteye yükleyin.   Daha sonra resmininizi nereye yüklediyseniz sitenin vereceği resim URL sini yani adresini widget kodlarındaki aşağıdaki resimde gösterilen yere koyacaksınız. 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.

adres-1

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.

adres-2

Ş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.

widget-1 

widget-13 

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:

<a href="http://azizname.blogspot.com"><img border="0" width="90" alt="AzizName" src="http://i73.photobucket.com/albums/i235/aziz52/azizname.png" height="33"/></a><form action="http://beta.blogger.com/add-widget" method="post"><input value="AzizName" name="widget.title" type="hidden"/><textarea style="display:nonne;" name="widget.content">&lt;a href=&quot;http://azizname.blogspot&quot;&gt;&lt;img border=&quot;0&quot; width=&quot;90&quot; alt=&quot;AzizName&quot; src=&quot;http:i73.photobucket.com/albums/i235/aziz52/azizname.png&quot; height=&quot;33&quot;/&gt;&lt;/a&gt;</textarea><input value="bloguna ekle!" name"go" type="submit"/></form>

widget-2 

widget-4

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

widget-3 

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

widget-5 

widget-6 

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

widget-7 

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

widget-8 

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

widget-9

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

widget-10

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..

widget-11

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

widget-12

Ta taaaaa…. He he! Widgetiniz tamam. Kolay gelsin….

 

 

 

 

 

 

 

 

5 Yorum:

Yönetici dedi ki...

abi valla helal olsun. hiç üşenmeyip yazdığın için çok teşekkür ederim.

NeSLiCe dedi ki...

Degerli blog yazari öncelikle tesekkürle bu bilgiler icin... Ama benim sorum cok farkli icime sinen daha bir sablon bulamadim bloguma daha yeniyim sablon nasil yapilir onuda acaba detayli olarak anlatabilirmisin resimli.. Yada blogun üzerine banner yapiliyor ya hani öyle orjinal bir görüntü saglayan banner nasil yapilir hep yaptim denedim ama birtürlü orjina gözükmüyor cok belli fotoshopla yapildigi acaba mesela wordpress sablonlari cok kaliteli bir görüntüye sahip acaba onlarin nasil yapiyorlar bu konu hakkinda bir bilginiz varmi acaba... Cevabinizi sabirla beklyiorum tesekkürler simdiden

ihtiyarus dedi ki...

Sevgili Neslice;
Şu anda BLOGGER ın kendi şablonları çok kullanışlı hale getirildi. Tasarım sekmesinde Şablon Tasarımcısı bölümünde şablon üzerinde çok kolay değişiklikler yapıp bir okadar da çeşitli daha doğrusu çok seçenek bulacaksın. Şablonları istediğin gibi biçimlendirebilirsin. Yok bunlar bana yeterli değil dersen sana binlerce çeşit şablon bulacağın bu http://btemplates.com/ siteyi önerebilirim. Bu sitede her şablonun birebir örneğini görebilir ve de şablonun XML kodlarını indirip yükleyebilirsin. Bunun nasıl yapıldığını ayrıca makale olarak anlatacağım. Yani istediklerini en kısa sürede yazıya döküp anlatacağım.sevgiyle kalınız..

NeSLiCe dedi ki...

Biliyorum ben btemplates deki sablonlari bir cogunu denedim ama hic birisi gercekten istedigim gibi degil.. onlarda yazi rengini falan degistiremiyorsun istedigin büyüklük kücüklük yapamiyorsun sayfa renkleri bana uyumsuz geliyor vede cok satafatli ben sevmiyorum iste anlatmak istedigim bu onu ekleyince bide ingilizce türkce yapamiyorsun ingilizce olarak kaliyor silinmeyen yerleri.. Ben sadece fotoshopta nasil templates yapiliyor merak ediyorum sadece eger bununla ilgili bir bilgin varsa lütfen paylasirmisin resimli olarak. ya simdi uzun is falan dersen anlatim hic sorun degil.. Yinede cok tesekkürler... Blogger sablonlarini evet istedigin gibi degistiriyorsun onuda yaptim ama yinede hosuma gitmiyor bloggernin yeni sablonlari dedigim gibi gercekten icime sinen hic bir sey olmadi... Yinede cok tesekkürler cevabin icin.

sedef dedi ki...

Öncelikle bunu yazan ellerinize sağlık çok güzel anlatmışsınız. Benim size bir sorum olacak, sizi blogunuzda solda uçuşan bir Twitter kuşu var. O kadar güzel ki gözlerimi alamıyorum. Onu kendi bloguma nasıl ekleyebilirim?

Toggle

Ben Kimim

SAYAÇ


DEFA ZİYARET EDİLDİM

Shades of Teal Palette