blogger etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

7 Ekim 2013 Pazartesi

Alexa Değerini Arttırmak İçin Unutulmaması Gereken 4 Madde

Bildiğimiz gibi Alexa tüm dünyaca kullanılan site analiz şirketi durumundadır. Eğer bir siteniz varsa bir Alexa değeriniz mutlaka olmak zorunda. Hele ki sitemizden belirli bir reklam geliri elde etmek istiyorsak Alexa değerimizi oldukça yüksek tutmalıyız. Reklam verenler trafiği yüksek sitelerle çalışmak isterler. Bunun nedeni ise daha çok kişiye ulaşabilme gayesidir. Bu amaç ta reklam verenler için oldukça doğaldır. Reklam verecekleri sitenin trafiği ne kadar yüksekse onlar için geri dönüş bu oranla doğru orantılı olarak yüksek olur.

Reklam verenlerin dikkati çekebilmek, sitemizin trafiğini arttırmak ve sitemizin popülerliği ile alakalı bir şeydir. Bunun içinde Sitemizde yada blogumuzda yapmamız gereken bazı şeyler vardır. Alexa değerimizi yükseltmek için yapmamız gerekenlerden bazıları şunlardır.

Kaliteli İçerik
Alexa'nın site analizi yaparken dikkate aldığı bazı noktalardan bir kaçı site içersinde okuyucularımızın geçirdiği zaman, yazılarımızın benzersizliği ve sitemizin güncelliğidir. Yazılarımız ne kadar özgün olursa okuyucularımızın dikkatini o kadar çok çekeceğinden okuyucularımızda sitemizde kalmaya devam edeceklerdir. Okuyucularımızın sitemizin sayfaları arasında geçirdikleri zaman da bize Alexa değerimizde artış olarak geri dönecektir.

Kopya Yazılardan Uzak Durun!!
Genelde blog yazarlarının yaptığı en büyük hata kopya makaleler yayınlamaktır. Bunu yapmanın bir çok nedeni olabilir. Yazacak bir konu bulamamak, daha önceden yazılan bir yazının daha çok ziyaretçi çekeceğini düşünmek vs. nedenler arasında gösterilebilir. Sizin bu kopya yazınızı okuyan bir okuyucu bu yazıyı daha önce başka bir sitede görmüş olabilir ve o anda okuduğu aynı yazıyı tekrar okumak istemeyecektir ve anında sayfayı terk edecektir. Sizin için bu durum kötü bir imaj oluşturacaktır ve sitenize bir daha girmekten kaçınacaktır.

Sosyal Medyayı Kullanın
Sosyal medya trafik almak için en uygun yollardan biridir. Okuyucularınıza yazılarınızı sosyal medyadan takip etme imkanı sunmak her zaman bize fayda sağlar. Facebook beğen kutusu, Facebookhayran kutusu, Google plus widgeti ve Twitter takipçi kutusu gibi bir çok sosyal medyadan okuyucularınızın siz ve yazılarınızı takip etmelerini sağlayın. Buna ek olarak yazılarınızı paylaşabilmeleri için onlara sosyal medya paylaş seçeneklerini sunmayı ihmal etmeyin.

Sık Güncelleme
Sitenizi yada blogunuzu ne kadar kısa aralıklarla güncellersek arama motorlarının dikkatini çekmemiz kolaylaşacaktır. Sık güncellenen bir site/ blog'a arama motorlarının böcekleri daha sık uğrayacağından son yazdığımız yazıların indexlenmesi hızlanacaktır. İndexlenme hızımız arttıkça arama sonuçlarında ki gösterimimizde aynı oranda artacaktır. Arama mootorlarında hızlı indexlenme ve gösterimlerimizdeki artış Alexa Rankımızı da etkileyeceğinden yazılarımızı olabildiğince sık aralıklarla yayınlamak yararımıza olacaktır.

4 Ekim 2013 Cuma

Blogger SEO İçin 5 Temel İpucu

Web dünyası ile ilgilenen herkesin uzunca bir süredir aklında olan şeydir SEO. Blogumuzu aktif ve güncel tutmaya çalışırken bir yandan da SEO çalışmaları yapmamız gerekmektedir. Sürekli güncellenen arama motorları algoritmalarını takip etmek zahmetli bir iş haline gelebiliyor. Bunun nedeni ise blogumuzu güncel tutma çalışmalarımızın arasına SEO çalışmalarımızı da eklemek zorunda kalıyor olmamız.

SEO çalışmaları dediğimizde gözönünde bulundurulması gereken bir çok etken ve faktörün olduğunu düşünürsek aklımızdan çıkarmamamız gereken basit ama yararlı 5 temel seo ipucunu şöyle sıralayabiliriz.

Yazılarımızın Sayısını Değil Kalitesini Yükselmeliyiz
Çok fazla yazı yazarak blog yazımızın sayısını arttırabiliriz. Ama bu kadar yazı sizce ne kadar kaliteli olabilir? Yazmak için bir şekilde konu bulup bu hakkında kelimeleri, cümleleri oluşturabiliriz. Arama  motorlarının önem verdiği ve bizlerinde unutmaması gereken konulardan biride yazılarımızın kalitesidir. Yazılarımız az sayıda fakat kaliteli yazılar ise arama motorlarının dikkati çekerek aramalarda üst sıralarda çıkan ve arama motorlarına göre kalite bir site olma yolunda başarılı bir adım atmış oluruz.

Backlink
Backlink konusu biraz karmaşık bir konu gibi görünüyor. Biraz basite indirdiğimizde aslında backlink konusunun anlaşılması güç bir konu gibi görünse de çok basit yollarının olduğunu anlayabiliriz. Backlink seo için önemli bir konu fakat fazlasıyla dikkat edilmesi gereken bir konudur. Örneğin bir teknoloji blogumuz var ve blogumuza başka bir teknoloji blogundan backlink alıyoruz. Burada hiç bir sorun yok ve gayet etkili bir backlink oluşmuş oluyor. Konumuzla aynı konuda yazılar barındıran ve niş bir blogdan aldığımız backlinkler blogumuzun değerini arttırma konusunda oldukça etkilidir. Fakat teknoloji blogumuza bir fotoğraf blogundan da backlink alabiliriz. Oldukça doğal bir durum fakat iki blogunuzda konuları farklı olduğu için aldığımız bu backlink diğeri kadar etkili olmaz.
Aslında backlink kendiliğinden doğallar yollarla gelmelidir. Ama bu zor fakat zamanla oluşabilecek bir durumdur.

Anahtar Kelime Araştırması
Blogumuz ve yazılarımız için doğru anahtar kelimeleri bulmak uzun ve yorucu bir iştir. Belirli anahtar kelime bulma araçlarının yardımları ile doğru anahtar kelimeleri bulabiliriz. Bu araçlardan bir tanesi de Google Adwords Kelime Aracıdır. Burada bize doğru anahtar kelimeleri bulabilmemiz konusunda oldukça etkili araçlar mevcut durumda. Anahtar kelime bulmak konusunda harcayacağımız zamanı en asgariye indirebilmemiz mümkün.

Optimisazyon
Blog için yazımızı tamamladık yayınlamadan önce bir kez daha okumalıyız. Yazımızın başlığı, yazı linki, yazı içeriği, hedeflediğimiz alanları tekrar kontrol etmekte fayda vardır. Bu alanlarda kullanmak istediğimiz anahtar kelimeleri yerleştirmeliyiz. Fakat tam bu noktada dikkat etmemiz gereken şey tüm yazıyı anahtar kelimelerle doldurmak değildir. Bunu aklımızdan çıkarmamamız gerekir. Bu tarz yazılar arama motorlarında spam olarak görülebilir.

Arama Motorlarını Takip Etmeliyiz
Arama motorları sürekli güncel oldukları için her an yeni bir algoritma ile kendilerini güncel tuttuklarını unutmamalıyız. Sağlam bir SEO çalışması yapabilmemiz ve site değerimizi koruyabilmemiz adına bizimde bu güncellemeleri takip ederek sitemizde yeni güncellemelere yönelik çalışmalar yapmalıyız.

29 Eylül 2013 Pazar

Şablonlarınızın Yedeğini Almayı Unutmayın!..

Blog tasarımımızı kullanıcıların dikkatini çekebilmek adına yenileme iyileştirme işlemleri yaparak geliştirmeye çalışıyoruz. Bu çalışmalarımız sırasında bazı eklentileri değiştirip yada blogumuzdan çıkarıp yerlerine yenilerini ekliyoruz. Bazı eklentilerimiz Jquery JavaScript gibi kodlama dillerinden oluşuyor. Bu kodlama dilleri bazen birbirlerinin çalışmalarını engelleyebiliyor bu yüzden bazı eklentilerimiz sayfamızda çalışmayabiliyor.

Çok fazla kod bilgimiz yoksa ve blogumuzda bazı değişiklikler yapıyorsak yapmamız gereken en önemli şey değişikliklerimizi yapmadan önce şablonumuzun çalışan son halinin yedeğini almalıyız. Çünkü ekleyeceğimiz eklentiler şablonumuzun çalışmasını engelleyebilir. Kodlar arasında doğru kodu bulup silmek bizi zahmetli bir iş olarak karşılayabilir. Bazen de yanlışlıkla sileceğimiz kodlar yüzünden şablonumuzu tamamen kaybedebiliriz. 

Böyle bir durum ile karşılaşmamak için şu çok ünlü olan "Eşşeğini Sağlam kazığa bağla" deyimindeki gibi işimizi en başta garanti altına almanın yollarını denemeliyiz.

Şablonumuzun yedeğini almak için ;

Blogger Kontrol Paneli > Şablon yolunu takip ettikten sonra Yedekle/Geri Yükle diyerek açılan pencerede Tam Şablonu İndir diyoruz ve bilgisayarımızda istediğimiz bir yere kaydediyoruz.


Yedeğini aldığımız şablonumuzu tekrar blogumuza geri yüklemek istediğimizde ise aynı yolları takip ediyoruz son olarak açılan pencerede Tam Şablonu İndir seçeneğinin altında yedeğini aldığımız şablonu geri yüklemek için dosya seç seçeneğine tıklayarak bilgisayarımızdan şablonumuzu buluyoruz. Şablonumuzu bulduktan sonra yükle dediğimizde yedeğini aldığımız şablonu tekrar blogumuza geri yüklemiş oluyoruz.

24 Eylül 2013 Salı

Blogger İle Para Kazanmanın 6 Yolu

Açık kaynak kodlu oluşu ve kullanımı oldukça basite indirgenmiş olan blogger bir blog sahibi olmak isteyenler, söyleyeceklerim var diyenler, hatta herhangi bir konuda bilgisine güvenenler ve bu bildiklerini paylaşmak isteyenler için ideal bir platformdur.

Blogger'ı kullanarak bir ek gelir sağlamak ta mümkün. Hatta blog yazarlığı ile çok ciddi gelirler elde eden blog yazarları dünyada fazlasıyla bulunmakta.Bu ek gelirin nasıl kazanılacağı hakkında bir çok yol bulunuyor. Bu yazıda size sadece bu yolların 6 tanesinden bahsetmek istedim.

Öncelikli olarak unutmamalıyız ki sadece para kazanmak için açılan blogların tamamına yakını bir kaç aydan sonra yazarları tarafından terk edilmektedir. Para kazanma kaygısı olmadan zevk alarak ve bir hobi olarak blog yazdığımızda zaten az yada çok belirli bir kazancı blogumuzun bize sağladığını bir süre sonra görmeye başlayacağız.

ŞABLON SATMAK
Son günlerde blogger şablon tasarımcıları oldukça ilerlemiş durumda. Bu ilerleme ile de oldukça çekici ve gelişmiş blogger şablonları ortaya çıkmaya başlamış durumda. Online olarak tasarımlarınızı satabileceğimiz bir çok platform bulunuyor. Bunlardan en yaygın olan ve geliştiricilerin çoğunun kullandığı themeforest.net hazırladığınız tüm şablonlar için gerekli tüm yasal güvenliklerinizi sağlayarak sizlere güvenli bir kazanç olanağı sunuyor. Üyelik için ilk olarak kısa bir test doldurduktan sonra şablonlarınızı yükleyebiliyorsunuz. Şablonlarımzı yüklerken bir takım kriterlere göre kabul ediyorlar. Bunun nedeni ise az öncede dediğimiz gibi tüm yasal güvenliğimizi sağladıkları için. Kopya içerik yüklemeye çalıştığımızda üyeliğimiz iptal ediliyor.

EKLENTİ ve WİDGETS SATMAK
Blog Şablonları için eklentilerin çekici olması önemlidir. Ücretsiz olarak sunulan bir çok eklentiye ulaşmak mümkün fakat bunlarda artık klişeleşmil eklentiler durumunda. Fark yaratmak için bir çok blog sahibi bazı eklentilere ücret ödüyorlar. Ticari bir çok site ve bloglar eklentiler için yüksek miktarlarda ücret ödemektedirler. Bu geliştirdiğimiz eklentileri satabileceğimiz Codecanyon gibi bir çok platform buluyor.

ÖZEL TASARIM ŞABLON SATMAK
Kod bilginize ve tasarımcılığınıza güveniyorsanız kişiye özel şablon tasarlayıp bunları satabilirsiniz. Herkesin kod bilgisi olmayabilir yada bunu yapacak zamanı olmayabilir. Sizde bir kaç referans göstererek bazı şablonlarınızı yada eklentilerinizi ücretsiz veridğiniz bir blog açıp daha sonra kişilerin size ulaşarak kendileri için özel olarak bir yada bir kaç çalışma yapmasını istemelerini sağlayabilirsiniz.

NİŞ BLOG YAZARAK PARA KAZANMAK
Belirli bir konuda bilgilerinizi paylaşmak adına yazılar yazabilirsiniz. Belirlediğiniz ve bilginizin olduğunu düşündüğünüz bir konu hakkında yazılarını yazarak aynı konuyu ele alan diğer rakiplerinizle yarışmaya başlar ve sonrasında belirli bir kitleye ulaştığınız da yazdığınız konuya uygun firmaların dikkatini çekerek onların size reklam vermelerini sağlayabilirsiniz.

İÇERİK REKLAMLARI ALARAK PARA KAZANMAK
Niş blog tutarak belirli bir trafik ve kitle elde ettiğimizde bazı reklam platformlarına katılıp sitemize reklamlar yerleştirebiliriz. Yerleştirdiğimiz bu reklamlar sonucunda gösterim başına, tıklama başına yada eylem başına gibi seçenekler ile gelir sağlamamız mümkün olacaktır. Bu tür reklam alabileceğimiz bir çok platform mevcut. Bunların en başında Google AdSense geliyor. AdSense dışında kullanabileceğimiz çok fazla platform bulunuyor. Bunlardan bir kaçı ReklamAction ,YllixMedia, AdCash, ReklamStore, Adhood, Wordego gibi sıralanabilir.

DANIŞMANLIK HİZMETİ İLE PARA KAZANMAK
Bazı kuruluş yada kişilere kazanç potansiyellerini arttırmak yada trafik akışını arttırmak için bilgilerinizi sunabilirsiniz. Seo hizmetleri sağlayabilir ve sitelerinin geliştirilmesine yardımcı olabilirsiniz. Sitenin makalelerini oluşturabilir, içerik sağlayabilir ve bu içeriklerin düzenlenmesi siteye girilmesi gibi bir çok hizmeti sunarak gelir elde edebilirsiniz.

19 Eylül 2013 Perşembe

Blogger Sayfasına Facebook Resimleri Nasıl Eklenir

Web sayfamıza resim galerisi oluşturmak oldukça etkilidir. Galeri sayfasını oluşturmak için çok farklı yöntemler kullanılabilir. Jquery kullanılarak oluşturulan bu eklenti sayesinde Facebook  sayfamızda bulunan resimleri  web sayfamızın galeri sayfasında göstermemiz mümkün olacak. Lightbox işlevselliği ile galeri sayfamızda bulunan resimleri farklı bir sayfada açmak yerine aynı sayfa üzerinde açabilmemize olanak verir. Bu özellik sayesinde resimler arasında gezinmek daha kolay olacaktır.



Facebook resimlerimizi blogger sayfamızda nasıl yayınlayacağımıza gelirsek; Yapmamız gereken ilk şey şablonumuzun yedeğini almak olacaktır. Bu olabilecek sorunlara karşı şablonumuzun çalışan son halini kaybetmemek için gereklidir. Daha sonra Blogger Kontrol Paneli > Şablon > HTML'yi düzenle yolunu takip ederek açılan kod penceresi içinde </head>  tagını CTRL+F kambinasyonu sayesinde aratarak buluyoruz. </head> tagını bulduktan sonra hemen üzerine aşağıdaki kodları yerleştiriyoruz.

<link media="all" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet" type="text/css" /><link media="all" href="https://googledrive.com/host/0B-vz7n1QSdEfWE1Wbmxtc2FYN1k" rel="stylesheet" type="text/css" /><!-- Scripts --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfRkNxSXVfYjlRU3c"></script><script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUDFxcEpsM1ZSTjQ"></script><script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfaHU3dTFPallrU1E"></script><script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUFhSTlNaaU5tTkE"></script><script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfeVlQNnBDZGhtXzQ"></script>

Bu işlemi gerçekleştirdikten sonra şablonumuzu kaydedip bir sonraki adıma geçiyoruz. Facebook galeri sayfamızı oluşturabilmemiz için bize gerekli olan Facebook profil ID'mizi bulmamız gerekmektedir. Bunun için http://findmyfacebookid.com/adresine gidiyoruz. Açılan sayfadaki kutuya https://www.facebook.com/ profiladıyazıyoruz ve Lookup Numeric ID butonuna basıyoruz. Bu sayede sayfamızın sayısal kimliğini öğrenmiş oluyoruz.



Yapmamız gereken sadece Blogger Kontrol Paneli > Sayfalar > Yeni Sayfa > Boş Sayfa diyerek yeni bir sayfa oluşturuyoruz. Başlığına istediğiniz ismi verebilirsiniz örnek olarak Facebook Resim Galerisi diyebiliriz. Daha sonra oluşturduğumuz sayfamın HTML bölümüne gelerek aşağıdaki kodları yerleştiriyoruz. Kodlar arasında bulunan "Your-Page-ID"  yazan yere az önce bulduğumuz sayfamızın sayısal kimliğini yazıyoruz.

<script>

    $(document).ready(function ($) {

        $('#FB_Album_Frame').FB_Album({

            facebookID: 'Your-Page-ID',
            responsiveGallery: false,
            fixedWidth: 980
        });
    });
</script>
<div id="FB_Album_Frame"></div>

Son olarak sayfamızı yayınlayarak blogumuzda Facebook Resim Galerisi Sayfamızı oluşturmuş oluyoruz.

5 Eylül 2013 Perşembe

Blogger Alıntı yazısını (blockqoute) Değiştirme

Blogger ile açtığımız bloglarımızda yazılarımızın içine bazen dikkat çekmesini amaçlayarak bazen ise bir başka arkadaşlarımızın bloglarında okuduğumuz bir yazıyı eklemek istediğimizde kullandığımız alıntı yazısını özelliştirmemiz mümkün.

Özelleştirerek kullandığımız alıntı yazısı okuyucularımızın daha çok dikkatini çekeceğinden vurgulamak istediğimiz herhangi bir yazıyı alıntı yazısı içerisinde makalemize ekleyerek okuyucularımızın dikkatini çekmesini sağlayabiliriz.

Örnek görüntü:

Blogger alıntı yazısını (blockqoute) değiştirme işlemini nasıl gerçekleştirebileceğimize gelirsek;

Yeni yayın diyerek makalemizi oluşturmaya başlıyoruz. Yapmamız gereken şey yazımız içerisinde nereleri vurgulamak istediğimiz yada nerelerinin alıntı olduğunu belirtmek istediğimizi belirledikten sonra aşağıdaki kodları yazımızın HTML kısmına yapıştırıyoruz.

blockqoute{background: #484B52 url:(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyqecRG6aX3BwQdMITTmH9FYSNqGsgP4Jj5m4gAU8PeMmDNdxyPtFK2OKyEXkBtEz4QgJk0GBNbK2CJ7N_N4frjJO8tgefyXFMaoY65kY2pWRP6XrncE8ofiedAM2tP5wPzWVldLNMP3Q/s1600/green-black-side.gif); background-position:;background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color: #C7CACF; font: normal 0.9em Helvetica,verdana,serif,Georgia,"Times New Roman";}
.post blockqoute p{margin:0;padding-top:10px;}
Yazmak istediğimiz yazıyı daha sonra <blockqoute></blockqoute> etiketleri arasına yazarak yazımızın içinde görünmesini sağlıyoruz. 
Yukarıdaki kodlarda değiştirmek isteyebileceğimiz yerler ;
Kırmızı ile belirtilen yer alıntı yazımızın arka plan rengini belirtir.
Yeşil ile gösterilen yer ise alıntı yazımızın arka planında bulunan resmi değiştirebileceğimiz yerdir kendi hazırladığımız bir görselin url sini buraya ekleyerek arka plan resmimizi değiştirebiliriz.
Mavi ile gösterilen yer ise yazılarımızın rengini göstermektedir.

10 Ağustos 2013 Cumartesi

Blogger Kaldırılamayan Widgetleri kaldırma

Blogumuza tema bulmak başlıca bir sorun. Bir şekilde tam olarak istediğimiz gibi bir tema bulamasak da düşündüğümüze yakın bir tema bulup blogumuza ekliyoruz. Eklediğimiz temanın bazı eklentileri/widgetleri üzerinde hazır olarak geliyor. Bu eklentilerin/widgetlerin bazılarını istediğimizde kaldırabiliyoruz. Fakat bazı eklentiler/widgetler temamıza sabit olarak ayarlanmış oluyor. Eklentiyi/widgeti düzenle dediğimizde kaldır seçeneği mevcut bulunmuyor. Bu şekilde bir eklentiyi/widgeti kaldırmak için yapmamız gerekenler şunlar;

Öncelikle Blogger Kontorl Paneli > Yerleşim dediğimizde karşımıza çıkan sayfada kaldırmak istediğimiz widgetin üzerine gelerek düzenle diyoruz. Açılan pencerenin url kısmında yazan url'nin en sonunda widgetimizin ismi yazıyor.


Eklentimizin/widgetimizin ismini öğrendikten sonra Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle diyoruz. Sonrasında ise Widget'a Atla Diyerek az önce öğrendiğimiz widget id sine tıklayarak bulunduğu kodlara ulaşıyoruz.

Widgetin/eklentinin kodlarına ulaştığımızda karşımıza
<b:widget id='HTML4' locked='true' title='' type='HTML'>....</b:widget>
Bu şekilde bir kod çıkacak. Burada yapmamız gereken şey kırmızı ile yazılmış olan true yerine false yazmak. Ardından şablonumuzu kaydiyoruz. Blogger kontrol panelimizden yerleşim diyerek kaldıramadığımız widget'e düzenle dediğimizde artık kaldır seçeneğinin aktif olduğunu göreceğiz.
Not: true yazan yeri false olarak değiştirip widget'i düzenle diyerek kaldırmaktansa daha kısa bir yol olarak bulduğumuz kodları <b:widget> den başlayarak </b:widget> ile birlikte sildiğimiz de widgeti doğrudan silmiş oluruz.

7 Ağustos 2013 Çarşamba

Blogger Google Map Ekleme

Bulunduğumuz yeri göstermek bazı durumlarda çok önem kazanır. Bulunduğumuz yeri göstermenin de en ideal ve güvenilir yolu google map'tir. Bunulduğumuz noktayı belirlemiz ile kalmayıp bulunduğumuz noktadan gitmek istediğimiz noktaya ulaşabilmemiz için yol tarifi olabilmemizi sağlar.

Bulunduğumuz noktayı google map embed kodları yardımı ile sitemize yada blogumuza rahatlıkla ekleyebiliriz. Google Map'in bize sunduğu bazı özelliklerden biride uydu görüntüsüdür. Sürekli güncellenen görüntüler yardımı ile yerimizi yada gideceğimiz yeri rahatlıkla anlayabiliriz.

Google Map Embed Kodlarına Nasıl Ulaşırız. 
Yapmamız gerek ilk şey maps.google.com adresine tıklamalıyız. 
1-) Üst kısımda bulunan arama çubuğundan istediğimiz konumu aratıp buluyoruz. Aşağıda resimde ben Balıkesir'de bulunduğum için Balıkesir olarak belirttim.

2-) Sağ kısımdan belirlediğimiz konumların uydu yada harita görünümlerini istediğimiz gibi belirleyebiliyoruz. Burada dikkat etmemiz gereken nokta istediğimiz mevcut konumumuzun doğru işaretlenmiş olmasıdır.

3-) Seçmiş olduğumuz noktaların doğru olduğundan eminsek yapmamız gereken şey artık Google Map'in bize vereceği kodları almak olacaktır. Ekranın sol tarafında bulunan link butonuna tıklayarak bu kodlara ulaşabiliriz.


Buradan alacağımız embed kodlarını artık sayfamızın yada blogumuzun istediğimiz yerine yerleştirebiliriz. 
Blogumuz için google haritaları bir sayfada göstermek istiyorsak yapmamız gereken Blogger kontrol Paneli > Sayfalar > Yeni Sayfa > Boş Sayfa diyerek yeni bir sayfa ekliyoruz. Sayfa ismi olarak istediğimiz bir ismi yazabiliriz. Aldığımız kodları sayfanın HTML bölümüne yapıştırıyoruz. Yayınlama işlemini yaptıktan sonra Google Haritamız artık sayfamızda gösteriliyor olacaktır. 

Not: Aldığımız iframe kodları içersinde sayfamızın yapısına göre genişlik ve yükseklikleri ayarlamamız gerekebilir. Bunun için Width ve Height değerlerini sayfamıza uygun bir değer ile değiştirmeyi unutmayın.

5 Ağustos 2013 Pazartesi

Blogger Açılır Duyuru Eklentisi

Blog okuyucularımızın bazı noktalarda dikkatini çekmemiz gerekir. Bunun içinde okuyucularımızın dikkatini çekecek yöntemler kullanmalıyız. Uyarı yada duyuru alanı bunun için ideal bir yöntemdir. Sayfamıza ekleyeceğimiz bir uyarı yada duyuru paneli içinde okuyucularımıza iletmek istediğimiz bilgi yada dikkatlerini çekmek istediğimiz konuyu onlara rahatlıkla iletebiliriz.

Blogger duyuru eklentimiz sayfamızda sabit duruyor ve fare ile üzerine gelindiğinde yana doğru dönerek açılıyor. Bu açılma efekti eklentimize çok şık bir hava katmış.

Blogger duyuru eklentimizi blogumuza eklemek için;

Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle diyerek karşımıza çıkan kod düzenleyici içersinde CTRL+F tuşları ile </body> kodunu aratıp bulduktan sonra hemen üzerine aşağıdaki kodları yapıştırıyoruz.

<style>.divix{height:95px;position:absolute;top:0px;left:0px;min-width:86px;}.duyurucaz{text-decoration:none !important;text-align:center;line-height:80px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#00467F;border:2px solid #ccc;}</style>
<div class='duyurucaz'>DUYURU</div></div></div><style>
.duyurucaz{text-decoration:none !important;
text-align:center;
line-height:80px;
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:17px;
color:#fff;
position:absolute;
top:0px;left:-3px;
display:inline-block;height:80px;width:80px;background:#00467F;}
.duyurucaz{-webkit-transition: all 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);
-moz-transition: all 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);
-o-transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);
transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);cursor:pointer;}
.duyuristan{padding-right:30px;height:80px;
text-decoration:none !important;padding-top:4px;overflow:hidden;background:#fff;
border:none;border-color:#ff9c9c;border-width:0px;width:0px;
-webkit-transition: width 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);
-moz-transition: width 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);
-o-transition: width 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);
transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);}
.divix:hover .duyurucaz{
height:80px;margin-left:300px;transform:rotate(360deg);
-ms-transform:rotate(360deg); -moz-transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-border-radius: 40px;border-radius: 40px;}
.divix:hover .duyuristan{background-color:#00467F;
border:1px solid #ccc;width:298px;height:78px;}
div.yuvarlanan-duyuru{position:fixed;z-index:999999;}
div.eklentisi{top:140px;left:0px;}</style><style type='text/css'>
div.yuvarlanan-duyuru{_position:absolute;}div.eklentisi{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+&quot;px&quot;) );}
</style>
<div class='yuvarlanan-duyuru eklentisi'><div class='divix'>
<div class='duyuristan' style='position:absolute;top:0px;left:0px;font-family:Helvetica, Arial, sans-serif;font-weight:normal; font-size:13px;color:#fff;background-color:#00467F;'>
<span style='display:block;margin-left:40px;'>
<b>Hoşgeldiniz.</b>
<br/>
Soru ve Görüşlerinizi <a href='http://xtreal.blogspot.com/p/iletisim.html'>İletişim</a> sayfasından mesaj atarak iletebilirsiniz.<br/>
Yazılar ile ilgili sorularınızı yorum kısmından da sorabilirsiniz. </span>
</div>
Blogger duyuru eklentisini Önizlemek için tıklayınız.
Kodlarımız arasında düzenlememiz gereken yerler ise;
Kırmızı ile yazılan yere okuyucunuzun dikkatini çekip onlar için önemli bir bilginin bulunduğunu yazacağınız alan.
Mavi ile yazılan yerler ise duyuru panelimiz açıldığında görülecek olan yazılardır.
Yeşil ile yazılan yer ise blogger duyuru eklentimizin arkaplan rengi bunu sitenize uygun bir renk ile değiştirebilirsiniz.

2 Ağustos 2013 Cuma

Blogger İstatistik eklentisi



Blog yazarı olarak okuyucularımıza blogumuzu tanıtmak için fazlasıyla çaba harcıyoruz. Blogumuza gelen okuyucularımıza yazılarımızı takip edebilmeleri için bir kaç yol sunmamız gerekir. Sosyal medyadan blogumuzu/içeriklerimizi takip etmelerini sağlamalıyız.

Blogumuzu ilk defa ziyaret eden bir okuyucumuzun daha sonra tekrar ziyaret etmesini sağlayabilmek adına ve takip etmesini kolaylaştırmak için bazı sosyal medya hesaplarımıza ulaşabilmelerini sağlayabilmeliyiz. 

Sayfamızı ziyaret eden okuyucularımız herhangi bir yazımızı okuduklarında blogumuzun istatistiklerini görebilmelidir. Bu eklenti sayesinde blogumuzdaki bazı istatistikleri okuyucularımızla paylaşarak onların dikkatlerini çekebiliriz. Paylaşacağımız bu istatistikleri arasında E-posta abone sayımız, Facebook hayran sayımız ve Twitter takiplerimiz ile blogumuzda bulunan toplam yazı ve bu yazılara yazılmış toplam yorum sayılarını gösterebiliriz. Bu eklentiyi sadece bu istatistikleri göstermek için değil de sosyal medya sayfalarımıza okuyucularımızın ulaşabilmelerini kolaylaştıracaktır.

İstatistik eklentisini blogumuza nasıl ekleyeceğimize gelirsek;
Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek açılan sayfaya aşağıdaki kodları yapıştırıyoruz.

<div class='widget-content'>
<style>.redesss img {margin-left:12px;-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;margin-bottom:3px;padding: 0 5px;}
.redesss img:hover {opacity:0.65;-moz-opacity: 0.65;filter: alpha(opacity=65);}
.redesss b {line-height: 16px;}</style>
<div class="redesss" style="font-size:11px;text-align:center;">
<table border="0" cellspacing="0" cellpadding="0" width="258"><tbody>
<tr>
<td valign="top" width="51" align="center"><a title="Blogumu RSS ile takip et" href="http://feeds.feedburner.com/xtrealblog" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfhHUa5iTq0V_4ZngUdVajKCa6EnlU-fedNR9WPgM9eQGI78g0ruudqpcDN96U4T8Nlios1Lz7XSDVAg1KpWhHPEIdCmFR035noJWuUmzcIn7S9J15XM83t_Zo6elSIt1a3BmSObEGA-gR/s46/rss-count.png" /></a>
<br /><b style="font-size: 12px;"><script language='javascript' type='text/javascript' src='http://yourjavascript.com/057219301121/contadorfeed.js?uri=anilbbyk'></script></b>
<br />Abone</td>
<td valign="top" width="51" align="center"><a title="Facebook'ta beğen" href="http://www.facebook.com/Xtrealblog" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQ2vAgiSRTjNRcFLFXMYXtPYyjW9gXl991e6VbYrPVLLYb6KOdRtC_n1jqXW09kMo6pTvUz25HOxg-i1UCn1WvW4ugLnjtP1BXIA6AMBhYPmT7cxrw8eFQE1zwvbuItwpldnWYRbtYTVb/s46/facebook-count.png" /></a>
<br /><b style="font-size: 12px;"><script type="text/javascript" src="http://codigosblog.net/servidor/contadorfacebook/facebook.php?id=459856954044350"></script></b>
<br />Hayran</td>
<td valign="top" width="51" align="center"><a title="Beni Twitter'da takip et" href="https://twitter.com/xtrealblog" target="_blank"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Q2CpdafZ7PURWTd5iXDeiv-BwkUEpHumCViGGqCqa3JKOxKCxWtK3L-pj5BLrR70Vit7w8eoVm7jnyLOijfgsQ_FY1LGSfVmB78_2OUM2OOAB20PUaL57hL5GbFWIyNEvDXyS4v7-blH/s46/twitter-count.png" /></a>
<br /><b style="font-size: 12px;"><script type='text/javascript' src="http://yourjavascript.com/170130217251/contadortwitter.js?usuario=anilbbyk"></script></b>
<br />Takipçi</td>
<td valign="top" width="51" align="center"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJC39A7wNLy4QuJByFxa2Au7jO2cUdAW060v3ef5rqTT-bZHdLr9DjA0TJMjn0H9cxAGQDG3cmPM65eiEEOLk3FjFmAJ3YhpBElZ_Z-FGesj46huUXcuCIdY_BkdEDUAVLburwoJvIc07/s46/post-count.png" />
<br /><b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></b>
<br />Yazı</td>
<td valign="top" width="51" align="center"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14yLUIOGpcG07Ta4L0HyvKWT1am9MmYWrXEu8lMf6dkanxPI1cyzu9Qjsd458OPLVA8_6p5ai4RAj6R7reD4V1V6NhyphenhyphenyYcS3brCb5NbAlulOg5VVXnDbjWw0dQrPNtjhvXwTzyfYb-ky1/s46/comment-count.png" />
<br /><b style="font-size: 12px;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script></b>
<br />Yorum</td>
</tr>
</tbody></table></div>
</div>
<div class='clear'></div>

Eklentimiz içersinde değiştirmemiz gereken yerler;
Kırmızı ile yazılan yerlere kendi sosyal medya hesap id imizi yazıyoruz.

27 Temmuz 2013 Cumartesi

Blogger Css İle Yapılmış Slayt Alanı

Sayfamızda öncelik vereceğimiz yazılar vardır. Bu yazılar en çok hit çeken yazımız olabilir. Ya da daha çok okunmasını istediğimiz bir yazımız olabilir.

Bu yazılarımızı sayfamızda bir slayt alanı oluşturarak okuyucularımıza göstermeliyiz. Css ile yapılmış slayt alanı türevleri az bir araştırma ile internet dünyasında bulunabilirler.

Css ile yapılmış oldukça şık ve birçok özelliği olan bir slayt alanı blogumuza basit bir şekilde ekleyebiliriz. Daha sonradan istediğimiz gibi düzenleyebileceğimiz slayt alanımızın bazı bir kaç özelliğinden bahsetmek gerekirse; otomatik resim geçişleri mevcut, fare ile resim üzerine gelindiğinde duruyor, Resim üzerine kısa açıklama yazısı yada direk yazımızın başlığını yazabiliriz.

Slaty alanımızın en güzel tarafı ise sadece Css ve HTML kullanışmış olmasıdır. JavaScript ve jQuery kullanılmadı için sayfa açılma süremizi çok fazla etkilemeyecektir.

Css ile yapılmış slayt alanı ÖNİZLEME



Css ile yapılmış slayt alanını blogumuza nasıl ekleyeceğimize gelirsek;
Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek aşağıdaki kodları yapıştırıyoruz. Gadgetimizi sayfamızda istediğimiz yere yerleştirip Css ile yapılmış slayt alanımızı kullanmaya başlıyoruz.

<style>#slider {width: 600px; height: 200px; margin: 40px auto 0; overflow: visible; background-color: #362c30; border: 10px solid #362c30; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; position: relative;}#mask { overflow: hidden;}#slider:hover {background-color: #fff; border: 10px solid #ddd;}#slider:hover #pause {opacity: 1;}#slider:hover #progress {background-color: rgba(255,255,255,0.0);}#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { -moz-animation-play-state: paused; -webkit-animation-play-state: paused;}#pause { width: 600px; height: 200px; position: absolute; top: 0;opacity: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEm0VtqDFW7_2Fr-VeTR704wVWgiryDg5hPcSzGAgnTgc61s8Y61uCfXBeHFpYHcY-hnB-FAVzRYu-NpwA1v2Wne8dd0jR7Qt-hWLLtnPGhAMfnvNryBjOqLwpqfQXwKUUFpoYPkLxyS4/s1600/helperblogger.com-paused.png);background-position: 566px 10px; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in;}#progress { width: 1px; height: 1px; background-color: #ffd000;-moz-animation: progress 18s infinite; -webkit-animation: progress 18s infinite; position: relative;top: -1px;-moz-transition: all 150ms ease-in;-webkit-transition: all 150ms ease-in;-o-transition: all 150ms ease-in;}#overlay {width: 600px;height: 200px;position: absolute;top: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqopceU0PzYjoLuruLk6qArKRfnCDIKmtELYOcXZERQ4GUNtw0YNjC00hhwgvluzoSG72KgbLzNf9-gCFS3pxs659xpDZplbAsjUCjBsshE0v4P3bOvtk_6MzK3qKnWA_MW1yg1KE45o/s1600/helperblogger.com-overlay.png);background-position: center;background-repeat: no-repeat; pointer-events: none;-moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; opacity: 0.5;-moz-animation: overlay-fade 18s infinite; -webkit-animation: overlay-fade 18s infinite;}#slider ul {width: 2400px; list-style: none; padding: 0; margin: 0; -moz-animation: slide-animation 18s infinite; -webkit-animation: slide-animation 18s infinite; position: relative; left: 0px;}#slider li {display: inline;width: 600px;height: 200px;margin: 0;padding: 0;float: left;position: relative;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgcE6YSTsH8Q-CqZyf5lJNOpJ4Lam4n8179wI6QAM-wTpymbs7vrNYaDoPNn0sm73YkgwyMjWJtGqT9Lqyzz2Ps8vk1x5qa2fgfI6lvHz-n6G3TxUnJvMY_1T7VtiTHeWVNkNE74Rg-5o/s1600/helperblogger.com-loader.gif);background-position: 50% 50%;    background-repeat: no-repeat;}#slider li:last-of-type {background-color: #362c30;}#slider li a {display: block;text-decoration: none;}#slider li span {display: block;width: 560px;padding: 15px 20px;position: absolute;bottom: 0;left: 0;background-color: rgba(54,44,48,0.6);border-top: 1px solid #362c30;text-shadow: 1px 1px 1px #362c30;pointer-events: none;text-align: left;}#slider-shadow {width: 100%;height: 260px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm3pGezxPCMvJNyauFl5aZ9_1vhZsnf5LN8gmPQO1QLDkeEwu-CJIzj2S7jgPBwCeBg3JBABkKhDkUiSfo8xrd3niMb0vD2JmcsNJy568467NMOHl5-XODJOr5wSuc3iy0Tomkpl-Vcvg/s1600/helperblogger.com-slider-shadow.png);background-position: center bottom;background-repeat: no-repeat;margin: 10px auto 0;}@-webkit-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-600px; opacity:1;}45% {left:-600px; opacity:1;}47.5% {opacity:0.6;}50% {left:-1200px; opacity:1;}70% {left:-1200px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1800px; opacity:1;}95% {opacity:1;}98% {left:-1800px; opacity:0;}100% {left:0px; opacity:0;}}@-moz-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-600px; opacity:1;}45% {left:-600px; opacity:1;}47.5% {opacity:0.6;}50% {left:-1200px; opacity:1;}70% {left:-1200px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1800px; opacity:1;}95% {opacity:1;}98% {left:-1800px; opacity:0;}100% {left:0px; opacity:0;}}@-webkit-keyframes progress {0% {width:0px; opacity:0;}2% {width:0px; opacity:1;}20% {width:600px; opacity:1;}22.5% {width:600px; opacity:0;}22.59% {width:0px;}25% {width:0px; opacity:1;}45% {width:600px; opacity:1;}47.5% {width:600px; opacity:0;}47.59% {width:0px;}50% {width:0px; opacity:1;}70% {width:600px; opacity:1;}72.5% {width:600px; opacity:0;}72.59% {width:0px;}75% {width:0px; opacity:1;}95% {width:600px; opacity:1;}98% {width:600px; opacity:0;}100% {width:0px; opacity:0;}}@-moz-keyframes progress {0% {width:0px; opacity:0;}2% {width:0px; opacity:1;}20% {width:600px; opacity:1;}22.5% {width:600px; opacity:0;}22.59% {width:0px;}25% {width:0px; opacity:1;}45% {width:600px; opacity:1;}47.5% {width:600px; opacity:0;}47.59% {width:0px;}50% {width:0px; opacity:1;}70% {width:600px; opacity:1;}72.5% {width:600px; opacity:0;}72.59% {width:0px;}75% {width:0px; opacity:1;}95% {width:600px; opacity:1;}98% {width:600px; opacity:0;}100% {width:0px; opacity:0;}}@-webkit-keyframes overlay-fade {0% {opacity:0;}2% {opacity:0.5;}95% {opacity:0.5;}98% {opacity:0;}100% {opacity:0;}}@-moz-keyframes overlay-fade {0% {opacity:0;}2% {opacity:0.5;}95% {opacity:0.5;}98% {opacity:0;}100% {opacity:0;}}#slider ul li span h2 {font-size: 24px;line-height: 24px;color: #fff;font-weight: normal;font-family: 'Communist-Regular';text-shadow: 1px 1px 1px #362c30;}</style><div id="slider-shadow"><div id="slider"> <div id="mask"> <ul><li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsdm0yArnhINEOg4got9pCSaJZh-2XisxDbw1HDpGrM1-TeLiXq4IJnAiRKR8XD0DQpE4SGWhPSrTdfqo5-XG1CuzHHwFzIZC1Kly_gEL4ltltPVTvQPt0qaiSOtBqOH0uojwMdC3Lp8/s1600/helperblogger.com-1.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span> </li> <li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHvTEvNFm77znKaBsVJeyDQPEJtK0ifwi21CSyD2e1EH2ZCSm3JvwvkUEc3JC1g66oGReuHdB02G0HN5faqWCuGXCEsDe3k8bn6nw_M6mnafCQTjlqy1gJF1W1YhgXc5mSa0D_PJtXas/s1600/helperblogger.com-4.png" /></a>span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span> </li> <li><a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHvTEvNFm77znKaBsVJeyDQPEJtK0ifwi21CSyD2e1EH2ZCSm3JvwvkUEc3JC1g66oGReuHdB02G0HN5faqWCuGXCEsDe3k8bn6nw_M6mnafCQTjlqy1gJF1W1YhgXc5mSa0D_PJtXas/s1600/helperblogger.com-4.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span></li><li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmY8VIsFeVsqZgzlcEjU-ZO6AlOfQFqXmOo75GcFLMip-rzIWbYHgxBG9_DP33icDWsnbUg4ufFh7PRKEDHlRqa3-jhxQVzDjyT2nn5xadfMB4dio_xb-AXMI53Xq776q1qR7HVS90gqU/s1600/helperblogger.com-3.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span></li> </ul></div> <div id="progress"></div><div id="overlay"></div><div id="pause"></div></div></div>

Kodlar arasında düzenlenecek olan yerler; Mavi ile yazılmış alanlara slaytımızda gösterilecek resime ait açıklama metinlerinizi yazabilirsiniz. Yeşil ile yazılmış yerlere ise  resimin üzerine gelindiğinde belirecek yazıyı yazabilirsiniz. Kırmızı ile yazılmış yerlere ise genişli ve yükseklik değerleri vererek sayfanıza uygun boyutlara getirebilirsiniz. Bir de resimlere tıklanıldığında açılacak sayfa url sini yazacağımız yer ise link buraya olarak yazılmıştır.

24 Temmuz 2013 Çarşamba

Blogger Yazar Ekleme

Tüm bloglar için içerikleri bir kişi girecek diye bir kural yoktur. Çok sayıda yazarın olduğu bir blog fazla içerik ve de fazla takipçi anlamına gelir. Atasözümüzün de dediği gibi Bir elin nesi var iki elin sesi var. 

Çok yazarlı blogların içerikleri artacağından ve her yazar kendi uzmanlığında makaleler yayınlayacağından hem içerik sayınız fazlalaşacaktır hem de okuyucu kitleniz çoğalacaktır.

Blogger'a yazar ekleme konusunda yapmamız gerek tek şey ekleyeceğimiz yazarımızı davet etmektir. Blogumuza yazar eklemek için;
Blogger Kontrol Paneli > Ayarlar > Temel yolunu takip ederek Yazar ekle diyoruz. Eklemek istediğimiz kişinin mail adresini yazdıktan sonra davet ediyoruz. Yazarımız bu davet mailini onaylar onaylamaz davet ettiğimiz mail adresi ile blogumuzun kontrol paneline giriş yapabilir ve içerik girebilir hale gelmiş olur.


Blogumuza arkadaşlarımızı yazar olarak davet ettikten sonra yetkileri düzenlemek gerekebilir.
Blog yazarları kısmındaki yetkilerden bahsetmek gerekirse;
Yönetici: Blogger Kontrol Panelinde bulunan ve blogumuzu kontrol edip düzenleyebileceğimiz, içerik girebileceğimiz tüm alanları kontrol etme yetkisine sahiptir. Blog yazarlarını ekleme ve bu yazları silebilme yetkisi yöneticinin elindedir.
Yazar: Bloga sadece yeni yazı ve resim ekleyebilme yetkisine sahiptir.

NOT: Dikkat etmemiz gereken bir nokta ise eklediğimiz kişilere yetki verme konusudur. Eklediğimiz bir kişiyi Yönetici yaparsak bizim yetkilerimizi ve hatta bizi blogtan silebilir.

22 Temmuz 2013 Pazartesi

Blogger E-Posta Aboneliği eklentisi

Blogumda da kullandığım bu eklenti sayesinde okuyucularınızın yazılarınızı e-mail yolu ile takip etmelerini sağlayabilirsiniz.

Okuyucularınızın yazılarınıza bir çok yolla ulaşmaları size her zaman rakiplerinizin bir adım önüne geçirir.

Okuyucularınızın yeni yazdığınız yazı/makale olduğunu fark etmeleri için blogunuza giriş yapmaları gerekiyor. Blogger e-posta aboneliği eklentisi ile okuyucularınıza yeni bir yazı/makale yazdığını haber verebiliyorsunuz. Yeni bir yazı/makale yazdığınızda blogunuzun e-posta aboneliğine kayıt olmuş okuyucularınıza son yazınızın bulunduğu bir mail göndermiş oluyorsunuz. Bu şekilde okuyucularınız sizin yazılarınızı anında haberdar olmuş oluyor.

Bu eklentiyi blogumuza nasıl ekleyeceğimize gelirsek. Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > Html/Javascript yolunu takip ederek aşağıdaki kodları yapıştırıyoruz.
<style>
    #subscribe {
      float:right;
      width:300px;
      padding:2px;
      margin:0 0 20px 0;
    background: url(http://i.imgur.com/Y0kUa.png)  no-repeat 0px 0px;
      height:125px;
    color:#000;
    font-weight:bold;
    }
    #subscribe h {
    font-size:12px;
    color:#F1921A;
    }
    .feed {
      width:260px;
      min-height:60px;
      margin:auto;
      padding:0;
    }
    .input{
      margin:10px 7px 0 0;
      float: left;
      width: 165px;
      padding: 4px 5px;
      -webkit-border-radius:4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    border:1px solid #656E75
    }
    .sbutton {
      background:#00467F;
      margin:10px 0 0;
      float: left;
      height:26px;
      border: 1px solid #656E75;
      color: #fff;
      width:68px;
      -webkit-border-radius:4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .sbutton:hover {
      background:#fff;
    color:#00467F;
    }
    </style>
    <div id='subscribe'>
    <div class='feed'>
             <br/>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=xtrealblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;;}' type='text' value='E-Mail Adresiniz...'/>
    <input name='uri' type='hidden' value='xtrealblog'/><input name='loc' type='hidden' value='en_US'/><input class='sbutton' type='submit' value='Abone Ol'/></form>
           </div>
           <div>
        <center>Yayınlanacak Yeni Yazılar E-mail Adresinize Gelsin. 
           </center>
 <center><p><img width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/xtrealblog?bg=99CCFF&amp;fg=444444&amp;anim=0&amp;label=Abone" height="26" /></p>
</center></div></div> <center></center>
<div class='clear'></div>

Yukarıdaki kodlar içinde değiştirmemiz gereken yerler:
Kırmızı ile gösterilen yerlere kendi feedburner İd'nizi yazıyorsunuz.
Mavi ile gösterilen yerde ise eklentinizde görülmesini istediğiniz yazıyı yazıyorsunuz.

20 Temmuz 2013 Cumartesi

Blogger Sayfa Numaralandırma Eklentisi


Ziyaretçilerimizin Sayfalar arasında rahatça gezebilmeleri için güzel bir eklenti. Çok fazla içeriğimiz olduğunda ziyaretöilerimiz saylafar arasında gezmeleri çok zor olacak ve onların işi kolaylaşacak.

Sayfamıza nasıl ekleyeceğimiz konusuna gelirsek;

Blogger Kontrol Paneli > Şablon > Html'yi Düzenle yolunu takip ediyoruz. CTRL+F tuşları ile ]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıdaki kodları yapıştırıyoruz.


.showpageNum a { font-size:14px;font-weight:bold; color:#006699; border:1px solid #CCC; padding-top:2px; padding-left:3px; padding-right:3px; margin-left:2px; margin-right:2px; } .showpageNum a:hover { text-decoration:none; color:#3c78a7; border:1px solid #1584d9; background:#f0f4f7; } .showpagePoint { background:#3c78a7; font-size:14px;font-weight:bold; padding-top:2px; padding-left:3px; padding-right:3px; color:#fff; border:1px solid #CCC; } .showpageOf { clear:both; padding:15px; text-align:center; font-size:12px; font-weight:bold; color:#999; } .showpage a { font-size:14px;font-weight:bold; padding-top:2px; padding-left:3px; padding-right:3px; color:#006699; border:1px solid #CCC; } .showpage a:hover { border:1px solid #1584d9; text-decoration:none; }

Daha sonra yine CTRL+F tuşları ile </body> kodunu artıyoruz ve hemen üzerine aşağıdaki kodları yapıştırıyoruz.  Sonrasında eklentimiz hazır oluyor.

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Önceki';
var downPageWord ='Sonraki';
</script>
<script src='http://tema.dataservis.org/eklentiler/blogger-numaralandirma.js' type='text/javascript'></script>

18 Temmuz 2013 Perşembe

Animasyonlu Ramazan Feneri

Müslüman alemi için en önemli ay olan Ramazan ayı içinde olduğumuz için bir eklenti ile sayfamızı Ramazan boyunca bir animasyonlu bir fener ile sayfamızda Ramazan ayında olduğumuzu gösterebiliriz.

Arka planında Arapça yazılar bulunan animasyon oldukça şık görünüyor. Sayfamızın arka plan rengi beyaz ise bu yazıları görmek için yazının en sonunda belirtilen uyarıyı okuyunuz.

Peki sayfamıza bunu nasıl ekleyeceğimiz konusuna gelirsek;

Blogger Konrtol Paneli > Şablon > Html'yi Düzenle diyerek CTRL+F tuşları ile </body> etiketini buluyoruz. Hemen üzerine aşağıdaki kodları yapıştırıyoruz.

Önizleme için Tıklayın 

<div align='center'>
<table border='0' cellpadding='0' cellspacing='0' width='900'>
<tr>
<td height='263' width='900'>
<div style='float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;'>
<object border='0' classid='clsid:D27CDB6E-AE6D-11CF-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' height='144' id='obj2' width='192'><param name='movie' value='http://mybloggerlab.com/Scripts/stardima.swf'/><param name='quality' value='High'/><param name='wmode' value='transparent'/><embed height='144' name='obj2' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='High' src='http://mybloggerlab.com/Scripts/stardima.swf' type='application/x-shockwave-flash' width='192' wmode='transparent'/></object>
</div></td></tr></table></div>

UYARI: Kırmızı ile belirtilen yere arka plan olarak siyah (black) gibi özellik ekleyerek sayfamıza uyumlu hale getirebiliriz.

16 Temmuz 2013 Salı

Blogger Css Efektli Sosyal Paylaşım Butonları

Okuyucularımızın bizi sosyal medyadan bulmaları çok önemli bir konudur. Okuyucularımıza sadece blogumuz üzerinden değil tüm sosyal medyadan ulaşabilmek bize her zaman rakiplerimiz karşısında bir adım daha önde olma imkanı sağlar.

Css3 ile tasarlanmış güzel bir sosyal paylaşım buton seti fare ile üzerine gelindiğinde hareket verilerek çekici bir hale getirilmiş.


Blogumuza nasıl ekleyeceğiz konusuda gelirsek;
Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek. aşağıdaki kodları yapıştırıyoruz.

<style>p#hb_socialicons img {
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}
</style>
<center><p id="hb_socialicons">
<a href="http://www.facebook.com/Xtrealblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaCni_rZFJJ7us-4a83XBqqm6h0rc4_NcmZ1ZVRAzWbs1OQI3KmkvyMlu1sDYOqv0LVnLe47cA_pq91-FRBacH_gc_nyck8-4enFJLS3Ouuyr22LaFuk4HIExGdY14iJ1cSupMmi7VhrY/s1600/helperblogger.com-facebook.png" /></a>
<a href="http://www.twitter.com/Xtrealblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNL7yccLb367NxeNJe83BTvsM0NMeaLI5doKVj3bq1CV7mx-HYqGgrC2k6woHsmPSP7vN577az2Nqg9OUdoGFCpiFm2j879Jhadxor_bDnc10HYzSFxPBPe4-70GHtuaaXylbBFp0nCAc/s1600/helperblogger.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimrEVw7smNFdeyz7FCGTBCAj6J31vbc5palJwerBQot2x9HAZ79KuM2d-cuykNSkNYu_wcOprk01gujO4fxMgjG-cbLO3A35vYbjldwILu-yfLRDnr7IMhyphenhyphenpfRdLeNx2RC5f8fDo8Zb44/s1600/helperblogger.com-google_plus.png" /></a>
<a href="http://feeds.feedburner.com/xtrealblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfK1eFAJWZ-TgHk1fACCN9vFI1KvAwLdzXIR9ZGoeu64DAoOoxqw8H81eN0Xd7aKQtq6olACp791CguV7meZ0dFQrLF8k81vjsLpl-6iJPpVTKz9zte7inrS87Q8WcSujlMRKNdEe3lg/s1600/helperblogger.com-rss.png" /></a>
<a href="http://www.youtube.com/xtrealblog">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmltQkdZXVbw2-qebje8YmVUD8wMyzLIoIQK4KQVZzdsaV6ZylPpGKNtIzfrgwJKmPoOQ2CrD0ZzSoO3XwsvF8ceEH0-k4ls5ECzW8arrunXSyXrALOYr6v6k-g-7HIdLNri4fcd3q3OY/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Kırmızı ile yazılı yerlere sosyal medya adreslerinizi yazıyorsunuz.
İconların hareketlerini değiştirmek için mavi ile yazılı yerleri; Faremiz ikonumuzun üzerine geldiğinde kaç derece döneceğini belirleyerek değiştirebilirsiniz.(Aynı değeri Tüm mavi alanlara yazmalısınız.) 
Hatırlatma: İkonlarımızın sağa doğru değilde sola doğru dönmesini istiyorsak mavi alana gireceğimiz değerin önüne "-" koymalıyız.

13 Temmuz 2013 Cumartesi

Blogger Arşiv Sayfası Yapımı


Sayfamıza giren ziyaretçilerimizin sayfamızda bulunan navigasyonlar ile aradıkları konuya rahatça ulaşabilmelerini sağlamalıyız. Menü navigasyonumuz bunlardan başlıcası. Ziyaretçilerimizin tüm içeriklerimizi tek bir sayfada görmesi ve istediği konuyu bulup hatta direk istediği yazıya ulaşabilmelerini sağlayabilmek adına sitemize birde arşiv sayfası oluşturmalıyız.

Arşiv sayfamızda tüm konu başlıkları ve bunların altında o konu başlığı ile ilgili içeriklerimiz bulunacak ve ziyaretçilerimizin aradıkları içeriği uzun süre aramadan bulmalarına yardımcı olacaktır.

Arşiv sayfamızı nasıl oluşturacağımıza gelirsek Blogger Kontrol Panelimizden Sayfalar ve yeni sayfa diyerek boş bir sayfa açıyoruz. Aşağıdaki kodları yeni açtığımız sayfaya ekliyoruz. Sayfamızı oluştururken dikkat etmemiz gereken tek nokta yazacağımız kodları HTML kısmına yazmalıyız.

<script src="http://yourjavascript.com/9184200431/blogtoc-min.js" type="text/javascript"> 
</script><script src="http://xtreal.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> 
</script>

Kırmızı ile belirtilen yere kendi sayfamızın adresini yazıyoruz.
Demoyu görmek için buraya tıklayın yada üst menüde bulunan site içeriğine bakabilirsiniz.

12 Temmuz 2013 Cuma

Blogger Facebook Hayran Kutusu Ekleme

Blogunuz için oluşturduğunuz facebook Hayran sayfasını blogunuza eklemek ve ziyaretçilerinizin Facebook sayfanıza daha kolay ulaşabilmelerini sağlamak için ideal bir yoldur. Bu yolla ziyaretçilerimize bize ulaşabilmeleri için bir kaç yol sunmuş oluyoruz. Bu da bize büyük bir artı puan kazandırıyor.

Facebook Hayran kutusunda Facebook hazır olarak bize sunduğu için çok fazla değişiklik yapma imkanımız bulunmuyor fakat küçük bir kaç değişiklikle blogumuza uygun hala getirebiliriz.

Facebook Hayran Kutusunu sayfamıza eklemek için Facebook hesabımıza giriş yaptıktan sonra buradan Facebook Hayran Kutusunu ekleyebileceğimiz sayfaya ulaşıyoruz. Açılan sayfada gerekli alanları doldurduğumuzda Blogumuza ekleyeceğimiz hayran kutumuz hazır hale geliyor.


Doldurmamız geren yerler şunlar;
Facebook Page URL yazan yere Facebook Hayran sayfamızın linkini yazıyoruz.
Width ve Height: genişlik ve yükseklik ayarlarını yapıyoruz.
Show Faces: sayfamızı beğenen kişilerin profil resimlerinin görünüp görünmeyeceğini ayarlıyoruz.
Color Scheme: kutumuzun renk ayarını yapıyoruz.(Facebook'un bize sunduğu siyah ve beyaz seçenekleri arasından istediğimizi seçebiliriz.)
Stream: Facebook hayran sayfamızda yayınlanan yazılarımızın görünüp görünmemesi ayarını yapıyoruz.
Show Border: Facebook Hayran Kutumuzun kenarlarında köşe çizgilerinin olup olmamasını belirliyoruz.
Header: Facebook Hayran Kutumuzun üzerinde bizi Facebookta bulun yazısının olup olmamasını belirliyoruz.
 Bu süzenlemeleri bitirdikten sonra Get Code butonuna tıkladığımızda Facebook hayran kutumuzu sayfamıza eklememizi sağlayacak kodlar oluşturulmuş ve bize sunulmuş oluyor.

Facebook hayran kutumuzu blogumuzda sidebar üzerine ekleyeceğimi için bize gerekli kodlar IFRAME sekmesinde buluyor. Bu kodları kopyalayıp Blogger kontrol Panelimizden Yerleşim ve Gadget Ekle diyoruz. Sonrasında Html/Javascript seçeneğine tıklayıp Facebook hayran kutumuz için Facebook'un bize verdiği kodları yapıştırıyoruz.

Tüm bu işlemlerin ardından sayfamıza Facebook hayran kutumuzu eklemiş oluyoruz.

10 Temmuz 2013 Çarşamba

Blogger Yazılarını Otomatik Yayınlama

Blogumuzu güncel tutabilmek adına hemen hemen her gün içerik girmeye çalışıyoruz. Fakat işlerimiz çıktığında yada herhangi bir neden dolayısıyla blogumuza içerik giremeyeceğimiz zamanalr elbette olacaktır. Bu zamanlarda blogumuzun güncelliğini korumamız mümkün. 

Hazır durumda ve yayınlanmayı bekleyen bir kaç makalemiz var ve biz bir kaç gün blogumuzla ilgilenemeyecek durumda isek makalelerimizi yazıp yayınlanma tarihi ve saatini belirleyerek istediğimiz tarih ve saatte biz yayınlayamasakta yayınlanmasını sağlayabiliriz.

Peki nasıl blogger Kontrol Panalimizden yeni yayın diyerek makalemizi yazıyoruz. Sonra ise hemen sağ tarafta bulunan program yap kısımından Tarih ve saati ayarlayın diyerek makalemizin istediğimiz tarihte ve istediğimiz saatte yayınlanması için bir program oluşturmuş oluyoruz. Tarih ve saat ayarını yaptıktan sonra tamamlandı butonuna tıkladığımızda ayarlama işlemimiz tamamlanmış oluyor. yayınla dediğimizde ise belirlediğimiz tarih ve saatte makalemiz otomatik olarak yayınlanmış olacaktır.