31 Ağustos 2013 Cumartesi

Rss Abonelik kutusu ve sayaçlı sosyal medya butonları

rss kutusu ve sayaç sosyal medya butonları
RSS kutusu Sosyal medya 
  Blogunuzun Trafik kaynağı en çok nereden diye sorsak şüphesiz arama motorları dersiniz.Hatta arama motoru değil Google dersiniz. Blog'a gelen trafiklerin çoğunun arama motorlarından geldiği bilinmekte elbette. Arama motorlarından sonraki bir trafik kaynağı Sosyal medya'dır.Yani facebook, twitter, google plus, pinterest, tumblr vb ne kadar sosyal medya aracı var ise hepsi birer trafik kaynağıdır.Bu tür sosyal medya ortamlarından takipçiniz ne kadar fazla olursa bu da blogunuza daha fazla trafik olarak geri dönecektir. Özellikle rss kullanımın faydasından da daha önce ki yazılarımda bahsetmiştim.Blogunuza uğrayan ziyaretçilerin RSS kutusunu kullanarak yazınıza abone olması daha fazla trafik, blogunuz, okuyucu kitleniz, google sıralamanız, Seo ve daha bir çok yararı olacaktır. Rss abonelik kutusu ve Sosyal medya butonlarının kullanımının faydalarından daha önceki yazılarda da bahsetmiştim.
Bakınız: 
Bu yazımda da Rss abonelik kutusunun yanısıra sayaçlı sosyal medya butonlarının bulunduğu bir eklentiyi blogunuza nasıl uygulayacağınızdan bahsetmeye çalışacağım. Bu Rss abonelik kutusu (yayınlara abone olma) eklentisinde facebook , twitter ve feedburner gibi sosyal medya araçlarında kaç tane takipçiniz olduğu yazmakta. Tabiki bu yalancı takipçi sayısı:) 
Rss kutusu ve sayaçlı sosyal medya butonlarının nasıl göründüğünü test etmek isterseniz yukarıda ki test butonuna tıklayarak görebilirsiniz.
Eklentiyi blogumuza nasıl uygulayacağımıza gelince
  • Blogger paneline giriş yapıyoruz.
  • Yerleşim sekmesine tıklıyoruz.
  • Gadget ekle butonuna tıklıyoruz.
  • Html/java script 'i seçerek aşağıdaki kodları yapıştırıyoruz.
  • Kaydet butonuna tıklıyoruz.
<style>
#ugurturkoglusocialcounters{
width:300px;
padding: 0 0 40px 0;
border: 1px solid #CCC;}
ul#ugurturkoglucounters {
list-style: none;
margin:0px;
overflow: hidden;
width:300px;
padding:10px 0 40px 0;
margin:10px 0 -60px 12px;
}
ul#ugurturkoglucounters li {
float:left;
margin:0px 0px 5px 0px;
width:auto;
padding:0px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;}

ul#ugurturkoglucounters li a {
display: block;
height: 54px;
margin-right: 10px;
padding-top: 85px;
text-align: center;
text-decoration: none;
width: 85px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
font-weight: bold;
}
ul#ugurturkoglucounters li:hover {
opacity:0.6
}
ul#ugurturkoglucounters li:last-child a{
margin-right:0px;
}
ul#ugurturkoglucounters #counter-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-DJTxrLul_spZcP4f1TSmM3QCeaJqNasSHOOGFeCcv-LilsmVPGexlzAuh2G09qcvzlJwjhPrvtoFYC-IhhsMx7O6XSDKCyZIsRhrBgoamhyphenhyphenrmNtYJuGexSsDdTdEEkS_XUQ2j7Zqo2i/s1600/btrix-rss-counter.jpg') no-repeat
}
ul#ugurturkoglucounters #counter-rss a {
color:#cf6600
}
ul#ugurturkoglucounters #counter-facebook {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZmuAhveuKvi-zg2uW_TRm4EzbHlLQ632hiV2W6ywGqcI7tl2TZnczxUF8jlRCPUGI3Dc8J8MtVtaBi1rDoFVKD3aZE9hG3GuURyGO6XKB9jZXyMamvOqdkmXDid-s4vU3NuuHuooOTwJh/s1600/btrix-facebook-counter.jpg') no-repeat
}
ul#counters #counter-facebook a {
color:#3b4d8f
}
ul#ugurturkoglucounters #counter-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELldFaYN5mS48DsoAsNDv60jE0qq7VECMnOmNnHrtkdYs9YvIft0-zNVRjfMau-28o_JZO-_b8w5HfcRfVKGWVRfyHkrV6GNt6Qxrd-WFqdLnxjDbLhP9d0kLp17DXwDJvdcy5Tnoz-AO/s1600/btrix-twitter-counter.jpg') no-repeat
}
ul#ugurturkoglucounters #counter-twitter a {
color:#276ab6
}
.textwidget {width: 300px;margin-top: -50px;}

input[type="submit"] {color: white;border: 0px;text-transform: uppercase;font-size: 11px;padding: 13px;float: left;font-weight: bold;background-color: #2DA1EB;margin-left: 100px;cursor: pointer;margin-top: 10px;}
</style>
<center>
<br />
<div id="ugurturkoglucounters">
<ul id="ugurturkoglucounters">
<li class="first-item" id="counter-rss">
<a href="http://feeds.feedburner.com/ugurturkoglu">540</a></li>
<li id="counter-facebook">
<a href="http://www.facebook.com/ugurturkoglu">2319</a></li>
<li id="counter-twitter">
<a href="https://twitter.com/ugurturkoglu">5263</a></li>
</ul>
<div class="ugurturkoglutextwidget">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ugurturkoglu', 'popupwindow', 'scrollbars=yes,width=350,height=520');return true" style=" padding: 3px; text-align: center;" target="popupwindow">
<h3>E-mail adresinizi giriniz><br/>
<input name="email" style="width: 180px;" type="text" /><br />
<input name="uri" type="hidden" value="ugurturkoglu" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="Kaydol" /></form></div><a href="http://www.ugurturkoglu.blogspot.com.com/2013/03/sosyal-medya-rss-kutusu.html" style="margin-right: -50px;margin-top: 100px;font-size: 10px;">Sitene ekle</a>
</div>

  • Kod kısmındaki mavi ile yazılmış olan yerlere kendi sosyal medya hesaplarınızı yazınız.
Sorularınız olursa buradan ulaşabilirsiniz.

Bir önceki yazımda Blogunuza özel google arama kutusu oluşturma hakkında bilgiler verilmektedir.

26 Ağustos 2013 Pazartesi

Facebook Ve Twitter Gönderilerini Blog Yazısına Eklemek

Bir süre önce yurt dışındaki kullanıcıları için, gönderileri blog yazısının içine gömme yani embed özelliğini aktifleştiren Facebook, sonunda bu özelliği Türkiye’deki kullanıcılarına açtı. Bu işlemi nasıl yapacağınızı anlatan bu yazıyı hazırlıyordum ki aklıma Tweetleri blog yazılarını gömmeyi anlatmak da geldi. Hazır elim değmişken ikisini birden bu yazıda paylaşayım dedim : )

 

 

Facebook Gönderilerini Blogger’a Gömmek

 

Facebook embed özelliği

 

Öncelikle taze bilgi olan Facebook gönderilerini gömme işlemi ile başlayalım. Facebook sayfanızdaki her hangi bir gönderinin sağ üst köşesindeki işarete tıkladıktan sonra açılan seçeneklerden Gönderiyi Göm seçeneğine tıklayın.

 

Facebook embed kodu

 

Açılan pencerede üst tarafta yazının içerisine ekleyeceğiniz kodu göreceksiniz. Bu kodun tamamını kopyaladıktan sonra Blogger kumanda panelinde yazının HTML bölümünde istediğiniz bir yere yapıştırın. Canlı örneğini de bu yazıda test etmiş olalım:

 

 

 

Tweetleri Blogger’a Gömmek

 

Tweet embed

 

Şimdi de Twitter’da herhangi bir tweet blog yazınıza nasıl gömeceğinize gelelim. Bunun için tweetlerden birinin altındaki Daha fazla yazısına tıklayarak Tweeti yerleştir seçeneğine tıklayın.

 

Twitter Embed Kodu

 

Aynı Facebook’ta olduğu gibi bir pencere açılacak ve üst tarafta yazıya eklenecek kod gözükecektir. Bu kodun tamamını kopyaladıktan sonra Blogger kumanda panelinde yazının HTML bölümünde istediğiniz bir yere yapıştırın. Canlı örneği:

 

 

 

Sosyal medyanın, iletişimin ve etkileşimin öneminin giderek arttığı bu dönemde  Facebook ve Twitter gönderilerini bloglara gömmenin, etkileşimi arttıracağı bir gerçek.

22 Ağustos 2013 Perşembe

Blog Dünyasının En İyi Kitap Blogları

Her iyi “bog yazarı” aynı zamanda iyi bir okuyucuğudur. Hatta yazdığından daha çok okur diyebilirim. Bolca blog gazete, dergi, kitap vs okuyan bloggerlar kendilerini o kadar belli ediyor ki… Yazı dilleri, kullandıkları kelimeler, kurdukları cümleler sıradanlıktan çok uzakta oluyor. Kitap bloggerlarının yazılarını okumak bu yüzden çok keyifli oluyor. Okuyana her defasında “Vayy bee” dedirtebiliyorlar.

 

Blog Hocam’ı takip edenler zaman zaman belli kategorilerdeki bloglardan beğendiklerimi bir araya getirerek tanıttığımı bilirler. Daha önce moda bloglarıyemek blogları, kişisel bloglar, teknoloji blogları ve gezi bloglarını derlemiştim. Bu kez yukarıda bahsettiğim kitap bloglarından bir derleme yapmak istiyorum.

 

 

Vampirellanın Güncesi

 

Vampirella'nın Güncesi

 

Temmuz 2011’den beri yayında olan Vampirellanın Güncesini, Türkiye'nin tek "genç yetişkin" kitap blogu olarak nitelendiyor yazarı. Vampirella’nın Güncesi’nde hangi kitapların, nereden, ne kadara alındığı, bu kitaplar hakkında yorumlar ve fotoğrafların yanı sıra yazarlarla yapılan söyleşiler kitap kurtlarının ilgisini çekiyor. Ayrıca Vampirella’nın puan tablosunda, yazarın okuduğu kitaplara verdiği puanları görebilir ve saın almayı düşündüğünüz kitaplar hakkında fikir sahibi olabilirsiniz.

 

 

Zimlicious

 

zimlicious

 

Zimlicious’ın yazarı Simay Hanım blogunda en büyük tutkusu olan kitaplarla ilgili herşeye yer veriyor. Uzun yıllardır blog yazarlığıyla uğraşan Simay Hanım, okuma yazma ile alakalı ilgisini çeken şeyleri Zimlicous’da paylaşıyor. Zimlicious’ın başarısı konusunda en önemli e-dergilerde biri olan “Kitapçı”nın da dikkatini çektini ve 5. sayısında bu bloga yer verdi.

 

 

Kitaplık Kedisi

 

Kitaplık Kedisi

 

Aslında bir kültür sanat blogu olarak nitelendirebileceğimiz Kitaplık Kedisi'nde kitap ağırlıklı yazılar yazıldığı ve ilgi gördüğü için bu listeye eklemek istedim. Kitap haberleri ve yorumlarının yanı sıra, blogun yazarı Elif Hanım’ın dekorasyon kategorisinde paylaştığı birbirinden güzel kitaplık resimlerine mutlaka göz atmalısınız.

 

 

The Reading Lady

 

The Reading Lady

 

Yaklaşık 1 yıllık bir blog olan The Reading Lady’nin içerik sayısı listedeki diğer bloglara göre az olsa da kalitesiyle öne çıkmayı başaran bir blog. Özellikle birbirinden değerli yazarlarla yapmış olduğu röportajlar, diğer ziyaretçilerinin olduğu gibi benim de dikkatmi çekti.

 

 

Rafların Arasından

 

Rafların Arasından

 

2010 yılında yayın hayatına başlayan Rafların Arasından, 3 yılı aşkın süredir güncel kalmayı başarmış ve kitap hastalarını dopdolu içerik sunan bir blog. Şuan 4 adet yazarı bulunan blog, her hafta bir konuk yazar ağırlayarakiçeriğini çeşitlendiriyor.

 

 

Kitap Delisi Gizem

 

Kitap Delisi Gizem

 

Blogun yazarı Gizem Hanım, en büyük tutkusu olan kitaplarını, yaşadıklarını, gördüklerini ve öğrendiklerini samimi bir şekilde okuyucularıyla paylaşıyor. Okuduğu kitaplar hakkında bilgi vermekle kalmıyor, kara sıra kişisel yazılar da yazıyor Gizem Hanım.

 

 

Liste elbette bunlarla sınırlı olamaz. 100’e yakın blogu yaklaşık 1 dk. inceledikten sonra içime sinenleri sizlerle paylaştım ama kitap kurtları için çok daha fazla takip edilecek blog var. Onlar da yorum bölümünden zamanla paylaşılır.

 

 

Special Thanks To…

 

Yukarıda blogları olmasa da, bu yazının oluşmasında katkıları olan Betil Hanım, Pınar Hanım ve Zehra Hanım’a çok teşekkür ederim.

20 Ağustos 2013 Salı

KartTR Sponsorluğunda Tablet Ödüllü Çekiliş

Yaklaşık 1 hafta önce sosyal medya hesaplarımda duyurduğum çekiliş etkinliğinin zamanı geldi. Bu zamana kadar yaptığım etkinliklerle 12 kişiye çekilişle çeşitli ödüller dağıtmış, 1 kişiye de çekiliş yapmadan yazarından imzalı kitaplar hediye etmiştim.

Bu etkinlik ile birlik 3 kişiye daha çekilişle çeşitli hediyeler dağıtacağım. Çekilişin sponsorluğunu ise KartTR.com sitesinden Ümit Köse üstlendi. Ödüllere ve çekilişin detaylarına geçmeden önce etkinlik sponsoru hakkında biraz bilgi vermek istiyorum.


KartTR.com – Ukash Kart Resmi Web Sitesi

İlk olarak İngiltere’de kullanılan ukash kart kısa süre içerisinde sanal dünyada yayılarak bir çok kullanıcısı tarafından sevilmiştir. Karttr.Com, Ukash Kart'ın Türkiyedeki resmi bayisidir. Kredi kartı ile ukash kart satışı yapan Türkiyede sayılı Ukash kart firmalarından biridir.

Ukash kart
KartTr.Com uzun süredir Ukash kart pin kodu satışı yapmaktadır ve Ukash kart satın almak isteyen kullanıcılar tarafından tercih edilen yasal ve güvenilir bir firmadır. Daha detaylı bilgi için KartTrCom Facebook ve @KartTRcom sayfalarını da takip edebilirsiniz.


Çekiliş ile Verilecek Hediyeler

Gelelim çekiliş etkinliğine. Yazının başında da söylediğim gibi sosyal medya hesaplarımda ödüllerle ilgili biraz nabız yoklamıştım ve gelen mesajların da yardımıyla bayan-erkek, genç-yaşlı herkesin işine yarayacak ödüller seçmeye özen gösterdim. 

Çekiliş sonucunda toplam 3 kişiye ödül verilecek. Sırasıyla 1. 2. ve 3.’nün ödülleri şunlar:

- Piranha Tablet Bilgisayar piranha-tablet
Android işletim sistemi, 7” ekranı, 8 GB hafızası sayesinde yüksek performansla kullanabileceğiniz bir cihaz. 2 MP dijital kamerası ile sevdiğiniz herşeyi fotoğraflayabilir, en güzel anlarınızı filme alabilir, n kamerası ile görüntülü konuşma yapabilirsiniz. Film ve oyun meraklıları bu ürünü yanlarından ayırmak istemeyecekler.


- Philips MP3 Çalar philips-mp3calar

FullSound özelliğiyle MP3’lere hayat veren küçük ve eğlenceli bir ürün. Songbird ile müzik dosyalarını kolayca keşfedebilir, oynatabilir ve senkronize edebilirsiniz. LikeMusic ile uyumlu şarkılardan çalma listeleri oluşturabilir ve 15 saat boyunca kesintisiz müzik keyfi yaşayabilirsiniz.



- Açlık Oyunları Kitap Seti aclik-oyulari-kitap
Bilimkurgu, heyecan, gerilim ve aşkın zekice kurgulanması sonucu oluşmuş oldukça akıcı bir seri. Şuana kadar yazılmış en iyi üçlemelerden biri ve her kesme hitap eden bir seri. Bağımlılık yaratan Açlık Oyunları’nın 3 kitabından oluşan süper bir set.




Çekilişe Katılım Şartları

!!! Zorunlu Şart: Çekilişe katılıp, bu hediyelerden birine sahip olmak istiyorsanız aşağıdaki çekiliş metnini hiçbir değişiklik yapmadan blogunuzda yeni bir yazı olarak yayınlamanız gerekiyor. Yazıda, çekiliş metninin öncesine veya sonrasına dilediğinizi yazabilirsiniz. Önemli olan yazının içerisinde bir yerde bu çekiliş metninin aynen yer alması.

Blog Hocam, okuyucularına tablet hediye ediyor! Ukash kartın adresi KartTR sponsorluğunda düzenlenen çekilişle 3 kişiyi birbirinden güzel ödüller bekliyor. İsteyen her bloggerın katılabileceği bu çekiliş sonunda birinciye tablet bilgisayar, ikinciye MP3 çalar, üçüncüye ise kitap seti verilecek. Çekiliş sayfasına gitmak için buraya tıklamanız yeterli.


Ekstra +1 Katılım Hakkı
Çekilişe katılmak için zorunlu şart olan çekiliş metnini blogunuzda yayınladıktan sonra ekstra +1 katılım hakkı kazanmak isterseniz aşağıdaki metni Facebook veya Twitter hesabınızda paylaşabilirsiniz. Facebook ve Twitter paylaşımlarınızın geçerli sayılması için herkese açık olarak paylaşmalısınız.

KartTR.com sponsorluğunda düzenlenen çekilişle 3 kişiye hediyemiz var. Katılım için: http://blogghocam.blogspot.com/cekilis #çekiliş


Örnek Katılım Şablonu

Şartları yerine getirdikten sonra aşağıdaki yorum formunu kullanarak bizi bilgilendirmeniz gerekiyor. Yorumu şu şekilde yazmanız yeterli:

- İsim: Serdar Kara
- Çekiliş metnin bulunduğu postun URL’si: http://blogghocam.blogspot.com/2013/08/xxx.html
- Çekiliş mesajının Facebook URL’si: http://www.facebook.com/blogghocam/posts/xxx
- Çekiliş mesajının Twitter URL’si: https://twitter.com/blogghocam/status/xxx
- İletişim adresi: blogghocam@gmail.com veya http://blogghocam.blogspot.com/p/iletisim.html


Kurallar Ve Hatırlatmalar
  • Sadece çekiliş duyuruları yapan veya bu tür etkinlikler için açılmış blogların başvuruları kabul edilmez.
  • Çekiliş metni yeni bir post olarak, blogunuzun ana sayfasında görünecek şekilde yayınlanmış olmalı.
  • Çekiliş metninde bir değişiklik yapılırsa başvuru kabul edilmez.
  • Çekiliş web tabanlı bir uygulama olan random.org aracı ile yapılacak ve video olarak kaydedilerek katılımcılarla paylaşılacaktır.
  • Ödül kazananlar haklarını satamaz, devredemez ve erteleyemez. Ayrıca ödül kazananlarla 72 saat çerisinde irtibat kurulamazsa, hakları yedek talihliye geçer.

Çekiliş Takvimi

Son katılım tarihi: 29 Ağustos 2013 Perşembe 23:59 

Sonuçların açıklanma tarihi: 4 Eylül 2013 Çarşamba

Tüm katılımcılara bol şans dilerim!

15 Ağustos 2013 Perşembe

İndirim Kodlarıyla İnternetten Daha Ucuza Alışveriş

İnternet üzerinden alışveriş Türkiye’de gün geçtikçe büyüyen bir pazar. Eminim çoğunuz benim gibi online alışveriş yapıyorsunuzdur. İlk zamanlarda cesaret edemediğim ve uzak durduğum online alışverişin rahatlığını ve pratikliğini gördükten sonra elektronikten giyime, ev aksesuarlarından ofis ihtiyaçlarıma çoğu ürünü internet üzerinden almaya başladım.

 

Yazının başında belirttiğim gibi internet üzerinden alışveriş ülkemizde hızla gelişen bir pazar. Bu durum büyük bir rekabeti de beraberinde getiriyor. Firmalar, yeni müşteriler kazanmak için farklı promosyon teknikleri deniyorlar. Tüketici tarafında olduğumuz için bu durum bizim oldukça işimize yarıyor.

 

Firmaların sık kullandığı promosyon yöntemlerinden biri de indirim kodu uygulaması. İndirim kodları sayesinde internet üzerinden yaptığımız alışverişleri daha ucuza getirebiliyoruz. Peki bu promosyon kodlarını nereden ve nasıl temin edebiliriz?

 

indirimkodlarim.com

 

Türkiye’de henüz yeni bir firma olan ve birçok online mağazanın resmi paylaşım merkezi olan indirimkodlarim.com bu işi bizim yerimize yapıyor. Yüzlerce marka ve mağazada alışveriş yaparken kullanabileceğiniz kupon kodlarını bir araya getiriyor. Üstelik ücretsiz!

 

Örneğin Electro World’den 150 TL’lik teknoloji alışverişi mi yaptınız? Giriyorsunuz Electro World kupon kodları bölümüne, ücretsiz 50 TL’lik kuponu kullanıyorsunuz ve sadece 100 TL ödüyorsunuz.  Ya da D&R’dan bir kitap veya DVD almak istediniz. Giriyorsunuz D&R indirim kodları bölümüne, ücretsiz kargo kuponunu kullanıyorsunuz ve kargo ücreti ödemeden ürünleri satın alabiliyorsunuz. Harika değil mi?

 

Bunlar gibi pek çok özel indirim, fırsat ve hediye için indirimkodlarim.com sitesini incelemenizi öneririm. Unutmayın “Ucuza Almak Akıl İşidir!

13 Ağustos 2013 Salı

Google Tarzı Sabit Arama Kutusu

Arama kutuları ziyaretçilerin aradıkları içeriğe kolayca ulaşabilmesi açısından çok önemli. Hatta zaman zaman siz bile ardığınız bir konu için blogunuzdaki arama kutusunu kullanabilirsiniz. Özellikle içerik sayınız fazla ise. Bu bakımdan daha önce 2 farklı arama kutusu paylaşmıştım. Bunlar:

 

Bu kez paylaşacağım arama kutusunu diğerlerinden ayıran pek çok özellik var. Örneğin tarz olarak Google’ın tarzına sahip. Ayrıca daha önce paylaştığım açılır arama kutusundaki tıklayınca açılma efekti bunda da var. En önemli özelliği ise blogun bir köşesinde sabit kalması. Floating ( yüzen, kayan ) denen bu özellik sayesinde ziyaretçiler sayfayı aşağı yukarı kaydırsa bile arama kutusu hep önlerinde olacak.

 

Google Tarzı Sabit Arama Kutusu

 

Sadece CCSS3 tekniği kullanılarak oluşturulan bu arama kutusunun nasıl çalıştığını daha iyi anlamak için aşağıdaki demo videoyu izleyebilirsiniz.

 

 

Bu arama kutusunu kullanmak için yapmanız gereken tek şey Blogger kumanda paneline girdikten sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izlemek ve aşağıdaki kodları eklemek.

 

<!-- Blog Hocam Google Tarzı Sabit Arama Kutusu -->
    <div class='bh-arama' id='bh-arama'>
      <form action='/search' id='bh-aramaformu' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ara...&quot;;}' onfocus='if (this.value == &quot;Ara...&quot;) {this.value = &quot;&quot;}' type='text' value='Ara...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </span></button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimjlpHg0f1l19GDtabKcWBRjY7b7c_mxOFgTBCKJKQooKQR10nPK8fWNG4XhhEMrfO6s1jQawVY7ntw6YAk22TgkGtx_iunKfSK_jOFWTi9k4raK0VgRz9YQqvSHo5wcr-KtVXPjHu-pc/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.bh-arama {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!-- Blog Hocam Google Tarzı Sabit Arama Kutusu –>

 

Arama kutusu sayfanın sağ üst köşesinde konumlanacak şekilde kodlanmış. Eğer sol üst köede durmasını istiyorsanız right: 0; yazan yeri left: 1% olarak değiştirmeniz yeterli.

7 Ağustos 2013 Çarşamba

Google AdSense Reklamları İçin Başlangıç Rehberi

Blog yazarak para kazanma yöntemleri arasında en yaygını PPC yöntemidir. PPC, Pay Per Click kelimelerinin baş harflerinden oluşmuş bir kısaltmadır ve ziyaretçilerin blogdaki reklamlara tıklamalarından para kazanma esasına dayanır. Dünyada ve Türkiye’de en popüler PPC reklamları ise Google AdSense reklamlarıdır. Blogunuza Google AdSense reklamlarını yerleştirerek hiç bir şey yapmadan pasif olarak para kazanmaya başlayabilirsiniz.

 

 

Kayıt Olmadan Önce

 

Google AdSense ile para kazanmak kulağa çok hoş geliyor fakat bu sisteme kabul edilmek çok da kolay değil. Bazı şartları sağlamış olmanız gerekir.

  • Öncelikle 18 yaşından büyük olmalısınız.
  • Blogunuz pornografik ve şiddet barından içerik içermemeli .
  • Blogunuzda ağır küfür, ırkçı hoşgörüsüzlükle ilişkili veya herhangi bir şahıs, grup veya kuruluş aleyhinde propaganda niteliğindeki içerik yer almamalı.
  • Blogunuzda hack, crack, warez ve  uyuşturucu ile ilgili içerikler olmamalı.
  • Blogunuzda alkol, tütün, reçeteli ilaç, silah, markaların taklit ürünleri, tez, ödev gibi şeylerin satışı yapılmamalı.
  • Blogunuz yasa dışı, yasa dışı etkinlikleri teşvik eden veya başkalarının yasal haklarını ihlal eden diğer herhangi bir içerik içermemeli.
  • Blogunuz Google’ın kalite yönergelerine uygun olmalı.
  • Ayrıca blogunuzda bir “gizlilik politikası” sayfası oluşturmalısınız. Gizlilik politikası oluşturmayla ilgili bilgi almak için buraya bakabilirsiniz.

 

Kayıt Aşaması

 

Blogunuzu kayıt aşamasına hazır hale getirdikten sonra Blogger kumanda panelindeki Kazançlar sekmesinden veya AdSense kayıt sayfasından başvurunuzu yapabilirsiniz.

 

1. Onay Süreci: Başvurunuzu yaptıktan sonra yaklaşık 2-3 günlük inceleme sürecinin ardından ilk onayı alıp almadığınızla ilgili bir e-posta gönderilir. Eğer blogunuz onaylandıysa sizden reklam birimi oluşturarak blogunuza eklemeniz istenir.

 

2. Onay Süreci: Reklam birimi oluşurmak için Google AdSense hesabınıza giriş yaparak Reklamlarım > Reklam birimleri > Yeni reklam birimi yolunu izleyerek istediğiniz boyutlarda bir reklam birimi oluşturduktan sonra verilen kodu blogunuza eklemelisiniz. Onay aşamasında 1 adet reklam birimi oluşturmanız yeterlidir ve bu reklam birimine ait kodu Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek ekleyebilirsiniz.

 

Onay sürecinin tamamlanması yaklaşık 1 ata sürer bu sürede eklediğiniz reklam biriminde boş bir alan gözükür. Blogunuzun incelenmesi tamamlanıp ikinci onayı da aldıktan sonra size bir bilgi e-postası gönderilir ve birkaç saat içinde boş reklamların yerinde AdSense reklamları gözükmeye başlar. Bu andan itibaren ziyaretçileriniz reklamlara tıkladıkça hesabınızda para birikmeye başlar.

 

Kayıt ve onay işlemi tamamlandaıktan sonra da Google blogunuzu incelemeye devam eder sizden bazı kurallara uymanızı ister.

  • Kendi reklamlarınıza tıklamayın, kimseden Google reklamlarınızı tıklamasını istemeyin.
  • Reklamların yanlışlıkla tıklanmasını sağlayacak numaralardan kaçının.
  • Bir sayfaya en fazla 3 reklam birimi ekleyin ve reklam kodlarında değişiklik yapmayın.

 

Reklam Yerleşimi Ve Optimizasyonu

 

Reklam birimlerinin yerleşimini yaparken performansı olduğu kadar kullanıcı deneyimini ve Google AdSense politikalarını da göz önünde bulundurmalısınız.

  • Blogunuzun içeriğini mantıklı bir şekilde düzenleyin ve blogunuzda gezinmeyi kolaylaştırın.
  • Reklamlarınızı kullanıcıların ilgilendikleri içeriğin yakınına yerleştirin ve kullanıcıların aradıkları içeriği kolayca bulabildiklerinden emin olun.
  • Blogunuzdaki resimleri reklamlarınızla hizalamayın veya reklamın yakınındaki içeriğin reklamlarınızın biçimlendirmesini taklit etmemesine özen gösterin.
  • Reklamları, menü, gezinme veya indirme bağlantılarıyla karıştırılabilecekleri konumlara yerleştirmeyin.

AdSense yetkilileri  yaptığı araştırmalar ve A/B testleri sonucunda bloglar için en uygun reklam yerleşiminin şu şekilde olduğunu tespit etmişlerdir:

 

AdSense reklam yerleşimi

 

 

AdSense Reklamları Ne Kadar Kazandırır?

 

AdSense reklamları ile elde edilen kazanç siteden siteye farklılık gösterir. Kazancınızı belirleyecek 2 temel faktör vardır. Reklamlara tıklanma sayısı ve tıklama başına maliyet. Örneğin reklamlarınıza bir ayda 100 kez tıklandıysa ve TBM (Tıklama Başına Maliyet) 0.5$ ise o ay kazancınız 100x0.5 = 50$ olur.

 

Reklamlara tıklanma sayısını arttırmaya yönelik yerleşim ipuçlarından yukarıda kısaca bahsettim. Şimdi de TBM yani tıklama başına maliyeti arttırmak için neler yapabileceğinizden bahsedelim.

  • Reklam birimlerinizin tümü için hem metin reklamların hem de resim reklamların/zengin medya reklamlarının gösterilmesi seçeneğini etkinleştirin.
  • Filtre listenizi kısa tutun, böylece yüksek ödeme yapan reklamları engelleyerek gelir potansiyelinizi azaltmamış olursunuz.
  • Yerleşim hedeflemeye yönelik özel kanallarınızı oluşturarak siteniz için rekabet eden reklam sayısını artırın.
  • Blogunuzda belli konulara odaklanarak kaliteli içerik üretin.

 

Başlangıç için bu kadar bilgi yeterli diye düşünüyorum. İlerleyen günlerde AdSense reklamları ile daha fazla kazanmanıza yardımcı olacak makaleler yazmaya devam edeceğim.

 

Bol kazançlar!

Faydalandığım kaynaklar: - https://support.google.com/adsense/

                                  - http://adsense.blogspot.com/

                                  - http://productforums.google.com/forum/#!forum/adsense-tr

6 Ağustos 2013 Salı

Blogger CSS menü

blogger css menü eklentisi
Css menü
   İnternet ortamında bir blogu ya da web sitesini ziyaret ettiğimizde mutlaka bir menü ile karşılaşırız.Hatta menü bir websitesi tasarımında demirbaş desek yanlış olmaz sanırım. Kategorize edilmiş yazılara kolayca ulaşılması ya da blog sahibinin hakkında edinilecek bilgiler ya da arşiv vs bir sürü şey'e bu menüler vasıtasıyla kolayca ulaşırız.
   Bu yazımda sizlere css ile oluşturulmuş güzel bir menü blogger blogunuza nasıl ekleyceğinizi anlatmaya çalışacağım. CSS kulanılarak yapılmış bu menü de herhangi bir kategoriye tıkladığınızda resimde de görüldüğü üzere tıkladığınız kategori yeşil rengini almaktadır. Güzel bir görüntü oluşturmakta elbette. İstenirse bu rengi değiştirmek de mümkün.Daha önceleri de bu css menü hakkında başka bir paylaşımım olmuştu.


 Menünün nasıl göründüğünü test etmek istiyorsanız TEST butonuna tıklayarak bakabilirsiniz.
CSS ile yapılmış bu menüyü blogunuza eklemek için aşağıdaki adımları uygulayınız.
  • Blogger paneline giriş yapınız.
  • Şablon sekmesine tıklayınız ve Html'yi düzenle butonuna tıklayınız.
  • Aşağıda yazan kodu Ctrl+F yardımı ile kodlar arasında aratıp bulunuz.

]]></b:skin>

  • Yukarıdaki bulmuş olduğunuz kodun hemen bir üst satırına aşağıdaki kodları yapıştırınız.

/* CSS menü ugurturkoglu.blogspot.com */
ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A;
background: #ececec;
text-decoration: none;
font: bold 14px Arial;
letter-spacing: 2px;
overflow: hidden;
height: 30px;
text-align: center;
border-radius: 5px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{
position: relative;
display: block;
height: 100%;
padding: 6px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{
content: attr(data-text);
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black;
background: #72cb47;
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}

  • Kaydet butonuna tıklayınız.
  • Tekrardan blogger paneline dönünüz.
  • Yerleşim Sekmesine tıklayınız.
  • Gadget ekle ve ardından html javascript'i tıklayınız.
  • Açılan sayfaya aşağıdaki yer alan kodları yapıştırınız.

<ul>
<li><a class="glidebutton" href="#"><span data-text="Anasayfa">Anasayfa</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Haberler">Haberler</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Blogger">Blogger</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="SEO">SEO</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Kişisel">Kişisel</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Hakkımda">Hakkımda</span></a></li>
<li><a class="glidebutton" href="http://www.ugurturkoglu.blogspot.com"><span data-text="İletişim">İletişim</span></a></li>
</ul>


CSS Menü Ayarları
  • Menü deki kategorileri artırmak veya azaltmak isterseniz
<li><a class="glidebutton" href="#"><span data-text="Anasayfa">Anasayfa</span></a></li>
Bu kodu tekrar ekleyiniz veya çıkartınız.
  • # ile gösterilen yere menü ye vermek istediğiniz adresi yazınız.
Blogger sistemde css menü yapımı'nı anlatmaya çalıştım.İyi günler.

Bir önceki yazımda Jquery ile slider menu yapimi hakkında bilgiler verilmektedir.

5 Ağustos 2013 Pazartesi

Blogger Jquery ile slider menü yapımı

blogger jquery slider menü
Jquery slider menü
       Merhabalar değerli blog okuyucuları ,
     Öncelikle şunu belirtmek isterim ki bu yazı bloggertrix adresinden esinlenerek türkçeye çevrilerek sizlerle paylaşılmıştır.Bu yazımda sizlere jquery slider yapımını Blogger blogunuza nasıl ekleyeceğinizi ve kullanacağınızı anlatmaya çalışacağım.
     Google üzerinde jquery adı altında bir arama yaptığınızda bir çok sonuçla karşılaşmanız mümkün.Haber sitelerinde veya bir çok internet sitelerinde bu slider ile karşılaşıyoruz.Özellikle haber siteleri bu slider ları çok etkin bir biçimde kullanmaktalar.Hoş görünen bu slider ile isterseniz blogunuz için bir manşet menü yapabilir isterseniz de bir resim galerisi oluşturabilirsiniz.Öncelikle eklentinin yani jquery ile yapılmış slider'n nasıl göründüğünü merak ediyorsanız test butonuna tıklayarak bakabilirsiniz.
     Peki bu slider ile neler yapabiliriz bir bakalım.Jquery slider ile bir çok şey yapmak mümkün.Yukarıda da bahsettiğim üzere isterseniz bir resim galerisi isterseniz de bir üst menü yapabilirsiniz.Örneğin blogunuzda yeni bir yazı yazdığınızda bunu manşet menüden göstermek isteyebiliriz.Ya da belli konuları (örneğin en çok trafik alan konularınız) bu slider'a ekleyerek daha göz önünde bulunmasını sağlayabiliriz.Daha farklı fikirler üretmek sizin elinizde.İstediğinizi yapabilirsiniz blogunuz için en iyi olan neyse. Gelin şimdi birlikte adım adım jquery slider'ı ile bir manşet menü yapalım.

  • Blogger paneline giriş yapıyoruz.
  • Daha sonra yerleşim sekmesine tıklıyoruz.
  • Blog kayıtları yazan yerin üst kısmına bir Gadget ekliyoruz.
  • Gadget ekle butonuna tıklıyoruz Html javascript'e tıklıyoruz ve aşağıdaki kodları yapıştırıyoruz.
  • Kodları yapıştırmadan önce kod paylaşımın altındaki uyarıları okuyunuz.Daha sonra blogunuza uygulayınız.


<style type="text/css">

.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_ugurturkoglu {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3b0VpkXwUVCkp-eB8UrkIbmtRneNP_RrYDvWd3J0Y_r66Xjd8lzACcPKbeuTXCaI-vFATRe7bD7hn4ZTenWopjWB-2Z9gE55ZrZHVYf-rLvy_tBVPHTyd2mmFLONHF1tcr2_HmrRdAM06/s1600/paging.png) no-repeat;
display: none;
}
.paging_ugurturkoglu a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_ugurturkoglu a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_ugurturkoglu a:hover {font-weight: bold;}
</style>
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx0eURfmszaA6NsCUCGR2OgHrS-DgXDM66m1WbvIqxSsvRSAw2HQUZNW0t796eWPWg16AobmraPMqqxAvdBtu4T_srE9YBiTYpHrVbUkYSjsXKM0HS8ow2xLjmIW5X8GNSszmBHkL2Xd_i/s1600/22.JPG" alt="" /></a>
<a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxu2RmqLE0VrezrfKkPkcULnmzx8koX6bDaKaPAwCgGwQcT7OWxB4Rpmgzt0ihNqeUYqlx092KLCZjK_gR8iWt32h0CQv-yM3pb5gmIEDgc8ZZMzvAZssl9M_4qKnXCYCneJh_QRIRNfaQ/s1600/1.JPG" alt="" /></a>
<a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1pBc2AblhlgKLl2y_ASjvoEgMd9A3DAgtXIdYDvR-Xe5wsAe03Bwunsv-Q3WwBtqoUNoyFzHoMTMBC-_hitrDx5esebq-2OjZ5WaJXAJ7ck_8FsAdxa1eJSCvB5Xn_FmZoo0B_PD2VtL/s1600/4.JPG" alt="" /></a>
<a href="#"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6NUP8YkffOIX-6TDHrwPD60sGczJT61-CzLVsSE8iMAI9e7Hil0HRcUHRR8-dKQ0agtWuAUOuypNo_ePyFCCHhb4DyBeU4NqKDxXebKQMgb9OvisI1idRGGC6hGlj9zI3NMuaMR4XVkyy/s1600/3.JPG" alt="" /></a>
</div>
</div>
<div class="paging_ugurturkoglu">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$(".paging_ugurturkoglu").show();
$(".paging_ugurturkoglu a:first").addClass("active");


var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

$(".image_reel").css({'width' : imageReelWidth});

//paging_ugurturkoglu + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging_ugurturkoglu a").removeClass('active');
$active.addClass('active');


$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging_ugurturkoglu a.active').next();
if ( $active.length === 0) {
$active = $('.paging_ugurturkoglu a:first');
}
rotate();
}, 5000);
};

rotateSwitch();

$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});

$(".paging_ugurturkoglu a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});

});
</script>



Kod kısmında ayarlanacak Bölümler

  • Jquery slider'ın da en önemli öge tabiki resimler.Resimlerin seo için öneminden de daha önceleri bahsetmiştik.Neyse Slider'a nasıl resim ekleyeceğiz.Ben bu menüyü ayarlarken 4 adet resim ele aldım.Resimler aşağıda gözükmekteler.Bu dört adet resimi yazıma ekledim.Daha sonra bu resimlerin üstünde sağ tıklayarak URL adreslerini kopyaladım.Kod kısmını açtım ve kod kısmında Mavi rengi olan yerlere URL adreslerini yapıştırdım.Resimlerin URL adreslerini.İsterseniz resimleri internet ortamında ucrestsiz resim yukleme adreslerine yükleyerek de adreslerini yani URL lerini kopyalabilirsiniz.
jquery slider
resim-1

jquery slider
resim-2
jquery slider
resim-3

jquery slider
resim-4

  • Kırmızı renkte olan # yazan yere de resme vermek istediğiniz adresin URL sini yapıştırıyoruz.Böylece jquery slider ile yaptığımız manşet menümüzde hangi resme tıklarsak belirlemiş olduğumuz adrese gidilecektir.
Bu kadar Basit.Jquery slider menümüz hazır.
İyi günler.

Bir önceki yazımda Blogger da Rss kutusu ve sosyal paylaşım butonları  hakkında bilgiler verilmektedir.

Dönme Efektli Sosyal Takip Eklentisi

Google’dan sonra en önemli trafik kaynaklarından biri olan sosyal medya kanallarında yer almaya dikkat etmeliyiz. Facebook, Twitter, Google+ gibi popüler sosyal platformlarda takipçi sayımız ne kadar çok olursa, blog trafiğimiz o kadar artar. Bu yüzden blogumuza sosyal medya butonları koyarak ziyaretçilerimizi bu platformlardaki hesaplarımıza yönlendirmeliyiz. İşte blogunuzun kenar çubuğuna ekleyebileceğiniz, hover efektli şık bir sosyal takip eklentisi…

 

Spinning Sosyal Takip Eklentisi

 

Bu resimden başlıkta bahsettiğim dönme efektini anlamanız elbette mümkün değil. Bu yüzden aşağıdaki demo videoyu izlemenizi de öneririm.

 

 

Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.

 

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

<div class="subscribe">
<ul> <li class="rss"><a href="http://feeds.feedburner.com/blogghocam" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="http://twitter.com/blogghocam" target='_blank'><span></span>Twitter</a></li>
<li class="gplus"><a href="https://plus.google.com/108761595756468128383" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="http://facebook.com/blogghocam" target='_blank'><span></span>Facebook</a></li> </ul>
</div> 

<style>
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe .twitter span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8VRMa8nZH-QTQG1RukinuBBCtyfHcWpNnHd0u0z0N1qYMmWwowYuxwTJhLx9I6IdXQ4vRqVSqRyLVRKhaQg-wFFq9SglRF9_O4T54yjqkzbSxR3qvXd1n1k1TwzjpAyTALx-gKlMP-s/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);   
}   
ol, ul {
list-style: none outside none;
}
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li {
display: inline-block;
margin: 0 20px 10px 0;
position: relative;
width: 200px;
}
.subscribe .rss span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIy-VtcMQf4XVK43eWq1TS5Ethg6iVDtrXGrtVMtvrhqPHwDm3hE5Fl4q09CNechwCbw4HPC2XeThavJFU2FKgIod47-fSPk6S-FVw9LQobf1bodZskSqut3CYS1MxNtgxB4cp1DBrnqw/s1600/rss-icon.png) no-repeat;
}
.subscribe .rss a {
background: #F67F00;
}
.subscribe li a {
color: #FFFFFF;
display: block;
font-family: verdana;
font-size: 12px;
padding: 10px 10px 10px 40px;
text-decoration: none;
font-weight: bold;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);

.subscribe .twitter span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8VRMa8nZH-QTQG1RukinuBBCtyfHcWpNnHd0u0z0N1qYMmWwowYuxwTJhLx9I6IdXQ4vRqVSqRyLVRKhaQg-wFFq9SglRF9_O4T54yjqkzbSxR3qvXd1n1k1TwzjpAyTALx-gKlMP-s/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe .gplus span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTcFzEKniJRCDClx0Jwz1Gqjpg_Kt-X6ptCWpYQDgLKr1T1ZQ8yE7zWxRkJnSauAdq9gsK0z7khmql9MtFwExq7HdAtqHa2SfRJwdMynPyn1uHbmWJnfx0YwKcs1ApkxduqMYEneJverI/s1600/googleplus.png) no-repeat;
}
.subscribe .gplus a {
background: #D74D2F;
}
.subscribe .facebook span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCT_qxHOicboR-5iKqlYgZQYIc0f-ljZ_buh3eKMcjcHrJGaKQumgt34DXJgPtaAc8NQBIMFVeq_vIGu0I2rHE-r40p1fFd5iln3Z8xDAY8LbRf3CmunBmv1v4C73G_GguJAuonuzGnP4/s1600/facebook-icon.png) no-repeat;
}
.subscribe .facebook a {
background: #3B5998;
}
</style>

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

 

Bordo renkle gösterdiğim Blog Hocam’a ait hesap adreslerinin yerine kendi adreslerinizi yazmayı unutmayın!

 

Alternatif sosyal takip eklentisi arayanlar daha önce paylaştığım şu eklentilere de bakabilirler:

 

2 Ağustos 2013 Cuma

Blogger RSS abonelik kutusu ve Sosyal paylaşım butonları

rss abonelik kutusu ve sosyal paylaşım butonları
Rss abonelik kutusu
     Sosyal medyanın şu anki internet kullanımındaki gücünü hepimiz biliyoruz. Keza sosyal paylaşım butonları ve RSS abonelik'inde etkisi aynı şekilde. Blogunuzda yazdığınız bir yazının sosyal medya da paylaşılması daha çok kitleye ulaşılması demektir .Haliyle Bu da blogunuzun daha çok trafik alması demektir. Blogunuzun sosyal medya da daha etkin olmasını sağlamak da siz blog yazarlarının elinde. Blogunuzda yer vereceğiniz facebook, twitter, pinterest vs gibi sosyal medya araçlarını kullanarak daha etkin bir blog oluşturabilirsiniz. Bu sosyal medya araçları dışında farklı etkili bir yöntem de yazılarınıza abone okuyucu sağlamaktır. Blogunuza RSS kutusu ekleyerek bunu sağlamak mümkün.Bir çok blog da haber sitelerinde vs başka internet platformlarından da bültenimize abone olun, yazılarımıza abone olun tarzı bir kutucuk ve butonla karşılaşmışsınızdır. Feedburner yani RSS okuyucusunu kullanarak bir yazı yazdığınız da , RSS abonesi olan okuyuculara yeni yazınız gönderilecektir.Kısacası e-mail yoluyla yazınız kayıtlı okuyuculara ulaşacaktır.
Blogger RSS abonelik kutusu ve Sosyal paylaşım butonları eklentisini , TEST butonuna tıklayarak görebilirsiniz.
Blogger RSS abonelik kutusu ve Sosyal paylaşım butonları eklentisini blogunuza uygulamak için :
  • Blogger paneline giriş yapınız.
  • Yerleşim sekmesine tıklayınız.
  • Gadget Ekle / Html javascript'e tıklayınız.
  • Açılan penceredeki kutucuğa aşağıdaki kodları yapıştırınız.


<style>
. social_box-email{
background:Fff no-repeat 0px 12px ; width:270px;float:center;font-size:1.4em;font-weight:bold;margin:2px 20px 0px 10px;color:#686B6C;
}
. social_box-emailsubmit{
background:#0084CE;cursor:pointer; color:#fff; border:none;padding:3px;margin:0 0 0px 0;text-shadow:0 -1px 1px rgbaundefined0,0,0,0.25);
-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; font:12px sans-serif;
}
. social_box-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px; margin:0px 2px 0px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgbaundefined0,0,0,0.1); font-size:13px; width:200px; height:20px;color:#666;}
#socialbox
{
text-align:center;font-weight:bold;padding:5px;border:1px solid black;width:300px;
-moz-box-shadow: 0px 0px 8px #000000;-webkit-box-shadow: 0px 0px 8px #000000;box-shadow: 0px 0px 8px #000000;}
</style>
<br />
<div id="socialbox">
<a href="http://feeds.feedburner.com/ugurturkoglu" imageanchor="1" rel="nofollow" style="float: center; margin-left: .5em; margin-right: 1em;" target="blank"></a>
<br />
<div class="social_box-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=ugurturkoglu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="textarea" gtbfieldid="3" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;E-mail adresinizi yazınız&quot;;}" onfocus="if undefinedthis.value == &quot;E-mail adresinizi yazınız&quot;) {this.value = &quot;&quot;;}" type="text" value="E-mail adresinizi yazınız..." />
<input name="uri" type="hidden" value="ugurturkoglu" /><input name="loc" type="hidden" value="en_US" />
<input class="social_box-emailsubmit" type="submit" value="Kaydol" />
</form>
</div>
<style class="text/css">
table
{border-bottom: 0px solid #E6E6E6;float: center;width: 300px;margin:-8px 0 0 0px;}
.subicons
{border-right: 0px solid #E6E6E6;}
.Fadeout {filter:alphaundefinedopacity=100);opacity: 1.0;border:0;
}
.Fadeout:hover{filter:alphaundefinedopacity=80);opacity: 0.8;border:0;
}
</style>
<br /><div class="table"><table>
<tbody><tr>
<td><div class="subicons">
<a class="Fadeout" href="http://www.facebook.com/ugurturkoglu" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeF0WeDn8VdDnpN_LGUjcyNEyiW9yDEDTOWmRaCcoF7jmAudTYefAavoLZ6VxAMdTiNnPqSrWrP2HOr9W0pHzpVzeL4xLxixNfMR3aup5Yoszqub6NPphkqA6Zei0qX2CXkgaSFoHuT-0/s1600/btrix-facebook-icon.png" /></a></div>
</td><td><div class="subicons">
<a class="Fadeout" href="http://twitter.com/ugurturkoglu" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivuKLJbCdVTyuKol87vmCaKZYYNKSS_2Kn5xyEzpJvkMMNse2fheldKMFZgJYVDa79PSsHEbPGNc-j-90JL9SSYIkQszTqpLhlOqmPeWvKLzvd6guo15iqgtCBRjdcpZ0jZavWiVB2sT8/s1600/btrix-twitter-icon.png" /></a></div>
</td>
<td><div class="subicons">
<a class="Fadeout" href="http://feeds.feedburner.com/ugurturkoglu" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJHGGHtpQJj2HciCbJpOEIrOr5Fp6WYAaPvCsyHd8cO9PZDnJktwHeaklnv-8LGFTkOT9iXm8xBUAYOMkL3nzMzzqgAcXc6EwGPLFyq-AC6_ZkSN0syGOLq7LmzLXaFYKyK2gb6Ep1X5Q/s1600/btrix-rss-icon.png" /></a></div>
</td>
<td><a class="Fadeout" href="https://pinterest.com/ugurturkogluu" imageanchor="1" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tj8mvjnKHqkmY1Osls1lG4EfSPG5dtxIX5RF3I06h2H4YI-I_Fy1yqEJBh3WxqlOpdmVm683AKWR9wSgUY7UKKze1P6E6rafnrcI50pyYpYQ4u3xjjy-wdY3uVKObVNZD86vf2kBEHU/s1600/btrix-Pinterest-icon.png" /></a></td>
</tr></tbody></table></div></div>






  • Mavi ile yazılan yerlerdeki adresleri kendinize göre düzenleyiniz.
  • Kaydet butonuna tıklayınız.
Bir önceki yazımda Blogger da css ile dropdown menü yapımı hakkında bilgiler verilmektedir.

Google Algoritma Güncellemelerinin Etkilerini Ölçün

Blog dünyasında en çok tartışılan konulardan biri Google’ın algoritma güncellemeleri ve bunların etkileridir. Bu konuya fazla kafa yoran blog yazarları etrafta dolaşan yanlış bilgilerin etkisinde kalarak her trafik düşüşünü Google’ın algoritma güncellemesine bağlayarak gereksiz evhamlara kapılmaktalar.

 

Trafikteki düşüşün sebebinin algoritma güncellemeleri olup olmadığını Google Analytics ve bazı yardımcı araçları kullanarak ile anlamak mümkün fakat bu işlemi bizim yerimize kolayca yapabilecek ücretsiz bir araç var.

 

Bararcuda Panguin Tool isimli bu araç Google Analytics hesabınıza bağlanarak organik trafik verilerinizi çıkarıyor ve databaseindeki algoritma güncelleme bilgileri ile birleştirerek size bir grafik çıkarıyor. Bu sayede hangi tarihte, hangi güncellemeden, nasıl etkilendiğinizi kolayca görebiliyorsunuz.

 

1. Adım: http://www.barracuda-digital.co.uk/panguin-tool/ adresine giderek ana sayfada bulunan Log-in to Analytics butonuna tıklayarak Analytics hesabınıza bağlanma işlemine bağlayın.

 

Log-in to Analytics

 

2. Adım: Devamında yeni bir pencere açılacak ve aracın Analytics hesabınıza bağlanması için izniniz istenecek. Burada Kabul Et butonuna basarak devam edin.

 

Analiytics izin

 

3. Adım: Devamında Analiytics hesabınıza bağlı olan sitelerin listesi gelecek. Burada incelemek istediğiniz sitenin ismine tıklayarak profile bağanın.

 

Analytics profil seçimi

 

4. Adım: Ve algoritma güncellemelerinden nasıl etkilendiğinizi gösteren grafik hazır. Kırmızı renkli çizgiler Panda güncellemesini, mavi renkli çizgiler Penguen güncellemesini, turuncu renkli çizgiler ise diğer Google güncellemelerini simgeliyor.

 

Algoritma etkileri

 

Algoritma güncellemelerinden nasıl etkilendiğinizi anlamak için güncellemeyi simgeleyen çizgiden sonra gidişatın yukarı mı aşağı mı olduğuna bakın.

 

Son olarak Türkçe bloglarda bu verilerin %100 isabetli olduğunun garantisi olmadığını hatırlatmak isterim. Ancak organik trafik ile alogritma güncelleme tarihleri ilişkilendirildiği için doğruluk payı oldukça yüksek diye düşünüyorum.