20 Kasım 2016 Pazar

Youtube'da Popüler Olmanın Yolları



Benzer başlıklarda arama yaparken bir gencin (popüler olan) bu paylaşımını gördüm kendisi birkaç maddede kendisine gelen "Youtube'da nasıl popüler olurum" sorularını yanıtlamış.

Kimisine göre sıradan görünen bu tavsiyeler bence çok faydalı ve orijinal çalışmak isteyenlere bir yol çizebilecek ufak püf noktaları içerdiği için videoda anlatılanları anladığım kadarını birkaç maddede sizler için özetlicem.

1) 12 yaşında bir çocuk gibi düşünün:

Yapacağınız paylaşımları 12 yaşında bir çocuğun mantığıyla paylaşılması gerektiğinden, paylaşımlarınızın cafcaflı bir şekilde yani dikkat çekici olmasını söylüyor. Videolar aranırken genelde düz mantıklarda arandığını unutmayalım ve yine biz etiket diye kasarken bazı kullanıcıların çok sade başlıklarla milyon hitler aldığını hatırlayalım.


2) Sesiniz çıksın (neşeli olun):

Karizmatik olacağım diye kasmayın videonuzda sesinizi saçma sapan kullanın, yeri gelince çığlık atın yeri gelince küfür edin, insanların sizi saçma bulmasından çekinmeyin çünkü çoğu sizi daha da eğlenceli bulacaktır. 

3) Çok tutması beklenen ya da bir anda çok tutan bir şeylere ilk yorumu siz atın:

Bu maddeyi çok önemli buldum bir kısmımız (özellikle Türkçe içerik çalışanlar) bu maddeyi zaten kullanıyor. Yabancı içeri çalışan arkadaşlar içinde bu geçerli. İlk yorumu güzel yapıp çok fazla beğeni aldıysanız 1000 beğeniden muhakkak hatırı sayılır bir yüzdelik kısım sizin kanalınızı kontrol edecektir.

Yani yorumunuzda illaki "kanalıma bakın, beni de takip edin" tarzında yazılar yazmayın. Kısa ve komik bir cümleyle işi kotarın.

4) Firikik:

Burada ilk etapta kadınları kastetmiş; yani kamera karşısında bir çekim yapıyorsanız askılı giyinin biraz firikik verin tarzında şeyler söylemiş ki bu konuda da çok haklı japonca eğitimi veren kızın videosunu bilmeyen çok azdır diye düşünüyorum.

Erkekseniz de korkmayın (diyor) youtube gösterim şartlarını ihlal etmeyecek şekilde modeller bulup küçük resim olarak ekleyebilirsiniz ya da videonuzun içerisine birkaç saniye olacak şekilde bu fotoğraflardan koyabilirsiniz. Bu şekilde youtube kurdu olmayan ve ne olduğunu merak edip tıklayacak birçok üyeyi videonuza çekebilirsiniz. Bu noktada da haklı birçok derleme videosunda gördüğümüz gibi küçük resimi kadın ve firikikle oluşturulan bir video genellikle çok daha fazla hit alır.

5) Başlıklarınızı çekici hale getirin:

Başlığınızda herhangi bir dedikodu paylaşıp konunuzun çok daha çekici hale gelmesini sağlayabilirsiniz. Ünlü kişiler ve yaşamları malum Youtube'un en çok hit alan konularındandır. Bir şarkıcı hakkında ilginç başlıklar açıp süslü anlatımlarla güzel hitler kapabilirsiniz.

Not: Kesinlikle bire bir çeviri değildir dinleyip kendim için tavsiye niteliğinde olan şeyleri kendi yorumumu katarak sizlere anlattım. Bana faydası oldu ve olacaktır. Özellikle özgün işinde popüler olmak isteyen arkadaşlar bu tavsiyelerden yararlanabilir.

Yani her kanal ciddi ve karizmatik olmak zorunda değildir. Çığlık atarak, kahkahalı anlatımlarla, bol esprilerle veya cıvıklıklarla da youtube üzerinde çok popüler birisi olabilirsiniz.

Yazı uzun oldu okuyanlara bol kazançlar umarım faydalı olmuştur.

15 Kasım 2016 Salı

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

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

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

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ı

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

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

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.