8 Ocak 2014 Çarşamba

Twitter–Blog Entegrasyonu İçin Twitter Bileşenleri

Çağın popüler sosyal paylaşım plaformu olan Twitter’a ait “takipçi kutusu” veya “son tweetler” gibi eklentiler blogların vazgeçilmeziydi. Fakat Twitter kendi bileşenlerini kullanıma sunduktan sonra hariçten kullandığımız bu eklentiler kullanılmaz duuruma geldi. Ben de bu yazıda Twitter’ın kullanıcılarına sunduğu tüm bileşenleri tanıtmak istedim. İstediklerini blogunuza ekleyerek blog-Twitter entegrasyonunu sağlayabilirsiniz.

 

twitter

 

 

Zaman Akışı Bileşeni

 

Ayarlar > Bileşenler > Yeni Oluştur > Kullanıcı Zaman Akışı

Twitter sayfanızdaki son hareketleri blogunuzda göstermenizi sağlayan bileşendir. Kendi yazdığınız ve retweetlediğiniz tweetler bu kutuda görünür. Yanıtladığınız tweetler ile tweetle birlikte paylaşıılan fotoğrafın gösterilip gösterilmeyeceği sizin tercihinize bırakılmıştır.Ayrıca kutunun genişliğini, linklerin rengini ve zemin rengini değiştirebilirsiniz.

 

 

Favoriler Bileşeni


Ayrlar > Bileşenler > Yeni Oluştur > Favoriler

Yazdığınız veya retweetlediğiniz tüm tweetleri değil de seçtiğiniz veya beğendiğiniz tweetleri blogunuzda paylaşmak isterseniz favoriler bileşenini kullanabilirsiniz. Favorilere eklediğiniz tweetleri blogunuza embed edebilirsiniz. Benim favorilerimde tweet olmadığı için başka bir hesabın favorilerini örnek göstermek istiyorum.

 

 

Hashtag Bileşeni

Ayrlar > Bileşenler > Yeni Oluştur > Ara


Belli bir hashtag veya anahtar kelime ilgili yazılmış tweetlerden oluşan bileşendir. Diğer bileşenlerde olduğu gibi genişlik ve renk seçeneklerinin yanı sıra sadece popüler tweetlerin göterilmesini de seçebilirsiniz. Örnek olarak blog yazarlığı ile ilgili bilgi, ipucu, duyuru, haber gibi şeylerin paylaşıldığı #blogyazarlığı hashtagine ait bileşeni vermek istiyorum.

 

 

Ayrıca listeler ve özel zaman akışı bileşenlerini de  benzer şekilde oluşturup blogunuza ekleyebilirsiniz ama ben bu özellikleri kullanmadığım için örnek veremiyorum ne yazık ki.

 

 

Tweetle Butonu

 

Butonu eklediğiniz sayfayı, sayfanın linki ve başlığıyla Twitter’da paylaşmanızı sağlayan klasik buton. Tweetle butonunun kodları:

 

<a href="https://twitter.com/share" class="twitter-share-button" data-via="BlogHocam" data-lang="tr">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

 

Kırmızı renkle yazdığım yere kendi Twitter kullanıcı adınızı yazın. Örnek buton:

 

 

Takip Et Butonu

 

Twitter’da sizi takip etmelerini kolaylaştırmak için kullanabileceğiniz buton. Butonu eklmeniz için gereken kodlar:

 

<a href="https://twitter.com/BlogHocam" class="twitter-follow-button" data-show-count="false" data-lang="tr">Takip et: @BlogHocam</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

 

Yine kırmızı renkle gösterdiğim yerlere kendi Twitter kullanıcı adınızı yazmalısınız. Örnek buton:

 

 

Hashtag Butonu

 

Bu butona tıkladığınızda belirlediğiniz hashtagin olduğu bir tweet penceresi açılır ve bu hashtagla tweet yazılmasını kolaylaştırır. Butonun kodları:

 

<a href="https://twitter.com/intent/tweet?button_hashtag=blogyazarlığı" class="twitter-hashtag-button" data-lang="tr">Tweet #blogyazarlığı</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

 

Kodlarda kırmızı renkli yerlere başka bir hashtag yazabilirsiniz. Örnek buton:

 

 

Mention Butonu

 

Birinin sizden bahsederek tweet göndermesini salayan butondur. Butonu eklemeniz için gerekli kodlar:

 

<a href="https://twitter.com/intent/tweet?screen_name=BlogHocam" class="twitter-mention-button" data-lang="tr">Tweet to @BlogHocam</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

 

Yine kırmızı renkli yerlere kendi Twitter kullanıcı adınızı yazın. Örnek buton:

 

 

 

Twitter Kullanan Blog Yazarlarının Dikkatine…

 

Twitter’da Blog Hocam için açmış olduğum hesap olan @Blog Hocam hesabını takip etmenizi öneriyorum. Bu hesapta sadece Blog Hocam’da yaynlanan yazılarını değil, blog dünyası, sosyal medya, SEO, dijital pazarlama ve kişisel gelişim ile ilgili bilgiler, haberler, öneriler ve linkler paylaşıyorum. Ayrıca…

 

Yukarıdaki bileşen ve butonlarda gördüğünüz #blogyazarlığı etiketi bana, Blog Hocam’a veya başka birine ait değildir. Her blog yazarı bu etiketi kullanarak önerilerini, sorunlarını, denetyimlerini paylaşsın lütfen.

Fotoğrafçılığı Cebe Taşıyan Telefon

Son yıllarda özellikle genç nesil arasında hızla yayınlan hobilerin başında şüphesiz “fotoğrafçılık” geliyor. Turistik veya manzaralı mekanlarda ellerinde fotoğraf makineleriyle dolaşan pek çok genç görmeniz mümkün. Ancak kabul etmeliyz ki çoğunluğu öğrenci olan bu fotoğraf meraklılarını, profesyonel makineler satın almak maddi açıdan zorlayabilir. Nokia'nın kamera kalitesiyle öne çıkan ürünü Lumia 1020, gençlerin hem fotoğraf, hem de akıllı telefon ihtiyacını karşılayacak nitelikte. Nasıl mı? Okumaya devam edin.

 

Nokia-Lumia-1020-with-Nokia-Pro-Camera

 
Nokia Lumia 1020 ‘nin 41 megapiksel'lik kamerası akıllı telefonda sektöründe fark yaratıyor ve ProCam sayesinde pek çok detayı ayarlayarak, oldukça  yüksek çözünürlüklü yakınlaştırma teknolojisiyle profeyoneller çekimlere taş çıkartacak sonuçlar elde edebiliyorsunuz.

 

Lumia 1020'nin kamerası sadece fotoğraf çekerken değil, video kaydı yaparken de size anı yaşatacak kalitede bir deneyim sunuyor. Oldukça net ve HD kayıt kalitesi, 6 kata kadar kalite kaybı olmadan zoom özelliği ve kusursuz stereo ses kaydı ile videoyu izleyenlere anı yaşatıyor.


MS Office, ücretsiz sesli navigasyon ve kablosuz şarj kapağı gibi benersiz özellikler olan bu akıllı telefonu, Turkcell'in internet, konuşma ve SMS paketleriyle hazırladığı avantajlı tekliflerden faydalanarak satıın alabilirsiniz. Nokia Lumia 1020'nin özelliklerini  ve Turkcell'in sunduğu avantajlı teklifleri incelemek için buraya bakabilirsiniz: http://www.turkcell.com.tr/cihazlar/akilli-telefonlar

6 Ocak 2014 Pazartesi

Blogger Lightbox Eklentisi

Blogger Lightbox Eklentisi

Blogger Resimleri İçin Işık Kutusu Görünümü
Blogger Lightbox Eklentisi

Blog yayınındaki bir resim tıklandığında, söz konusu resim blog'unuzun üzerinde yer paylaşımlı olarak daha büyük bir görünümde sunulur. Bu görünüme ışık kutusu adı verilir. İster doğrudan bilgisayarınızdan yüklenmiş olsun isterse başka bir kaynaktan bağlanılmış olsun tüm blog resimleri bu ışık kutusu görünümünde gösterilir.
Blog yayınında birden fazla resim varsa ışık kutusu görünümü açıldığında söz konusu resimlerin tümüne gözatılabilir.

Kimi zaman görüntüleme için gerekli ayarlamayı yapsak bile lightbox özelliği aktif olmuyor. Bunun nedeni tema sırasında gereksiz görülüp silinen temel kodlar yada yeni tema ekleyip özelliştirirken bu özelliği yok ediyoruz.
Sorunun çözümü için aşağıdaki adımları takip edin.

Adım -1

1- Ayarlar › Yayınlar ve Yorumlar kısmına gelin ve Resimleri Lightbox ile gösterin ? şıkkına 'Evet' deyip kaydedin.

2- Kumanda Paneli › Blog Adı › Şablon › Html'yi Düzenle (Devam et) yolunu izleyin.
ve daha sonra aşağıdaki kodu Ctrl+F komutu ile bulun.

<data:post.body/>

Yukarıdaki kodu bulduysanız onu aşağıdaki kodlarla değiştirin.
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'><data:post.body/></div>

Adım -2

1- Tekrar Kumanda Paneli › Blog Adı › Şablon › Html'yi Düzenle (Devam et) yolunu izleyin ve Ctrl+F komutu ile aşağıdaki kodun tema kodlarınız arasından olup olmadığını kontrol edin.
<b:include data='blog' name='all-head-content'/>

Bu kod bir tür bağlantı görevi görüyor. Çünkü temanızda olmadığı takdirde lightbox ve arama açıklaması özellikleri çalışmıyor.

Eğer bu koddan varsa müdahale etmeden sayfayı kapatabilirsiniz. Eger bulamadıysanız, kodu, <head> etiketinin hemen altına ekliyoruz. Ve işlem tamamdır. Lightbox'unuz hayırlı olsun.Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

Web sitesi oluşturmak için en iyi 10 web sitesi üreticileri

Create WebSite

Web sitesi oluşturmak için en iyi 10 Web Sitesi Üreticileri
Top 10 Website Builders To Create Your Own Website

Günümüzde bir web sitesi oluşturmak çok kolay oldu. Bir web sitesi yapmak istiyorsunuz, fakat nereden başlayacağınızı bilmiyorsanız,web sitesi kurma sitelerinde aradığınızdan fazlasını bulacaksınız. Bu internet sitesi yapma siteleri ile hiçbir tasarım kodlama ve teknik bilgiye sahip olmanız gerekmez. İstediğiniz her kategoride web sitesi açmak çok basite indirgendi. Sıradan bilgisayar kullanıcılarına tasarlandığı için artık herkes site kurabilecek. Burada sizler için ücretsiz online web sayfası oluşturabileceğiniz en iyi siteleri seçtim.

Wix

Wix

Webs

Webs

Yola

Yola

Jimdo

Jimdo

Webnode

Webnode

Weebly

Weebly

SnapPages

SnapPages

EXAI

EXAI

Edicy

Edicy

Doomby

Doomby

Bunlardan birini Denediyseniz en sevdiğiniz web sitesi oluşturucu hangisi? Bize yorum yaparak bildirin.

Blogger Yıldızlı Oy Verme Eklentisi

Blogger kullanıcıları tarafından en çok aranan ve istenen eklentilerden biri yıldızlı oy verme eklentisi. Bu konuda daha önce paylaştığım eklenti Javascript kodunun yapımcı hostundan kaldırılması nedeniyle çalışmıyordu. Ben de daha profesyonel olması için üçüncü parti uygulamalarında arayışa girdim ve işinize yarayacak güzel bir yıldızlı oy verme eklentisi buldum.

Aslında bu eklentiye yıldızlı oy verme eklentisi yerine yazı değerlendirme eklentisi demek daha doğru olur. Çünkü eklentiyi isterseniz yıldızlı, isterseniz de olumlu/olumsuz oy verme şeklinde kullanabiliyorsunuz. Şimdi adım adım bu eklentiyi oluşturmaya ve bloga eklemeye geçelim.

1. Adım: Rating Widget isimli bu ekletiyi kullanabilmeniz için öncelikle üye olmanız gerekiyor. Bu yüzden öncelikle widget oluşturma sayfasına giderek Create account butonuna basın.

Rating Widget üye ol
Burada e-mail adresinizle bir hesap oluşturabileceğiniz gibi Facebook, Google veya LİnkedIn hesaplarınıza bağlanarak kısa yoldan hesap oluşturabilirsiniz.


2. Adım: Hesabınıza giriş yaptıktan sonra işe eklentinin stilini belirleyerek başlayabiliriz. Yıldızlı veya +/- oy verme stillerinden birini seçtikten yatay mı yoksa dikey mi kullanmak istediğimizi belirleyebiliyoruz.

Rating widget stiller
Seçtiğiniz stilin örnek görüntüsünü yandaki Live Preview yazan bölümde anlık olarak görebilirsiniz. Stile karar verdikten sonra yıldızların şekli, rengi, boyutu, yazı tipi ve boyutu, yıldızların sayısı gibi özellikleri seçtikten sonra sağ tarafta oluşan kodu kopyalıyoruz.

3. Adım: Blogger kumanda panelinize giriş yaptıktan sonra Şablon > HTML’yi düzenle yolunu takip edin ve Ctrl + F tuş kombinasyonunun yardımıyla arama kutusunu açarak </body> kodunu bulun. Kopyaladığınız kodları bunun üzerine yapıştırın.  

Ardından <div class='post-footer'> kodunu bulun (Bu koddan şablonda birden fazla olabilir.İkincisi sizin için önemli. ) ve hemen üzerine şu kodu ekleyin.

 

<div class="rw-ui-container"></div>

 

Şablonda ön izleme yapığınızda yazının en altında yıldızlı oy verme eklentisinin gözükmesi gerekliyor. Şablonu kaydedebilirsiniz.

Yıldızlı oy verme eklentisi

 

İpucu-1: Eğer eklenti ile yazınız arasında hiç boşluk yoksa eklediğiniz ikinci kodun önüne <br/> kodunu ekleyebilirsiniz.

 

İpucu-2: Eklentinin ana sayfada deil de yazı başlığına tıklayıp yazının içine girildiğinde görünmeini istiyorsanız ikinci kodu şu şekilde değiştirin:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="rw-ui-container"></div>
</b:if>

 

Açık ve net bir şekilde anlatmaya çalıştım ama bir sorunuz olursa yorum bölümünden sorabilirsiniz.