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.