29 Kasım 2016 Salı

Blog Dünyasında Hayatta Kalma Kılavuzu

46 yorum
Blog Hocam 5. yılını doldurmaya az bir süre kalmışken bu konu ile ilgili düşüncelerimi paylaşmanın iyi olabileceğini düşündüm. Keyifli okumalar…

Blog dünyasına giren her blogger adayı ziyaret ettiği eski, arşivi kalabalık, kendi çapında tanınmış blogları görünce aklından hep şu düşünceyi geçirir: “Keşke ben de blogumun 1.2.3… vs yaş gününü kutlayabilsem.”

Fakat bunu gerçekleştirmek ne yazık ki her zaman mümkün olmuyor. Hem kendimden hem çevremdeki blogger arkadaşlarımdan gözlemlediğim kadarıyla uzun ömürlü bir bloga sahip olmak istiyorsanız bin bir zorlukla dolu blog dünyasında hayatta kalma mücadelesi vermeli yani bir SURVIVOR olmalısınız.

Gözlemlerim ve deneyimlerim doğrultusunda blog dünyasında hayatta kalmanızı sağlayacak bazı önemli konuları paylaşmak isterim. Türlü blog girişimlerinde bulunup bir süre sonra vazgeçen arkadaşlara faydalı olmasını ümit ederim.

Blog dünyasında hayatta kalma


1. İyi Olduğunuz Bir Konu Seçin

İlk ve en önemli adım blogunuzu açmadan önce hangi konuda blog yazacağınıza karar vermektir. Doğru konu seçimi blogun ömrü ile doğru orantılıdır.

Blogunuzun uzun ömürlü olmasını istiyorsanız mevcut veya potansiyel kitlenizin beklentilerini karşılayabilecek içerikler üretmeniz ve bunda devamlılık sağlamanız gerekiyor. İşte bu nedenle bilgi sahibi olduğunuz, ilgi duyduğunuz ve insanların ilgisini çekmesi muhtemel konularda blog yazmalısınız.

X konusunda yayın yapan bloglar çok tutuyor diye hiç bir donanıma sahip olmadan o konuda blog yazma eğilimi var bazı arkadaşlarda. Bence en büyük hata bu. Sen hangi konuda iyiysen o konuda yaz. Belki ilk olacaksın, belki ileride insanlar senden feyz alacak.

Örneğin ben Blog Hocam’ı açtığım dönem ne blog yazarlığı bu kadar popülerdi, ne de ana konusu blog yazarlığı olan bir blog vardı.

2. Mor İnek Olun

Mor inek lafını hakaret veya başka bir şey algılamayın lütfen. Aranızda bilenler mutlaka vardır fakat bilmeyenler için ünlü yazar ve blogger Seth Godin’in farklılaşmak üzerine yazdığı çok satan bir kitabı olduğunu hatırlatalım.

Mor inek olmaktan kastedilen şey tek renk ineklerin arasında mor inek olarak dikkat çekebilmek. Seth Godin bu teoriyi iş dünyası için öne sürse de blog dünyasında başarılı olmak için de göze çarpmanın farklı bir yolunu bulmanız gerekiyor.

Blogosfer oldukça kalabalık. Rakiplerinizin sayısı ve güçleri fazla. Bu güçlü rakiplerin arasından sıyrılmak, başarılı olmak, insanların dikkatini çekmek, sürüden ayrılmak istiyorsan FARKLILAŞACAKSIN!

Nasıl mı? Bunu siz bulacaksınız. Rakibiniz olan hiç bir blogda bulunmayan bir tasarım öğesi olabilir, bir yazı türü olabilir, konuya bakış açısı olabilir, yazım dili olabilir, ziyaretçilere sunduğunuz ayrıcalıklar olabilir. Olay tamamen hedef kitlenizi ne kadar tanıdığınıza ve ne kadar yaratıcı olduğunuza bağlı.

3. Sık, Düzenli Ve Planlı Yazın

Bir blogda içeriklerin kalitesi kadar güncelliği de önemli elbette. Evet kaliteli ve özgün içerikler çıkarmak uzun zaman alıyor farkındayım ama pek çok nedenle güncelliği sağlamalısınız.

İlk neden okur trafiği. İnsanlar blogunuzu çeşitli kanallarla takip edecekler ve her yeni yazınızda o yazını okumak için blogunuzu ziyaret edecekler. Bu da demek oluyor ki ne kadar çok yazı, o kadar çok trafik.

Diğer önemli neden ise arama motorları. Blogunuzda ne kadar çok kaliteli yazınız olursa arama motorlarının dizinlerinde o kadar fazla içeriğiniz yer alacak. Yani aramalardan gelen ziyaretçi her yazınızla birlikte daha da artacak.

Kaliteden ödün vermeden olabildiğince fazla içeri oluşturun fakat bunları belli bir plan ve düzen dahilinde yayına alın. Örneğin boş bir gününüzde oluşturduğunuz 10 içeriği arka arkaya pat pat diye paylaşmak yerine bunları haftalara dağıtın. Haftada 2 yazı paylaşsanız blogunuzun 5 haftalık içeriği hazır demektir :)

4. Reklamınızı Yapın

Bir blog sahibi olduktan ve yazılarınızı yazdıktan sonra oturup insanların blogunuzu ziyaret etmelerini beklerseniz açık söyleyeyim daha çok beklersiniz. Blog yazmaya vakit ayırdığınız kadar blogunuzun ve yazılarınızın tanıtımına da vakit ayırmalısınız.

Blog reklamı yapmanın ücretli ve ücretsiz yolları var. Ücretli reklam yöntemlerinden en etkilileri Google AdWords reklamlarını kullanarak blogunuzun konusuyla ilgili aramalarda blogunuzu çıkarmak ve popüler sitelerden ücret karşılığı süreli banner ve tanıtım yazıları almaktır.

Eğer ben ücretsiz tanıtım yapmak istiyorum derseniz ciddi bir efor harcamanız gerek. Öncelikle yazılarınızın Google aramalarında üst sıralarda çıkması için backlink almaya yönelik çalışmalar yapmalısınız. Bir süre sonra Google’dan hatırı sayılır hitler almaya başlarsınız.

Bunun dışında diğer bloglardaki yazılara yorum yazmak, konuk yazarlık sistemini kullanmak ve sosyal medyada aktif olmak diğer etkili ücretsiz reklam yöntemlerinin başlıcalarıdır.

5. Blogger Arkadaşlar Edinin

Blog dünyasında tek başına hayatta kalmaya çalışmak gerçekten zor iş. Pek çok konuda size fayda sağlamanın ötesinde blog yazmayı daha keyifli hale getirmek için mutlaka insan ilişkilerine yatırım yapmalısınız.

Burada bahsettiğim şey sırf çıkar için diğer blog yazarlarıyla iletişim kurmak değil elbette. Gerçek arkadaşlıklardan bahsediyorum. Yazılarını beğendiğiniz insanları takip edin, onlarla iletişime geçin, kendi yazılarınızda onlardan bahsedin, beğendiğiniz içeriklerini paylaşın vs.

Bir süre sonra karşılıklı paylaşımlar ve etkileşimlerden o kadar çok keyif alacaksınız ki hem blogunuz daha çabuk gelişecek hem de blog dünyası sizin için daha keyifli bir yer haline gelecek.

Unutmayın en etkili backlink ve trafik kaynağı sizin blogger dostlarınızdır!

6. Olaya Profesyonelce Yaklaşın

Çoğumuz blog yazmayı hobi olarak görüyor ve bu şekilde başlıyorsunuz. Ancak henüz fark etmediyseniz bilmenizi isterim ki bloglar dijital pazarlamanın tam göbeğinde bulunan popüler mecralar. İster istemez bir süre sonra bazı fırsatlar karşınıza çıkacak, çıkmazsa da neden çıkmıyor diye düşüneceksiniz.

Bu nedenle işi en baştan sıkı tutmak, ciddiye almak ve olaya profesyonelce yaklaşmak en doğrusu. Blogunuzun tasarımından tutun da içeriklerine kadar her alanda profesyonel olmaya gayret edin. Gerekirse masraf edin ama insanlar blogunuzu ziyaret ettiğinde o kaliteyi görsünler.

Bu tür bloglara hem okurların, hem ajansların, hem markaların, hem de reklam verenlerin ilgisi çok daha fazla oluyor.

Son Sözler

Ben de bu yollardan geçmiş bir blogger olarak yeni başlayan arkadaşlara vaktim el verdiğince yardımcı olmaya çalışıyorum. Çoğu kişi de blog yazmaya yeni başladığını ve kendisine yol göstermemi istiyor. Sanırım bu yazı yeni başlayan arkadaşlara yol gösterecek nitelikte bir yazı oldu.

Kendi deneyimlerim ve gözlemlerin sonucun da yazdığım bu yazı ve konu ilgili düşüncelerinizi, sorularınızı, fikirlerinizi lütfen yorum bölümünden yazın. Ben yetişemesem bile yorumunuzu okuyan diğer blogger arkadaşlar sizi yanıtlayacaktır.

Blog dünyasına yeni giren tüm arkadaşlara hayatta kalma mücadelesinde başarılar ve keyifli bloglar dilerim.

15 Kasım 2016 Salı

Bloggerlar İçin Sağlık Ve Konfor Önerileri

32 yorum
Bilgisayar karşısında, koltuklarda, sandalyelerde, masa başlarında saatler harcayan biz bloggerlar için bedenimizin, zihnimizin ve ruhumuzu sağlıklı olması çok önemli. Bazen yanlış bir oturma pozisyonu, bazen yanlış mobilya seçimi, bazen düşük ışık gibi etkenler farkında olmadan sağlığınızı bozabilir.

Bildiğiniz gibi Blog Hocam’ın sloganı “Daha iyi bloglar için” ve beş buçuk yıldır blog yazarlarına bu doğrultuda içerikler paylaşılıyor. Bu yüzden sağlık konusu da nereden çıktı diyebilirsiniz fakat unutmayın ki daha iyi yazılar yazmak, buna bağlı olarak daha iyi bloglara sahip olabilmek için beden, zihin ve ruhunuzun sağlıklı olması gerekir.

İşte bu yüzden blog yazarlarıyla bazı küçük sağlık ve konfor önerileri paylaşacağım. Bilgisayar başında harcadığınız vakit süresince sağlıklı ve konforlu olmak hem blogunuzu, hem okulunuzu/işinizi, hem de sosyal hayatınızı olumlu yönde etkileyecektir.

bloggerlar için sağlık ve konfor


1. Blog Yazmaya Başlamadan Önce Yapılması Gerekenler

Günün erken saatleri ise ve yeterli vaktiniz varsa sabah sporu yapıp duş almanız, güne şahane başlamanızı sağlayacaktır. Eğer öyle bir imkanınız yoksa ufak tefek egzersizler yapabilirsiniz; boynunuzu germek, bilek ve parmak egzersizleri yapmak gibi… Ve bilgisayar başına otururken kesinlikle aç olmamalısınız.

- Örnek el ve parmak egzersizleri
- Örnek boyun egzersizleri

2. Çalışma Ortamı

Blog yazılarınızı hangi şartlarda, hangi ortamlarda yazıyorsunuz bilmiyorum ama bana sorarsınız sakin, aydınlatılması iyi yapılmış, düzenli ve konforlu bir çalışma odası/masasında yazmanız veriminizi arttıracaktır. Verimli bir çalışma ortamı oluşturmak için ergonomik ve kullanışlı bir çalışmaması masası, rahat hareket etmenizi sağlayacak konforlu ve yüksekliği ayarlanabilir bir ofis sandalyesi, akşam çalışmalarınız için gözünüzü yormayacak bir aydınlatma sistemi, sağlığınız için önemli olan bel yastığı ve ayak desteği gibi ortopedik ürünler temin edebilirsiniz.

- Örnek ofis sandalyeleri
- Örnek çalışma masaları
- Örnek ortopedik ürünler

3. Masa Düzeni

Sağlıklı bir çalışma ortamında en önemli unsurlardan biri de düzenli bir masadır. Ben çalışma masası olarak L şeklinde masa tercih ediyorum. Bilgisayarımı karşıma aldığımda sağ tarafımda bir boşluk olması işime geliyor. Sağ taraftaki bu boşluğa kahvemi/çayımı, not defterimi, print outlarımı, telefonumu, tabletimi vs koyuyorum. Sizlere de notlarınızı almak ve yazı planlarını yapmak için mutlaka bir not defteri, çeşitli renklerde kalemler ve fincanınızı koymak için bardak altlığı kullanmanızı öneririm. Elbette bunlar masanın üzerinde düzenli ve tertipli olmalı.

4. Bilgisayar Ve Aparatlar

Bir bloggerın en önemli ihtiyacı ise tabi ki bilgisayarıdır. Taşınabilir özelliği sebebiyle çoğunuz gibi benim tercihim de dizüstü bilgisayarlar. Ancak uzun süreler ekrana baktığımız ve bilgisayarlarımızı açık tuttuğumuz için sağlığımız için bazı önlemler almamız şart. Bunların başında da laptop soğutucular geliyor. Aşırı ısınmalarda hem bilgisayarınızın hem de sizin sağlığınızı koruması laptop soğutucular kullanabilirsiniz. Ayrıca ekran ve klavye temizliği için özel üretilen küçük aparatlardan da faydalanabilirsiniz. Kaliteli bir kamera, mikrofon ve kulaklık ise vloggerların olmazsa olmazları.


5. Molalarda Yapılması Gerekenler

Son olarak bilgisayar ekranına uzun süre bakmamanızı ve 45 dakikada bir küçük molalar vererek bir şeyler içmenizi, ekran dışında bir şeylerle ilgilenmenizi önereceğim. Sürekli aynı yere bakmak hem gözlerinizi hem de zihninizi yorabilir. Ben molalarda balkona veya çalışma odasının dışında bir odaya geçerek kahve içerim fakat çok fazla kahve tüketmek önerilmediği için bitki çaylarını da tercih edebilirsiniz.

Yazımın başında da belirttiğim gibi blogunuzla ilgilenirken bilgisayar başında geçirdiğiniz süre boyunca konforunuza ve sağlığınıza dikkat etmeniz veriminizi arttıracaktır. Bu konforu sağlamak için gerekli olan her türlü ofis mobilyası, ofis malzemesi, kırtasiye malzemesi ve teknolojik cihaz, bu yazıyı yazarken referans aldığım site olan Avansas.com’da mevcut. Bu ürünleri incelemek ve temin etmek için siteyi ziyaret edebilirsiniz.

13 Ekim 2016 Perşembe

Önemli Bir SEO Kriteri: Anahtar Kelime Yoğunluğu

37 yorum
Anahtar kelime yoğunluğu SEO’da çok önemli kriterlerden biri. Özellikle bizler gibi web içeriği üreten blog yazarları anahtar kelime yoğunluğu konusunda daha hassas olmalı. Bu yazıda anahtar kelime yoğunluğunun ne olduğundan, bloggerlar ve SEO için öneminden, anahtar kelime yoğunluğunun nasıl hesaplanacağından ve kaç olması gerektiğinden bahsedeceğim.

anahtar kelime yoğunluğu


Anahtar Kelime Yoğunluğu Nedir?

Anahtar kelime ve yoğunluk kavramlarından ayrı ayrı bahsederek işe başlayalım. Anahtar kelime arama motorlarında sorgulanan ve bizlerin yazılarımızda kullandığı kelime veya kelime gruplarıdır.

Örneğin konumuz “güzel bloglar” olsun ve güzel bloglarla ilgili bir blog yazısı yazdığımızı düşünelim. Burada amaç “güzel bloglar”  şeklinde yapılan aramalarda üst sıralarda çıkmaktır. Yani anahtar kelimemiz “güzel bloglar”dır.

Anahtar kelime yoğunluğu ise kullandığımız anahtar kelimenin yazının bütününde kullanılan kelimelere oranıdır.

Anahtar Kelime Yoğunluğu Nasıl Hesaplanır?

Anahtar kelime yoğunluğunun tanımında da okuduğunuz üzere anahtar kelime yoğunluğunu hesaplamak için yazıda kullandığımız anahtar kelimenin tekrar sayısını yazıdaki tüm kelimelerin sayısına bölüp 100 ile çarpmamız gerekmektedir.

Örnek verecek olursak toplam 1000 kelimelik bir yazı yazdığımız düşünelim. Hedef anahtar kelimemiz olan “güzel bloglar” anahtar kelimesinin ise yazıda 20 kez geçtiğini düşünelim. Bu durumda “güzel bloglar” için anahtar kelime yoğunluğu şu şekildedir:

(20/1000)x100=2  Yani anahtar kelime yoğunluğu %2’dir.

İdeal Anahtar Kelime Yoğunluğu Ne Olmalı?

İdeal anahtar kelime yoğunluğu içeriğin toplam kelime sayısı, anahtar kelimenin rekabet oranı gibi faktörlere göre değişkenlik gösterse de genellikle %1 ile %5 arasında olması fikri ağır basıyor.

Google içerikte olağan dışı bir hareket algıladığında o içeriği SPAM içerik olarak nitelendirebiliyor. Bu nedenle aşırı anahtar kelime tekrarı içeriğinizi riske atabilir. Bu nedenle %5-%6 anahtar kelime yoğunluğunu geçmeniz önerilmez.

Anahtar Kelime Yoğunluğunu Hesaplayabileceğiniz Araçlar

Tek tek kelimeleri saymak, özellikle bizim gibi binlerce kelimelik içerikler üreten blog yazarları için imkansız elbette. Bunun için ücretsiz kullanabileceğiniz bazı online araçları listelemek istiyorum.

- Seo Book Keyword Density Analyzer
- SEO Centro Keyword Density Checker
- Live Keyword Analysis
- Seo Chat Page Keyword Density Analysis

Bu araçlar sayesinde hem webde yayınlanmış sayfaların, hem de yayınlamaya hazır içeriklerinizin anahtar kelime kullanım oranlarını görebilir, bun göre düzenlemeler yapabilirsiniz.

1 Eylül 2016 Perşembe

Google Popup Kullanan Siteleri Cezalandıracak

47 yorum
Google, Bloggerlar ve web sitesi sahiplerinin dikkat etmesi gereken önemli bir güncellemesini duyurdu. Yapılan duyuruya göre web sitelerinin ve blogların mobil versiyonlarında ziyaretçiyi rahatsız eden popuplar ve ziyaretçinin izni dışında çalışan benzer uygulamalar var ise Google bu siteleri cezalandırarak aram sonuçlarında daha alt sıralara itecek.

Google resmi blogundan yaptığı duyuruda otomatik açılan popup reklamların mobil kullanıcılara kötü bir deneyim sağladığından ve bu sayfaların özellikle küçük ekranlı mobil cihazlarda problem olacağından bahsetmiş. Kullanıcıların mobil arama deneyimini geliştirmek adına kolay erişilemeyen sayfalarından Google arama sonuçlarında daha alt sıralarda yer alabileceği belirtilmiş.

Bu Güncelleme Ne Anlama Geliyor?

Google açıklamasında şu uygulamaları istemediğini örneklerle belirtmiş:


Google'ın izin vermediği popuplar


1. Kullanıcı siteye girer girmez veya bir süre sonra otomatik olarak içeriği kaplayan popup reklamlar.
2. Kullanıcının ana içeriğe ulaşmak için bir yerlere tıklamasının gerektiği uygulamalar.
3. Kullanıcının içeriğe ulaşmak için sayfayı kaydırmak zorunda kaldığı uygulamalar.

Yani kısaca açıklamak gerekirse, mobil kullanıcıların içeriğe ulaşmak için kapatmak zorunda olduğu reklam, kayıt, üyelik gibi popuplara Google artık sıcak bakmıyor.

Fakat bu güncelleme Google’ın tüm popup kullanan siteleri cezalandıracağı anlamına gelmiyor elbette. Çerez kullanımı ve yaş doğrulaması gibi yasal nedenlerle gösterilen popuplar, kullanıcı adı ve şifre gereken login uygulamaları ve sayfanın tamamını değil de küçük bir kısmını kaplayarak kolayca kapatılabilen bilgilendirme afişlerine izin veriliyor.

Google'ın izin verdiği popuplar


Sonuç Olarak

Popular gerçekten işe yaradığı için çoğu web site sahibi tarafından kullanılan araçlar. Fakat ziyaretçi gözünden bakıldığında da bir sitede en nefret edilen şeylerin başında gelir. Özellikle de o siteyi mobil cihazdan ziyaret ediyorsanız.

Fakaaat şöyle bir çelişkiden de bahsetmeden sonlandırmak istemiyorum. Her zaman kullanıcı deneyimini arttırmaya yönelim çalışmalar yaptığını, bu güncellemeyi de mobil kullanıcıların arama deneyimini geliştirmeye yönelik çıkardığını söyleyen Google, bundan kısa bir süre önce AdSense için vinyet reklamları kullanıma sunmuştu. Buradan Google’a soruyorum:

Sevgili Google, şimdi bu güncellemeden sonra senin kullanmaya teşvik ettiğin vinyet reklamları kullanan siteleri de cezalandıracak mısın?

18 Ağustos 2016 Perşembe

Blogger'da Font Awesome Kullanımı

35 yorum
Hızlı, pratik, kullanıcı dostu olması gibi nedenlerle son zamanlarda çoğu web projesinde gördüğümüz Font Awesome hakkında bilgi vermek istiyorum. Font Awesome nedir, ne değildir, ne işe yarar, nasıl kullanılır gibi soruların yanıtlarını bu yazıda vermeye çalışacağım.

font awesome


Font Awesome Nedir?

Font Awesome, vektörel ikonların font olarak bir araya geldiği, @font-face özelliğiyle çalıştığı için kullanımı oldukça kolay olan açık kaynaklı bir font/ikon kütüphanesidir.

Kısacası font awesome herkesin kullanımına açık olan bir font yani yazı tipi topluluğudur. Fakat bildiğimiz fontlarda harfler ve rakamlar varken font awesome’da ikonlar vardır.


Font Awesome Kullanmanın Avantajları Nelerdir?

Yukarıdaki tanımda da okuduğunuz üzere font awesome’ı kullanmaktaki amaç eski tip .jpg, .png, .gif grafik ikonlarının yerine daha hızlı, modern ve basit karakter ikonları göstermektir. Grafik ikonlar yerine font awesome ikonları kullanmanın avantajları kısaca şunlardır:

  • Blogda kullanacağınız ikonlar grafik olmadığı için sayfanın açılması daha hızlı olacaktır.
  • Font awesome ikonları hiçbir optimizasyona gerek duymadan mobil cihazlara uyacaktır.
  • Çok geniş bir ikon paketi mevcut olduğundan sadece basit bir HTML kodu kullanarak yüzlerce ikondan ücretsiz faydalanabileceksiniz.
  • İkonlar birbiriyle uyumlu olduğundan ve hepsi aynı familyadan geldiğinden görsel açıdan şık olacaktır.

Blogger’da Font Awesome Nasıl Kullanılır?

Font awesome ikonlarını Blogger’da kullanmanız için yapmanız gereken ilk şey font awesome dosyasını tanıtmak tır. Bunun için Şablon > HTML’yi Düzenle diyerek <head> kodunun altına şu kodu eklemelisiniz:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Şimdi  font awesome'ın ikon kütüphanesini ziyaret ederek kullanmak istediğimiz ikonun üzerine tıklayalım ve o ikona ait kodu alalım. Örnek olarak ben futbol topu ikonunu seçtim ve bu ikonu blogda göstermek için yapmam gereken tek şey o ikona ait HTML kodunu istediğim yere eklemek. Futbol topu ikonunun kodu şu:

<i class="fa fa-futbol-o"></i>

Bunu kodu eklediğimizde elde ettiğimiz sonuç ise şu:

Futbol topu örneğinden devam edelim. Futbol topu ikonunu daha farklı boyutlarda kullanmak istediğimizi düşünelim. Bunun için mevcut koda çok küçük bir ekleme yapacağız. Farklı ikon boyutları için odlar şu şekilde:

<i class="fa fa-futbol-o fa-lg"></i>
<i class="fafa-futbol-o fa-2x"></i>
<i class="fa fa-futbol-o fa-3x"></i>
<i class="fa fa-futbol-o fa-4x"></i>
<i class="fa fa-futbol-o fa-5x"></i> 

Ortaya çıkan sonuç ise şu şekilde:




Örneklerle devam ediyoruz. Şimdi de yine font-awesome'ın nimetlerinden faydalanarak sosyal ikonlardan bir yatay menü yapalım. Bunun için kullanacağımız kod şu şekilde olmalı:

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
<a href="#"><i class="fa fa-linkedin fa-lg"></i></a>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
<a href="#"><i class="fa fa-youtube fa-lg"></i></a>
<a href="#"><i class="fa fa-rss fa-lg"></i></a>

Ortaya çıkan sonuç ise şu şekilde:




İkonlarının renginin yeşile döndüğünü fark ettiniz sanırım. Bunun nedeni sosdyal takip hesapları için ikonlara link vermem ve Blog Hocam'da tüm linklerin renginin yeşil olarak tanımlanmış olması. Sizin blogunuzda linkler kırmızı ise ikonlar da otomatik olarak kırmızıya dönüşecektir.

Fakat font awesome ikonlarını CSS ile istediğiniz gibi kontrol edebilirsiniz. Örneğin her ikonu farklı renk yapabilirsiniz. Bunu da bir örnekle gösterelim isterseniz. Bunun için her bir class için stil kodu tanımlamamız yeterli olacaktır:

<a href="#"><i class="fa fa-facebook fa-lg"></i></a><style>.fa-facebook{color:#3b5998}</style>
<a href="#"><i class="fa fa-twitter fa-lg"></i></a><style>.fa-twitter{color:#00aced}</style>
<a href="#"><i class="fa fa-instagram fa-lg"></i></a><style>.fa-instagram{color:#125688}</style>
<a href="#"><i class="fa fa-google-plus fa-lg"></i></a><style>.fa-google-plus{color:#dd4b39}</style>
<a href="#"><i class="fa fa-linkedin fa-lg"></i></a><style>.fa-linkedin{color:#007bb5}</style>
<a href="#"><i class="fa fa-pinterest fa-lg"></i></a><style>.fa-pinterest{color:#cb2027}</style>
<a href="#"><i class="fa fa-youtube fa-lg"></i></a><style>.fa-youtube{color:#bb0000}</style>
<a href="#"><i class="fa fa-rss fa-lg"></i></a><style>.fa-rss{color:#ff6600}</style>


Ortaya çıkan sonuç ise şu şekilde:



Aynı örnek üzerinden devam edelim. Font awesome yardımıyla gadget olarak ekleyebileceğimiz bir sosyal takip eklentisi yapalım. Bunun için yukarıdaki örnekte kullandığımız ikonları alt alta sıralayalım ve yanlarına da takip seçeneklerini yazalım. Bunun için kodu şu şekilde düzenliyoruz:
<ul class="fa-ul">
<li><a href="#"><i class="fa-li fa fa-facebook fa-lg"></i>Facebook</li></a><style>.fa-facebook{color:#3b5998}</style>
<li><a href="#"><i class="fa-li fa fa-twitter fa-lg"></i>Twitter</li></a><style>.fa-twitter{color:#00aced}</style>
<li><a href="#"><i class="fa-li fa fa-instagram fa-lg"></i>Instagram</li></a><style>.fa-instagram{color:#125688}</style>
<li><a href="#"><i class="fa-li fa fa-google-plus fa-lg"></i>Google+</li></a><style>.fa-google-plus{color:#dd4b39}</style>
<li><a href="#"><i class="fa-li fa fa-linkedin fa-lg"></i>LinkedIn</li></a><style>.fa-linkedin{color:#007bb5}</style>
<li><a href="#"><i class="fa-li fa fa-pinterest fa-lg"></i>Pinterest</li></a><style>.fa-pinterest{color:#cb2027}</style>
<li><a href="#"><i class="fa-li fa fa-youtube fa-lg"></i>YouTube</li></a><style>.fa-youtube{color:#bb0000}</style>
<li><a href="#"><i class="fa-li fa fa-rss fa-lg"></i>RSS</li></a><style>.fa-rss{color:#ff6600}</style>
</ul>

Ortaya çıkan sonuç ise şu şekilde oluyor:


Kodlarda değişiklikler yaparak ve Font Awesome resmi sitesindeki dökümanlar ile örneklerden faydalanarak bu ikonlardan çok güzel çalışmalar yapabilirsiniz.

16 Ağustos 2016 Salı

Demo Ve Download Butonları Oluşturma

13 yorum
Blog yazarlığı ile uzun süre uğraşan herkes zamanla kendi tasarımlarını, temalarını, kodlarını düzenlemeye başlıyor. Bu çalışmalarını blogunda paylaşmak istediklerinde ise DEMO yani Önizleme ve DOWNLOAD yani İndirme butonlarından faydalanıyorlar.

Blogunda Blogger temaları paylaşan bir takipçim benden slide efektli görsel yönden etkileyici butonlar için kod istemişti. İlgilenenler ve ihtiyacı olanla çıkabilir düşüncesiyle buradan herkesle paylaşmanın daha doğru olacağını düşündüm.

demo download butonları


Paylaşacağımı bu demo ve download butonlarında sadece hiç grafik kullanılmadığı için oldukça hızlı yükleniyor ve çalışıyor. Butronların üzerindeki ikonlar için font awesome ikonları kullanılmış. Diğer tüm her şey CSS kodları ile halledilmiştir.



Bu butonları blog yazılarınızdaki paylaşımlarınızda kullanmak için öncelikle font awesome’ın blogunuzda tanımlı olması gerekir. Eğer şablonun HTML kodlarına daha önce fontawesme kodu eklemediyseniz Şablon > HTML’yi Düzenle diyerek şablonunuzun HTML kodlarının olduğu pencereyi açın ve burada <head> kodunun altına şu kodu ekleyin:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>

Daha sonra download ve demo butonlarının CSS kodlarını şablona eklemelisiniz. Bunun için ]]></b:skin> kodunu bulun ve bunun üzerine şu stil kodlarını ekleyin:

#buton {     margin: 20px auto;     text-align: center; }
#buton br {     display: none; }
.mbg-btn-slide, .mbg-btn-slide2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #00CC00;     margin: 10px;     transition: .5s; }
.mbg-btn-slide2 {     border: 2px solid #FF3300; } .mbg-btn-slide:hover {     background-color: #00CC00; } .mbg-btn-slide2:hover {     background-color: #FF3300; }
.mbg-btn-slide:hover span.circle, .mbg-btn-slide2:hover span.circle2 {     left: 100%;     margin-left: -45px;     background-color: #fdfdfd;     color: #00CC00; }
.mbg-btn-slide2:hover span.circle2 {     color: #FF3300; }
.mbg-btn-slide:hover span.title, .mbg-btn-slide2:hover span.title2 {     left: 40px;     opacity: 0; }
.mbg-btn-slide:hover span.title-hover, .mbg-btn-slide2:hover span.title-hover2 {     opacity: 1;     left: 40px; }
.mbg-btn-slide span.circle, .mbg-btn-slide2 span.circle2 {     display: block;     background-color: #00CC00;     color: #fff;     position: absolute;     float: left;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     left: 0;     transition: .5s;     border-radius: 50%; }
.mbg-btn-slide2 span.circle2 {     background-color: #FF3300; }
.mbg-btn-slide span.title,   .mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title2,   .mbg-btn-slide2 span.title-hover2 {     position: absolute;     left: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #FF3300;     transition: .5s; }
.mbg-btn-slide2 span.title2,   .bsd-btn-slide2 span.title-hover2 {     color: #00CC00;     left: 80px; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     left: 80px;     opacity: 0; }
.mbg-btn-slide span.title-hover, .mbg-btn-slide2 span.title-hover2 {     color: #fff; }

Şablonun HTML kodlarında yapılacaklar bu kadar. Bundan sonra demo ve download butonlarını kullanacağınız yazının HTML kodu bölümünü açın ve butonların gözükmesini istediğiniz yere butonların kodlarını ekleyin:

<div id="buton"> <a href="https://bloghocam.blogspot.com" class="mbg-btn-slide" target="_blank">   <span class="circle"><i class="fa fa-rocket"></i></span>   <span class="title">Demo</span>   <span class="title-hover">Önizle</span> </a> <a href="https://bloghocam.blogspot.com" class="mbg-btn-slide2" target="_blank">   <span class="circle2"><i class="fa fa-download"></i></span>   <span class="title2">Download</span>   <span class="title-hover2">İndir</span> </a> </div>

Burda ilk mavi yere demo butonuna tıklandığında açılacak sayfanın urlsini, ikinci mavi yere download butonuna tıklandığında açılacak sayfanın urlsini yazın.

Faydalı olması ümidiyle, herkese iyi bloglar.

10 Ağustos 2016 Çarşamba

Blogger İçin Sosyal İçerik Kilidi

28 yorum
Genellikle Wordpress bloglarda gördüğümüz “Görüntülemek İçin Paylaş” scriptinin Blogger’da kullanımı ile ilgili istekler aldım. Bu yazıda, blog dünyasında “share to unlock” veya “social content locker” olarak bilinen scripti sizlerle paylaşacağım.

blogger sosyal içerik kilidi


Sosyal İçerik Kilidi Nedir?

Oluşturduğunuz içeriğin istediğiniz kısmını ziyaretçilere kapatan ve ziyaretçilerin kapalı kısmı görüntüleyebilmeleri için yazıyı sosyal medyada paylaşmalarının gerektiği scripte sosyal içerik kilidi diyebiliriz.

Yazılarınızın sosyal medyada bol bol paylaşılmasını ve buna bağlı olarak sosyal medya trafiğinizin artmasını sağlayacak bu eklentiyi farklı şekillerde kullanabilirsiniz. Örneğin blogunuzda çok önemli bir bilgi paylaşırken, bir download linki paylaşırken, video veya fotoğraf paylaşırken, kod paylaşırken vs.



Sosyal İçerik Kilidini Blogger’da Kullanma

Bu eklentiyi Blogger’da kullanmak için aşağıdaki adımları takip edin.

1. Adım: İlk olarak şablonunun HTML kodlarına jquery kodu eklemeniz gerekiyor. (Not:Şablonda sadece bir adet jquery kodu olmalı. Daha önce eklediyseniz bu adımı atlayın.) Bunun için Blogger kumanda panelinde Şablon > HTML’yi Düzenle diyerek <head> kodunu bulun ve hemen altına şu jquery kodunu ekleyin:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2. Adım: İkinci olarak javascript ve CSS kodlarımnı eklemelisiniz. Bunun için Blogger kumanda panelinde Şablon > HTML’yi Düzenle diyerek </body> kodunu bulun ve hemen üstüne şu kodları ekleyin:

<script type='text/javascript'>
//<![CDATA[
(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/tr_TR/all.js";
     fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      status     : true,                            
      xfbml      : true                              
    });
    FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        });
    });
};
  window.twttr = (function (d,s,id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
  js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function (event) {
        $.event.trigger({
            type: "pageShared",
            url: event.target.baseURI
        });
    });
});
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
function plusOned(obj){
    console.log(obj);
    $.event.trigger({
        type: "pageShared",
        url: obj.href
    });
}
$(document).on('pageShared',function(e){
    if(e.url == window.location.href){
        $(".secret").show();
        $(".secret-share").hide();
    }
});
//]]>
</script>
<style>
.secret {
text-align:center;
display:none
}
.secret-share {
    padding: 20px;
    text-align: center;
    border: 3px solid #ddd;
    background: #f8f8f8;
}
.secret-share .fb-like {
margin-top: 0;
top: -7px;
position: relative;}
.secret-share .twitter-share-button {
    margin-right: 25px;
}
</style>

3. Adım: İlk iki adımda eklediğimiz kodlar şablonun HTML kodlarına tek seferlik ekleyeceğimiz kodlardı. Şimdi kullanacağımız kod ise eklentiyi kullanmak istediğiniz her yazıya eklemeniz gereken koddur. Sosyal içerik kilidini kullanmak istediğiniz yazının HTML bölümüne giderek eklentinin görüntülenmesini istediğiniz yere şu kodları ekleyin:

<div class="secret">
BURASI GİZLENECEK İÇERİK</div>

<div class="secret-share">
<p>Gizlenmiş içeriği görmek için bu yazıyı paylşmanız gerekmektedir.</p>
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="mybloggerlab" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>

Gizlenmesini istediğiniz bölümün HTML kodlarını mavi renkle gösterdiğim yere yapıştırdıktan sonra önizleme yaptığınızda o bölümün yerinde sosyal içerik kilidinin göründüğünü göreceksiniz.

Gizli bölümü görmek için Facebook beğen, Twitter tweet veya Google Plus +1 butonlarından birine tıklamalı ve sosyal medya hesaplarınızda paylaşmalısınız.

Soru ve düşüncelerinizi yorum bölümünden paylaşabilirsiniz. Bu eklentiyi faydalı bulduysanız lütfen sosyal medya hesaplarınızda paylaşarak Blog Hocam’a destek olun.
Picardes

LİNKLER