Son zamanlarda etkin kullanılan ve kullanımı bir hayli yaygınlaşan instagram ile paylaştığınız resimleri blogunuzda da görüntüleyebilmek için bloggere özel üretilen blogger instagram eklentisi ile instagram hesabınızda paylaştığınız bir resmi aynı zmanda blogunuzda da yayınlama imkanını bulabilirsiniz.Eğer ilgi çekici resimler paylaşırsanız blogunuzu takip eden kişiler bir süre blogger instagram eklentisi sayesinde instagram hesabınızı da takip etmeye başlayacaktır böylelikle instagramda takipçilerinizi arttırmak için blogunuzu da kullanmış olursunuz ve blogunuzu yeni bir eklenti (blogger instagram eklentisi) kazandırmış olursunuz.
Demo Görünüm
Blogger İnstagram Eklentisini Bloguma Nasıl Eklerim?
1-Buraya tıklayarak siteye giriş yapıyoruz.
2-Açılan Sayfadaki formu aşağıdaki gibi dolduruyoruz.
3-Oluşturduğumuz blogger instagram eklentisinin nasıl göründüğüne bakmak isterseniz, yukarıdaki resimde görünen mavi renkli Preview butonuna basın.
4-Kod Oluşturmak için de yeşil renkli Generate code butonuna basın.Butona bastığınızda aşağıdaki gibi bir kod sayfası açılacak.
5-Yukarıdaki resimde gördüğünüz pencerede açılan ve sizin ayarlarınızı barından kodu kopyalıyoruz.
6-Blogger hesabımızla giriş yapıyoruz.
7-Kumanda Paneli>Yerleşim modunu açıyoruz ve buradan Gadget Ekle>HTML/JavaScript gadgetini seçiyoruz.
8-Açılan Gadget penceresine 4.adımda resimde gördüğümüz ve kopyaladığımız kodu yapıştırıyoruz.
9-Kaydet butonuna basıp çıkıyoruz.
10-Blogger İnstagram eklentisi blogunuza eklenmiş oldu.
Dilerseniz eklediğiniz Blogger İnstagram eklentisini yerleşim modundayken sürükle bırak yöntemi ile blogunuzda istediğiniz bir alana sürükleyip bırakabilirsiniz.
İnstagram hesabımızı burdan takip edebilirsiniz. @blogokulu
Blogger gadget ekleme yöntemiyle bir kaç tık sonunda blogunuzda navigasyonlu bir dikey menü olmasını istermisiniz ? Blogger dikey menü ile blogunuzun kenar çubuğunda, footer (alt alanlara) menüler ekleyebilir istediğiniz şekilde linkler verebilirsiniz. Blogger dikey menü eklentisini gadget olarak blogunuza eklemek için yapmanız gerekenleri maddeler halinde sıralyacağız. Bu maddeleri sırası ile okuduğunuzda ve uyguladığınızda sizde blogger dikey menü eklentisini blogunuza eklemiş olacaksınız.

Blogger Dikey Menü Eklentisini bloguma nasıl eklerim?
1-Blogger Hesabınızla giriş yapın.
2-Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip, açılan pencereye aşağıdaki kodu kopyalayıp yapıştırıyoruz.

<!-- Blogger Dikey Menu Code From http://www.blogokulu.org/ --> 
<style>
#v-menu {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#v-menu {
    width: 275px;
}
#v-menu ul {
    list-style: none;
    text-indent: 0px;
}
#v-menu li {
    margin-top: 0px;
    border-bottom: 1px solid #414141;
}
#v-menu a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-weight:bold;
    font-variant: inherit;
    padding: 0px;
    color:#CCC;
    display: block;
    padding: 13px 50px;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEStN6MiZKFHTpXbODucQv9BWUdgMA4WBv0jmFDLKmbP2yQ8DezHVf9EIbwIVC6n-P6OImUKPnQTDQfZg3QO-wo7Qpa4ieiygm-k6tRBpIEjJfEwVgXjhNAg8EHnONF8ic1O4aM8a45VGZ/s1600/menu-bg.png) no-repeat;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#v-menu a:hover {
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOqKxXSBc7igwY3VTXrbl0XbjYoVJ1-QPu4Uthc9Fr6ooar_ICtVdIbtM8ik0tIvyXQU05FIQu34DM5w1UpsiKvhM2WRCwMG8VCR8172oIFxC_o3HOD57r31apJe9i8y0iCF8tCdCxQIm/s1600/hover-bg.png) no-repeat;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
   
}
#v-menu a:visited {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOqKxXSBc7igwY3VTXrbl0XbjYoVJ1-QPu4Uthc9Fr6ooar_ICtVdIbtM8ik0tIvyXQU05FIQu34DM5w1UpsiKvhM2WRCwMG8VCR8172oIFxC_o3HOD57r31apJe9i8y0iCF8tCdCxQIm/s1600/hover-bg.png) no-repeat;   
}
#v-menu a:active {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOqKxXSBc7igwY3VTXrbl0XbjYoVJ1-QPu4Uthc9Fr6ooar_ICtVdIbtM8ik0tIvyXQU05FIQu34DM5w1UpsiKvhM2WRCwMG8VCR8172oIFxC_o3HOD57r31apJe9i8y0iCF8tCdCxQIm/s1600/hover-bg.png) no-repeat;   
}
</style>
<div id='v-menu'>
<ul>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
<li><a href="URL ADRESİNİZ">blogokulu</a></li>
</ul>
</div>
<!-- Blogger Dikey Menu Code From http://www.blogokulu.org/ -->
Kod içerisinde mavi renkle belirttiğimiz “URL ADRESİNİZ” kısmına adresimizi yazıyoruz, kırmızı yere ise menudeki ismi yazıyoruz.
Örnek:
<li><a href="http://www.blogokulu.org/2014/11/blogger-dikey-menu-eklentisi-navigasyonlu

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.
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.
Özel alan adı yani domain konusu çok istendi, çok soruldu, çok araştırıldı biliyorum. Blogunuzda kendi alan adınızı kullanma konusunu yazmadan önce ilk adım olan domain seçme ve domain satın alma konusu üzerinde durmak istiyorum.

Domain yani alan adı seçimi konusunda dikkatli davranmalısınız çünkü blogunuzun alan adını canınız her istediğinde değiştiremezsiniz. Teknik olarak belki mümkün ama alan adı değiştirmek size ziyaretçi, Google sıralaması ve itibar kaybı olarak geri döner. Bu nedenle alan adınızı bir kez, dikkatli bir şekilde seçin ve blogunuz bundan sonraki yaşantısına hem o alan adıyla devam etsin.

domain


Domain (alan adı) seçerken dikkat edilmesi gerekenler

1. Çok uzun olmamalı

Blogunuzun ismi ile aynı alan adına sahip olmak zorunda değilsiniz. Blogunuzun ismi çok uzun olsa bile alan adınızı daha kısa tutmanız akılda kalıcılık ve paylaşımlarda kolaylık nedeniyle önemlidir.

2. Telaffuzu kolay olmalı

Telaffuzu kolay domainler daha akılda kalıcı, paylaşılmaya daha müsait ve markalaşmak için daha uygundur. Örneğin telefonda bir arkadaşınıza blogunuzun adresini söylerken hiçbir karışıklığa mahal vermeyecek, karşınızdakinin tk söyleyişte kolayca anlayaağı bir domain tercih etmelisiniz.

3. Anahtar kelime içermesi önemlidir

İlk iki faktör daha çok psikolojik faktörlerdi. Bu ise SEO faktörü. Domainde hedef anahtar kelime geçmesi, o blogun konusu direkt belli ettiği için arama sonuçlarında büyük avantaj sağlar. Eğer mümkünse hedef anahtar kelimeyi içeren bir domain tercih edin. Örneğin moda ile ilgili bir blogunuz varsa domainde moda kelimesinin geçmesi moda aramalarında size fayda sağlar.

4. Sicili temiz bir domain seçin

Alan adı satın alırken o alan adının almaya uygun olması, daha önce kullanılmadığı anlamına gelmez. Bu alan adı daha önce başka kişiler tarafından kullanılmış, Google’dan ve AdSense’den ban yemiş olabilir. Bu nedenle alan adını almadan önce sicilini araştırmanızı şiddetle öneririm. Bunu nasıl yapabileceğinizi yazının devamında okuyabilirsiniz.

5. Mümkünse Com uzantı tercih edin

Bir alan adının .com, .net, .org gibi uzantıları pek çok uzantısı olabilir. Bazıları ucuz olduğu için .xyz gibi garip alan adlarını satın alabiliyor. Fakat bilinmesi gerekir ki .com uzantılı domainler her zaman daha fazla trafik getirir ve psikolojik olarak daha etkilidir. Tabi eğer bütçeniz varsa tüm uzantılarını almanız ve taklitlerinize karşı önlem almanız iyidir

6. Sadece harf içerisin

Blogunuzun isminin “moda kalbi” olduğunu düşünün. Sırf iki kelimeli diye araya – koyarak moda-kalbi.com şeklinde bir domain almanız gerekmez. Bunun yerine bitişik olanı yani modakalbi.com tercih etmelisiniz. (Böyle bir site gerçekten var mı yok mu bilmiyorum. Örnek vermek için şuan uydurdum :)) Ayı şekilde domainlerde 1,2,3 gibi rakamları da kullanmanızı önermem.

Bir domainin geçmişi nasıl araştırılır?

Yukarıdaki kriterler doğrultusunda bir alan adına karar verdikten sonra bu alan adının sicilini araştırmamız gerektiğini söylemiştim. Bunun için şu işlemleri yapabilirsiniz:

- Banned Check:  Bu aracı kullanarak her hangi bir web sitesinin AdSense veya Google tarafından ban yiyip yemediğini kontrol edebilirsiniz. Yapmanız gereken şey sayfanın alt tarafındaki kutuya domaini yazıp submit butonuna basmak.

- Wayback Machine: Bu aracı kullanarak her hangi bir sitenin yıllar önce bile kaydedilmiş hallerini görebilirsiniz. Böylece alacağınız domainin daha önce nasıl bir site için kullanıldığını, kötü bir izlenimi olup olmadığını kontrol edebilirsiniz.

Blogger İçin Alan Adı (Domain) nereden ve nasıl alınır?

Domain almak için GoDaddy, İsimtescil ve IHS gibiyerli ve yabancı pek çok aracı firma var. Fiyatlar da hemen hemen aynı. Fakat ben kullanım kolaylığı ve Blogger’a kolayca uygulanması nedeniyle IHS’den alan adı satın almanızı öneririm. Zira satın aldığınız alan adını Blogger blogunuza uygulamayı da IHS üzerinden anlatacağımı belirtmek isterim.

IHSden domain satın almak için şu adımları izleyin:

1. IHS ana sayfasına giderek almak istediğiniz alan adını sorgulatın..
2. Alan adı müsait ise sepete ekleyin.
3. Kaç yıllığına alacağınızı seçip devam edin.
4. IHS üyeliğini tamamlayıp ödeme yöntemini seçin ve satın alma işlemini tamamlayın.

Gerekli bilgiler ve detaylar e-mail adresinize gönderilecektir.

Artık bir alan adınız ver önümüzdeki günlerde yayınlayacağım detaylı bir yazı ile bu alan adını blogunuzda nasıl kullanacağınızı öğreneceksiniz.
Google de birinci sırada çıkmanın sırrı çözülmüş olsa, ve her yazdığınız makale ile google aramalarda ilk sayfada çıksanız, müthiş bir keyif alırdınız değil mi? Google aramalarında bir kez ilk sırada çıktığınızda artık geriye dönüş yoktur. Evet sonunda hak ettiğim yerdeyim der ve geriye yaslanıp, Google Analytics den Gerçek Zamanlı sekmesine basıp tadını çıkartmaya başlarsınız. Bir hangi içeriğe girildiğini merak eder, bir trafik kaynağına bakarsınız. Arada birde mobil mi? Masa üstü mü? Google da birinci sırada çıkmak hazırlıksız yakalanan blog yazarının aklını başından alır.

İlk sayfa da bile çıkmanın yanına yaklaşamayan yüz binlerce yazar varken, nasıl Google Birinci Sırada Çıkmakdan bahsedersin diyenleri ve haklı isyanlarını duyar gibiyim. İçimizden bazıları da ne isyanı ver artık şu formülü diyor. Arkadaşlar içiniz rahat olsun bunun formülünü vereceğim. Fakat yıllarca kafa patlatıp ele geçirdiğim bu formülü her halde ilk satırlarda açıklayacak değilim:). Şundan emin olun. Yazı bittiğinde sizdeGoogle aramalarda ilk sırada çıkmanın keyfini yaşamaya aday bir yazar olacaksınız.

Hayal değil gerçek örneklerle, Google da ve diğer arama motorlarında ilk sırada çıkan yazılarım ile size yol göstermeye çalışacağım. Sizden ricam bu olayı sadece bir kez önce hayal etmeniz. Gözlerinizi kapatın. Sitenizdeki sayfa sayacının delirmiş gibi saniyede bir attığını düşünün. Hayali bile yetti değil mi? Gelsin ilk sıralar, ziyaretçiler, İnternet alemi admin görsün, blogger görsün. Sen değil miydin Google aramalardan günde 2 tekil gönderen? Şimdi yaktım çıranı Google efendi. Çıkarma beni ilk sırada da göreyim. Hayal etmeye devam. Delinin biri bu formülü ele geçirse. Çok gizli algoritmaları çözse, ne bileyim yada Türk usulü bir aracı koyup, Google merkezden bu tekniği sızdırsa.

Bunu hayal eden arkadaşlar yazımızı okumaya devam etsin. Hayal etmeyenler için yazının son cümlesi bu olsun. Biz geride kalanlar ile devam edeceğiz. Hayal etmek başarıya giden yolda yanımızdan ayırmayacağımız bir yol arkadaşı olacak. Hayal gücümüz bize yazımızı yazarken, blog da seo yaparken, ön izlemede yayına vermeden önce son rötuşlar için hep lazım olacak. Artık madde madde gidebiliriz. Google Birinci sırada çıkmanın altın formülü neymiş öğrenebiliriz.

google-siralamalar

Google da 1. Sırada Çıkmanın Sırrı

Google da 1. sırada çıkmak için ilk önce hayal etmeyi öğrenmeniz gerekir. Herkes nasıl olur derken, ben ilk sayfada çıkamayan blogcu arkadaşlara şaşıyorum. Tamam ilk sıra çok iddialı ama ilk sayfa asla imkansız değil arkadaşlar. Dünya üzerinde hiç bir formül yoktur ki sizi ilk yazınızda ilk sırada çıkarsın. Google gerek web mastırı gerekse blog yazarını bir gelişim süreci içerisinde takip eder. Ve gösterdiği performans çerçevesinde Google aramalarda yerini belirler. Bu kadar kapsamlı bir konuyu teknik detaylara boğmadan sizlere sunacağım. Yukarıda ki Google sıra sorgulama işleminde sadece ilk sırada değil ayrıca 2. sırada da yine e aktuel urunler.com yani biz varız. Hemen altta yer alan tablo da ise görüntülenme sayımız mevcut. Bu rakamlara ulaşmak asla imkansız değil. Gelin hep birlikte Google da 1. Sırada Çıkmanın Sırrı neymiş okumaya ve uygulamaya başlayalım.

arama-siralari

Sitenizi yayına verdiniz. Birinci makaleniz üzerinden bir kaç gün geçti ikinciyi de yayımladınız. Artık bir haftalık bir siteye sahipsiniz. Fakat giden gelen yok. İlk indexi almak kolay değildir. Google indexinizi sağlayan ve Örümcek olarak adlandırılan Google Botları blogunuzu muhtemelen bir hafta içinde tanımaya başlar. Bunun içinde aralarında en tecrübesiz olanı size yönlendirir. Halk dilinde biz bunlara ayakçı deriz. Fakat işi askeri sistem içerisinde anlatmak en ideali olacak. Sitenize ilk gelen asker (örümcek, google botu) Er dir. Yani gel dersin gelir, git dersin gider. İlk 15-20 içeriğinizde Er rütbeli örümcek, blog içeriğiniz ile ilgili detayları, yazılarınızın güncellenme sıklığını ve kategorik durumunu On başı olan üstüne rapor eder. Burası sizin ilk geçeceğiniz sınavın yeridir. Onbaşı elindeki raporlara bakarak sizi kendisi denetlemeye karar verir yada Er olan örümceğe dönerek, sen bunları15 gün daha gözlem altında tut der. İlk aşamayı tek seferde geçemeye bakın yoksa O 15 günlerin arkası gelmez. Peki Google 1. sırada çıkmanın sırrını bize getirecek ilk aşamayı nasıl geçeceğiz de sitemizi On Başına denetlettireceğiz.

  • Sitemizin adı ile gireceğimiz içeriklerin başlıkları aynı kelimeler içerisinde yer alması gerektiğinden Blog yada Site adımızı seçerken çok iyi düşünmeliyiz. En kısa ve en net olan alan adını seçmeliyiz. İleride Google Adsense ağından para kazanacağımız için Adsense uygun olmayan alan adlarından uzak durmalıyız. Nasıl mı? Ben alan adımı alırken Bim aktüel ürünler ya da a101 aktüel ürünler gibi bir seçim yapabilirdim. Yapmadım neden? Markalara ait alan adları Adsense politikalarına uygun olmaz da ondan. İleride başvurunuz telif hakları ihlali adı altında değerlendirilir. Bu yüzden Ben blogumu en iyi anlatacak ve yaptığım işi özetleyecek olan E Aktüel Ürünler .com adlı alan adını seçtim.
  • Tema seçimi 15 günde 2. aşamaya geçme yolunda bizim elimizden tutmalı, sıkıntı anında destek olacak bir dost gibi olmalı. İlk okul çocuklarının resim kâğıdına yaptığı sulu boya gibi sağı solu akmamalı. Temaya kafa yormayın diyen yazılara aldanmayın, tema isimden sonra gelir. Bu dönemde dikkat edeceğiniz en önemli kıstas temamızın mobil uyumlu olup olmadığıdır. Google da tema ararken Responsive kelimesini yazarak tema araması yapın.  Market yada mağaza sitesi mi yapıyorsunuz responsive online mağaza teması gibi arama yapın. Ve seçtiğiniz temanın mobil uyumu var mı? Mutlaka öğrenin. 2015 Mobil yılı olacak. Abartma demenize gerek yok. Bakın sizlerin bile birçoğunu bu yazıyı cep telefonundan okuyor.
  • Alan adını ve tema işini hallettiğimize göre sıra geldi içerik oluşturmaya. Maalesef bunun için biraz daha bekleyeceksiniz. Yok öyle hemen iki günde içerik oluşturmaya başlamak. Şimdi sırada En az bir sosyal medya ağında kendinize sayfa hazırlamalısınız. Bizim en aktif olduğumuz ağ Facebook sonra Youtube. Siz en az birinde görseli, tasarımı, blog ile ilgili bağlantı linkleri v.s hepsini tamamlanmış bir pozisyon da yayına hazırlık yapmalısınız. İşin bu ayağı halledildikten sonra içerik oluşturmak için son aşamaya 1 adım kaldı demek. 
  • Oluşturacağınız içerik ile ilgili anahtar kelime analizleri yapmayı öğreneceksiniz. Bunun nasıl yapıldığını Blog Hocam'ın Google İle Anahtar Kelime Araştırması adlı yazısından öğrenebilirsiniz.
  • Nihayet yazımızı yazmaya başlayabiliriz. Şimdiye kadar yaptıklarımızı gözden geçirelim.
    • Hangi Konuda yazacağımızı belirledik
    • Buna uygun, blogu en iyi anlatacak maksimum 3 kelimeden oluşan bir alan adı yine üç yıllığına satın aldık.
    • Temamızı seçerken Responsive yani Mobil uyumlu olmasına özen gösterdik.
    • Sosyal Medya sayfaları oluşturduk.
    • AdWords Anahtar Kelime planlayıcı ve diğer yöntemlerle Anahtar kelime analizi yapmayı öğrendik.
Buraya kadar her şeyi tas tamam. Ve bunları iki günde yaptık. Olmaz arkadaşlar. İki günde bu kadar işi hallede biliyorsanız şimdiye kadar köşe olmanız gerekirdi. Öyle olmadığına göre çok acele hareket ediyorsunuz. Sadece doğru temayı bulmak bile benim 1 günümü aldı. Nerede bunun alan adı, kelime planlama. Sonra olmadı hocam. Olmaz tabi. Acelemiz yok. İşi oluşum aşamasında aceleye getirirseniz Er olan asker ile her 15 günde bir görüşürsünüz. İnce eleyip sık dokuyacağız. Kuruluş aşamasında atacağımız bu temelin üzerine sitemizin kolonları yerleştireceğiz. Bu kolonlar bizi Google da 1. sırada çıkaracak yazıları taşıyacak. Şu anda biz öyle sağlam bir temel atıyoruz ki, hiç bir Google Güncellemesi bırakın yıkmayı sallayamayacak bile. Her güncelleme bizim lehimize olacak.

Benim tavsiyem şu dur; ben her konuda yazabilirim diyorsanız, alan adını almadan anahtar kelime planlayıcı aşamasını birinci sıraya koyun. Belirlediğiniz konular hakkındaki anahtar kelime araştırması yapın. Ve rekabet edebileceğinize inandığınız anahtar kelimelerden oluşan bir blog yapın. Yok, ben her konuda yazamam, uzman olduğum alanda ilerleyeceğim diyorsanız sıralamayı değiştirmenize gerek yok. Saydığım adımlar arasında mutlaka zaman aralığı yerin. Kafanızı rahatlatacak şeyler yapın. Alan adını buldum diye hemen satın almayın. İki, üç saat hava alın, kafanızı dağıtın ve rahatlamış beyinle bilgisayar başına oturun.

Google Örümcekleri için artık hazırız. Yaptığımız blogun temeli o kadar sağlam ki, artık örümcekler bizden korksun. Şimdiye kadar yazdıklarım blogunuzu zirveye taşıyacak ve orada kalmanızı sağlayacak olan yazı dizimin en önemli yapı taşları idi. Bu temel üzerine öyle bir bina yapmalıyız ki, Sultan Ahmet Camisi gibi, Ayasofya müzesi gibi, Taç Mahal gibi hatta Çin Setti gibi. Gelen tekrar gelmeli, gören memleketinde eşine dostuna onu anlatmalı. 2500 yıllık Kız Kulesi gibi her daim ayakta kalıp, varlığıyla ben buradayım demeli. Fark ettiniz değil mi? Bu yapıların en büyük ortak özelliği sağlamlığı ve mimarisi. Bizler blogumuzun mimari işini tema konusu ile çözdük. Yüzdük yüzdük kuyruğuna geldik. Google da 1. çıkmak için bunlar yeterli mi? Hepsi bu kadar mı? Hayır arkadaşlar hepsi bu kadar değil. Yapımızın kolonları olarak tabir ettiğim 2. aşamada kaliteli ve Google uyumlu yazı nasıl yazılır, onu anlatacağım.
Kişisel blog yazarken platform olarak Blogger kullanıyorsanız, muhtemelen blogunuzu kendinize özgü ve şekil olarak güzelleştirmek içinde bir çaba sarf ediyorsunuzdur.Blogunuza eşsiz güzellik katacak olan Blogger Popüler yazılar widgetini görünüm olarak CSS kodları ile değiştirip blogunuzu göz alıcı yapmak ve internetteki birçok blog sayfalarından görünüm olarak bir adım önde olmanızı sağlayacak eklentiyi sizlerle paylaşacağız.Blogger Popüler yazılar eklentisi, görünüm farklılığı sayesinde sitenizi sürekli ziyaret eden takipçilerinde dahi dikaktini çekerek hedef kitlenizi arttırmaya yönelik bir çalışma olacak diye tahmin ediyorum.Bu eklentide anlatacaklarımızı blogunuzda Blogger Popüler yayınlar widgeti kurulu olanlar 5.Adımdan başlayarak takip edip uygulamaya başlayabilirler.Blogunda blogger popüler yayınlar eklentsisi hiç olmayanlar 1. maddeden başlasınlar.



Blogger Popüler Yayınlar Eklentsi Kurulumu

1-Blogger Hesabınızla giriş Yapın.
2-Yerleşim>Gadget Ekle Yolunu Takip Edin.
3-Açılan Pencerede Popüler Yayınlar Gadgetini tıklayın, aşağıda resimde görüldüğü gibi.

4-Popüler Yayınlar Gadgeti Ekle Butonuna tıkladığınızda aşağıdaki gibi bir pencere açılacak, bu pencerede ilgili kısımlardaki ayarlamalar Türkçe olarak verilmiştir,bunları kendinize göre ayarlayın.(Snippet yazan kısım, ilgili yazıdan kısa bir özet alarak görüntülensin/görüntülenmesin)

5-Bundan sonra anlatacaklarımız ise Blogger Popüler Yayınlar Eklentisini şekil olarak değiştirmenize yarayacak bilgilerdir.

 Aşağıda yer alan 5 farklı şekildeki blogger popüler yayınlar eklenti şekli için önce script kodu ekliyeceğiz ve ardından beğendiğimiz bir görünümün CSS kodunu alıp blogumuza uygulayacağız.

Blogger Popüler Yayınlar Eklentisini şekil olarak değiştirmek için ekliyeceğimiz scrip kodu:

Blogger>Şablon>Htmlyi Düzenle Yolunu takip edip HTML kodları içeriisnde Ctrl+F yardımı ile </head> kodunu aratıp bulun ve aşağıdaki kodu kopyalayıp bulduğunuz </head> kodundan önceki kısma yapıştırın.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>
6-Şimdi ise aşağıdaki Popüler yazılar stilinden hangisini beğeniyorsak onun kodunu alıp, Şablon>HTML'yi Düzenle yolunu takip edip HTML kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu bulup ilgili stilin altında bulunan CSS kodunu kopyalayıp bulduğumuz ]]></b:skin> kodunun üst satırına yapıştırıyoruz.


Blogger Popüler Yayınlar Eklentyisi Stil 1: (Resim Üzerinde Kutu Şeklinde Başlık)


<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>

Blogger Popüler Yayınlar Eklentisi Stil 2:(Resim Altında Başlık ve Açıklama)

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>

Blogger Popüler Yayınlar Eklentyisi Stil 3:(Renkli Kututlar içinde Açıklama)

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

Blogger Popüler Yayınlar Eklentyisi Stil 4:(Kare Kutucuk Şeklinde)

<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

Blogger Popüler Yayınlar Eklentyisi Stil 5:(Numaralı Kutucuklar Halinde)

<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>

Son olarak Şablonu kaydet deyip çıkıyoruz.
Eğer verilen kodları doğru yerleştirdiyseniz seçtiğiniz Blogger Popüler Yayın Eklenti Stili sitenizde görünecektir.


Kayan yazı kodları sayesinde sitenizde-bloğunuzda duyuru panoları,mesaj panoları vb. şeyler oluşturabilirsiniz.Yapmanız gereken sola doğru kayan yazı-sağa doğru kayan yazı-aşşağı doğru kayan yazı-iki tarafa çarpıp dönen yazı-aşşağıdan yukarı akan yazı-yukardan aşşağı akan yazı-yukarı aşşağı çarpıp dönen yazı-kare içerisinde kayan yazı-yanıp sönen titrek yazı-iki satır zıplayan yazı ve maus üzerine geldiğinde duran yazı tiplerinden istediğinizi seçmek ve yazmak istediğiniz şeyleri "YAZINIZI BURAYA YAZIN" yazan yere istediğinizi yazmak.





SOLA DOĞRU KAYAN YAZI
YAZINIZI BURAYA YAZINIZ

SAĞA DOĞRU KAYAN YAZI
YAZINIZI BURAYA YAZIN

İKİ TARAFA ÇARPIP DÖNEN YAZI
YAZINIZI BURAYA YAZIN
,

AŞŞAĞIDAN YUKARI AKAN YAZI
YAZINIZI BURAYA YAZIN

YUKARIDAN AŞŞAĞI AKAN YAZI
YAZINIZI BURAYA YAZIN

AŞŞAĞI YUKARI ÇARPIP DÖNEN YAZI
YAZINIZI BURAYA YAZIN

KARE İÇERİSİNDE SOLA DOĞRU KAYAN YAZI
 YAZINIZI BURAYA YAZIN

YANIP SÖNEN TİTREK YAZI
YAZINIZI BURAYA YAZIN

İKİ SATIR ZIPLAYAN YAZI
YAZINIZI BURAYA YAZIN
YAZINIZI BURAYA YAZIN

AŞŞAĞIDAN YUKARI KAYAN YAZI
(MAUS ÜZERİNE GELDİĞİNDE YAZI DURUYOR)
YAZINIZI BURAYA YAZIN

SOLA DOĞRU KAYAN YAZI
(MAUS ÜZERİNE GELİNCE YAZI DURUYOR)
Kod içerisindeki "width" değerini değiştirerek yazının kayma mesafesini, "scrollamaunt" değerini değiştirerek de yazının geçiş hızını ayarlayabilirsiniz.

YAZINIZI BURAYA YAZIN




HTML renk kodları, web tasarımcıları için müthiş bir kaynak.Artık arka plan, metin ve tablo renklerinizi istediğiniz gibi rengi görerek, seçme ve ayarlama şansınız var.300 den fazla HTML renk kodunu karşılarında temsil ettikleri renklerle ve rengin ismiyle birlikte yayınlıyoruz.Renk seçiminde ayrıca daha önceden eklediğimiz html renk kodu buluma aracını da kullanabilirsiniz.


KODRENK
#000000Black
#150517Gray0
#250517Gray18
#2B1B17Gray21
#302217Gray23
#302226Gray24
#342826Gray25
#34282CGray26
#382D2CGray27
#3b3131Gray28
#3E3535Gray29
#413839Gray30
#41383CGray31
#463E3FGray32
#4A4344Gray34
#4C4646Gray35
#4E4848Gray36
#504A4BGray37
#544E4FGray38
#565051Gray39
#595454Gray40
#5C5858Gray41
#5F5A59Gray42
#625D5DGray43
#646060Gray44
#666362Gray45
#696565Gray46
#6D6968Gray47
#6E6A6BGray48
#726E6DGray49
#747170Gray50
#736F6EGray
#616D7ESlate Gray4
#657383Slate Gray
#646D7ELight Steel Blue4
#6D7B8DLight Slate Gray
#4C787ECadet Blue4
#4C7D7EDarkSlate Gray4
#806D7EThistle4
#5E5A80Medium Slate Blue
#4E387EMedium Purple4
#151B54Midnight Blue
#2B3856Dark SlateBlue
#25383CDark Slate Gray
#463E41Dim Gray
#151B8DCornflower Blue
#15317ERoyal Blue4
#342D7ESlate Blue4
#2B60DERoyal Blue
#306EFFRoyal Blue1
#2B65ECRoyal Blue2
#2554C7Royal Blue3
#3BB9FFDeep Sky Blue
#38ACECDeep Sky Blue2
#357EC7Slate Blue
#3090C7Deep Sky Blue3
#25587EDeep Sky Blue4
#1589FFDodger Blue
#157DECDodger Blue2
#1569C7Dodger Blue3
#153E7EDodger Blue4
#2B547ESteel Blue4
#4863A0Steel Blue
#6960ECSlate Blue2
#8D38C9Violet
#7A5DC7Medium Purple3
#8467D7Medium Purple
#9172ECMedium Purple2
#9E7BFFMedium Purple1
#728FCELight Steel Blue
#488AC7Steel Blue3
#56A5ECSteel Blue2
#5CB3FFSteel Blue1
#659EC7Sky Blue3
#41627ESky Blue4
#737CA1Slate Blue
#737CA1Slate Blue
#98AFC7Slate Gray3
#F6358AViolet Red
#F6358AViolet Red1
#E4317FViolet Red2
#F52887Deep Pink
#E4287CDeep Pink2
#C12267Deep Pink3
#7D053FDeep Pink4
#CA226BMedium Violet Red
#C12869Violet Red3
#800517Firebrick
#7D0541Violet Red4
#7D0552Maroon4
#810541Maroon
#C12283Maroon3
#E3319DMaroon2
#F535AAMaroon1
#FF00FFMagenta
#F433FFMagenta1
#E238ECMagenta2
#C031C7Magenta3
#B048B5Medium Orchid
#D462FFMedium Orchid1
#C45AECMedium Orchid2
#A74AC7Medium Orchid3
#6A287EMedium Orchid4
#8E35EFPurple
#893BFFPurple1
#7F38ECPurple2
#6C2DC7Purple3
#461B7EPurple4
#571B7eDark Orchid4
#7D1B7EDark Orchid
#842DCEDark Violet
#8B31C7Dark Orchid3
#A23BECDark Orchid2
#B041FFDark Orchid1
#7E587EPlum4
#D16587Pale Violet Red
#F778A1Pale Violet Red1
#E56E94Pale Violet Red2
#C25A7CPale Violet Red3
#7E354DPale Violet Red4
#B93B8FPlum
#F9B7FFPlum1
#E6A9ECPlum2
#C38EC7Plum3
#D2B9D3Thistle
#C6AEC7Thistle3
#EBDDE2Lavender Blush2
#C8BBBELavender Blush3
#E9CFECThistle2
#FCDFFFThistle1
#E3E4FALavender
#FDEEF4Lavender Blush
#C6DEFFLight Steel Blue1
#ADDFFFLight Blue
#BDEDFFLight Blue1
#E0FFFFLight Cyan
#C2DFFFSlate Gray1
#B4CFECSlate Gray2
#B7CEECLight Steel Blue2
#52F3FFTurquoise1
#00FFFFCyan
#57FEFFCyan1
#50EBECCyan2
#4EE2ECTurquoise2
#48CCCDMedium Turquoise
#43C6DBTurquoise
#9AFEFFDark Slate Gray1
#8EEBECDark slate Gray2
#78c7c7Dark Slate Gray3
#46C7C7Cyan3
#43BFC7Turquoise3
#77BFC7Cadet Blue3
#92C7C7Pale Turquoise3
#AFDCECLight Blue2
#3B9C9CDark Turquoise
#307D7ECyan4
#3EA99FLight Sea Green
#82CAFALight Sky Blue
#A0CFECLight Sky Blue2
#87AFC7Light Sky Blue3
#82CAFFSky Blue
#79BAECSky Blue2
#566D7ELight Sky Blue4
#6698FFSky Blue
#736AFFLight Slate Blue
#CFECECLight Cyan2
#AFC7C7Light Cyan3
#717D7DLight Cyan4
#95B9C7Light Blue3
#5E767ELight Blue4
#5E7D7EPale Turquoise4
#617C58Dark Sea Green4
#348781Medium Aquamarine
#306754Medium Sea Green
#4E8975Sea Green
#254117Dark Green
#387C44Sea Green4
#4E9258Forest Green
#347235Medium Forest Green
#347C2CSpring Green4
#667C26Dark Olive Green4
#437C17Chartreuse4
#347C17Green4
#348017Medium Spring Green
#4AA02CSpring Green
#41A317Lime Green
#4AA02CSpring Green
#8BB381Dark Sea Green
#99C68EDark Sea Green3
#4CC417Green3
#6CC417Chartreuse3
#52D017Yellow Green
#4CC552Spring Green3
#54C571Sea Green3
#57E964Spring Green2
#5EFB6ESpring Green1
#64E986Sea Green2
#6AFB92Sea Green1
#B5EAAADark Sea Green2
#C3FDB8Dark Sea Green1
#00FF00Green
#87F717Lawn Green
#5FFB17Green1
#59E817Green2
#7FE817Chartreuse2
#8AFB17Chartreuse
#B1FB17Green Yellow
#CCFB5DDark Olive Green1
#BCE954Dark Olive Green2
#A0C544Dark Olive Green3
#FFFF00Yellow
#FFFC17Yellow1
#FFF380Khaki1
#EDE275Khaki2
#EDDA74Goldenrod
#EAC117Gold2
#FDD017Gold1
#FBB917Goldenrod1
#E9AB17Goldenrod2
#D4A017Gold
#C7A317Gold3
#C68E17Goldenrod3
#AF7817Dark Goldenrod
#ADA96EKhaki
#C9BE62Khaki3
#827839Khaki4
#FBB117Dark Goldenrod1
#E8A317Dark Goldenrod2
#C58917Dark Goldenrod3
#F87431Sienna1
#E66C2CSienna2
#F88017Dark Orange
#F87217Dark Orange1
#E56717Dark Orange2
#C35617Dark Orange3
#C35817Sienna3
#8A4117Sienna
#7E3517Sienna4
#7E2217Indian Red4
#7E3117Dark Orange3
#7E3817Salmon4
#7F5217Dark Goldenrod4
#806517Gold4
#805817Goldenrod4
#7F462CLight Salmon4
#C85A17Chocolate
#C34A2CCoral3
#E55B3CCoral2
#F76541Coral
#E18B6BDark Salmon
#F88158Pale Turquoise4
#E67451Salmon2
#C36241Salmon3
#C47451Light Salmon3
#E78A61Light Salmon2
#F9966BLight Salmon
#EE9A4DSandy Brown
#F660ABHot Pink
#F665ABHot Pink1
#E45E9DHot Pink2
#C25283Hot Pink3
#7D2252Hot Pink4
#E77471Light Coral
#F75D59Indian Red1
#E55451Indian Red2
#C24641Indian Red3
#FF0000Red
#F62217Red1
#E41B17Red2
#F62817Firebrick1
#E42217Firebrick2
#C11B17Firebrick3
#FAAFBEPink
#FBBBB9Rosy Brown1
#E8ADAARosy Brown2
#E7A1B0Pink2
#FAAFBALight Pink
#F9A7B0Light Pink1
#E799A3Light Pink2
#C48793Pink3
#C5908ERosy Brown3
#B38481Rosy Brown
#C48189Light Pink3
#7F5A58Rosy Brown4
#7F4E52Light Pink4
#7F525DPink4
#817679Lavendar Blush4
#817339Light Goldenrod4
#827B60Lemon Chiffon4
#C9C299Lemon Chiffon3
#C8B560Light Goldenrod3
#ECD672Light Golden2
#ECD872Light Goldenrod
#FFE87CLight Goldenrod1
#ECE5B6Lemon Chiffon2
#FFF8C6Lemon Chiffon
#FAF8CCLight Goldenrod Yellow