Blogger

Blogger css ve javascript dosyalarını Google Drive üzerinden çalıştırmak

Blogger css ve javascript dosyalarını Google Drive üzerine yükleyerek bloğunuza istediğiniz widget yada özellikleri ekleyebilirsiniz.

Bildiğiniz gibi Blogger üzerine görsel harici yükleme yapamıyoruz. Dolayısıyla tasarımlarda yada widgetlar içerisinde kullanılan css ve js dosyalarını harici kaynaklardan yüklemek gerekiyor. Bu kaynaklar içerisinde en sağlam ve hızlı olanı elbette Google Drive.

Google Drive üzerine istediğiniz kadar dosya yükleyebilir ve bu dosyaları dilediğiniz yerde kullanabilirsiniz. Bu makalemde Blogger’da kullanmak için js ve css dosyalarını Google Drive üzerine nasıl yükleyip, sayfamızda kullanabileceğimizi anlatacağım.

Blogger css ve javascript dosyalarını Google Drive üzerine yüklemek

Öncelikle Google Drive sayfasına gidiyoruz. Sol menüden Yeni butonuna tıklıyoruz. Açılan küçük menüde Klasör, Dosya Yükleme ve Klasör yükleme seçeneklerini görebilirsiniz.

Blogger css ve javascript dosyalarını Google Drive yüklemek anasayfa

  • Klasör : Yeni bir klasör oluşturarak bu klasör içerisine dosyalarınızı yükleyebilirsiniz.
  • Dosya Yükleme : Tek yada toplu dosya yükleme yapabilirsiniz.
  • Klasör Yükleme : klasör halinde yükleme yapabilirsiniz.

Ben bu anlatım için Dosya Yükleme seçeneğine tıklıyorum. Açılan dosya yükleme penceresinden yüklemek istediğim dosyayı seçip Tamam tıklıyorum ve anında dosya yüklenmeye başlıyor. Yüklemeler arasındaki yerini alıyor.

Blogger css ve javascript dosyalarını Google Drive yüklemek

Ben örnek olması açısından ornek.css dosyasını kullandım. Yüklediğimiz dosyaya sağ tık yapıyoruz ve Paylaşılabilir Bağlantıyı Al seçeneğini seçiyoruz.

Blogger css ve javascript dosyalarını Google Drive yüklemek bağlantı adresi

Bağlantı otomatik olarak panoya kopyalanacaktır.

Blogger css ve javascript dosyalarını Google Drive yüklemek pano kopyalama

Kopyalanılan adres aşağıdaki gibi bir bağlantı olacaktır.

Bu URL bizim kullanmamız için  uygun değil. Biz bu URL üzerinde küçük bir değişiklik yaparak bu dosya adresini istediğimiz yerde kullanabileceğiz.

URL nin ilk kısmında yer alan https://drive.google.com kısmını https://googledrive.com/host/ ile değiştiriyoruz. Ve open?id= kısmını silerek en sonda yer alan rakam ve harflerden oluşan adresi ekliyoruz. Yani URL’nin son hali aşağıdaki gibi oluyor.

Bu adresi dilediğimiz yerde kullanabiliriz.

Blogger’da bu css dosyasını aşağıdaki gibi kullanabiliriz. Blogger tasarımının içerisine </head> tagından önce aşağıdaki gibi ekliyoruz ve kaydediyoruz.

Blogger css ve javascript dosyalarını Google Drive yüklemek şablona ekleme

Aynı şekilde birden fazla dosyayı da eklemeniz mümkün. Js dosyaları , resim dosyaları yada medya dosyalarını da yükleyebilirsiniz. İzlemeniz gereken yol aynıdır. Konuyla ilgili bir sorunuz olursa yorum bölümünden çekinmeden sorabilirsiniz.

5 Yorum

  • Sadri Abi iyi günler.Kocaeli Üniversitesi uluslararası ilişkiler bölümü öğrencisiyim.Bölümümle ilgili yazılarımızı yazdığımız bir blog sayfamız var.Bu siteyi geliştirmek için “https://jqvmap.com/” adresindeki dünya haritalarından birini eklemek hani üstüne geldiğinde ülkenin ismi yazsın tıklandığında bilgileri çıksın istiyoruz ancak dediğiniz yöntemleri uygulayarak başarılı olamadık.Ne yapmalıyız? Lütfen yardım edin.

  • http://yourjavascript.com/ adresine gir. Buradan yüklemek istediğin eklentiye ait js dosyalarını seç ve mail adresini yaz. Gelen mail içerisinde < script type="text/javascript" src="https://yourjavascript.com/17237632511/gruntfile.js"> şeklinde dosya adresi bulacaksın. Bu adresi sayfana eklemen yeterlidir.

    • Merhaba. Css dosyası upload edebileceğimiz site de var mı? Drive yöntemini ben de uygulayamadım

  • merhaba, bir sorum olacaktı.Google drive daki resimlerimize bu şekilde yol gösterip bloggerda ilgili yayında görüntülenmesini saglayabilirmiyiz..Çünkü bloga yükleyince bloogger sınırlarını zorlamış oluyorum.

    Böyle bir blog yapmak zorunda kaldım ana sayfada az resim çok yazı gibi..

    fikrinizi almayı isterdim teşekküredrim….

Yorum yapmak ister misin?

bitcoin satın al

Pin It on Pinterest