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

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.