Blogger Etiketleri Yan Yana Sıralama
Etiketlerden kategori bölümü oluştururuz ziyaretçilerin aradıklarını rahat bir şekilde bulabilmeleri için fakat çoğu blog sitesinde etiketler alt alta sıralanır ve haliyle blogda fazla yer işgal eder. Bu durumun bir çözümü var etiketleri yan yana sıralamak,
bunun için ]]></b:skin> kodunu Ctrl + F yardımı ile şablon - html'yi düzenle kısmından aratıp bulun ve bir üst satırına aşağıdaki kodu ekleyin artık etiketleriniz yan yana görünecektir.

#Label1 ul li{float: left;width: 45%;}
  
Uyarı: Bazı temalar yan yana etiketleri desteklememektedir. Bilginize!



Koddostu.com 'dan sizlere, yılbaşını dört gözle beklemek için yeni bir sebep! Bu yılbaşında çekilişe katılan takipçilerimize birbirinden güzel hediyeler armağan ediyoruz ve çekilişte birinci olan kişiye 60TL değerindeki "Karartı" isimli Blogger tasarımını armağan ediyoruz. Bununla da kalmıyor, çekilişi kazanan dört kişiye PR4-5 alan adımızda ve alt alan adlarımızda barınan sitelerden reklam ve backlink imkanı veriyoruz!


Ödüller:


Birincilik Ödülü: 60TL değerindeki "Karartı" Blogger teması ve Koddostu.com alanında 1 ay resim reklam(250x250) hediye!

İkincilik Ödülü: Koddostu.com alanında 1 ay resim reklam(250x250).

Üçüncülük Ödülü:  Koddostu.com alanında 1 ay backlink.

Dördüncülük Ödülü:  Koddostu.com alanında 1 hafta backlink.

Ayrıca çekilişe katılan herkesi sürpriz bir hediye bekliyor!



NOT : ARKADAŞLAR KATILMAK İSTEYEN İÇİN ŞARTLAR BUYMUŞ SİZDE BU YAZI ALTINDA VARSA BLOG SAYFALARINIZ YAZABİLİRSİNİZ KAÇ KİŞİ KATILIYORUZ MERAK EDİYORUM :)

 http://herdakikayeniyenibilgiler.blogspot.com/ : ADMİN 'i paylaşmıştır bu yazıyı
blogger siteniz için güzel  bir sekmeli yorum formu resimdede gördüğünüz gibi twitter ve facebook yorum alanlarıda  eklenmiş durumda :) tabi kodlardan anlıyan kişiler buna google+ yorum forumunuda ekliye bilirler.
bu haliyle bile gerçekten çok etkili duruyo :) konuyu fazla uzatmadan kodları nasıl ekliyeciğimize gelelim. Tabiki önizlemesini sitemizden göre bilirsiniz. :)
sekmeli yorum formu
yorum formu
 Facebook ve twitter yorum formunun blogunuzda çalışabilmesi için bu formlara ait api id almamız gerekiyor. 

  • Facebook api id almak için bu adrese gittikten sonra sağ üst köşedeki yeni uygulama oluştur'a tıklıyoruz. Açılan pencerede uygulama adını yazıp diğer alanları boş bırakıp devam butonuna tıklayın. Daha sonra kelime doğrulamasını geçtikten sonra çıkan sayfadaki app id'nin karşısında yeralan rakamları bir yere not ediyoruz. Bize lazım olan yönetici profil id'sini almak için ise bu adrese gidiyoruz ve resimdeki kırmzı alandaki id'yi bir yere not ediyoruz.  

api key

Twitter api key almak için ise bu adrese gidip create new application'a tıklayıp açılan sayfadaki formu resimdeki gibi doldurduktan sonra açılan sayfada Consumer key'in karşısında rakamları bir yere not ediyoruz. Daha sonra ayarlara(settings) tıklayıp alt tarafta yeralan read and write'ı işaretleyip ayarları kaydediyoruz.

twitter api key

 Blogger > Şablon adresine gidip şablonumuzu yedekledikten sonra Html'yi Düzenleye tıklayın ve Widget Şablonlarını Genişlet deyin. Daha sonra Ctrl + F tuşlarıyla  <head> kodunu bulduktan sonra aşağıdaki kodları  hemen altına yapıştırıyoruz.

<meta content='facebook profil id' property='fb:admins'/>
<meta content='facebook api id' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='https://dl.dropboxusercontent.com/s/g8oow2g54asyr8a/jsCommentPages.js'/>
<script src='http://connect.facebook.net/tr_TR/all.js#xfbml=1'/>
<script src='https://dl.dropboxusercontent.com/s/dx3v586zbecy2ci/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=twitter api id&amp;v=1'/>


 Daha sonra Ctrl + F tuşlarıyla  ]]></b:skin> kodunu bulduktan sonra aşağıdaki kodları kopyalayıp hemen bu kodun üzerine yapıştırın.

#js-tweet-box {
  display: inline-block;
  padding: 10px;
  font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif;
  color: #666666;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
#js-tweet-box textarea{
  margin: 10px 0px;
  display: block;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;

  box-shadow: 0px 0px 3px #cccccc;
  -moz-box-shadow: 0px 0px 3px #cccccc;
  -webkit-box-shadow: 0px 0px 3px #cccccc;
  border: 1px solid #cccccc;
}
#js-tweet-box .js-reactions {
 float: left;
}
.js-tweet-count {
 float: left;
 margin: 0px 10px;
   text-shadow: 2px 2px 2px #DDD;
  -moz-text-shadow: 2px 2px 2px #DDD;
  -webkit-text-shadow: 2px 2px 2px #DDD;
}
.js-tweet-count-over {
    color: #ff0000;
}
#js-tweet-box .button{
   display: inline-block;
   color: #287497;
   font-weight: bold;
 font-size: 14px;
   padding: 5px 10px;
   cursor: pointer;
 border: 1px solid #B4DCF5;
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
    
 background-color: #D5E8F5;
 background-image: linear-gradient(#F1F9FF, #D5E8F5);
 background-image: -moz-linear-gradient(#F1F9FF, #D5E8F5);
 background-image: -webkit-linear-gradient(#F1F9FF, #D5E8F5);

}
#js-tweet-box .button:hover{  
 background-color: #DdEfFb;
 background-image: linear-gradient(#ffffff, #DdEfFb);
 background-image: -moz-linear-gradient(#ffffff, #DdEfFb);
 background-image: -webkit-linear-gradient(#ffffff, #DdEfFb);
}
.js-tweet-button {
    float: right;
}
#js-tweet-box .js-sidebar{
 float: left;
 margin-right: 15px;
 width: auto;
 padding: 0px;
}
.js-current-user-twitter img{
 width: 48px;
 height: auto;  
 display: block;
 margin: 5px auto;
}
.js-publisher,
.js-current-user-twitter {
 font-size: 13px;
 font-weight: bold;
 text-align: center;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px; 
 box-shadow: 0px 0px 5px #CCC;
 -moz-box-shadow: 0px 0px 5px #CCC;
 -webkit-box-shadow: 0px 0px 5px #CCC;
 color: #333;
 background-color: #ffffff;
 min-width: 100px;
 padding-bottom: 8px;
 margin-bottom: 15px;
}
.js-publisher{

}
.js-publisher > div,
.js-current-user-twitter > div{
 padding: .5em;
}
.js-sidebar footer{
 background: #E9E9E9;
 padding: 5px;
 border-radius: 0px 0px 10px 10px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius: 0px 0px 10px 10px;
 background-color: #0094D4;
 background-image: linear-gradient(#00A4F4, #0094D4);
 background-image: -moz-linear-gradient(#00A4F4, #0094D4);
 background-image: -webkit-linear-gradient(#00A4F4, #0094D4);
 color: white;
}
js-twtr-connect-button {
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 background-color: #0094D4;
 background-image: linear-gradient(#00A4F4, #0094D4);
 background-image: -moz-linear-gradient(#00A4F4, #0094D4);
 background-image: -webkit-linear-gradient(#00A4F4, #0094D4);
 color: white;
}
.js-publisher:hover footer{

}
.js-publisher-img {
 width: 48px;
 height:auto;
 display: block;
 margin: 5px auto; 
}
#js-tweet-box .disabled-button{
    cursor: none;
    background-color: #cccccc;
    color: #dddddd;
}
#js-tweet-box .disabled-button:hover{
    cursor: none;
    background-color: #cccccc;
    color: #dddddd;
}
.js-tweet-message {
  display: none;
  padding: 3px;
  background-color: yellow;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;

  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  box-shadow: 0px 0px 7px #DDD;
  -moz-box-shadow: 0px 0px 7px #DDD;
  -webkit-box-shadow: 0px 0px 7px #DDD;
}
.js-recent-tweets, .js-auth-reaction {
 clear: both;
 font-size: 13px;
 margin-top: 15px;
 background-color: #ffffff;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 box-shadow: 0px 0px 5px #cccccc;
 -moz-box-shadow: 0px 0px 5px #cccccc;
 -webkit-box-shadow: 0px 0px 5px #cccccc;
}
.js-auth-reaction {
  display: none;
}
.js-reactions h1 {
 font-size: 20px;
 font-weight: bold;
 padding: 5px;
 background: #E9E9E9;
 color: #333333;
 border-radius: 10px 10px 0px 0px;
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 background-image: linear-gradient(#F4F4F4,#D4D4D4);
 background-image: -moz-linear-gradient(#F4F4F4,#D4D4D4);
 background-image: -webkit-linear-gradient(#F4F4F4,#D4D4D4);
}
.js-recent-tweets h1 > span{
 font-size: 10px;
 font-weight: normal;
}

.twtr-img {
 float: left;
 width: 48px;
 height: auto;
 margin-right: 3px;
}
.twtr-tweet {
 padding: 5px;
 font-size: 12px;
 font-family: arial;
 line-height: 1.2;
}
.js-auth-reaction .twtr-tweet {
 background-color: #ffffff;
}
.twtr-tweet:hover {
 background: rgba(0,132,180,.1);
}
.twtr-tweet:hover .tweet-timestamp {
 color: #0084b4;
}
.twtr-tweet:last-child {
 border-radius: 0px 0px 10px 10px;
 -moz-border-radius: 0px 0px 10px 10px;
 -webkit-border-radius: 0px 0px 10px 10px;
}
.twtr-tweet a {
 color: #0084B4;
 text-decoration: none;
 font-weight: bold;
}
.tweet-row {
 font-weight: bold;
}
.tweet-actions{
 display: none;
}
.tweet-actions { 
 color: #0084b4; 
 font-size: 12px;
 visibility: hidden;
}
.tweet-actions > span {
 cursor: pointer;
}
.twtr-tweet:hover .tweet-timestamp {
 color: #0084b4;
}
.tweet-favorite,
.tweet-retweet,
.tweet-reply { 
 padding-left: 5px;
}

.tweet-favorite:hover,
.tweet-retweet:hover,
.tweet-reply:hover { 
 text-decoration: underline;
}

.twtr-tweet:hover .tweet-actions,
.twtr-tweet:hover .user-actions {
 visibility: visible;
}
.tweet-actions .sprite,
.tweet-actions .active-sprite {
 width: 16px;
 height: 15px;
 display: inline-block;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtbyzQx1Lscf-TSCUjBI2uRz3FzpO4jp6Z4A8lVY3XSfcheTXMSHS03lqzaBMu1IAdpoqVubfV1xB66ESMe-2T_zN_XRwzq3cwmxjb9o49lV25AWe-6PAi_ApoFyBYo0Tdw5kPV_UCbClc/s800/twitter-spritev2.png) repeat-x scroll top left;
}
.tweet-remove .sprite {
 background: transparent url(http://a2.twimg.com/a/1304464034/phoenix/img/sprite-icons.png) repeat-x scroll top left;
 background-position: -112px 1px;
}
.tweet-remove:hover .sprite {
 background-position: -128px 1px;
}

.tweet-retweet .sprite {
 background-position: 48px 1px;
}
.tweet-retweet .active-sprite {
 background-position: 16px 1px;
}
.tweet-retweet:hover .sprite {
 background-position: 32px 1px;
}
.tweet-favorite .sprite {
 background-position: 96px 0px;
}
.tweet-favorite .active-sprite {
 background-position: 64px 0px;
}
.tweet-favorite:hover .sprite {
 background-position: 80px 0px;
}
.tweet-reply .sprite {
 background-position: 0px 1px;
}
.tweet-reply:hover .sprite {
 background-position: -16px 1px;

}

 Ve son olarak Ctrl + F tuşlarıyla <div class='comments' id='comments'> kodunu buluyoruz ve hemen altına aşağıdaki kodları yapıştırıyoruz. Ve şablonumuzu kaydediyoruz.

Bazı Temalarda ikinci koddan sonra yorum forumu aktif oluyor. 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='js-default-tab comments-tab' id='blogger-comments' title='Blogger Yorumları'>
<data:post.numComments/> Yorum
</div>
<div class='comments-tab' id='twitter-comments' title='Twitter Yorumları'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='comments-tab' id='fb-comments' title='Facebook Yorumları'>
<fb:comments-count expr:href='data:post.url'/> Yorum
</div>
</b:if>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div data-bitly-key='Bit.ly api key' data-bitly-login='Bit.ly kullanıcı adı' data-publisher='Twitter kullanıcı adı' id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Muhtemelen bunu daha önce Wordpress bloglarında görmüşsünüzdür. Ancak bu uygulama Blogger blogları için kullanılabilir değildi. Ancak artık bu uygulamayı blogger bloglarınız içinde kullanabilirsiniz.

Genellikle kolonlara (Sidebar) yerleştirilen, blogunuza üçüncü taraf işlevselliği veya başka bir kod eklemenize yarayan eklentilerin sadece ana sayfanızda görüntülenmesini yada sadece yazı sayfalarınızdagörüntülenmesini yada sadece arşiv sayfalarınızda görünmesini sağlayabilirsiniz. Bunun için yapmanız gerekenleri örneklerle açıklamaya çalışacağım.

Öncelikle herzaman olduğu gibi Temanızı herhangi bir aksi duruma karşı yedeklemeyi unutmayın.
Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. Ve "Ctrl+F" yardımı ile aşağıdaki koda benzer kodu aratın;

<b:widget id='HTML5' locked='false' title='Eklentinize verdiğiniz isim görünecek' type='HTML'>

Kırmızı ile renklendirilmiş olan rakam sizin blogunuzda farklılık gösterebilir. O kısımda 1,2,3,4,5,… gibi bir rakam yazıyor olabilir. Bu kısımda herhangi bir değişiklik yapılmayacaktır sadece istenilen eklentiyi bulmaya yarayacak bir adımdır.

Farklılıkları düşünerek sadece <b:widget id='HTML kısmını aratabilirsiniz. Bu şekilde arama yaptığınızda sayfanızda kaç adet eklenti varsa o kadar sonuçla karşılaşacaksınız.

Bu sonuçlardan istediğiniz eklentiyi seçin. Seçilen eklentini altında yer alan kodların arasına iki farklı satıra kırmızı ile renklendirilmiş olan iki farklı satır yerleştirilecektir. Aşağıda kodları verdim ve değişikliğin yapılacağı kısımları kırmızı ile renklendirdim.

Ya ister sadece kırmızı kodları yerlerine yerleştirin ya da <b:widget id='HTML5' locked='false' title='Eklentinize verdiğiniz isim görünecek' type='HTML'> benzeri eklentinizin altına alttaki kodların en üst satırını silerek yapıştırın. Yöntem tamamen size kalmış. Önemli olan iki satır var onları es geçmemiz yeterli olacaktır. Bunlar;

1. Birinci Satır;
1.1.Sadece Anasayfanızda görüntülenmesi için;
<b:if cond='data:blog.url == data:blog.homepageUrl'>
1.2.Sadece Yazı sayfalarınızda görüntülenmesi için;
<b:if cond='data:blog.pageType == "item"'>
1.3.Sadece Arşiv Sayfalarınızda görüntülenmesi için;
<b:if cond='data:blog.pageType == "archive"'>
1.4. Ana sayfa dışında diğer her yerde görüntüleme 
1.5. Eklentileri Sadece Statik Sayfalarda Görüntüleme
1.6. Sadece belirtilen sayfada Eklentilerin Gizlenmesi ve diğer tüm sayfalarda görüntüleme

ve

2. </b:if> satırı.

1.1. Blogger Eklentilerinizin Sadece Anasayfanızda GörüntülemeDüzenlemek istediğiniz eklentiyi şu hale getirin;

<b:widget id='HTML3' locked='false' title='Eklentinize verdiğiniz isim' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
1.2. Blogger Eklentilerinizin Sadece Yazı Sayfalarınızda Görüntüleme 
Düzenlemek istediğiniz eklentiyi şu hale getirin

<b:widget id='HTML3' locked='false' title='Eklentinize verdiğiniz isim' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'><!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>
1.3. Blogger Eklentilerinizin Sadece Arşiv Sayfalarınızda GörüntülemeDüzenlemek istediğiniz eklentiyi şu hale getirin

<b:widget id='HTML3' locked='false' title='Eklentinize verdiğiniz isim' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

1.4. Ana sayfa dışında diğer her yerde görüntülenme
<b:widget id='HTML3' locked='false' title='Eklentinize verdiğiniz isim' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

1.5. Eklentileri Sadece Statik Sayfalarda Görüntüleme
<b:widget id='HTML3' locked='false' title='Eklentinize verdiğiniz isim' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "STATIK-SAYFA-URL"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Yukarıdaki kodda STATIK-SAYFA-URL yazan yere alttaki örnekteki gibi statik sayfa adresinizi yazın. 
http://blogadiniyaz.blogspot.com/p/takiplistem-forum.html

1.6. Sadece belirtilen sayfada Eklentilerin Gizlenmesi ve diğer tüm sayfalarda görüntüleme
<b:if cond='data:blog.url != "OZEL-SAYFA-URL"'>
...
...
...
</b:if>

Yukarıdaki koda OZEL-SAYFA-URL yazan kısma hangi sayfada eklentilerinizin görüntülenmemesini istiyorsanız onun web adresini yazın. 

Bu yöntem ile blogunuza eklemiş olduğunuz eklentilerin ister sadece Ana sayfanızda, ister sadece Yazı Sayfalarınızda isterseniz de sadece Arşiv Sayfalarınızda ya da istediğiniz statik sayfanızda görüntülenmesini sağlayabilirsiniz. 

Anlaşılmayan bir kısım varsa, lütfen yorumlarda bunu belirtin. Değerli vaktinizi bu yazıyı okumaya ayırdığınız için, Teşekkürler.

Kolay Gelsin.