Web Dinamik

30 Mayıs 2016 Pazartesi

Yıldızlı Popüler Yazılar Eklentisi

Blogger’ın gadgetlar listesinde bulunan “Popüler Yayınlar” eklentisini çoğu blogger kullanıyor. Bu eklenti; son 1 ay, son 1 hafta veya tüm zamanların en çok okunan yazılarını gösteren faydalı bir eklenti.

Blogger’ın çoğu gadgetı gibi popüler yayınlar gadgetını da özelleştirme şansımız var. Bu yazıda paylaşacağım kodlar ile popüler yazılar eklentisine ziyaretçilerin ilgisini çekecek ve blogunuzu daha orijinal gösterecek yıldızlı oylama sistemini ekleyeceğiz.

Bu özellik en popüler yazınızı 5 yıldızlı olarak gösterirken , sırasıyla 4,5 – 4 – 3,5 – 3… yıldız diye gidiyor. Uygulamak için sırasıyla şu adımları izleyin:

1. İlk olarak şablonda <head> kodunu bulun ve bunun altına font awesome kodunu ekleyin. Eğer daha önce font awesome kodunu eklediyseniz tekrar eklemenize gerek yok.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

2. Şablonda ]]></b:skin> kodunu bulun ve üzerine şu stil kodlarını ekleyin.

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

3. 3. Son olarak Yerleşim > Gadget Ekle > Popüler Yayınlar diyerek gadgetı ekleyin ve ayarları resimde görüldüğü gibi yapın.

23 Mayıs 2016 Pazartesi

Tıklanabilir Rastgele Banner Eklentisi

Bu yazıda paylaşacağım eklentiyi düzenleyerek blogunuza eklediğinizde kenar çubuğunda 300x250px boyutlarında (ya da istediğiniz başka bir boyut) bir banner gözükecek. Fakat bu eklentinin şöyle bir özelliği var; sayfayı yenilediğinizde veya bir yazıdan başka bir yazıya geçiş yapığınızda bannerın yerinde sizin belirlediğiniz başka bir banner gözükecek.

Eklentide 5 adet banner tanımladığınızı düşünelim. Her ziyarette bu 5 banner rastgele gözükecek. Peki bu eklenti ne işinize yarayacak?

1. Öncelikle tabi ki aynı reklam alanında birden fazla reklam gösterebileceksiniz. Fiyatı düşük tutsanız bile reklam verenler bunu kabul etmeyebilir ama dost sitelerinizin veya önerdiğiniz sitelerin reklamlarını bu şekilde dönüşümlü olarak gösterebilirsiniz.

2. Blogunuzda öne çıkan yazılan eklentisi olarak da kullanabilirsiniz. Ziyaretçilerinizin mutlaka okuması gerektiğini düşündüğünüz yazılar için banner oluşturarak rastgele gözükmesini sağlayabilirsiniz.

Gelelim eklentiyi blogunuza nasıl ekleyeceğinize. Blogger kumanda panelinize giriş yaparak Yerleşim > Gadget Ekle > HTML/JavaScript Gadget diyerek aşağıdaki kodları yapıştırmanız yeterli.

<script type='text/javascript'>
var quotes=new Array()
quotes[0]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://lh3.googleusercontent.com/-Q6BYf-G4nAI/V0G_D47cpeI/AAAAAAAAL-g/-vH1cryZzAYAceGa0Y9yZW3YmKaRL_sxgCCo/s300/1.png"/></a>'
quotes[1]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://lh3.googleusercontent.com/-dsdgAiTDHrU/V0G_DvaWEuI/AAAAAAAAL-o/Ntj75HzIwQcpleneRb6iDX1WnkBJspaLQCCo/s300/2.png"/></a>'
quotes[2]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://lh3.googleusercontent.com/-9jF0WjVIDZM/V0G_D2dWtcI/AAAAAAAAL-o/RiFsDaF7R5wjfU9tldakw4cETs4f-WxFwCCo/s300/3.png"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length));
document.write(quotes[whichquote]);
</script>

Mavi yerlere resme tıklanınca açılacak sayfanın urlsini yazın.
Kırmızı yerlere banner urlsini yazın.
Yeşil yerlere bannerın alt etiketini yazın.
4. banner için eklemeniz gereken kod:

quotes[4]='<a href="#"><img alt="#" height="auto" width="100%" src="#"/></a>'

Herkese iyi bloglar…

6 Mayıs 2016 Cuma

Blogger Sidebar Abonelik Eklentisi

Blogunuzun sidebarına mail abonelerinizi ve sosyal medya takipçilerinizi arttıracak bir eklenti eklemek istiyorsanız çok beğendiğim bu yeni eklentiyi sizlere tavsiye edeceğim.

Geliştirilmeye ve kişiselleştirilmeye çok müsait olan bu eklenti ziyaretçilerinizin dikkatini çekerek özellikle FeedBurner mail abone sayınızın artmasını katkı sağlayacaktır. Eklentinin özelliklerinden kısaca bahsetmem gerekirse:

Mobil cihazlara uyumludur ve sorunsuz görüntülenmektedir.
Sadece 3 adet kod değişikliğiyle eklentinin renklerini blogunuzun tasarımıyla uyumlu hale getirebilirsiniz.
Font Awesome kullanılarak şık ve hızlı sosyal butonlar eklenmiştir.
Blogger’da son zamanlarda HTTPS’e geçişle birlikte yaşanan sorunlardan etkilenmeyecek şekilde düzenlenmiştir.

Blogger Sidebar Abonelik Eklentisi Nasıl Eklenir?

Öncelikle şablonun HTML kodlarına yukarıda bahsettiğim Font Awesome’ı eklemeniz gerekiyor. Bunun için Blogger kumanda panelinizde Şablon > HTML’yi Düzenle yolunu takip edin ve <head> kodunun altına şu kodu ekleyin:

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

Ekledikten sonra şablonu kaydedin ve ikinci adım için yine Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek aşağıdaki kodları yapıştırın:

<style>
#sidebar-abonelik {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 10px;
border: 0;
background: #363636;
}
#sidebar-abonelik .main_tagline {
padding: 0px 0px;
line-height: 2.5em;
font-size: 24px;
margin: 0;
height: 95px !important;
overflow: hidden;
font-weight: bold;
color: #FFF;
text-align: center;
border-radius: 10px 10px 0 0;
background-color: #679EC9;
}
#sidebar-abonelik .email_icon {
display: table;
margin: -35px auto 0px;
font-size: 25px;
padding: 12px;
height: 25px;
width: 25px;
background-color: #363636;
color: #FFF;
border-radius: 50px;
border: 10px solid #FFFFFF;
line-height: 0;
}
#sidebar-abonelik p {
font-size: 14px;
color: #F9F9F9;
text-shadow: 0px -1px 0px #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #6A6A6A;
border-radius: 20px;
}
#sidebar-abonelik .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#sidebar-abonelik .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 12px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
outline: none !important;
border: 1px solid #FFFFFF;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#sidebar-abonelik .rssform .button:hover {
background: #656E75;
}
#sidebar-abonelik .rssform .button {
background: #679EC9;
color: white!important;
border: 1px solid #FFFFFF;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
#sidebar-abonelik .bottom_lock_policy {
background: url(https://lh3.googleusercontent.com/-h4tOFZoH2GU/VyxnzJrVMcI/AAAAAAAAL94/7Lzr6v77qpwveZhbMRMH4n7irV-Rw6u1gCCo/s24/Keys-icon.png) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 12px;
margin: 0;
padding: 1px;
line-height: 25px;
}
#sidebar-abonelik .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#sidebar-abonelik .social_profiles {
line-height: 1.2em;
display: table;
float: none;
margin: 0px auto;
text-align: center;
min-width: 157px;
padding: 5px 0px;
border: 0;
}
#sidebar-abonelik .social_profiles a:hover {
color: #FFF;
background-color: #679EC9;
border-color: #FFF;
}
#sidebar-abonelik .social_profiles a {
color: #000000;
margin: 0 5px;
text-align: center;
float: left;
display: table;
padding: 4px 5px;
background-color: #FFFFFF;
border-radius: 50px;
border: 2px solid #2D2D2D;
width: 15px;
height: 15px;
line-height: 0;
font-size: 16px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#sidebar-abonelik form {
margin-bottom: 10px !important;
}
</style>
<div id="sidebar-abonelik">
            <div class="main_tagline">E-Posta Aboneliği</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Yeni yazıların ücretsiz olarak mail adresinize gelmesi için abone olun!</p>
   <div class="rssform">
            <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BlogHocam', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="E-Mail adresiniz..." />
            <input type="hidden" value="BlogHocam" name="uri" />
            <input type="hidden" name="loc" value="tr_TR" />
            <input value="Abone Ol" class="button" type="submit" />
            </form>
            </div>
      <div class="bottom_lock_policy">Gizliliğinize saygı duyuyoruz</div>
   <div class="social_profiles">
   <a href="https://www.facebook.com/BlogHocam" target='_blank' rel='nofollow' title="Facebook'ta Takip Et"><i class="fa fa-facebook"></i></a>
   <a href="https://www.twitter.com/BlogHocam" target='_blank' rel='nofollow' title="Twitter'da Takip Et"><i class="fa fa-twitter"></i></a>
   <a href="https://plus.google.com/+BloghocamBlogspot" target='_blank' rel='nofollow' title="Google+'da Takip Et"><i class="fa fa-google-plus"></i></a>
   <a href="https://instagram.com" target='_blank' rel='nofollow' title="Instagram'da Takip Et"><i class="fa fa-instagram"></i></a>
   </div>
            </div>

Kaydettikten sonra eklentinin eklendiğini görecekseniz. Kodlarda değiştirmeniz gereken yerler şöyle:

Kırmızı renkle gösterdiğim yerlere kendi sosyal medya hesaplarınızın URL’lerini yazın.
Lacivert renkle gösterdiğim yerlere kendi FeedBurner ID’nizi yazın.
Mavi vurguyla gösterdiğim yerlere ise istediğiniz bir renk kodunu girin. Bu şekilde E-Posta Aboneliği başlığının arka plan rengini, Abone Ol butonunun arka plan rengini ve sosyal butonların üzerine gelindiğindeki rengi değiştirebilirsiniz.

28 Nisan 2016 Perşembe

AdSense'den Yeni Sayfa Düzeyi Reklamlar

Dün sosyal medya hesaplarımda AdSense’in yeni reklam türünden bahsetmiştim. Gördüğüm kadarıyla çoğu Blogger kullanıcısı ve AdSense yayıncısı yeni reklamlar hakkında bilgi sahibi değil, bloguna nasıl ekleyeceğini bilmiyor. bu nedenle AdSense’in mobil yeni reklam türleri olan sabit/yer paylaşımlı ve vinyet reklamlarından bahsetmek istiyorum.

Sayfa Düzeyi Reklamlar Nedir?

Mobil cihazlarda internet kullanımı arttıkça çoğu reklam ağı buna uygun çözümler üretmesine rağmen AdSense’den bugüne kadar böyle bir hamle gelmemişti. Sonunda AdSense yayıncısı olan web sitelerinin mobil versiyonları için sayfa düzeyi reklamlar adı altında bir çözüm sundu Google bize.

Sayfa düzeyi reklamlar normal adsense reklamlar birimlerinin aksine sadece sitenizi mobil cihazlardan ziyaret edenlerde görülür. Bu nedenle AdSense’in sayfa başına 3 reklam birimi kuralı kapsamında değillerdir. Yani sayfanızda 3 adet reklam olsa bile sayfa düzeyi reklamları kullanabilirsiniz.

Sabit/Yer Paylaşımlı Reklamlar

Bu reklam türü ekranın alt tarafında sabit bir kutu şeklinde gözükür ve sayfa aşağı yukarı kaydırıldığında aynı yerinde sürekli kalır. Köşesindeki X işareti sayesinde ziyaretçiler dilediğinde bu reklam kutusunu kapatabilirler.
Vinyet Reklamlar

Bu reklam türü ise sitenizdeki bir sayfadan başka bir sayfaya geçiş yapıldığına tam ekran olarak gözükür ve istenildiğinde “Reklamı Geç” diyerek atlanabilir.

!!! Sayfa düzeyi reklamlar sadece uygun zamanlarda ve uygun cihazlarda gösterilir.

Sayfa Düzeyi Reklamlar Nasıl Oluşturulur? Blogger’a Nasıl Eklenir?

Sayfa düzeyi reklamların ne olduğunu anladınız sanırım. Şimdi gelelim bu reklamların kodunu oluşturmaya ve Blogger’a eklemeye.

1. Adım: AdSense hesabınıza giriş yaparak Reklamlarım > Sayfa Düzeyi Reklamlar yolunu takip edin ve eklemek istediğiniz reklam türlerini aktifleştirin. Ardından alt taraftaki Kodu Al butonuna basarak verilen kodu kopyalayın.

2. Adım: Kodu kopyaladığınız şekilde Blogger’a eklemeye çalışırsanız hata mesajı alırsanız ve kodu ekleyemezsiniz. Bunun için öncelikle küçük bir convert işlemi yapmamız gerekiyor. Şuradaki AdSense reklam dönüştürücüye kopyaladığınız kodları yapıştırarak Convert Ad Code butonuna basın. Convert edilmiş kodlar Blogger’a ekleyeceğimiz kodlar. Bu şekilde eklersek hata mesajı ile karşılaşmayız.

3. Adım: Blogger kumanda panelinize giriş yaparak Şablon > HTML’yi Düzenle yolunu takip edin ve kopyaladığınız convert edilmiş reklam kodlarını <head> kodunun hemen altına ekleyin ve şablonu kaydedin.

Sayfa Düzeyi Reklamların Çalışıp Çalışmadığını Test Etme

Sayfa düzeyi reklamların sadece uygun zamanlarda ve uygun cihazlarda göründüğünü yukarıda hatırlatmıştım. Bu nedenle yukarıdaki tüm işlemleri yapmanıza rağmen reklamlar görüntülenmeyebilir. Bu durumda reklamların çalışıp çalışmadığını test etmek isterseniz mobil cihazın tarayıcısını açın ve adres satırını blogunuzun URL’sini sonuna /#googleads ekleyerek yazın. Örneğin: bloghocam.blogspot.com#/googleads

Blogunuzu bu şekilde ziyaret ettiğinizde üst tarafta bir test kutucuğu çıkacaktır. Burada yükleme bittikten sonra sekmeler arasında geçiş yaparak her iki reklam türünün de çalışıp çalışmadığını test edebilirsiniz. Vinyet reklamları test etmek için gösterilen linklerden birine tıklamanız gerektiğini hatırlatırım.

Son Sözler

AdSense sayfa düzeyi reklamlar ile ilgili söyleyeceklerim şimdilik bu kadar. Umarım faydalı olabilmişimdir. Tüm AdSense yayıncılarına bol kazançlar, henüz AdSense yayıncısı olamayanlara ise bol şans dilerim.

Bu arada sayfa düzeyi reklamları kullanıp kazancınıza etkisini gözlemledikten sonra sonuçları yorum bölümünden paylaşırsanız sevinirim.

25 Nisan 2016 Pazartesi

Kişisel Bakım Bloglarında Övülen Her Ürün Övgüyü Hak Ediyor mu?

Bu misafir yazı, Sevdaninzillisi sitesi sahibi Sevda Göksel tarafından Blog Hocam için yazılmıştır.

Merhaba,

Ben sizlerle bambaşka bir mecradan bir konuyu paylaşmak için buradayım.

Ben kimim? Türkiye’de neredeyse yüzlerce olan kozmetik ve kişisel bakım bloğu yazarlarından biriyim.

Ben ne yaparım? Denediğim, kullandığım ürünler ile ilgili incelemeler yayınlarım.

Şimdi düşüneceksiniz ne işi var Blog Hocam gibi bir sitede benim gibi bir yazarın?
Çünkü gerçekler önemlidir, ben de az da olsa sizleri uyarmak ve doğru yanlış anlatımları anlamanız için minik ipuçları vermek istiyorum.

Türkiye’de on binlerce blog var. Çok ciddi bir pazar ve bu pazarda gerçek yazarlar da var sadece ürün gelsin, reklam yaparak ben keyfime bakarım diyenler de. Benim blog yazmaya başlama maceram; atopik ciddi hassas bir cilde sahibim. Bu cilde sahip kişilere, çok ciddi gözüken bir yazarın önerdiği ve “mutlaka kullanmalısın muhteşem dediği bir krem”, cildimde 2 ay boyunca sürecek ciddi bir deformasyona sebep oldu. Araştırdığımda, benim gibi kişilerin asla kullanmaması gerektiği ve ciddi hasara sebep verebileceğini acı bir şekilde öğrendim.

Bir kadının en büyük zaafı kozmetik ve kişisel bakım ürünleridir. Çok büyük takipçili kişilerin peki önerdiği her ürün muhteşem mi gerçekten?

Maalesef değil. Firmaların, kozmetik ve kişisel bakım tanıtımlarında değer verdikleri sadece sayılardır. Bir ürünü tanıtan o, çok büyük takipçili kişilerin %60’ı emin olun o muhteşem dediği ürünü denememiştir bile. Ancak yaptığı pr çalışması gereği, ona sunulan metni paylaşmak suretiyle, bunu sizlerin bilinç altına işletir ve belki de hiç ihtiyacınız olmayan bir ürünü size aldırır. Bu yazıyı okuyan bayanlar açın bir bakın çekmecenize. Bakalım alıp sonradan neden ihtiyacım vardı buna aldım, dediğiniz kaç yüz liralık ürününüzü göreceksiniz. Muhteşem denilmiş bir şampuan saçınızı dökmüştür, gene harika ötesi herkeste olması lazım denilen bir krem cildinizi bozmuştur veya harika denilen bir kozmetik ürünü aslında hiç mükemmel değildir.

Burada ne yapılması lazım? Bloglara güvenmeyecek miyiz sorusunu sorabilirsiniz. Okuyun, illa çok takipçili olması lazım değil bir kişinin. Ciddi yazan, ciddi yorumlayan öyle çok kişi var ki blog denizinde. Bu denizde, sürekli günün kargosu hashtagını kullanmayan birilerine mutlaka denk gelirsiniz. İşte o kişiler gelen ürünleri deneyimlemeden, günün kargosu başlığına almazlar. İnstagram ve diğer sosyal medya hesaplarına dikkat edin. O muhteşem dediği ürün kaç kez görsellerinde yer almış. Firmanın yazdığı çok belli açıklamaların dışında, ciddi anlamda kullandığını gösterebilmiş mi? Benim gibi bir yazarsınız diyelim, asla yılmayın. Ben çok yıldım. Nasıl bunun kadar kötü bir ürüne, muhteşem diyerek insanları alışverişe zorlarlar, nasıl bir firma bu kadar basite indirgenmiş, bir tanıtım yapar dedim bir çok kez. Ancak sonra önemli olan konunun, gerçekten yazmak olduğunu anladım. Gerçek bir yazarsanız, yazdıklarınızın arkasındasınızdır. Tüm önerdiğiniz ürünleri bir çok görselinizde kullanmışsınızdır. İnsanlara tüketmeyi değil, gerçekten ihtiyaç doğrultusunda alışveriş yapmayı teşvik etmişsinizdir. Bir firma size ürün gönderdiğinde, o ürün eğer kötüyse bunu çekinmeden söyleyebilecek cesaretiniz vardır. Bir bayanın veya bir erkeğin, kişisel bakımı için harcayacağı ve alacağından fazla ürününüz varsa eğer çekmecenizde, iyice bir düşünün. Onları size tavsiye eden kişi veya kişiler gerçekten kullandı mı ki hemen gidip aldınız?

Lütfen artık ciddi yazan, ciddi deneyimleyen kişilerin yorumlarını dikkate almaya başlayın. Para kolay kazanılmıyor, tüketmek adına harcama yapmak yerine, ihtiyacınıza yönelik araştırma yaparak alışveriş yapmaya başlamak için hiçbir zaman geç değildir.

Bana bu imkanı verdiği için Bloghocam ‘a çok teşekkür ediyorum.

Yazar hakkında: Bu yazı Sevdaninzillisi sitesi sahibi Sevda Göksel tarafından Blog Hocam için yazılmıştır.

19 Nisan 2016 Salı

Blog Yazarlarına Uyarımdır!

Bu aralar sık karşılaştığım ve açıkçası canımı çok sıkan bir durum var. Bu can sıkıcı durumu sizlerle de paylaşmak ve bazı uyarılarda bulunmak istiyorum. Bu nedenle alışla gelmiş öğretici Blog Hocam içeriklerinden farklı bir yazı okumaya hazır olun lütfen.

Blog yazarları bloglarının tasarımlarına ve fonksiyonlarına fazlasıyla dikkat ediyorlar. Bu nedenle sık sık tema değiştiriyorlar, eklentiler ekliyorlar, kodlarla yeni özellikler katıyorlar. Bu çok anlaşılabilir bir durum. Ben de iyi biliyorum ki insan görsel olarak hoşuna giden bir blogu olduğu zaman onu daha çok seviyor, daha fazla motive oluyor, nihayetinde de daha iyi bir blog çıkıyor ortaya.

Fakat ne yazık ki son zamanlarda blog sahiplerinden benzer problemlerle ilgili çok fazla mesaj almaya başladım. Yukarıda belirttiğim nedenlerden dolayı bloguna çeşitli kodlar, eklentiler, scriptler ekleyen veya yeni bir tema kullanmaya başlayan arkadaşların bloglarında bazı anormallikler oluyor. Garip reklamların çıkması, başka sitelere yönlendirme olması, blogun işleyişinde aksaklıklar olması gibi….

İnternette yardımsever, paylaşımcı kişiler olduğu kadar art niyetli, çıkarcı insanların olduğunu da unutmayın lütfen. Ve arkadaşlar özellikle rica ediyorum ki blogunuzda değişiklikler yapmadan önce şu uyarılarımı dikkate alın:

Bilmediğiniz, güvenmediğiniz sitelerden, tanımadığınız insanlardan aldığınız kodları blogunuza eklemeyin.
Blogunuzda bir değişiklik yapmadan hem şablonun, hem de içeriğin yedeğini mutlaka alın.
Normalde ücreti satılan ama bazı sitelerde ücretsiz olarak paylaşılan temaları kullanmayın.
Blogger’ın kendi temaları dışında bir tema kullanacaksınız bilinen ve güvenilir sitelerden indirin.
Sanal alemde herkese güvenmeyin.

Bunlara dikkat etmediğinizde giderilmesi zor problemler ortaya çıkabiliyor. Ben onca emek harcayarak bugünlere getirdiği blogunu daha da güzelleştirmek için adına bu şekilde çeşitli kodlar ekleyerek bozan arkadaşlara elimden geldiğince yardımcı olmaya çalışıyorum ama çoğu zaman yaptığımız şey samanlıkta iğne aramak oluyor. Bu yüzden lütfen bloga kod ekleyip çıkarırken mutlaka ama mutlaka blogunuzun yedeğini alın.

Aşağıda konuyla ilgili işinize yarayacak bazı bilgiler ve linkler paylaşıyorum:

- Şablonunuzun yedeğini almak için Blogger kumanda paneline giriş yaparak Şablon > Yedekle/Geri Yükle > Tam şablonu indir yolunu takip edebilirsiniz.

- İçeriğinizin yedeğini almak için Blogger kumanda paneline giriş yaparak Ayarlar > Diğer > İçeriği Yedekle > Bilgisayarınıza kaydedin yolunu izleyebilirsiniz.

- Tema indirmek için My Blogger Themes, Btemplates, Sora Templates, Vee Themes ve Theme Forest gibi siteleri tercih edebilirsiniz.

- Bir sitenin ya da paylaşımın güvenilir olup olmadığını anlamak için mutlaka yorumları okuyun. Sitenin geçmişine bakın. Şüpheleriniz varsa uzak durun.

Ne Gibi Sorunlar Yaşayabilirsiniz?

Blogunuz arama motorlarında gözükmemeye başlayabilir ve dizine eklenmiş olan mevcut indexleriniz silinebilir.
Çalışan kodlarınız ve eklentileriniz çalışmayabilir. Blogun kullanımında ve tasarımında arızalar çıkabilir.
Blogunuza zararlı yazılımlar yerleştirilebilir. Önce ziyaretçileriniz azalır, sonra Google’da yasaklı siteler arasına girebilirsiniz.
Blogunuza gizli reklamlar ve yönlendirmeler yerleştirilebilir. Blogunuzu ziyaret ettiğinizde reklam sayfaları veya popuplar açılabilir.
Blogunuza gizli linkler yerleştirilerek sizin üzerinizden backlink kazanabilirler.

Blogger arkadaşlarımızın benzer mağduriyetler yaşamaması için lütfen bu yazıyı blog çevrenize yayın ve arkadaşlarınızı uyarın.

12 Nisan 2016 Salı

Blogunuz İçin Chrome Uzantısı Yapmaya Ne Dersiniz?

Blog yazarlarının insanlarla iletişim kurmalarını ve yeni yazılarından haberdar etmelerini sağlayan sosyal medya kanalları, e-posta bültenleri, mobil uygulamalar gibi pek seçenek mevcut. Peki bu seçeneklere dünyanın en çok kullanılan web tarayıcısı olan Chrome uzantısı eklemeye ne dersiniz?

Chrome kullanıcılarının araç çubuğunda ihtiyaçlarına göre Chrome Web Mağazasından ekledikleri uzantıları bilirsiniz. Hatta benim blogcular için faydalı Chrome uzantılarını derlediğim bir yazım bile vardı geçmişte. Bu kez blogunuz için kendi Chrome uzantınızı nasıl oluşturacağınızı anlatacağım. Üstelik ücretsiz! Üstelik çok basit!

Blogum İçin Oluşturacağım Chrome Uzantısı Ne İşe Yarar?

Yapacağınız Chrome uzantısı her şeyden önce sizi motve edecek. Blogunuzu daha çok seveceksiniz, insanlara havanızı atacaksınız vs. vs. :)

Blogunuz için oluşturacağınız Chrome eklentisi feed mantığıyla çalışıyor. Bir kullanıcı blogunuzun Chrome uzantısını tarayıcıya eklediğinde bir nevi beslemelere abone olacak ve yeni bir yazı yayınladığınızda uzantınız kullanıcıya bildirimde bulunacak.

Eğer Chrome uzantınızı Chrome Web Mağazasında eklerseniz blogunuzu hiç tanımayan insanlar bile mağazada gezinirken uzantınızı ekleyebilir. Böylece blogunuza yeni takipçiler kazanmış olursunuz.

Blogum İçin Chrome Uzantısı Nasıl Oluşturulur?

Chrome uzantısı yapmak için öncelikle bazı dosyalara ihtiyacınız olacak. Buradaki zipli dosyayı bilgsayarınıza indirdikten sonra unzip yaptığınızda gerekli dosyalara ulaşacaksınız.

1. Adım: Öncelikle manifest.json dosyasını not defteri veya benzer bir program (ben kod çalışmaları yaparken notepad++ kullanıyorum) ile açarak aşağıdaki yerleri kendi blogunuzun ismi ve kısa açıklaması ile değiştirip kaydedin:

"name": "Blog Hocam - Daha İyi Bloglar İçin"
"description": "Blog nasıl oluşturulur? İyi bir blog kurmak için neler gereklidir? İhtiyacınız olan Blogger eklentileri nelerdir?"
"default_title": "Blog Hocam"

2. Adım: İkinci olarak extension.js dosyasını açın ve aşağıdaki feed adresini kendi feed adresinizle değiştirip kaydedin:

var feed = new google.feeds.Feed(http://feeds.feedburner.com/BlogHocam)

3. Adım: Son değişiklik için extension.html dosyasını açın ve blog adresi ile icon urlsini kendi blogunuzun urlleri ile değiştirip kaydedin:

<form action="http://bloghocam.blogspot.com/" method="post" class="f" target="_blank">
<a href="http://bloghocam.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6KQdyY1pBfxqR-WrG4-FmYNYvzUJX_UWZLBiZk0I-7wNeIGrBmu7omDZvTBFf293SZiUYk9UXylq-wNwSGTnZPzAfsvArC_wXuLqLqYgmUTC6mQxI8syrt-bs5KDbYtaC_U912bH0NqLy/s128-Ic42/icon.png" /></a>

* İkon urlsi için öncelikle 128x128px boyutunda bir görsel oluşturun ve bunu Picasa Web ya da başka bir resim hosting sitesinde upload ettikten sonra urlsini alın.

Ve bitti! Gerekli değişiklikleri yaptınız. Artık klasör uzantı olarak Chrome’a eklenmeye hazır.

Oluşturduğum Chrome Uzantısını Chrome’a Nasıl Eklerim?

Öncelikle belirtmek isterim ki ikon da dahil olmak üzere tüm dosyalar ( extension.css, extension.html, extension.js, icon.png, manifest.json ) tek bir klasörün içinde olmalı.

1. Adım: Tarayıcının adres satırına chrome://extensions/ yazıp enter tuşuna basın ve açılan sayfanın sağ üst tarafındaki geliştirici modu etkinleştirin.

2. Adım: Aynı sayfadaki paketi açılmış uzantı yükle butonuna basarak dosyalarınızın bulunduğu klasörü seçin ve ekleyin.

Ekleme işlemi tamamlanınca tarayıcınızın araç çubuğunda oluşturduğunuz ikonu göreceksiniz. Artık blogunuzun Chrome uzantısı aktif ve kullanıma hazır.

Chrome Uzantımı Chrome Web Mağazsanıza Nasıl Eklerim?

Açıkçası oluşturduğunuz Chrome uzantısı bu hali ile pek pratik değil. Bir kullanıcı uzantınızı eklemek için paylaşacağınız uzantı dosyasını aynı yukarıda anlattığım gibi geliştirici modundan eklemek zorunda.

Uzantınızın herkese açık kullanıma açılması ve Chrome uzantılarının bulunduğu web mağazasından kolayca eklenebilmesi için buraya giderek 5$ karşılığında uzantınızı ekleyebilirsiniz.