9 Ekim 2013 Çarşamba

Moda Blogları İçin İdeal Blogger Temaları

Okuyucuların ortak istekleri ve beklentileri Blog Hocam’ın 1 numaralı yazı kaynağı diyebilirim. Son zamanlarda bayan bloggerlardan gelen talepler sonucunda da bu yazı ortaya çıktı.

 

Modadan makyaja, takıdan alışverişe çeşitli konularda blog yazan bayan takipçiler, son zamanlarda tema konusunda sıkça danışmaya başlamışlardı. Bu kişileri genellikle BH Pinterest sayfasına yönlendiriyordum fakat oradaki temaların bayan bloglarına özellikli de moda bloglarına pek uygun olmadığı bir gerçek. Son olarak @nimostylo ile Twitter’da benzer bir diyalog yaşadıktan sonra moda blogları için uygun temaları derlemeye karar verdim.

 

Başlıkta moda blogları için uygun temalar desem de aşağıdaki temalarda ufak tefek değişiklikler yaparak alışveriş, makyaj, takı gibi diğer konulardaki bloglarınızda da kullanabilirsiniz.

 

 

Alyeska II Blogger Teması

 

Alyeska II Blogger Teması

DEMO  &  DOWNLOAD

 

Slayt alanı, kullanışlı yatay açılır menüsü, orijinal arama kutusu ve görsel içeren yayınlara uygun ana sayfa tasarımıyla moda blogları için ideal bir Blogger teması. Resimli otomatik devamını oku eklentisi, sayfa numaralandırma eklentisi ve yorum sayısını gösteren baloncuk temayla birlikte hazır bir şeklide gelmekte. Ayrıca 4 sütundan oluşan footer alanını etkin bir şekilde kullanabilirsiniz.

 

 

Pretty Theme Blogger Teması

 

Pretty Theme Blogger Teması

DEMO  &  DOWNLOAD

 

Sade ve basit bir tasarıma sahip olan Pretty Theme teması hızlı ve kullanımı kolay bir tema. Hiç bir eklenti olmadığı için blogunuzun çok çabuk açılmasını sağlar. Temiz bir kodlamanın dışında arka plan resmi, header resmi, üst tarafta şık arama kutusu ve temaya hareket katması için bir kadın resmi var. Hızlı ve sade bir tema isteyeler için ideal olabilir.

 

 

Beauty & Clean Blogger Teması

 

Beauty & Clean Blogger Teması

DEMO  &  DOWNLOAD

 

Çok şık bir Blogger teması olan Beauty&Clean ‘de blog başlığında ve yazı başlıklarında özel font kullanılmış. Dolayısıyla bazı türkçe karakterlerde sorun çıkarabilir. Bunun dışında açılır menü ile sayfa numaralandırma eklentisi bulunuyor. Temanın en dikkat çekici yeri olan kuğu resmi olarak gördüğünüz sabit manşet alanına ise blogunuzun konusuyla ilgili bir duyuru veya başka bir resim ekleyebilirsiniz. Elegan tasarım tercih edenler bu temayı deneyebilirler.

 

 

Scrappy Blogger Teması

 

Scrappy Blogger Teması

DEMO  &  DOWNLOAD

 

Vintage tarzını andıran bu tema bayan bir tasarımcı tarafından yapılmış. Temada “resimli otomatik devamını oku” eklentisi, basit yatay menü, öne çıkarılmış yazı tarihleri ve özel font kullanılan yazı başlıkları dikkat çeken özellikler. Yazı başlıklarında özel font kullanıldığı için bazı türkçe karakterlerde sorun çıkarabilir.

 

 

Project 10 Blogger Teması

 

Project 10 Blogger Teması

DEMO  &  DOWNLOAD

 

Temanın ismi modayı pek çağrıştırmasa da demoyu incelediğinizde moda veya bayan blogları için kullanılabilecek br tema olduğunu görebilirsiniz. Sayısız özelliğe sahip, harika bir tema Project 10. Floating yani yüzen sidebar, sayfa üstünde haber akışı, otomatik slayt manşet alanı, resimli devamını oku eklentisi ve sayfa numaralandırma eklentisi başlıca özellikleri. Düzenlemek biraz vaktinizi alabilir ama uğraştığınıza değecektir.

 

Yazının başında da belirttiğim gibi bu temaları moda bloglarının dışında diğer konulardaki bayan blogları için de rahatlıkla kullanabilirsiniz. Temaların tek tek nasıl düzenleneceğini yazmak ciddi mesai gerektirdiği için maalesef yazamadım :) Düzenlemeyle ilgi sorularınızı yorum bölümünü kullanarak sorarsanız cevaplamaya çalışacağım.

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.