8 Ekim 2013 Salı

İnternet Ve Teknoloji Gündemini AOrhan İle Takip Edin

Blog dünyasında en sık karşılaştığınız blog türleri internet ve teknoloji konulu bloglar olsa gerek. Ancak bunların çok azı kendi içeriğini kendisi üreterek başarıyı yakalayabiliyor.

 

Mesleği makina mühendisliği olan ve başarılı arayüz tasarımlarıyla tanınan Ahmet Orhan’ın blogu olan AOrhan.com 2009 yılında yayın haytına başlamış ve o günden beri güncelliğini koruyarak yayın hayatına devam etmeyi başarmış ender teknoloji bloglarından.

 

aorhan.com

 

Teması ve tasarımyla pek çok bloga ilham vermiş olan AOhan.com, internet ve teknoloji gündemini okuyucularına aktarmanın dışında Wordpress, oyun ve mobil gibi konulardaki zengin içeriğiyle geniş kitlelere ulaşmayı başarmış bir teknoloji blogu.

 

Teknoloji ve Wordpress konulu yazıların ağırlıkta olduğu kişisel bir blog olarak yayın hayatına başlayan AOrhan.com, zamanla kategori ve yazar sayısını arttırarak kişisel blog olmaktan çıktı ve bir internet topluluğuna dönüştü. Bu başarısı çeşitli firmalar tarafından da fark edildi ve onlarca firma AOrhan.com’a sponsor oldu, olmaya da devam ediyor.

Peki internette binlerce teknoloji ve internet konulu blog olmasına rağmen, AOrhan.com’u bu kadar popüler yapan faktör neydi diye soracak olursanız şöyle açıklayabilirim: AOrhan.com diğer sıradan teknoloji blogları gibi belli kaynaklardan aldığı haberleri yayınlamıyordu, internet ve teknoloji gündemine ait gelişmleri kendi yorumunu katarak okuyucuylarıyla paylaşıyordu. Bu da doğal olarak fark yaratıyordu.

 

Teknoloji ve internet gündemine dair faydalı ve güncel yazılar okumak isteyenlere AOrhan.com’u tavsiye ediyorum.

7 Ekim 2013 Pazartesi

Affiliate Markting İle Kazanmaya Başlıyoruz

Bildiğiniz gibi daha önce affiliate marketing ile ilgili teorik bilgi içeren bir makale paylaşmıştım. O makaleyi okuduysanız satış ortaklığı hakkında genel bilgilere sahipsiniz demektir. Şimdi işi bir adım ileriye götürerek somut örneklerle devam etmek istiyorum. Bu makalede size Türkiye’nin en önde gelen ve en kazançlı affiliate ağı olan adtriplex.comadtriplex.com ’u (*) tanıtacak ve farklı konularda bloglar için ürün seçeneklerinden bahsdedeceğim.

 

1. Adım: Adtriplex’e Üye Oluyoruz

 

Adtriplex üyelik

 

Öncelikleadtriplex.comadtriplex.com (*) sitesine giderek yeni üye ol butonuna tıklıyor ve klasik üyelik formlarında olduğu gibi bu formu dolduruyoruz. Adtriplex’e üye olmak tamamen ücretsizdir fakat her blogun kabul edilmediğini söylemeliyim. Bu aşamada bilgilerinizi doğru ve eksiksiz doldurmanız çok önemli. Adtriplex çok güvenilir bir firma olduğu için bilggilerinizi rahatlıkla verebilrsiniz. Üyelik formunu doldurduktan sonra blogunuzun değerlendirme süresi 1 hafta kadar sürebilir. Bu aşamada sabırlı olmanızı vecevap gelene kadar ikinci bir başvuru yapmamamınızı öneririm.


2. Adım: Blog Türüne Göre Ortaklık Programı Seçiyoruz.

 

Üyelik başvurunuz kabul edildikten sonra onlarca marka ve firmanın ortaklık programları sizi bekliyor olacak. Sıra ortaklık programlarının detaylarını inceleyerek cazip olanlara başvurmakta. Adtriplex, performansa dayalı bir sisteme sahip olduğu için üyelerinin her programa katılmasına izin vermez. Blog ve ortaklık programı birbirine paralel olmadır. Bundan sonrasını blog konularına göre örnekleyerek anlatmak istiyorum.

 

Dizi & Film & Sinema Blogları


frameby

 

Dizi, film veya sinema ile ilgili bir blogunuz varsa Frameby.com ortaklık programına katılabilir ve sosyal bir film kulübü olan Frameby.com’a göndereceğiniz üye başına 0.70 TL kazanabilirsiniz. Blogunuzu ziyaret edenlerin bu siteyle direkt ilgili olduklarını düşündüğümüzde kazancınız epey yüksek olabilir. Ayda 1000 üye gönderirseniz kazancınız 700 TL olacaktır.

 

Moda Blogları

 

netmoda

 

Çok ayıda moda bloggerının Blog Hocam’ı takip ettiğini biliyorum. Adtriplex’de moda blogları için fazla sayıda ve kazançlı ortaklık programları var. Bunlardan biri de Netmoda.com’un ortaklık programı. Ziyaretçileriniz sizin referansınızla üye olduğunda 0.50 TL kazanırsınız. Bu kişi netoda.com’da bir kombin yaptığında ise 1 TL kazanırsınız. Yani 1 kişiden 1.50 TL kazanabilirsiniz. Ayda 1000 kişiyi netmoda.com’a üye yapıp kombin yaptırabilirseniz kazancınız 1.500 TL olacaktır.

 

Takı Blogları

 

lelaq

 

Bayanların sıkça yazdığı konulardan biridir takı & tasarım ve bijuteri. Adtriplex’de takı blogları için çok cazip programlar var. Bunlardan biri de Lelaq.com. Sizin referansınızla lelaq.com’a giden ve buradan alışveriş yapan biri olursa ödediği ücretin %12’si sizin olur. Lelaq.com’da ki ürünlerin nispeten ekonomik ve baka yerde bulunmayan ürünler olduğunu düşünürsek satış yapma olasılığı oldukça yüksektir.

 

Kozmetik & Kişisel Bakım Blogları

 

bellamola

 

Bayan blogları için affiliate marketing fırsatları oldukça fazla. Pek çok ünlü marka ve firmanın cazip ortaklık programları mevcut. Bunlaradan biri de kozmetik blogları için Bellamola.com. Parfüm’den, cilt bakım ürünlerine, kozmetikten, saç bakımına kadar binlerce orijinal ürün sunan bellamola.com’a bir ziyaretçi gönderdiğinizde v o ziyaretçi siteden alışveriş yaptığında %8.40 gib bir komisyon alıyorsunuz.

 

Oyun Blogları

 

goalunited

 

Bilgisayar oyunlarıyla ilgili yayınlar yapan ve bu alanda takipçi kitlesi olan bloglar için çok cazip ortaklık programları var Adtriplex’de. Bunlnardan biri de GoalUnited. Online oynanan bir menajerlik oyunu olan Goalunited’a gönderdiğiniz üye başına 0.50 TL alırsınız. Ayda 500 üye gönderseniz 250 TL gibi bir kazanç elde edersiniz.

 

Teknoloji Blogları

 

kliksa

 

Bilgisayardan beyaz eşyaya, TV’den ofis ürünlerine kadar binlerce ürünün satıldığı Kliksa.com’un ortaklık programına katılığınızda atış başına %3-6 arası komisyon alırsınız. Bu oran ürünün kateorisne göre değişiyor. Ürün adedinin ve fiyat aralığının çok geniş olduğunu düşünürsek, doğru stratejilerle epey satış yapabilirsiniz gibi gözüküyor.

 

Kitap Blogları

 

maxkitap

 

İnternetten en çok satınan alınan ürünlerin başında sanırım kitaplar geliyor. Bu yüzden kitap bloglarının affiliate mraketing ile gelir elde etme şansını çok yüksek görüyorum. Adtriplex’de kitap blogları için en uygun ortalık progralarında biri Maxkitap.com’un. Satış başına %6 komisyon alıyorsunuz. Kitaplar henellikle ucuz ürünler oldukları için satış başına kazanç düşük gibi gözükse de satılan ürün sayısı nispeten fazla olacağı için kazancınız hızla artacaktır.

 

Kişisel Ve Genel Bloglar

 

Yukarıda bahsetmediğim daha pek çok kategorideki bloglar için çok cazip ortaklık programları Adtriplex’de mevcut. Özellikle kişisel veya genel bloglar (kendi tabirleriyle) bu programların büyük bölümüne başvurabilirler. Bu programların tümünü görmek ve incelemek isterseniz aşağıdaki bannera tıklayabilirsiniz.

 

adtriplex.com

 

 

3. Adım: Affiliate Linklerimizi Alıyoruz

 

Pazarlamak istediğiniz ürün veya ürünlere karar verdikten sonra başvurunuzu yapıp programa uygun olup olmadığınızın incelenmesini bekliyorsunuz. Adtriplex panelinizdeki Partnerprogram sekmesinden başvurduğunuz programları, aktif olanları veya reddedilenleri görebilirsiniz. Programa başvurunuz kabul edildiğinde e-mail ile bilgilendirilirsiniz.

 

Birkaç günlük bekleme süresinden veprograma kabul edildiğinize dair mail geldikten sonra Adtriplex hpanelinize girerek aktif programlar listesinden o programa ait affiliate linklerini alabilirsiniz.

 

Bu bölümde çeştli boyutlarda bannerlar ve text linkler vardır. Bunların hemen altındaki kutularda ise o banner veya linke ait affiliate kodları bulunur. Blogunuza eklyeceğiniz kodlar işte bunlar.

 

Örneğin blogunuzun sidebarına 250x250 boutunda bir affiliate bannerı eklediğinizi düşünelim. Ziyaretçi bu bannera tıklayıp ilgili siteyi ziyaret ettiğinde affiliate kodu sayesinde sizin referansınızla geldiği kaydedilir. Cookie süresi bitene kadar o siteden alış veriş yaptığına veya üye olduğunda belirlenen komisyon tutarındaki ücret Adtriplex hesabınıza geçer.

 

4. Adım: Ürünümüzü Blogumuzda Pazarlıyoruz

 

Affiliate linklerinizi alıp blogunuzun çeşitli yerlerine banner veya text link olarak ekleyerek affiliate marktingde başırılı olacağınızı düşünüyorsanız yanılıyorsunuz. Özellikle satış başına ödeme alacağıız bir programa katıldıyanız, o ürünü pazarlamak için banner eklemekten çok dahafazlasını yapmalısınız. Bunların başında ise içerik pazarlaması ve e-mail pazarlaması geliyor. E-mail pazarlaması ile ilgli bugüne kadar bir bili paylaşmadığım için o konuyu sonraya bırakıyorum ama içerik pazarlamasının üzerinde durmaımız gerek.

 

İçerik pazarlaması dediğimiz şey okuyucularınız için bilgi veren ve eğlediren içerik oluşturarak ilgiyi pazarlamak istediğiniz ürüne toplamaktır. Blogunuzda pazarlamak istediğiniz ürünün faydalarını, neden gerekli olduğunu, kişisel deneyimlerinizi, multimedya öğelerinde desteğiyle içerik olarak paylaşmanız, ziyaretçiyi ürünü alma kousunda teşvik edecektir. İçerik pazarlamasının amacı da budur zaten.

 

Uzun lafın kısası ürününüz için bol mktarda ilgi çekici ve faydalı içerik üretmeniz gerekkmetedir.

 

Şimdilik Adtriplex ile ilgili söyleyeceklerim bu kadar. Zamanla hem affiliate marketing, hem de Adtriplex ile ilgili detaylı incelemelere ve stratejilere geçeceğim. Sormak istediklerinizi yorum bölümünden sorabilirsiniz.

 

Herkese bol kazançlar!

* Affiliate linkidir. Bu linke tıkladığınızda referansınız ben olmuş olurum.

4 Ekim 2013 Cuma

Css ve Js Dosyaları Google Drive Hostuna Nasıl Yüklenir ?

Blogger'in css ve js benzeri kodları yada diğer dosyaları barındırmak için kullanabileceğimiz bir hostu yok. Yalnızca resimleri yükleyebildiğimiz bir alana sahibiz. Bu barındırma sorununu uzun süre boyunca Google Code servisi ile çözmüştük. Bu süre içinde Google tarafından son derece başarılı bir bulut depolama servisi olan Google Drive duyuruldu. Ücretsiz olarak 5 gb depolama alanı bulunan Google Drive'nin alanını çok küçük miktarlar ödeyerek yükseltebiliyorsunuz. İsterseniz de masaüstünüze yükleyip işlerinizi oradan yürütebiliyorsunuz. Son derece güvenilir bir servis olduğunuda belirtmekte fayda var. Yüklediğiniz dosyalara kimlerin erişebileceğine yine siz karar veriyorsunuz. Google Drive servisini css kodlarını barındırmak için ben de kullanıyorum. Aşağıdada bu yöntemi nasıl kullanabileceğiniz detaylı şekilde anlattım, umarım sizler için faydalı olur.


 

Css ve Js Dosyaları Google Drive Hostuna Nasıl Yüklenir ?


1. Google Drive adresine giderek google hesabınızla servise giriş yapın. Aşağıdaki resimde de görmüş olduğunuz kırmızı yukarı ok işaretine tıklayın ve 'Dosyalar' ı seçin.

Google drive
 
 
2. Hemen ardından açılan sekmede stil dosyanızı seçin ve aç deyin.
 Google drive
 
 
3. Kısa süre içinde yüklenen dosya için sol alt kısımda 'Yükleme tamamlandı' başlıklı siyah bir bildirim kutusu çıkacak. Dosya isminin karşısındaki 'Paylaş' seçeneğine tıklayın.
 Google Drive
 
 
4. Paylaş dedikten sonra karşınıza 'Paylaşım Ayarları' kısmı gelecek. Burada mavi renkli 'Değiştir' linkine tıklayın.

Google drive
 
 
5. Dosyayı herkesle paylaşacağımızdan 'Web üzerinde herkese açık' seçeneğini işaretleyip kaydet diyoruz.
 Google drive
 
6. Tekrar geri geliyoruz ve paylaşım linkimiz kullanılır hale geliyor. Son birkaç işlemden sonra kodlarımızı kolayca kullanabileceğiz. Şimdi koyu renkle seçili olan drive linkini klavyemizin Ctrl+C fonksiyonu ile kopyalıyoruz.
 Google drive 
7. Kopyaladığınız linki tarayıcınızın adres çubuğuna yapıştırdıktan sonra kodlarınız olduğu gibi listelenecektir. Adres çubuğundaki linkin yalnızca https://docs.google.com/file/d/ ile /edit?usp=sharing arasındaki kısmı kopyalayın. Şunun gibi bir şey olması gerek: 0B6nplOzP9W2vOElSSVhRZU1GQlk
 Google Drive

 

 

Peki bu kodları bloggerda nasıl kullanacağım ?

 

Css kodlarınızı blogunuza eklemek için son adımda elde ettiğiniz '0B6nplOzP9W2vOElSSVhRZU1GQlk' benzeri numarayı aşağıdaki kodda kırmızı ile işaretlediğim kısma yerleştirin ve tema kodlarınızı açıp <head> kodunun hemen altına ekleyin.

 

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B6nplOzP9W2vOElSSVhRZU1GQlk" />

 

Js kodlarınızın tanımlanması içinse yine aynı işlemi uygulayın ve elde ettiğiniz numarayı aşağıdaki kodda kırmızı ile işaretlediğim kısma yerleştirin ve tema kodlarınızı açıp </head> kodunun hemen üzerine ekleyip kaydedin.

 

<script type="text/javascript" src="https://googledrive.com/host/0B6nplOzP9W2vOElSSVhRZU1GQlk"></script>

 

Yazar Hakkında: Bu yazı 3 yıldır aktif olarak blogger kullanan Hit Adam tarafından Blog Hocam için yazılmıştır. Yazar, kendi blogunda yine blogger hakkında her türlü bilgiye yer vermektedir. Site: http://www.hitadam.com/

2 Ekim 2013 Çarşamba

Metro Tarzı Sosyal Butonlar Ve Arama Kutusu

Windows 8 ile hayatımıza giren “Metro” tarzı, web sitelerin ve blogların tasarımında da sıkça kullanılıyor. Ben Windows 8’i ve bloglardaki metro tarzı tasarımları pek sevmedim ama kenar çubuğunda kullanılan metro tarzı sosyal butonlar ve eklentiler hiç fena durmuyor.

Pek çok blogda kullanıldığını gördüğüm metro tarzı sosyal medya eklentisi oldukça beğenilmişti. Bu kez daha küçük butonlardan ve yine metro tarzında bir arama kutusundan oluşan, kenar çubuğunuzda biraz daha az yer kaplayacak bir eklentiyi sizlerle paylaşmak istiyorum.

 

Metro Tarzı Sosyal Butonlar Ve Arama Kutusu

 

Bu eklentide, ziyaretçilerin blogunuzu takip etmeleri için ilgili kanallara yönlendirecek, metro tarzında Facebook, Twitter, Google+ ve RSS butonları var. Hemen altlarında ise yine metro tarzında bir arama kutusu yer alıyor. Eklentinin en güzel özelliklerinden biri ise butonlara eklenmiş olan CSS hover efekti.

 

Eklentiyi blogunuza eklemek için Blogger kumanda panelinize girdikten sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izleyin ve aşağıdaki kodları yapıştırın.

 

<!--Blog Hocam Metro Tarzı Sosyal Butonlar Ve Arama Kutusu-->
<div class="BH-metro-sosyal">
<li><a class="fb" href="http://www.facebook.com/bloghocam"></a></li>
<li><a class="tw" href="http://twitter.com/bloghocam"></a></li>
<li><a class="gp" href="https://plus.google.com/108761595756468128383/"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/bloghocam"></a></li>
<form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;">
<input id="form-wrapper input" name="q" placeholder=" Ara... " required="" type="text" />
<button type="submit"></button>
</form><br /></div>

<style>
.BH-metro-sosyal {
width:300px;}
.BH-metro-sosyal li {
position:relative;
cursor:pointer;
padding:0;
list-style:none;}
.BH-metro-sosyal .fb,.tw,.gp,.pi,.in,.yt,.fd {
z-index:7;
float:left;
margin:2.5px;
position:relative;
display:block;}
.BH-metro-sosyal .tw {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECgfWuxIsGN2wW6etq8X7XbTQL_Wi1COl0MpquPOmiRMbWMegEVe4CViGjBhM5yzKlpnX7sujCaBQ-94VgC8nQF7FgTrLj_rUr1BpYj3PoYkwsx_heWnBga0wsopasvvdi9-j2wrzFIU/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.BH-metro-sosyal .fb {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0TER01UnVr6DKULqKLc1qibbtcJ_1T8XrSw5l39XvC3RWXGuPQlyCUbJZwWvzLaEqX-KwOgr942bcSxsJVjFSMvFr0dTVZzFqONfYCIcrmF_MOqWpgJqcNg3R7YcpNHPaBhzz4jgLX4/h120/facebookf.png.png) no-repeat center center #1f69b3;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.BH-metro-sosyal .gp {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_CpwtCJ73MDjPsxZ8oD2lsO4gXqK4Z1nVf2LTURAtPiyvuFDMQVR0QDtE0a0FsxXn-A2sY3W2m5xojoaWfXehtj5HqgHL-28iXC9aYVNEeFgkCxJ5f9jy4yLAt8exV8QSjdn5i1o9wZE/h120/google+plus.png) no-repeat center center #da4a38;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.BH-metro-sosyal .fd {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMuKW396fQ2tNXBdiJ7uEP-xQ6KbkQG7yFEklne3EOayB_Tq0v33qGPGVPVBP1FxxgFDdC8b2qlOunDQdZMK_nDFDFqME0DIbDjRd1UV4IYi_HN9QPLA94r1vhE1k9ItXGgzVm-9YmfpA/h120/feed.png) no-repeat center center #e9a01c;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.BH-metro-sosyal li:hover .fb {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRWAbfTSQWMSljjKeNgUgXBnil6TBHFOK8PYXiBdn2TifF-gnZKEDhjHzLFaKw23AFuqf4G1oe4D4aL3__s_168NcsXy_Bq3zLvxran8j8x_V4jHOVgnQcv5oGbCgutoSNCLiu5ELllnY/h120/facebookfh.png) no-repeat center center #1f69b3;
box-shadow:0px 0px 6px 3px #217BC0;
-webkit-box-shadow:0px 0px 6px 3px #217BC0;
-moz-box-shadow:0px 0px 6px 3px #217BC0;
-o-box-shadow:0px 0px 6px 3px #217BC0;
-ms-box-shadow:0px 0px 6px 3px #217BC0;}
.BH-metro-sosyal li:hover .tw {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiteDDV65oky2l70zFG-kexsa9HcSowv118OhKwkPlIZJTOafro7cyq1YFlC_CGrjd2eBBz0_U3tjEFfm917lSo3ShZBmoDg9XDEOPca-PZA8MneqKdCuCrK-ZLvRbQiXp-ZpBAHgx02r8/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;
box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;}
.BH-metro-sosyal li:hover .gp {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitLhlIXbrx-ITOxSQgXTMO-HC1apOn_i4X-onck2iPRM8NTvxsjIl2VH6ptcpHH2Y2Xg3ywqV7Bl40X0x0LRW7NgL1-g9S4NLXqc2KtEVc_M0H-2IUC5u_hXIQnRDsSDWHI1sZwGku9ow/h120/google+plush.png) no-repeat center center #da4a38;
box-shadow:0px 0px 6px 3px #F43431;
-webkit-box-shadow:0px 0px 6px 3px #F43431;
-moz-box-shadow:0px 0px 6px 3px #F43431;
-o-box-shadow:0px 0px 6px 3px #F43431;
-ms-box-shadow:0px 0px 6px 3px #F43431;}

.BH-metro-sosyal li:hover .fd {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSYKyuK0ybIEzIo9e6CYnIME_YdrLYkoQcQpjSLY7oTrGdK7_FxZH1CPT1IsqvNHzZiC2o904Av2_TT8pwV9dZtq_B9oLfP3wVcQ_eySRwIBGXRlf78nfJ-q2skiKBZhqv2L_-L7jrFk/h120/feedh.png) no-repeat center center #e9a01c;
box-shadow:0px 0px 6px 3px #e9a01c;
-webkit-box-shadow:0px 0px 6px 3px #e9a01c;
-moz-box-shadow:0px 0px 6px 3px #e9a01c;
-o-box-shadow:0px 0px 6px 3px #e9a01c;
-ms-box-shadow:0px 0px 6px 3px #e9a01c;}
.cf:before, .cf:after{
content:"";
display:table;}
.cf:after{
clear:both;}
.cf{
zoom:1;}
.form-wrapper {
width: 280px;}
.form-wrapper input {
width: 215px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
box-shadow: 0 0 6px rgba(0,0,0,.3) inset;
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.form-wrapper input:focus {
outline: 0;
background: #fff;
border-color: #51a7e8;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 75px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8eoHp4OGaJ-QTOUQEcBu_evkDciN_WvsVHm-Ph5qbjHZAWE16Ks9IqqLF9GIul7YAlc2Uow4OYXRCe1KUPGLBvSE7hsCd6pWyW81y6V5YRVJ0-GOlUWL10pzUjF2K4sllyyP-HiXFQu4/h120/1367665345_search.png) no-repeat center center #26B11E;
border-radius: 0 0 0 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.form-wrapper button:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8eoHp4OGaJ-QTOUQEcBu_evkDciN_WvsVHm-Ph5qbjHZAWE16Ks9IqqLF9GIul7YAlc2Uow4OYXRCe1KUPGLBvSE7hsCd6pWyW81y6V5YRVJ0-GOlUWL10pzUjF2K4sllyyP-HiXFQu4/h120/1367665345_search.png) no-repeat center center #26B11E;
box-shadow:0px 0px 6px 3px #44D816;
-webkit-box-shadow:0px 0px 6px 3px #44D816;
-moz-box-shadow:0px 0px 6px 3px #44D816;
-o-box-shadow:0px 0px 6px 3px #44D816;
-ms-box-shadow:0px 0px 6px 3px #44D816;}
.form-wrapper button:active,
.form-wrapper button:focus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8eoHp4OGaJ-QTOUQEcBu_evkDciN_WvsVHm-Ph5qbjHZAWE16Ks9IqqLF9GIul7YAlc2Uow4OYXRCe1KUPGLBvSE7hsCd6pWyW81y6V5YRVJ0-GOlUWL10pzUjF2K4sllyyP-HiXFQu4/h120/1367665345_search.png) no-repeat center center #26B11E;
outline: 0; }
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #26B11E transparent;
top: 12px;
left: -6px;}
.form-wrapper button:hover:before{
border-right-color: #26B11E;}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #26B11E;}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;}
</style>
<!--Blog Hocam Metro Tarzı Sosyal Butonlar Ve Arama Kutusu—>

 

Kodlarda renkli yazdığım yerlere kendi adreslerinizi yazmak dışında bir değişikliğe gerek yok. Bir sorunuz veya öneriniz olursa yorum bölümünden sorabilirsiniz.

30 Eylül 2013 Pazartesi

En İyi Responsive Blogger Temaları

Günümüzde gelişen teknolojiyle birlikte web sitelerine girmek için kullanılan cihazların sayısı da oldukça arttı. Farklı çözünürlüklerde ve teknolojilerde cihazların kullanılması, web tasarımcılarını da harekete geçirdi ve poansiyel ziyaretçinin kaçırılmaması için yeni teknikler geliştirildi.

Responsive Tema Nedir?

Türkçeye duyarlı tema olarak çevirebileceğimiz responsive temalar, web sitelerinin; bilgisayar, tablet, mobil ve benzeri cihazlarda sorunsuz bir şekilde gösterilmesi için kullanılır. Farklı cihazlarda düzgün bir görünüm için özel bir kodlama tekniği kullanılarak geliştirilir.

Blogunuzda kullandığınız temanın veya bir web sitesinin responsive olup olmadığını kontrol etmek çin size 2 ücretsiz araç tanıtmak istiyorum.

1. Am I Rersponsive: Bu siteye gidip sayfanın ortasındaki adres kutusuna blogunuzu adresini yazıp Go tuşuna bastıktan sonra blogunuzun responsive olup olmadığını yazacak ve farklı cihazlardaki görüntüsünü gösterecektir.

2. Responsive Tools: Blogunuzun hangi cihazlarda ve hangi çözünürlüklerde nasıl göründüğünü detaylı olarak incelemek istiyorsanız bu aracı kullanabilirsiniz.


Responsive temalar hakkında kısaca bilgi sahibi olduktan sonra internetten derlediğim responsive Blogger temalarını paylaşmak istiyorum.



Geekiesmn Responsive Blogger Teması

Geekiesmn responsive blogger template 

DEMO  &  DOWNLOAD

 

Yazıların etiketlere göre ayrı bloklarda gösterildiği magazin tarzı ana sayfa görünümüne sahip olan bu temada; hazır reklam alanları, özel 404 hata sayfaları, sayfa numaralandırma ve özel sosyal paylaşım butonları gibi özellikler var.


Metrofy Responsive Blogger Teması

Metrofy responsive blogger teması

 

DEMO  &  DOWNLOAD

 

Metro tarzı bir tasarıma sahip olan bu tema benim favorilerimden. Özellikle header bölümündeki metro tasarım çok orijinal olmuş. Bununla birlikte yatay menu ve sayfa numaralandrma dışında çok fazla özelliğin eklenmediği sade fakat kullanışlı bir tema.

 

 

Fizz Responsive Blogger Teması

Fizz Responsive Blogger Teması

 

DEMO  &  DOWNLOAD

 

Oldukça profesyonel bir görünüme sahip olan bu temada dikkati çeken ilk şey slayt bölümü. Ayrıca modern renk paleti, call to action için ayılmış alan ve 4 sütunlu footer, ana sayfada dikkat çeken özellikler.

 

 

My Extra News Responsive Blogger Teması

 

My Extra News Responsive Blogger Teması

 

DEMO  &  DOWNLOAD

 

İçeriği fazla olan haber blogları düşünülerek tasarlanmış, oldukça özellikli bir tema.  Yatay menünün altındaki rastgele değişen metro tarzı eklenti çok dikkat çekici. “Load more” butonu ile navigasyon ve özel tasarlanmış yorum bölümü temayı öne çıkaran diğer özellikler.

 

 

Balance Responsive Blogger Teması

 

Balance Responsive Blogger Teması

 

DEMO  &  DOWNLOAD

 

Temiz ve net bir tasarıma sahip olan bu temada en sevdiğim özellik blogdaki son yazının öne çıkarılması. Ayrıca fazlasıyla görünür ve büyük tasarlanan e-posta abonelik formunun headerda kullanılması akıllıca.

Not: Artık tema paylaşımlarını çoğunlukla BH Pinterest hesabında paylaşıyorum. Blogda bu tür derlemeler veya anlatılması gereken paylaşımlara yer veriyorum. Bu zamana kadar paylaştığım ve bundan sonra paylaşacağım temaları Pinterest’ten kolaylıkla takip edebilirsiniz.