JavaScript Dosyalarını Google Code'a Yüklemek

Merhaba arkadaşlar 

JavaScript, Css gibi dosyalarını Google-Code eklemek istemezmisin ? Bugün sizlere Google Code sunucusuna Javascript gibi eklentilerin eklenmesinden bahsedeceğim.
Öncelikle Google Code'dan bahsedelim.

Google Code nedir ? Nasıl Proje Oluşturulur ?

Google'ın açık kaynaklı yazılımları desteklemek ve google ilgili programların geliştirilmesi için api ve kaynak kodu yayınlanan google hizmeti. Ayrıca projenizi google serverlerinde host edebilir wiki ve svn kullanılmasını sağlayabilirsiniz. Google Code JavaScript, Python, AJAX, MySQL, PHP gibi tüm açık kaynaklı yazılımları desteklemekte. Tek yapmanız gereken Google Code'a kayıt olup bir proje oluşturmak. JavaScript Dosyalarını Google Code'a Yüklemek ve Çalıştırmak - Google Code Nasıl Kullanılır

Öncelikle Google Code adresine girip Google hesabımızla sisteme giriş yapıyoruz.

Adım 1: Giriş yaptıktan sonra ana sayfanın aşağısında bulunan Create New Project'e tıklıyoruz.

Adım 2: Açılan ekranda gerekli alanları dolduruyoruz.

Project Name: Proje İsmi

Project Summary: Proje hakkında kısa bilgi

Description: Proje ile ilgili açıklama alanı

Version Control System: Subversion seçiyoruz

Source Code License: İstediğinizi seçebilirsiniz

Project Labels: Etiketler seçsenizde olur seçmesenizde

Doldurduktan sonra Create Project diyip devam ediyoruz.

Adım 3: Google Code Proje ana sayfanız açılacak. 

Açılan sayfada yukarıda bulunan sekmelerden Source sekmesine ardından Browse seçeneğine tıklıyoruz.

Ardından dosyamızı yüklemek için Upload butonuna tıklıyoruz.

Adım 4: Bilgisayarımızda bulunan Javascript dosyasını seçtikten sonra  gerekli alanları doldurup commit diyoruz.

İşlem tamamdır. JavaScript dosyamız Google Code sunucusuna yüklendi. Açılan Sayfada view raw file'a Tıklayarak kodun bulunduğu dizine gidebilir JavaScript adresini blogunuzda kullanmaya başlayabilirsiniz.

Örnek Kod: https://bilgici.googlecode.com/svn/bilgicinfo-resimli-benzer-yazilar.js

Blogger Genişletilebilir Son Yorumlar Eklentisi

Bu gün sizlerle genişletilebilir son yorumlar eklentisini paylaşıcam, Aşağıda ki Resim de görüldüğü üzere yapılan yorumlar gizlenip tekrar gösterilebiliyor. Tek bir yoruma bakmak için başında ki -/+ butonuna tıklamanız, Tümünü görmek için ise Show All'a tıklamanız yeterli olucaktır. Yorumları gizlemek için Hide all butonunu kullanabilirsiniz.

Blogger'a Genişletilebilir Son Yorumlar Eklentisi Ekleyin

 Adım 1

Blogger Kumanda Penelinden > Yerleşim > Gadget Ekle'ye Tıklıyoruz.

Adım 2

Açılan Pencerede HTML/JavaScript Widgetine Tıklayın.

 

Adım 3:

Açılan HMTL/JavaScript penceresine aşağıdaki kodu yapıştırın.

<style type="text/css" media="screen">
.row-aa {        background: #f2f2f3; }
.row-bb {        background: #F8F5F1; }
.row-div {  
  margin:0px; 
  padding:5px; 
}
.comment-header { 
  font-size:0.9em; 
//  border:1px solid #E0E0E0; 
//  background-color:#F3F3F3; 
  padding:4px; 
  margin-top:10px; 
  margin-bottom:5px; 
}
.comment-box {
  margin:0px;
  padding:0px;
  font-size:0.9em;
  height:500px;
  overflow:auto;
}
.comments1  {  
//  background: #F3F3F3; 
  padding:3px; 
  border-left:1px dashed #A6A6A6;
  color: #888888;
  font-style: italic;
  padding-top:4px;
  margin-bottom:5px;
}
.comment-footer {
  text-align:center;
  font-size:0.9em;
  padding:4px;
  margin-top:5px;  
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript"  src="http://blogkaynagi.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://blogkaynagi.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

Not: Mavi renk http://blogkaynagi.blogspot.com ile belirtilmiş olan yeri sitenizin adresiyle değiştirin ve işlem tamam.

Keyfini çıkarın:)

Blogger Yorum Formunu Özelleştirin.!

Blogger Yorum Kutusu Değiştirme

Aşağıda ki resimde görüldüğü gibi bu yazımda blogcular için kendi kullandığım yorum kutusu kodunu paylaşağım. Oldukça kullanışlı olan bu yorum panelinde yapılan yorumu yanıtlama gibi seçenekte bulunmakta.

Dikkat:! Blogunuza kodu eklemeden önce yedek almayı unutmayın !

1. Adım 
Kumanda Paneli  > Şablon > Html'yi Düzenle'ye geliyoruz.

2.Adım
Ctrl+F ile Comments seçeneğini buluyoruz ve aşağıda ki kod ile değiştiriyoruz.

Yorum Kutusu Özelleştirme:

Arka plan: Kullanılan yorum kutusunun arka plan görüntü rengini değiştirmek için kod içinde bulunan #d0cce4 kodunu istedizğiniz renk kodu ile değiştirebilirsiniz.

Butonlar: Butonların rengini değiştirmek için ilk başta bulunan #FA6900 kodunu istediğiniz bir renk kodu ile değiştirebilirsiniz.

/* Comments ----------------------------------------------- */ /*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/ .comments .comment .comment-actions a {background:#FA6900;border:1px solid #000;cursor:pointer;color:#ffffff;padding:3px 3px; margin-right:10px;font:10px sans-serif;} .comments .comment .comment-actions a:hover {text-decoration: none; background:#FF5C59; border:1px solid #000;} #comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#d0cce4;} #comments h4,.comments .user a,.comments .continue a{font-size:14px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d0cce4;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread a{color:#000} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#FA6900;} .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://lh6.googleusercontent.com/-K_Sn7WNZrwI/UD-i8ChezCI/AAAAAAAADsc/kfCZSPg3Y4k/s36/yazar.png);width:36px;height:36px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:0px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:0px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%} /*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/

Blog Kaynağı'na Hoşgeldiniz

Merhabalar 'Blog Kaynağı' na hoşgeldiniz. 

Bu blogu açmamda ki amaç, zamanla edindiğim blogspot tecrübelerimi sizler gibi okuyucularımla paylaşmak ve onlara elimden geldiğince yardımcı olmak.

Blog Kaynağı; Adından anlaşıldığı üzere benim gibi blogcular için tam bir blog kaynağı olucak. İçerik olarak sadece blog yazıları bulabileceğiniz bu blog da, blogspot adına yaşanan tüm gelişmeleri, eklentileri, temaları ve kodları bulabileceksiniz.

İlk yazımı okuduğunuz için teşekkürler,bana tolgahardal23@gmail.com adresinden ulaşabilirsiniz.

Diğer paylaşımlarda görüşmek dileğiyle..