20 Ocak 2014 Pazartesi

Twitter Kuşu” Larry” Eklentisi

Blog ile Twitter entegrasyonunu sağlamak için klasik ve standart butonlar ya da eklentiler hem Blog Hocam’da hem de webde pek çok defa paylaşıldı. Fakat bu kez paylaşacağım Twitter takip et butonu eklentisi, daha önce muhtemelen görmediğiniz çok farklı özelliklere sahip.

Twitter takip et butonu

 

Eklentiyi blogunuza eklediğinizde sağ üst köşede küçük bir Twitter kuşu ikonu belirecek. Bu Twitter kuşu ikonu “floating” yani yüzen özellikte. Sayfayı aşağı yukarı kaydırdığınızda dahi ikonun yeri değişmiyor.

 

Bu eklentiyi farklı kılan özellik elbette sabit olması değil. Asıl farkı ikonun üzerine geldiğinizde göreceksiniz. Aşağıdaki demo videoda da göreceğiniz gibi Twitter kuşu ikonunun üzerine geldindiğinde Twitter takip et butonu açılıyor ve sevimli Twitter kuşu “Larrry” kanat çırpmaya başlıyor.

 


Bu tür animasyonlar için genellikle özel scriptler kullanıldığı için sayfayı oldukça yavaşlatır ama bu eklenti CSS sprite ve @keyframes teknikleriyle oluştrulduğu için oldukça hızlı ve sorunsuz.

 

Eklentiyi blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra Şablon > HTML’yi Düzenle yolunu takip ederek Ctrl + F tuş kombinasyonunun yardımıyla </body> kodunu bulun ve hemen üzerine aşağıdaki kodları ekleyin.

 

<style>
.takip-wrapper {
  height: 44px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}
.takip-buton {
background-image: url(https://dl.dropboxusercontent.com/u/60346665/twitter-bird-sprite-BH.png);
background-repeat: no-repeat;
background-position: 0 0;
cursor: pointer;
display: block;
padding: 7px 0 7px 40px;
position: absolute;
right: -168px;
top: 5px;
-webkit-transition: right 0.3s;
-moz-transition: right 0.3s;
transition: right 0.3s;
width: 168px;
}
.takip-buton:hover {-webkit-animation: fly 0.2s steps(4) 0 10;
-moz-animation: fly 0.2s steps(4) 0 10;
animation: fly 0.2s steps(4) 0 10;
right: 0;
}
@-webkit-keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
@-moz-keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
@keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}
    </style>
<div class='takip-wrapper'>
  <div class='takip-buton'>
    <a class='twitter-follow-button' data-show-count='false' href='https://twitter.com/bloghocam'>@BlogHocam 'ı takip et</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
  </div>
</div>

 

Kodlarda kırmızı renkle gösterdiğim yerlere kendi Twitter kullanıcı adınızı yazmanız yeterli. Bunun dışında bir değişikliğe gerek yok.

17 Ocak 2014 Cuma

Web Yöneticisi Araçlarını Kullanarak Hit Arttırma

Web sitenizin veya blogunuzun linkini google'da başına "site:" koyarak arattığınızda google en başta size "Google Web Yöneticisi Araçları'nı deneyin" diye bir tanıtım yapar. Google size bu öneriyi yapıyorsa bi bildiği vardır mutlaka. Peki nedir bu web yöneticisi araçları ve sitemiz için bu aracı kullanmamızın bize nasıl bir faydası dokunur?

Web site veya blog sahipleri için son derece faydalı olan web yöneticisi araçları size blogunuzun site haritasını google'a gönderme seçeneği sunar, bulunamayan yani 404 hatası veren sayfalarınızı tespit eder, arama sorgularında blogunuzun ne kadar görüntülendiğini, ne kadar tıklandığını gösteren bilgiler sunar ve siteniz için daha bir çok özellik içerir. Ben size bu yazıda web yöneticisi araçları arama sorgularını kullanarak nasıl hitlerinizi arttırabileceğinizi anlatacağım.

Web yöneticisi araçlarına web sitenizi veya blogunuzu ekledikten sonra google'ın sitenizi tanıması ve dizinlerdeki durumunu tespit edebilmesi için belli bir süre beklemeniz gerekiyor. Bu durumda biraz sabırlı olarak en sağlıklı sonucu almak için 2-3 hafta beklemekte fayda var.

Eğer siteniz uzun zamandır web yöneticisi araçlarına ekli ise tek yapmanız gereken sol menüde Arama Trafiği altında Arama Sorguları sekmesine gelmeniz. Aynı sayfaya site kontrol panelinden Arama Sorguları yazısına tıklayarak da ulaşabilirsiniz. Burada araç size sitenizin hangi anahtar kelimelerde ne kadar gösterildiğini, kaç kez tıklandığını ve o anahtar kelime ile arandığında ortalama kaçıncı sırada çıktığınızı gösterir. Ort. konum yazısına bir kez tıkladığınızda artan, ikinci kez tıklatığınızda ise azalan şeklinde google'da görünme sıranızı listeler. Bizim işimize yarayacak olan azalan listeyi kullanmak çünkü ilk sıralarda çıktığınız anahtar kelimeler zaten üzerinde ekstra bir işlem yapmanızı çok gerektirmeyen kelimelerdir.

Azalan listede ise en gerilerde bulunduğunuz anahtar kelimelere göre liste sıralanır ve sizin sitenize hangi anahtar kelimelere yoğunluk verebileceğiniz hakkında fikir verir. Siz de bu listede en gerilerde bulunduğunuz anahtar kelimeye odaklanarak blogunuza yeni yazı eklediğinizde otomatikman google'da üst sıralara yükselecek ve hitiniz de aynı oranda artacaktır.

Arama sorguları

Örnek olarak sitenize "betonarme" anahtar kelimesine yoğunlaştığınız bir yazı eklediniz. Web yöneticisi araçlarında arama sorgularına baktığınızda ise "betonarme demiri" anahtar kelimesinde sitenizin ortalama 120. sıralarda yer almakta olduğunu gördünüz. Siz bu sefer "betonarme demiri" kelimelerine yoğunlaşarak blogunuza yeni bir yazı eklediğinizde sitenize eklediğiniz yeni yazı sayfası bu kelimelerle yapılan aramalarda üst sıralara çıkacaktır. Bu yöntem sayesinde bu konuda önceki yazmış olduğunuz yazıya da bağlantı vererek site ağınızı güçlendirebilir, aynı zamanda bloguma ne yazsam acaba sorusundan da bi nebze kurtulabilirsiniz. Böylece bir taşla bir kaç kuş birden vurabilirsiniz.

Bu yazı aslında aynı zamanda benim inşaat mühendisi olarak daha 6-7 ay öncesinde açmış olduğum İnşaat Ofis blogumda son 1 ayda 40-50 civarındaki günlük tekil hitimi, günlük 150-160 tekil hite yani yaklaşık 3 katına kadar nasıl çıkardığımın hikayesidir.

16 Ocak 2014 Perşembe

Yaratıcı Blogcunun Gıdası: Müzik

Blog yazarları yeni yazı fikirleri bulmak ve yazılarıyla rakipleri arasında sivrilmek için yaratıcı olmak zorundalar. Yaratıcılığı tetikleyen en önemli şey ise “ilham” dediğimiz o meşhur kavram.

Genç blogger arkadaşım Akif, Blog Hocam’a gönderdiği bir misafir yazıda blogcular için ilham kaynaklarından bahsetmişti. Bunlar arasına benim daha önce hiç denemediğim bir şey olan “müzik dinlemek” de vardı.

Ben de son zamanlarda, Blog Hocam’a yeni fikirler üretebilmek için akşamları hoparlörün sesini hafif açıp klavyenin başına oturmaya başladım. Akif’in önerdiği gibi, yaratıcılığımın artması için daha önce dinlediklerimden farklı, çeşitli radyo kanalları arasında geçiş yapıp, ilginç ve farklı şarkılar dinledim. Sonuç mu? Bu yazı dahil pek çok pek çok parlak fikir belirdi kafamda :)

 

Müzik dinlemenin bloggerlar için başka faydaları da var. Örneğin çok uzun yazılar yazarken veya bilgisayar başında çok vakit geçirdiğinizde müzik araları vererek o işten sıkılmanızı önleyebilir ve kafanızı birkaç dakikalığına dağıtabilirsiniz. İnanın iyi gelecektir.

Gelelim esas soruya… Farklı müzik türlerini, zahmetsiz ve hızlı bir şekilde nasıl dinleyeceksiniz? Bunun için de size çok güzel bir önerim olacak. Her türden yerli, yabancı ve yerel radyoyu bir araya toplayan, DinleFm.net isminde bir radyo dinleme sitesi var. Bu sitede, Türkiye’de yayın yapan tüm radyo kanallarının canlı radyo dinleme bölümlerini bir sayfada toplanmış. Böylece site site gezmeden, istediğiniz müzik türüne göre istediğiniz radyo kanalını tek bir yerden zahmetsizce dinleyebiliyorsunuz.

dinlefm
Online radyolar arasında benim favorilerimi merak edenler için birkaç öneride bulunmak istiyorum.

 

- Slow Karadeniz
- Power Türk
- Radyo Seymen
- Lounge FM
- Pal Station
- Joy Türk
- Radyo Alaturka
- Radyo Beyoğlu


Ne demişler müzik ruhun gıdasıdır. O halde bloguna ruh katmak isteyenler DinleFM.net’i ziyaret etsinler…

15 Ocak 2014 Çarşamba

Blogger’da Kategori Oluşturma Ve Yazıları Kategorilere Ayırma

Deneyimli Blogger kullanıcıları için çok gereksiz bir konu gibi olsa da Blog Hocam’ın her seviyede blog yazarına hitap ettiğini ve içeriğinin büyük bir kısmının okuycu talepleri ile oluştuğunu unutmayın lütfen.

Blogger’a yeni başlayan kullancıların en çok sorduğu soraların başında geliyor Blogger’da kategori oluşturma mevzusu. Bu sorulara cevap olması ve yeni Blogger kullanacaklara yol göstermesi açısından bu yazıyı yazmak istedim.

Blogger’da Kategori Nasıl Oluşturulur?

Blogger’da kategori oluşturma sistemi Wordpress veya diğer CMS’lerde olduğundan farklıdır. Örneğin müzik kategorisinde yazılar için müzik isimli bir sayfa oluşturulup yazılar o sayfanın içine yazılmaz ya da gönderilmez. Blogger’da yazıları bir farklı kategorilere ayırmak için etiketleme sistemi kullanılır.  Şimdi adım adım kategori oluşturmaya geçelim.

 

1. Adım: Öncelikle yazıları ayıracağımız kategorileri belirleyelim. Bu örneklte ben 4 adet kategori oluşturacağım. Kategoriler spor, kitap, teknoloji ve dans olsun. Şimdi spor ile ilgili bir yazı yazdığımızı düşünelim ve bunu spor kategorisine nasıl göndereceğimze geçelim.

Blogger kategori
Resimde gördüünüz gibi yazıyı yazdıktan sonra sağ taraftaki yayın ayarlarında etiketler kısmına yazıyı göndermek istediğim kategori olan spor yazıyorum ve tamamlandı butonuna basıyorum. Artık yazıyı yayınladığımda yazının kategorisi spor olacak.

2. Adım: Aynı şekilde diğer yazılarımı da kategorilere ayırdıktan sonra sıra bu kategorileri blogun ana sayfasında menü şeklinde göstermeye geliyor. Kategoriler menüsü genellikle 2 yerde kullanılır. Sidebar dediğimiz blogun kenar çubuğuna dikey menü şeklinde ve kayıt alanın üstüne yatay menü şeklinde. İlk olarak yan tarafa dikey menü şeklinde eklemeyelim.

Blogger kyumanda panelinde sağ taraftaki yerleşim sekmesine tıklayıp blogun yan taraflarındaki boş gadget alanlarında birinde gadget ekle yazısına tıklayın ve listeden etiketler isimli gadgetı seçin.

etiketler
Burada gadget başlığı olarak kategoriler yazdıktan sonra kaydedin. İsteğinize bağlı olarak hangi kategoride kaç yazı olduğunu gösterebilir, kategorileri çoktan aza göre sıralayabilir veya gözükmesini istemediğiniz kategorileri kaldırabilirsiniz. Değişiklikleri kaydedikten sonra blogunuzu ziyaret ettiğinizde kenar çubuğunda şuna benzer bir dikey kateoriler menüsünün olduğunu göreceksiniz.

Kategoriler dikey

 

Şimdi de kategorileri yatay bir menü şeklinde blog kayıtlarının üst tarafında göstermeye geçelim. bunun için yapmanız gerken tek şey kenar çubuğunda eklediğimniz gadgetı sürükle bırak yöntemiyle blog kayıtlarının üstündeki boş gadget alanına taşımak.

Kategoriler yatay


Düzenlemeyi kaydettiğinizde aşağıdaki resimde gördüğünüz gibi kategorileriniz yatay menü şeklinde blog kayıtlarının üzerinde gözükecektir.

Kategoriler menüsü


Sonuç olarak spor kategorisinde yazdığım yazı, diğer tüm kategorilerdeki yazılarla birlikte ana sayfada yer alır ama kategoriler menüsünden spor kategorisini tıkladığımda sadece spor kategorisindeki yazılar listelenir.

Umarım yeterince açıklayabilmişimdir.

13 Ocak 2014 Pazartesi

Hover Efektli Şık Bir Ribbon Menü

Blog tasarımlarının en çok aranan ve en çok üzerinde durulan öğelerinden biri blog kayıtlarının üst tarafına eklenen yatay link menüleri sanırım. Blogger’a yatay menü ekleme olayı hem Google’da çok aranıyor, hem de benden çok isteniyor.

 

Bugüne kadar bazı yatay menü kodları paylaşsam da şıklığa ve tasarıma özen gösteren bloggerlar benden ribbon menü paylaşmamı istemişlerdi. Ben de blog kayıtlarının üst tarafına ekleyebileceğiniz, şık ve hover efekti sayesinde üzerine gelindiğine hareket eden harika bir ribbon menü buldum.

 

ribbon menu

 

Menüyü Blogger’a eklemek için kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyin ve aşağıdaki kodları yapıştırın.

 

<style>
/* Blog Hocam Animasyonlu Ribbon Menü */
.bhribbon span {
    background:#F1921A;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.bhribbon a span {
color:#000;}

.bhribbon a:hover span {
    background:#669900;
    margin-top:0;}
.bhribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #F1921A;
    border-bottom:0.5em solid #fff;}

.bhribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #F1921A;
    border-bottom:0.5em solid #fff;}

.bhribbon a:link, .bhribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.bhribbon:after, .bhribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #F1921A;}

.bhribbon:after {
    border-right-color:transparent;}

.bhribbon:before {
    border-left-color:transparent;}
</style>
<div class='bhribbon'>
    <a href='http://bloghocam.blogspot.com/'><span>Ana Sayfa</span></a>
    <a href='http://bloghocam.blogspot.com/p/hakkmda.html'><span>Hakkımda</span></a>
    <a href='http://bloghocam.blogspot.com/p/misafir-blogculuk.html'><span>Misafir Blogculuk</span></a>
    <a href='http://bloghocam.blogspot.com/p/destek-ol.html'><span>Destek Ol</span></a>
    <a href='http://bloghocam.blogspot.com/p/takip-et.html'><span>Takip Et</span></a>
    <a href='http://bloghocam.blogspot.com/p/ne-dediler.html'><span>Ne Dediler?</span></a>
    <a href='http://bloghocam.blogspot.com/p/arsiv.html'><span>Arşiv</span></a>
    <a href='http://bloghocam.blogspot.com/p/galeri.html'><span>Reklam</span></a>
    <a href='http://bloghocam.blogspot.com/p/iletisim.html'><span>İletişim</span></a>
</div>

 

Değiştirmeniz gereken yerler son bölümdeki menü öğelerine ait bağlantılar. Ben bu menüye Blog Hocam’a ait statik sayfaların linklerini ekledim ama siz isterseniz başka türlü de değerlendireblirsiniz.

 

Örneğin bir arkadaşınıza ya da diğer sitenize link vermek sterseniz oraya şu satırı ekleyebilirsiniz:

 

<a href='http://siteadresi.com'><span>Site</span></a>

 

Veya belli bir etikete ait yazılarınızın listelenmesini sağlayablirsiniz. Örneğin Blog Hocam’da SEO etiketli yazılara link vermek için şu satırı ekleyebilirim:

 

<a href=' http://bloghocam.blogspot.com/search/label/SEO'><span>SEO</span></a>

 

Ya da belli bir yazıya link vermek isteyebilirim. Örneğin Bumerang’ı tanıttığım Her Yönüyle Bumerang Network başlıklı yazıma bu menüde yer vermek istersem şu satırı ekleyebilirim:

 

<a href='http://bloghocam.blogspot.com/2013/10/her-yonuyle-bumerang-network.html'><span>Bumerang</span></a>

 

Ben menüyü Blog Hocam’ın tasarımına uygun şekilde renklendirdiğim için her blog uygun olmayabilir. Bu yüzden son olarak da renkleri nasıl değiştireceğinizden bahsedeyim.

 

Tmel olarak 2 renk kullandım. Bunlardan ilki turuncu renkte gördüğünüz zemin rengi. Bu rengin kodu #F1921A Kodlarda bu renk kodunu gördüğünüz yere kendi istediğiniz rengin kodunu koyarsanız menünün zemin rengi değişecektir.

 

Kullandığım diğer renk ise menünün üzerine geldiğinde öne çıkan öğenin dönüştüğü renk olan yeşil. Bu rengin kodu ise #669900 Kodlarda bu renk kodunu gördüğünüz yere kendi istediğiniz rengin kodunu koyarsanız hover efekti ile oluşan renk değişecektir.

 

 

Sanırım yeterince açıklayıcı oldu :) Eğer kafanıza takılan bir şey olursa yorum bölümünden sorabilirsiniz.