Çalışmayan BH Kodları Ve Dropbox Sorunu

Son günlerde Blog Hocam’da paylştığım eklentilerin bazılarının çalışmamaya başladağını fark etmişsinizdir. Sorunun ne olduğu ve çözümüyle ilgili bir yazı yazmak için anca fırsat bulabildim. Konuya geçmeden önce buradaki eklentilerle ilgili kısa bilgi vermek istiyorum.

 

Hem kendim kodladığım, hem de hazır alıp düzenlediğim tüm eklentileri Blog Hocam’da paylaşmadan önce test blogumda mutlaka deniyorum, düzgün çalışıp çalışmadığına emin oluyorum. Paylaştığım eklentilerin hiçbirinde ne herhangi bir reklam, ne de manipüle edici bir gizli kod yoktur.

 

Gelelim son günlerde çalışmayan eklentilerin sebebine. Eklentilerin bazlarında harici javascript veya css dosyaları vardır. Bu dosyaların hepsini silinmemesi ve güvenli olması için kendi Dropbox hesabımda saklarım. Birisi bu eklentileri kullandığı zaman ilgili javascript veya css dosyası benim dropbox hesabımdan çağırılır ve çalışmaya başlar. Peki herşey normal ve kusursuz gibi gözüküken bu sorun nereden çıktı?

 

Görmüş olduğunuz bu resim bir süre önce Dropbox ekibi tarafından bana gönderilen bir maile ait. Söylediklerine göre benim herkesle paylaştığım bu javascript, css gibi dosyalar çok fazla trafik harcadığı için askıya alınmış. Bu yüzden şuan eklentilerin bir kısmı çalışmıyor.

Fakat endişe edecek bir durum yok. Dropbox dosyaları silmedi, sadece kullanımını durdurdu. Dolayısıyla tüm dosyalar şuan bende mevcut. Bu dosyaları tek tek başka bir sunucuya yükledim ve yine herkesle paylaşıma açtım.

 

Sizin yapmanız gereken şey ise şu;

 

1. Eklemiş olduğunuz eklentide Dropbox’a ait linki bulun (https://dl.dropbox.com/…….. şeklinde)

2. Blog Hocam’da çalışmayan ekentiye ait yazıyı bulun.

3. Dropbox linkinin yerine güncellenmiş yeni linki bulun (http://yourjavascript.com/……. gibi) ve Dropbox linkinin yerine onu kopyalayın.

 

Not: Çok fazla dosya olduğu için arada atladıklarım olabilir. Çalışmadığını düşündüğünüz linkler varsa veya linki değiştirirken problem yaşarsanız bu yazının altına yorum bırakın  lütfen. En kısa sürede ilgilenip yanıtlamaya çalışacağım.

Instagram Fotoğrafları Bloga Nasıl Eklenir?

Bu yazı murat-aktas.com’un sahibi Murat Aktaş tarafından Blog Hocam için yazılmıştır.

 

Instagram, şüphesiz sosyal medyanın en çok rağbet gören fotoğraf paylaşım sitesi. Eğer bir blogunuz varsa(özellikle fotoblog) ve sıkı bir instagram kullanıcısı iseniz fotoğraflarınızın blogunuzda görünmesini istemeniz gayet doğal. Instagram yakın zamanda bu konuda bir adım attı ve bünyesindeki fotoğraf ve videoları yerleştirme(embed) kodları ile kullanılabilir hale getirdi. Fakat gelin görün ki bunu ancak tek bir fotoğraf için yapabiliyorsunuz. Yani instagram'ın ana akışındaki gibi ızgara şeklinde fotoğraflarınızı yanyana dizemiyorsunuz.

 

Kullanacağımız araç; SnapWidget ve tam da bu sorunu bizler için çözülebilir hale getiriyor. Öncelikle online siteye gidiyoruz. Karşımıza aşağıdaki gibi bir form çıkacak.

 

- Username(#1) kısmına blogumuzda fotoğraflarını sergileyeceğimiz kullanıcının adını giriyoruz. İsterseniz kullanıcı adı yerine sadece belirli kelimelerden oluşan etiketleri de ekleyebiliyorsunuz.

 

- Bunu yapmak istiyorsak Hastag(#2) bölümüne istediğimiz etiketi yazıyoruz, kullanmak istemiyorsak da boş bırakıyoruz.

 

- Widget Type(#3) bölümünde de widgetimizin görünüm türünü belirliyoruz. Grid(Izgara), Board(Pano), Scrolling(Kaydırma), Slideshow(Slayt), Map(Harita) türlerinden istediğimizi seçiyoruz. Grid ve Board haricindeki diğer modları seçtiğinizde formunuz küçülüyor. Buradaki maddelerin çoğu aynı olduğu için sadece Grid ve Board türünü anlatmaya devam ediyoruz.

 

- Widget türünü seçtikten sonra Thumbnail Size(#4) kısmına her fotoğrafın hangi boyutta olmasını istiyorsak o sayıyı yazıyoruz.

 

- Layout(#5) bölümüne yanyana ve alt alta kaç fotoğraf olmasını istediğimizi yazıyoruz.

 

- Photo Border(#6) kısmında, fotoğrafların çerçeve içinde olmasını istiyorsak No diyoruz.

 

- Background Color(#7) bölümünde arkaplan rengini ayarlıyoruz. Buraya istediğiniz rengin HTML kodunu girebilirsiniz. Arkaplanın şeffaf görünmesini istiyorsanız burayı boş bırakabilirsiniz.

 

- Photo Padding(#8) bölümüne ise fotoğraf aralarında kaç piksel boşluk istediğimiz yazıyoruz.

 

- Hover Effect(#9) kısmında Fade In derseniz fotoğraflarınız biraz bulanık görünecek, fare ile üzerine gelindiğinde ise düzelecektir. Fade Out kısmı da işlemi tam tersine çevirir. Hiçbir efekt istemiyorsanız da None diyebilirsiniz.

 

- Fare ile fotoğraflarınızın üzerine gelindiğinde paylaşım butonları çıkmasını istiyorsanız Sharing Buttons(#10) kısmına Yes diyin, eğer istemiyorsanız da No.

 

- Responsive(#11) kısmı da widgetinizin açıldığı ekranın boyutuna göre ayarlanmasını sağlar. Bu nedenle Yes seçeneğini işaretlemenizde fayda var.

 

 

Daha sonra Preview(#12) butonuna tıklayarak widgetinizin ön izlemesini görebilirsiniz. Widgetin önizlemesi istediğiniz gibiyse Get Widget(#13) butonuna tıklayarak verilen kodları kopyalayın. Yerleşim> Gadget Ekle > HTML/JavaScript yolunu takip ederek kodunuzu yapıştırın ve kaydedin. Tüm işlemi doğru ve eksiksiz yaptıysanız widget blogunuzda yukarıdaki gibi gözükecektir.

 

 

Eğer instagram fotoğraflarınızı widget yerine statik bir sayfada sergilemek istiyorsanız Sayfalar > Yeni Sayfa kısmına giderek, şablonu Oluştur'dan HTML'ye çevirin ve daha önce kopyalamış olduğunuz kodları buraya yapıştırın. Sayfa başlığı kısmına "Fotoğraflarım, Instagram Fotoğraflarım" benzeri bir isim verin ve daha sonra da kaydedin. Eğer bu işlemi de eksiksiz yaptıysanız statik sayfanız yukarıdaki gibi gözükecektir. Instagram hesabınıza her yeni fotoğraf eklendiğinde buradaki liste de otomatik olarak güncellenecektir.

 

Yazar Hakkında: Murat Aktaş; kişisel blogumda başta Tarih, Edebiyat, Teknoloji ve Şiir olmak üzere pek çok farklı konuda yazılar ve makaleler paylaşıyorum. Ayrıca pek ilgilenemesem de ara sıra güncelleyebildiğim İngilizce bir Foto Blogum var. 23 yaşında bir Tarih bölümü son sınıf öğrencisiyim...

Blogger’da Sabit Bir Ana Sayfa Yapma

Blog dediğimiz şey yayınların en yeniden en eskiye doğru sıralandığı, her sayfada belli sayıda yayının gözüktüğü ve sayfalar arasında geçiş yapılara eski yayınlara ulaşıldığı dinamik bir web sitesi türüdür.

 

Eskiden statik web sitesi oluşturmamızı sağlayan Geocities, Tripod gibi servislerin yerini günümüzde Blogger, Tumblr ve Wordpress gibi sistemler aldı. Bu ücretsiz servisler sayesinde herkesin blog oluşturması oldukça kolay ama statik bir web sitesi oluşturmak isteyenler için artık eskisi gibi ücretsiz ve kaliteli servisler yok.

 

Dünyanın en popüler blog oluşturma esrvisi olan Blogger’da klasik bir blogun yanı sıra açılış sayfası olan, statik bir web sitesi oluşturabileceğinizi biliyormuydunuz?

 

Aşağıda göstereceğim yönntemleri ve bazı temel HTML kodlarını kullanarak Blogger’ı tek bir sayfadan oluşan siteye dönüştürmeniz mümkün.

 

1. Boş Bir Sayfa Oluşturalım

 

Blogger’da boş bir sayfa oluşturmak istediğimizde en az bir adet gadget eklemek gerektiğini belirten bir uyarı gelir. Aşağıdaki kodları incelediğinizde navbar gadgetını eklediğimizi fakat CSS kodlarıyla bu gadgetı sakladığımızı görebilrsiniz.

 

İlk örneğimizde boş bir sayfa oluşturulam ve yavaş yavaş bunu dolduralım. Boş ve sabit bir sayfa oluşturmak için Blogger kumanda panelinize girdikten sonra Şablon > HTML’yi Düzenle yolunu takip edin ve buradaki tüm kodları silerek yerine aşağıdaki kodları ekleyin.

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
   <b:skin><![CDATA[
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)  margin: 0;
    padding: 0;
}

]]></b:skin>
  </head>
  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  </body>
</html>

 

2. Boş Sayfaya Bir Şeyler Yazalım

 

Sayfaya bir şeyler yazmak için klasik HTML kodlarını kullanacağız. Eğer HTML bilginiz yoksa şuradaki gibi online HTML editörlerinden birini kullanarak sayfanızı oluşturun ve HTML kodlarını alın.

 

Resimde gördüğünüz gibi örnek bir sayfa oluşturdum ve bunun HTML kodlarını alarak Blogger kumanda panelinde Şablon > HTML’yi Düzenle bölümünde </body> kodunun üzerine ekledim. Burası çok önemli! Ekleyeceğiniz HTML kodları her zaman </body> kodunun üzerinde yer almalı.

Şablonu önizleme yaptığımızda online HTML editöründe oluşturduğumuz sayfasın aynısını görebiliriz.

 

Dikkat Edilecek Hususlar

 

- Blogger’da tüm HTML kodlarını ve HTML sayfalarını kullanmak ne yazık ki mümkün değildir. Bu yüzden bazı kodlarda uyarı mesajı ile karşılaşabilirsiniz. Bu hata mesajlarını Google’da arayarak çözüm bulabilirsiniz. Veya bu yazının altına yorum bırakırsanız ben yardımcı olmaya çalışırım.

 

- Hazır HTML şablnlarındaki css dosyalarının içindeki kodları Blogger’a eklemek isterseniz ]]></b:skin> kounun üzreine eklemelisiniz.

 

- Javascript veya benzeri bir harici dosya çağırmak için kullanılan kodları ise </head> kodunun üzerine eklemelisiniz.

 

Bu yazıyı konuyla ilgili çok mesaj geldiği için hazırladım. Umarım anlatabilmişimdir ve faydalı olabilmişimdir.