Blogger: Facebook Bağlantılarında Öne Çıkarılmış Resim Kullanma

Bu yazı; hitadam.com 'dan Hit Adam tarafından Blogger Destek için yazılmıştır.

Facebook beğeni ve paylaşımlarının blogumuza ne kadar faydalı olduğunu hepimiz biliyoruz.

Eğer birazdan anlatacağım ayarı yapmadıysanız facebook bağlantılarınızda önizleme resmi olarak konu içidenki resimler kullanılır veya konuya resim eklemediyseniz bağlantılarınız çok şekilsiz görünür ve bence 2.plana itilirsiniz.


Şimdi sizlere facebook bağlantılarınıza nasıl öntanımlı resim ekleyebileceğinizi anlatacağım.



Öntanımlı resminiz sayesinde tüm bağlantılarınızda sizin belirlediğiniz sabit bir resim görüntülenecek. Ama konu içindeki diğer resimlerde aktif olacağından istemezseniz bağlantıda farklı resim kullanabileceksiniz.

1. Temanızda aşağıda verilen kodu bulun(koddaki boşlukları silin).

< head >

2. Daha sonra yukarı bulduğunuz kodun hemen altına aşağıdaki kodu ekleyin.

< link href='http://www.siteadi.com/resim-adresi-jpg' rel='image_src'/ >

Baştaki < simgesinin sağındaki ve sondaki > simgesinin solundaki boşluğu silin.

http://www.siteadi.com/resim-adresi-jpg yazılı alan yerine bağlantılarda görünmesini istediğiniz resim adresini yazın.

İşlem bu kadar arkadaşlar, yapamadığınız bir yer olursa sormaktan çekinmeyin.

Teşekkürler, iyi bloglamalar...

Facebook Beğen Butonunu Blogger'a Ekleyelim

Facebook'daki Beğen butonundan her blog sayfanıza birer tane yerleştirmek ister miydiniz? Bu yazıyı okuduktan sonra çok kolay. Bunu yapmak için iki farklı yöntem mevcut. Sırası ile bu yöntemlere bir göz atalım.

1) iframe Yoluyla
Sıradan bir kullanıcı için en kolay yöntem bu yöntemdir. Çünkü basittir. Ancak uygulamasının basit olduğu kadar görünüşü de basittir. İkinci yöntemin üstün özelliklerine sırası gelince değinelim, şimdi gelelim birinci yöntemin uygulanışına.

İlk olarak blogumuzun yönetim panelindeki HTML'yi Düzenle sayfasına giriyoruz. Widget Şablonlarını Genişlet seçeneğini aktif hale getiriyoruz. Daha sonra şablon kodlarımız arasında CTRL+F yardımıyla <data:post.body/> kodunu buluyoruz. Hemen altına da aşağıdaki kodları yapıştırıyoruz:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

Şablonumuzu kaydettiğimiz zaman, tamamdır. Bu adımları tamamladığınızda yazınızın altında şuna benzer bir görüntü oluşacak:

Bu bitti, devam edelim.

2) XFBML Yoluyla

Bu yolu kullanarak Beğen butonunuzu daha işlevsel bir hale getirebilirsiniz. Bu yöntemi uyguladığınızda ziyaretçileriniz yazılarınızı beğenmenin yanında yazılarınıza bir yorum yazıp facebook sayfalarında paylaşabilirler de. Bunu yapmak için blogumuza bir facebook app id almamız gerekli. http://developers.facebook.com/setup/ adresine girerek oradaki gerekli bilgileri doldurun, ve Create Application butonuna tıklayın. Unutmamamız gereken bir ayrıntı, Site URL kısmına yazacağımız blog anasayfamızın adresinin sonundaki / işaretini unutmamamız gerektiğidir, yoksa site İnvalid URL hatasını veriyor. Örneğin:

Site Name: Asosyalbebe
Site URL: http://www.asosyalbebe.com/
Locale: Türkçe

Bilgileri doldurup Create Application butonuna tıkladıktan sonra açılan sayfadaki App id'yi bir kenara yazıyoruz.  Daha sonra şablon kodlarımız arasında CTRL+F yardımıyla <data:post.body/> kodunu buluyoruz. Hemen altına aşağıdaki kodları ekliyoruz. 

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'app id niz', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div>
<fb:like action='like' colorscheme='light'
layout='standard' show_faces='true' width='450'/>
</div>

Kod içerisindeki kırmızı ile belirttiğim kısımdaki app id niz kısmının yerine tırnakları silmeden az önce almış olduğumuz application id'nizi yazıyoruz.Ve şablonu kaydederek bu işi bitiriyoruz. Görüntü şu resimlere benzeyecek:

Beceremediğiniz, zorlandığınız kısımları yorumlarda belirtebilirsiniz. Sağlıcakla kalın efendim. Butonu denemek için hemen aşağıdaki örneği kullanabilirsiniz.

Kaynaklar:
http://www.asosyalbebe.com/2010/07/facebook-begen-butonunu-bloggera.html
http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/
http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html

Blogger'da CSS ile Renkli Kutu Yapalım

Herkese Merhaba. Bazen Metinin tam ortasında dikkati çekmek istediğimiz yeri renklendirmemiz gerekir fakat daha Orjinal birşeye gerek duyarız. Örneğin renkli bir Kutucuk. Işte bunu bugün sizlere göstereceğim. Aslında çok basit birşey. CSS yi yazıyorsunuz ve Blogger da kullanmak için de belli bir Satır kullanıyorsunuz. Bu kadar basit aslında. Herneyse, bu kutucuğun Arkaplanını ben sarı yaptım, siz kendinize göre değiştirebilirsiniz tabi. Nasıl değiştirileceğini bilmiyorsanız üzülmeyin, ben anlattım herşeyi aşağıda.

Ilk önce Bloğumuza giriş yapıyoruz. Sonra Kumanda Paneli ne giriyoruz. Ardından Yerleşim'e, sonra HTML'yi Düzenle ye. Şimdi CTRL+F kombinasyonumuzu kullanarak Arama pencerimizi açıp ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları ]]></b:skin> kodunun üzerine yapıştırıyoruz.

KODLAR:

.kutucuk {
background: #FFFF99;
width: 500px;
height: 40px;
text-align:justify;
overflow: hidden;
position:relative;
}

Kodlarımızı ekledikten sonra Şablonumuzu kaydediyoruz. Bu kadar. Konunuzda kullanmak için aşağıdaki Satırı kullanın:

<div class="kutucuk">Blog Doğuhanca</div>

KISA AÇIKLAMA - Ne yaptık?

• Yukarıdaki Satırda kullandığımız id bize CSS mizi yazarken kullandığımız #kutucuk bölümünü gösterir.
• Yukarıdaki Blog Doğuhanca kısmı yerine istediğiniz Metni yazın.
• Yukarıdaki kutucuk yazan yeri CSS nizde değiştirdikten sonra bu Satırdada değiştirebilirsiniz.

KOD AÇIKLAMASI - Ne nedir?
background --> Arkaplanımız (Renk Kodumuz burada)
width --> Kutunun genişliği
height --> Kutunun yüksekliği
text-align --> Kutunun içindeki Yazının geleceği yer (left,right,center,justify)
overflow --> Kutuda taşan yerleri taşmamış gibi göstertir.
position --> Kutunun olduğu yerde kalıp kıpırdamamısını sağlar.

Örnek kutucuk.

Blogger'a CSS Tooltip Ekleyelim!

Herkese Merhaba. Bugün bu Yöntemi Blogger'a uyarlamış bulunuyorum. İçinizden belki birkaç kişiniz soracaktır, CSS Tooltip da ne? Cevabı çok basit. Bazı Sitelerde belki görmüşsünüzdür, Linkin üzerine Mouse ile geldiğinizde Açıklama balonu çıkar ve bu Balon çok hoş gözükür. Bunu yapmanın yolu çok kısa ve basit. Aslında biraz değişiklik ekleyerek daha da iyi yaptım kendi Bloğum için bu özelliği fakat biraz daha üzerinde değişiklikler yapmam gerek. Herneyse, Konumun devamında bu özelliği anlattım.

İlk olarak Bloğumuza giriş yapıyoruz. Sonra Yerleşim'e tıklıyoruz. Sonra HTML'yi Düzenle ye ve Widget Şablonlarını Genişlet'i seçiyoruz. Ardından CTRL+F ile Arama yapıyoruz (Arayacağımız Bölüm Sidebarımız dır.) /* Sidebar burayı bulduğunuzda bu bölümün içerisine aşağıdaki Kodları ekliyoruz ve sonra Kodlarla işimiz bitiyor.

a.tooltip{
position: relative;
z-index: 20;
color: #000;
text-decoration: underline;
}

a.tooltip:hover{
z-index: 25;
}

a.tooltip span{ /* Span Element nicht anzeigen */
display: none;
}

a.tooltip:hover span{ /* Span Element nur angezeigt beim Ueberfahren mit der Maus */
background: #505050; /* Hintergrundbild */
display: block; /* macht aus dem Inlineelement ein Blockelement */
position: absolute;
top: 1.8em; /* abstand von oben */
left: 1.8em; /* abstand von links */
width: 15em; /* breite */
padding: 3px 7px; /* Innenabstand */
border: 1px solid #ccc; /* Rahmenfarbe */
color: #fff; /* Textfarbe */
text-align: left; /* Textausrichtung */
}

a.tooltip:hover span strong{
color: #AC93C8;
}

Artık bu İşlemimizi her kullanacağımız Link için Yazımızı yazarken HTML'yi Düzenle Moduna geçip aşağıdaki Yazı tipini ekleyeceğiz.
 

<a href="http://url.de" class="tooltip">LINK Text<span>Tooltip Text</span></a> 

Linkin üzerine geldiğinizde Resim göstermek için de aşağıdakini aynı şekilde Konunuzu yazarken ekleyeceksiniz.

<a href="http://url.de" class="tooltip">LINK Text<span><img src="bild.jpg" alt="" /></span></a> 

Önizleme için buraya tıklayın.

Blogger'da CSS ile Seçilen Metinlerin Rengini Değiştirmek

Herkese Merhaba. Doğru duydunuz, paniğe girmeyin. Bloggerda çoğu kişi bunu yapmak istiyordu. Bu Kişilere tabiki de ben de dahilim. Sonunda bugün kendi Kişisel Bloğum olan Blog Doğuhanca için hazırladığım Kişisel Temam ile birlikte bu Özelliği de Temama ekledim. Bu Özellik nedir? Ne işe yarar? Bunları ele alalım hadi. Evet, bu Özellik ile Mousunuzla bir Yazıyı Bloğunuzda seçtiğinizde Arkaplanının kırmızı veya başka renklerde olmasını ayarlayabilirsiniz. Bu Özellik sayesinde Bloğunuz daha üstün ve özel bir Görünüm alır. Işlemler herzaman ki gibi basit. Kodları buluyorsunuz ve altına da benim aşağıda verdiğim Kodları ekliyorsunuz. Bu kadar basit aslında fakat yinede Anlatımını da verdim.

İlk olarak Bloğumuza giriş yapıyoruz. Ardından Yerleşim'e gidiyoruz. Sonra HTML'yi Düzenle ye ve ardından Widget Şablonlarını Genişlet'i seçiyoruz. Ardından #outer-wrapper diye aratıyoruz. Sonra bu outer-wrapper kodlarının bittiği yerde, yani } yazdığı yerden sonra aşağıdaki Kodları ekleyin:

::-moz-selection {
    background:#c00;
    color:#fff;
}
::selection {
    background:#c00;
    color:#fff;
}

Bir de Örneğini vereyim, nasıl gözüktüğüne dair:

Işte bu kadar. Artık Bloğunuzda seçtiğiniz tüm Yazıların arkaplanı kırmızı olacak. Isterseniz Kodlardan renkleri değiştirebilirsiniz. Bu arada Kodlar Fatih Hayrioğlundandır. Teşekkürler!

Blogger için Alternatif Yorum Formları

 Blogger yorum formları birazcık geliştirilsede yıllar içerisinde pek beğeni kazanmamıştır.Kullanışlılık bakımından,görünüm bakımından  wordpress yorum formunun çok gerisinde ne yazık ki: Blogger'ın bu eksikliğini gidermek daha şık görüntülü yorum formları için en popüler ve kullanışlı olanlarını listelemek istedim.Fakat önce bunu bilmeniz gerekir,bahsedeceğim siteleri blogunuza entegre ettiğiniz zaman yorumlarınız orada saklanıyor.Yani zamanla geri dönüş yaparsanız bu yorumlar geri gelmiyor.
Ayrıca tecrübelerime göre bu yorum formaları yazılara gelen yorumlarda artışa sebep oluyor.Kullanmanızı tavsiye edeceğim 3 adet alternatif var;

1. Intense Debate –

Benim favori listemde bir numara olan yorum formu.Wordpress,blogger entegrasyonu pek şık.

2.DISQUS -

Başka bir yorum sistemi.mashable.com'un da kullandığı bir sistemdir.

3.JS-Kit (Echo)

  Bu da başka bir JavaScript tabanlı yorum system.Echo hem ücretsiz ve ücretli paketleri sunuyor! Ücretsiz paketi dişli yorum ve bir arayüze sahip Ayrıca onun yorum biçimi kullanarak videolar, resimler, similes ekleyebilirsiniz  basit bir WYSIWYG yorum editörü.

Uyarı: Son olarak şunu bildirmeliyim yorum formlarını değiştirmeden önce blogger şablonunuzun yedeğini almanızı şiddetle öneririm.

Blogger Devamını Oku Özelliği

Google'ın 9 Eylül 2009 tarihli blog gönderisinde yaptığı açıklamayla, Blogger'da "devamını oku" özelliği resmen devreye girmişti. Bunu size yazmayı, anlatmayı o gün çok istemiştim ama çok yoğundum bir türlü yenilikleri duyurma fırsatım olmadı. Şimdi Blogger'ın bu özelliği üzerinde biraz duracağım.


İlk olarak "Yazıları devamını oku özelliğine göre nasıl yazmalısınız?" konusuna değineceğim. Size tavsiyem yazılarınızı yazarken "Güncellenmiş düzenleyici" veya "Blogger Draft" kullanmanız. Çünkü Güncelleştirilmiş düzenleyici üzerinde bir tuşa basarak yazınıza devamını oku özelliğini kazandırabiliyorsunuz.
Güncellenmiş Düzenleyiciyi nasıl aktif hale getireceğinizi bilmiyorsanız önce şu yazıyı okuyun:
http://www.bloggerdestek.com/2009/10/blogger-metin-editorunu-degistirin.html

Metin editörünüzü değiştirdiyseniz veya blog yazılarınızı blogger draft üzerinden yazıyorsanız yazıyı bölmek ve devamını oku bağlantısını eklemek sizin için sadece bir tıklamaya bakıyor demektir.

1) Güncellenmiş Düzenleyici ile Devamını Oku Bağlantısı
Güncellenmiş Düzenleyiciyi kullanan blogger kullanıcıları! Yazılarınızı yazarken, yazının bölmek istediğiniz kısmına tıklıyorsunuz, daha sonra metin editörlerünüzün sağ üst köşesindeki "Atlama aralığı ekle" butonuna tıklıyorsunuz. Yazınızı nereden bölmek istiyorsanız orada sembolik bir çizgi çıkıyor. Bu çizgi sadece yazıyı düzenlerken görünecek, yazı yayınlandıktan sonra okuyuculara görünmeyecektir.

2) Eski Metin Editörünü Kullananlar İçin Devamını Oku

Draft kullanmayabilirsiniz, hatta yeni metin editörünü de kullanmıyor olabilirsiniz. Fakat bu sizin devamını oku özelliğinden faydalanamayacağınızı göstermez. Eğer eski düzenleyiciyi kullanıyorsanız yapmanız gereken şey, yazıyı yazarken "HTML'yi Düzenle" kısmına girip, yazıyı neresinden bölmek istiyorsanız orasına <!--more--> etiketini eklemeniz. Aşağıdaki resimde görüldüğü gibi.

3) Devamını Oku Linkini Ayarlardan Düzenlemek
Devamını oku linkini yazınıza eklediğinizde yazınızın altında Devamı» şeklinde bir bağlantı göreceksiniz. Bu bağlantıya istediğiniz metni nasıl yazarsınız? Şöyle: Blogger Ayarlarınızda Yerleşim > Sayfa Ögeleri yolunu izleyin. Daha sonra orada göreceğiniz Blog Kayıtları ögesinin altındaki  Düzenle bağlantısına tıklayın. Açılan pencerede "Kayıt Sayfası Bağlantı Metni" kutusuna ne istiyorsanız onu yazın.

4) Sorunlu Şablonlar İçin
Eğer klasik şablonlardan birisini kullanmıyorsanız ve devamını oku bağlantısı otomatik olarak blogunuzda görünmüyorsa, şimdi anlatacağım şeyleri yapmanız gerekecektir.
Şablonunuzun ayarlarına girin, Yerleşim > HTML'yi Düzenle sayfasına girin.
"Widget Şablonlarını Genişlet" seçeneğini işaretleyin.
<data:post.body/> kodunu bulun ve hemen altına şu kodu yapıştırın:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>  
      </div>
    </b:if>

Daha sonra şablonunuzu kaydetmeniz bu işlem için yeterlidir. Eğer anlatımı yeterli bulmadıysanız, kaynaklarda belirttiğim linklerden keyfinize göre birini seçerek bakabilirsiniz. MaFiAMaX tavsiyemdir.

Son Olarak Kaynaklar:
http://www.mafiamax.com/2009/09/blogger-devamini-oku-ozelligi-devrede.html
http://bloggerindraft.blogspot.com/2009/09/you-might-as-well-jump.html
http://buzz.blogger.com/2009/09/you-might-as-well-jump.html (bir üsttekinin aynısı)

Blogger Metin Editörünü Değiştirin

 Blogger Draft'a girmeden de blogunuza yazı yazarken gelişmiş metin editörünü kullanmak ister misiniz? Uzun zamandır eski metin editörünü kullanıyorsanız artık bir değişiklik yapma zamanı gelmiş demektir. O sıkıcı metin editöründen kurtulun ve yeni metin editörünün tadını çıkarın.Bu yazıda sadece yeni metin editörüne nasıl geçeceğinizi anlatacağım. Bu editörün ne işe yaradığını ileriki yazılarda farkedeceksiniz.


"Güncellenmiş Düzenleyici" ye Geçiş
Gelişmiş Düzenleyiciyi aktif etmek için Blogunuzun "Ayarlar" sayfasına girmeniz ve orda "Temel" ayarlara girmeniz gerekiyor. O sayfanın en altında "Yayın düzenleyicisi seçin" kısmında "Güncellenmiş düzenleyici" seçeneğini aktif hale getirip "Ayarları Kaydet" butonuna basarak bunu halledebilirsiniz. Aşağıya adım adım resimleri ekledim.

Ayarlar'dan Temel'e giriş.

Güncellenmiş düzenleyicinin seçilişi.

Ve bir de gelişmiş düzenleyicinin bir resmini ekleyeyim:

Yazı Sonuna Eklenen Resimlerden Kaynaklanan Sorun

Sevgili blogger ahalisi, bu yazıda az önce tasarım yaparken karşıma çıkan bir dandiklikten ve bunun için uyguladığım çözümden bahsedeceğim. Bu sorun şu, eğer bir yazının sonuna sağa veya sola dayalı bir resim eklerseniz, o resim blogunuzun yazıdan sonraki kısmının tasarımına zarar veriyor. Yani o yazı görüntülenirken sayfanızda türlü türlü tasarım sorunları oluşuyor. Aslında çok basit olan olay şundan ibaret, biz bir resimi yazımıza yüklediğimizde o resime sağa veya sola dayalı olarak bir ayar veriyorsak, bu ayar yazının o resimin yan tarafından akmasını istemiş olmamız anlamına geliyor. Örneğin resimi sola yasladığımızda yazılar resimin sağından akarlar. Ancak resimi yazının sonuna eklediysek, yani resimden sonra yazı yoksa, yada çok az yazı varsa, o resim sağına blogdaki diğer elemanları da alıyor. Bu durumda da aslında yazının altında olması gereken elemanlar yazının içindeymiş gibi bir görüntü sergiliyorlar. Bir resim ile açıklayacak olursak:

Gördüğünüz gibi şirin kedimizin olduğu resim sayfada yazının altında bulunması gereken turuncu kısım ile sarı kısımı kendi sağına almış.

Peki bunu nasıl düzeltebiliriz? Bunu şablonumuza yapacağımız çok kısa bir ilaveyle düzeltebiliyoruz. Yapmamız gereken blogger kontrol panelinde, Yerleşim sayfasında HTML'yi Düzenle'ye girip widget şablonlarını genişlettikten sonra şu kodu bulup:
<data:post.body/>
Altına şu kodu yerleştirmek:
<div style='clear: both;'/>
Ve şablonunuzu kaydetmek. Bir resim de bu basit işlemi yaptıktan sonrası için ekleyeyim de farkı göstermiş olayım.

Umarım anlatmak istediğimi verebilmişimdir. İyi günler dilerim :)

Otomatik Yazının Devamını Oku Bağlantısı

Güncelleme: Blogger'ın devamını oku özelliğini resmen devreye sokmasıyla bu tür kod ekleme işlemlerine artık gerek kalmadı. Güncel yazı için:
http://www.bloggerdestek.com/2009/10/blogger-devamini-oku-ozelligi.html

Eski "devamını oku" eklentisinin sayfasını düzenleyip kaydettiğimde besleme okuyucular bunu yeni yazılmış bir yazı kabul edmiş, bağlı olduğum sosyal ağlarda da bu yazı yeni bir yazıymış gibi yayınlanmıştı. Otomatik Devamını Oku daha iyi gibi bir de yorum alınca bu eklentinin de bloggerdestek sayfalarında bulunması gereklidir diye düşündüm.

Evet eklentiyi tanıtmak gerekirse, sizin belirlediğiniz karakter sayısından sonra yazıyı bölüyor ve devamını oku iletisi koyuyor. Ayrıca yazıya eklediğiniz ilk resimi de sizin istediğiniz boyutlara getirip sola yaslıyor ve onu da ana sayfada o şekilde görüyorsunuz.

Şimdi nasıl yapıldığına geçelim. Uzun uzadıya anlatılması gereken birşey değil. Ama biraz uzatacağım olası sorunları önlemek için.

İlk olarak blogunuzda Yerleşim kısmındaki "HTML Düzenle" sayfasında "Widget Şablonlarını Genişlet" seçeneğini işaretliyorsunuz. Daha sonra ctrl+f yardımıyla şablonda arama yaparak şu kodu buluyorsunuz: <data:post.body/>

Daha sonra bulduğunuz o kodu siliyorsunuz, yerine aşağıdaki kodu yapıştırıyorsunuz.

<script type='text/javascript'>
summary_noimg = 350;
summary_img = 250;
img_thumb_height = 80;
img_thumb_width = 80;
</script>
<script src='http://klod82.googlepages.com/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Devamını Oku</a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Eklediniz mi? Şimdi birkaç ufak ayar yaparak bu eklentiyi kendinize göre kişiselleştiriyorsunuz. Yukarıdaki kodun en üstlerinde bulunan şu satırlarda istediğiniz düzenlemeleri yapıverin:
summary_noimg = 350; --> Resim olmadığı zaman yazının 350 karakteri gösterilir.
summary_img = 250; --> Resim olduğu zaman yazının 250 karakteri gösterilir.
img_thumb_height = 80; --> Resimin yüksekliği 80px olarak ayarlı.
img_thumb_width = 80; --> Resimin genişliği 80px olarak ayarlı.

Düzenleme:Ve ayrıca şunu düzenlemenizde fayda var; kodun 7. satırında bulunan script kodunun içerisindeki javascript dosyasını kendi bilgisayarınıza indirip kendi hostunuza kurmalı ve koddaki linki değiştirmelisiniz. Yani oradaki
http://klod82.googlepages.com/summary-post.js
linkinin yerine kendi hostunuza yüklediğiniz js dosyasının linkini yazmalısınız.

Bu satırlardaki sayıları da düzenlediyseniz şablonunuzu kaydedebilirsiniz. Olası bir problem ile karşılaşmamak için düzenlemeleri yapmadan önce şablonunuzu bilgisayarınıza kaydedin.

Kodlar: TamBirBlog

Status Message(Durum Mesajı) Bloğunu Düzenliyoruz

Blogger'da etiketlerden herhangi birisine tıklayıp etiket sayfasını açtığınızda veya arama yapıp arama sayfasını açtığınızda "Status Message" isimli bir blok belirir sayfanızda. Bu blokta gittiğiniz sayfanın özelliğiyle ilgili bilgi verir. Örnek vermek gerekirse:
- "widget etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster"
- "Sorgunuzla eşleşen kayıt yok. Tüm kayıtları göster"
- "blogger sorgusuna yönelik kayıtlar görüntüleniyor. Tüm kayıtları göster"

Şimdi bu mesajın görüntülendiği bloğu düzenleyeceğiz. Bu blok normalde css kodlarınıza ekleyeceğiniz basit birkaç kod ile düzenlenebilir ancak ben html kodlarının da üzerinde duracağım.


Status Message bloğu, blog HTML'nizde "widget şablonlarını genişlet" seçeneğinizi aktif ettiğinizde karşınıza çıkan şu kodlar ile tanımlanmıştır:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

"Bazı Özel Kodlar" isimli yazıda anlattığım gibi b:includable kodu sadece bir nesneyi tanımlamaya yarar. O nesnenin nerede duracağını ise b:include koduyla düzenleriz. Yani üstteki kodları takiben şablonunuzda bir de b:include kodunun bulunması gerekiyor. Bu kod ise şudur:
<b:include data='top' name='status-message'/>

Evet bu kodları gösterdiğime göre düzenleme kısmına geçebilirim. Öncelikle renklendirme ve resim ekleme olayını anlatacağım. Bunu CSS aracılığıyla yapıyoruz.
Şablon HTML'mizde ctrl+f tuş kombinasyonunu kullanarak ]]></b:skin> kodunu arıyoruz, buluyoruz ve hemen üstüne şu kodları yapıştırıyoruz:

.status-msg-wrap {
width:90%;
padding:5px;
}
.status-msg-body {
font-size:80%;
text-align:left;
padding:5px 5px 5px 30px;
width:auto;
}
.status-msg-border {
border:1px solid #a19a36;
opacity:1;
}
.status-msg-bg {
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
opacity:1;
}

Renklerden ve biçimlendirmeden biraz bahsedecek olursam:

1) Kenarlık:
Yukarıdaki css kodlarında gördüğünüz border:1px solid #a19a36; kodu Status Message bloğunuzun kenarlıklarını belirtmek için kullanılmış. Buradaki 1px kenarlığın genişliğini, solid kenarlığın cinsini, #a19a36 ise kenarlığın rengini belirtir. 1px değerini büyüterek(2px,3px,..) kenarlığı kalınlaştırabilir, solid yerine dotted yazarak kenarlığı kesik çizgilerden oluşan bir hale getirebilir, #a19a36 yerine de başka bir renk kodu yazarak kenarlığın rengini değiştirebilirsiniz. Kenarlıkları kaldırmak için ise border:1px solid #a19a36; kodu yerine border:0; kodunu yazabilirsiniz.

2) Arkaplan Rengi
Yukarıdaki CSS kodları içerisinde gördüğünüz
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
kodundaki #FFF9B3 renk kodunun yerine başka bir renk kodu yazarsanız Status Message bloğunuzun rengini değiştirmiş olacaksınız.

3) Soldaki Resim
Yine bir üst maddede yazdığım kod olan
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
kodunun içinde soldaki resimin de kodu mevcut.
http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png
Bu resim linkinin yerine kendi resim dosyanızın linkini yazdığınız zaman Status Message bloğunuzun sol tarafında o resim çıkacaktır. Burada dikkat etmeniz gereken şey ise sizin yükleyeceğiniz resimin genişliği normalde orada bulunan resimin genişliğinden fazlaysa
padding:5px 5px 5px 30px;
Kodundaki 30px değerini büyütmeniz gerekir.

4) Status Message Bloğunu Kaldırmak
Bunu uygulamak için iki tane yöntem var:

4.1) Birinci yöntem CSS kodlarıyla kaldırmak, bu yöntemi kullanırsanız, Status Message bloğu aslında blogunuzda var olacak, ancak ziyaretçiler onu göremeyecek. Yukarıdaki CSS kodlarını blogunuza yapıştırdıysanız silin, çünkü ona artık ihtiyacınız kalmadı. Şimdi ]]></b:skin> kodundan hemen önce şu kodları yapıştıracaksınız:

.status-msg-wrap {
width:0;
height:0;
display:none;
}

Bu işlemi yaptıktan sonra şablonunuzu kaydedin. Olmuş olmalı :)

4.2) İkinci yöntem ise html kodlarının arasından b:include kodunu silmek. Şablon HTML'nizde "Widget Şablonlarını Genişlet" seçeneğini aktifleştirin ve ctrl+f yardımıyla şu kodu bulun:
<b:include data='top' name='status-message'/>
Ve o kodu silin... Şablonunuzu kaydettiğinizde olmuş olmalı :)

Yazı İçerisine Kod veya Şablon İçerisine Adsense Kodu Eklemek

Bazı bloggercı arkadaşlar yazı içine kod ekleyemezler. Ya kodları içlerine tire(-) işareti koyarak yazarlar, ya koddaki karakterleri tek tek değiştirmeye çalışırlar, ya da normal yapıştırırlar ama kodlar kod olarak değil de kodun karşılığı olarak görünürler.

Bazı arkadaşlar da Blogger Şablonunun içerisinde body tagından sonra Adsense kodlarını yerleştirmeye çalışırlar ancak blogger şablonunun içerisinde body tagından sonra script tagı eklenemez. Bu nedenle şablon hata verir.

İşte bu iki neden ile Blogger'da kullanamadığımız kodları dönüştürerek yerleştirmemiz gerekiyor.

Eskiden bu şekilde kodları ekleyebilmek için kodun içindeki çoğu karakteri
(<) işaretlerinin yerine (& l t ;) (>)işaretlerinin yerine (& g t ;) ve
(") işaretlerinin yerine (& q u o t;)
olacak şekilde el ile değiştirirdik. Şimdi ise bu işi blogger kullanıcıları için işkence olmaktan kurtaracak bir kod buldum bir yerden, BloggerDestek maskesi giydirdim ve sizler için yayınladım. Buradaki linke tıklayın ve açılan Pop-Up penceredeki büyük alana kodunuzu yazın/yapıştırın. Daha sonra "Çevir" butonuna bastığınızda kodunuz sizin için blogunuza yerleştirilebilir hale gelecektir. Daha sonra o kodu ne yapacağınızı siz biliyorsunuz. Bilmeyenler için:
http://www.bloggerdestek.com/2008/03/reklamlar-yaz-iinde-yaymlansn.html
http://www.bloggerdestek.com/2008/06/reklamlariniz-yazi-icinde-yayimlansin-2.html

Artı olarak bunu sadece reklamlar için mi kullanıyoruz? Hayır! Yukarıda da belirttiğim gibi ziyaretçilerinize/okurlarınıza göstermek istediğiniz kodları yazıya koyarken de çevirdikten sonra koyuyorsunuz. Umarım sizin için hazırladığım şeyi beğenirsiniz :)

Kod Çevir!

Blogger Sağ Tarafta Kayan Banner

Bir çok websitesinde görmüş olduğunuz sağ tarafta bulunan siz hareket ettikçe aynı doğrultuda hareket eden kayan bannerların blogger için nasıl yapıldığını bu yazıda bulabilirsiniz.
Birçok arkadaş biliyordur belki ama ben yinelemekte fayda buluyorum herkes kaynak sayfasından bu kodları bulmakla uğraşmasın burada elinin altında bulunsun.Bu kod ile reklamlarınızı kayan banner olarak yayınlayabilir ziyaretçinizin ilgisini biraz daha çekebilirsiniz bu ne kadar faydalı olur hiç bilemiyorum test etme imkanım olmadı.Neyse gelelim uygulama aşamasına;

1. Sayfanın herhangi bi yerine HTML/JavaScript ile eklemeniz gereken kod:
   

   
   <style type="text/css">
   
   #topbar{
   position:absolute;
   border: 0px solid black;
   padding: 0px;
   background-color: white;
   width: 111px;
   visibility: hidden;
   z-index: 0;
   }
   
   </style>
   
   <script type="text/javascript">
   var persistclose=1 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
   var startX = 10 //set x offset of bar in pixels
   var startY = 5 //set y offset of bar in pixels
   var verticalpos="fromtop" //enter "fromtop" or "frombottom"
   
   function iecompattest(){
   return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
   }
   
   function get_cookie(Name) {
   var search = Name + "="
   var returnvalue = "";
   if (document.cookie.length > 0) {
   offset = document.cookie.indexOf(search)
   if (offset != -1) {
   offset += search.length
   end = document.cookie.indexOf(";", offset);
   if (end == -1) end = document.cookie.length;
   returnvalue=unescape(document.cookie.substring(offset, end))
   }
   }
   return returnvalue;
   }
   
   function closebar(){
   if (persistclose)
   document.cookie="remainclosed=1"
   document.getElementById("topbar").style.visibility="hidden"
   }
   
   function staticbar(){
   barheight=document.getElementById("topbar").offsetHeight
   var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
   var d = document;
   function ml(id){
   var el=d.getElementById(id);
   if (!persistclose || persistclose && get_cookie("remainclosed")=="")
   el.style.visibility="visible"
   if(d.layers)el.style=el;
   el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
   el.x = startX;
   if (verticalpos=="fromtop")
   el.y = startY;
   else{
   el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
   el.y -= startY;
   }
   return el;
   }
   window.stayTopright=function(){
   if (verticalpos=="fromtop"){
   var pY = ns ? pageYOffset : iecompattest().scrollTop;
   ftlObj.y += (pY + startY - ftlObj.y)/8;
   }
   else{
   var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
   ftlObj.y += (pY - startY - ftlObj.y)/8;
   }
   ftlObj.sP(ftlObj.x, ftlObj.y);
   setTimeout("stayTopright()", 0);
   }
   ftlObj = ml("topbar");
   stayTopright();
   }
   
   if (window.addEventListener)
   window.addEventListener("load", staticbar, false)
   else if (window.attachEvent)
   window.attachEvent("onload", staticbar)
   else if (document.getElementById)
   window.onload=staticbar
   </script>
   
   
   <div id="topbar">
   Reklam kodunuzu buraya ekleyin
   </div>
   

   
   
   
2. Görmüş olduğunuz kodu eklerken en alt kısımda "Reklam kodunuzu buraya ekleyin" ibaresine dikkat edip gereken düzenlemeyi yapınız.
3. Daha sonra sayfanızda bir yere ekleyin ve Kaydettikten sonra reklamınız yayınlanıcaktır.İşte hepsi bu kadar basit.
4. Örnek görebilmek isteyen arkadaşlar için buyrun demo
   

Progress Bar Oluşturmak

Merhabalar.
Blogger Destek Merkezi üzerinde ilk yazım. Umarım faydalı ve güzel işler başarırız.
Bu yazıda size nasıl progress bar oluşturacağınızı anlatacağım. Her şey bittiğinde şöyle bir görüntü elde edebileceksiniz:

Peki bunu nerede kullanabiliriz? En basitinden makale yayınladığınız ya da derleme yaptığınız bloglarınızda mevcut projenizin durumunu gösterebilirsiniz. Fikir sizin.

Öncelikle şu kodları <head>...</head> arasına yerleştirelim.

<!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) -->
<!-- Licensed under a Creative Commons Attribution-Share Alike 2.5
License (http://creativecommons.org/licenses/by-sa/2.5/) -->
<style type="text/css">
div.smallish-progress-wrapper
{
/* Don't change the following lines. */
position: relative;
border: 1px solid black;
}

div.smallish-progress-bar
{
/* Don't change the following lines. */
position: absolute;
top: 0; left: 0;
height: 100%;
}
div.smallish-progress-text
{
/* Don't change the following lines. */
text-align: center;
position: relative;
/* Add your customizations after this line. */
}
</style>
<script type="text/javascript">
function drawProgressBar(color, width, percent)
{
var pixels = width * (percent / 100);

document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">');
document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>');
document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + '%</div>');
document.write('</div>');
}
</script>

Daha sonra progress barı nereye koyacağınıza karar verin ve şu kodları yapıştırın:

<script type="text/javascript">drawProgressBar('#987654', 200, 34);</script>

Buradaki değiştirebileceğiniz değerler:
200: Progress barın genişliği
#987654: Progress barın dolgu rengi
34: Progress barın % değeri

Kolay gelsin.

Pageaer Yapmak

Önceleri joomla da yada wordpresste pageear görmüşsünüzdür.Ben bloggerda nasıl durur niye merak etdim ve denedim.Şimdi nasıl yapıldığını anlatıyorum...

samall.png Bu pageear açılmadan önceki küçük resim {İndir!}
large.png Bu Pageear açıldıkdan sonra gözüken resim yani reklam {indir!}
reklam.js Bu ise javascript dosyamız {indir!}



Şimdi reklam.js dosyasını değiştireceğiz.İndirdiğimiz dosyayı wordpad de açıyoruz. Değiştirmeniz gereken linkleri kırmızıya işaretledim.

1-Pageeara tıklandıgı zaman yönlendiricek olan adres.

2-samall.png Bu pageear açılmadan önceki küçük resim buraya kendi resminizin linkini koyabilirsiniz

3-large.png Bu Pageear açıldıkdan sonra gözüken resim buraya reklamınızı koyulacak.değiştirmeler bitdikden sonra dosyayı kaydediyoruz ve upload ediyoruz.

Sonra kodumzudaki linki upload ettiğimiz reklam.js dosyası ile değitiriyoruz.

Kodumuz:
<script src='http://sedran.web.officelive.com/Documents/reklam.js' type='text/javascript'/>
ctrl+f tuşlarına basarak <body> kodunu arıyoruz ve önüne yukarıdaki kodu yapıştırıyoruz. Ve bitti.Bu kadar.

Blogger İçin Benzer Yazılar Eklentisi

Bir yazımız vardı benzer yazılar diye ve kelimelerin soyağacı'na link içeriyordu, ama oradaki yazı silinmiş. Bana da lazım oldu ilk baktığım yer burasıydı ama burada bulamadım biraz daha araştırdım bulduğum yazıyı bu kez link vermeden ben yazıyorum.
Gerekli gördüğüm açıklamalar;
-Bu eklentinin çalışma mantığı şu; bir yazının altında o yazıda bulunan etiketlerdeki yazıların bağlantıları çıkıyor, bunu RSS'den Javascript aracılığıyla getiriyor ve bu nedenle etiketlerimizin isimlerindeki Türkçe karakterler görünmüyor. Bu nedenle bu eklentiyi kuracaksak etiketlerimizi Türkçe karakter olmadan yazalım. (ğ,ü,ş,ı,ö,ç yerine g,u,s,i,o,c)


Şimdi gelelim eklentinin kurulmasına;;
- Blogger Kontrol Panelinden blogunuzun yönetim paneline girin ve HTML'yi düzenle kısmına gelin.
- Widget şablonlarını genişlet seçeneğini tıklayın.
- CTRL+F yardımıyla <data:post.body/> kodunu bulun.
- Altına şu kodları yerleştirin;

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
  <div class='widget-content'>
<h3>Benzer Yazılar</h3>
<div id='data2007'/><br/><br/>
      <script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
               json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
  var entry = json.feed.entry[i];
  var alturl;

  for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
      alturl = entry.link[k].href;
      break;
    }
  }
  var li = document.createElement(&#39;li&#39;);
  var a = document.createElement(&#39;a&#39;);
  a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
  if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
     div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;data2007&#39;).appendChild(div1);
  }
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
  textLabel = &quot;<data:label.name/>&quot;;

  var test = 0;
  for (var i = 0; i &lt; labelArray.length; i++)
  if (labelArray[i] == textLabel) test = 1;
  if (test == 0) {
     labelArray.push(textLabel);
     var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
            labelArray.length : maxNumberOfLabels;
     if (numLabel &lt; maxLabels) {
        search10(homeUrl3, textLabel);
        numLabel++;
     }
  }
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

-Bu kadar. Şablonunuzu Kaydedin.
Hayırlı Günler Dilerim :)

Wordpress Gibi Yazı İçinde Yorum Formu

Blogger Draft üzerinde yapılan yeniliklerden birisi de bugün ortaya çıktı! Blogger'de artık yazı içine yorum formu ekleyebiliyoruz. Şüphesiz bu biz blogger yazarlarının en çok istediği şeylerden birisiydi ve bu özellik meydana çıktı. Bu özelliğin nasıl uygulanacağını hemen büyük blogger yazarları bloglarında yazmışlar bize de bunu çalıp buraya yazmak düşmez ya :) İşte Mafiamax'ın anlatımıyla Blogger'da Yazı İçine Yorum Formu Eklemek; tıkla!

Etiketler Sorunu İçin Çözüm Önerisi

Merhaba,
Önceki yazılardan birisinde etiket sayfalarında çok fazla yazı gösterilmesi sorununa bir çözüm aranmıştı.
Orada verilmiş bir URL eklentisi vardı: ?max-results=3 şeklinde.
Bu URL eklentisini aldım didikledim didikledim ve sanırım sorununuza çare olacak birşey buldum :)
Burda vereceğim kodlar blogger şablonunuzun bayağı bir içine gömülmüş olduğundan böyle ince ayarlar yapmadan önce şablonunuzu yedekleyin.

Şimdi, Öncelikle HTML Düzenleye giriyoruz blogumuzda...
"Widget Şablonlarını Genişlet"'e tıklıyoruz. Tıkladık mı?
Sonra açılan sayfada CTRL+F yardımıyla data:label.url kodlarını buluyoruz ve bulduğumuz bütün data:label.url kodlarını şununla değiştiriyoruz;

data:label.url + "?max-results=3"

Normal bir blog sayfasında bu koddan 2 yada 3 tane olması gerekir. Neyse, bunları yaptıktan sonra şablonumuzu kaydediyoruz. Ve etiketlerimizin linklerine bakıyoruz linkin sonuna ?max-results=3 eklenmişse tamamdır başardınız.

Edit+Not:Etiketler sayfalarınızın bir tanesinde kaç tane yazı gösterilmesini istiyorsanız koddaki 3 rakamının yerine onu yazınız.

İyi günler dilerim efendim :)

Reklamlarınız Yazı İçinde Yayımlansın 2

Adsense'den aldığımız kodun ana sayfaya değil de yazı sayfalarına, ve yazıların üstüne eklenmesini şu yazıda görmüştük. Reklamlar Yazı İçinde Yayımlansın.
Bu şekilde yaptığımızda reklamlar yazı sayfasında, yazının üstünde görünüyordu.
Şimdi bu reklamları tasarım açısından hoş bir hale getirmek için kendim de uyguladığım ve gelirimi de iyi arttırdığını gözlemlediğim bir yöntemi anlatayım.
Bu yazıyı uyguladıktan sonra adsense reklamınız yazı içinde, yazı ile aynı hizada yazının sağında veya solunda olarak görünecekler.
İlk iş olarak blogumuzun paneline girip, Yerleşim -> HTML'yi Düzenle kısmına giriyoruz ve Widget Şablonlarını Genişlet seçeneğini açıyoruz.
1) Adsense'den kodlarımızı alıyoruz. Bunu yapmayı biliyorsunuzdur. Yazının dizaynını bozmaması için alacağınız reklamların boyutu 200x200 idealdir bence.

2) <data:post.body/> kodunu buluyoruz ve üzerine şu kodları yapıştırıyoruz;
<span style='float:right;'>
<b:if cond='data:blog.pageType == "item"'>

</b:if></span>
b:if ile başlayan kodlar reklamın sadece yazı sayfalarında görünmesini, yani ana sayfada görünmemesini sağlar, span kodu arasına almamın nedeni ise sağa dayalı yapmak için float css tagını eklemektir. float: right yerine float:left yazarsanız reklamlarınız sola dayalı olur.
3)Bu kodların arasına adsense reklam kodumuzu yerleştiriyoruz ve
Yerleştirdiğimiz adsense kodlarındaki bütün
(<) işaretlerinin yerine (& l t ;) (>)işaretlerinin yerine (& g t ;) ve
(") işaretlerinin yerine (& q u o t;)
kodlarını yazıyoruz. Tabi parantezsiz ve karakterlerin aralarındaki boşlukları silerek. Biz bu kodları aralarında boşluklar olarak verdik çünkü burada o kodları yazdığımızda otomatik olarak simgelediği işarete dönüşüyor.
Daha sonra şablonumuzu kaydediyoruz.
Örnek olarak PCDostu'ndaki herhangi bir yazıya girebilirsiniz.

Rastgele Bağlantılar Eklentisi

Blogunuzda fazla bağlantı değişimi yaparak, 30-40 veya daha fazla bağlantıyı blogunuzda bulundurmak zorunda olabilirsiniz. Bu bağlantıları azaltmanın 2 yolu vardır:
a. 30-40 bağlantıdan çoğunu blogunuzdan çıkartıp, 'bağlantımı niye kaldırdın' diye mail atanlara cevap vermeyerek.
b. Bu işten herkes karlı çıksın deyip, Rastgele Bağlantılar eklentisini uygulayarak.
Benim bu ikisinin arasında bi' seçim yapmam gerekiyordu. Ben ilk önce a'yı seçtim. Pişmanlık duydum:) Yeni temaya geçtikten sonra b'yi seçtim. Bende mutlu oldum, bağlantı değişimi yaptıklarımda mutlu oldu.(umarım)
Bugün burada bulunma amacım sizlere Rastgele Bağlantıların nasıl yapıldığını anlatmak.
NOT: Her zamanki gibi, Blogger Kontrol Panelini baz alarak anlatımı yapıyorum. Diğer sistemler beni ilgilendirmiyor.
1. Yerleşim>Sayfa Öğeleri>Sayfa Öğesi Ekle yolunu izliyoruz.
2. HTML/JavaScript'i seçiyoruz. Aşağıdaki kodu ekliyoruz.

<script charset="utf-8" type="text/javascript">

var chess_blogs = [
'<a href="http://www.baglanti1.com/" target="_blank">Bağlantı 1</a>',
'<a href="http://www.baglanti2.com/" target="_blank">Bağlantı 2</a>',
'<a href="http://www.baglanti3.com/" target="_blank">Bağlantı 3</a>',
'<a href="http://www.baglanti4.com/" target="_blank">Bağlantı 4</a>',
'<a href="http://www.baglanti5.com/" target="_blank">Bağlantı 5</a>'
];

function randomize (a_items, n_count) {
   var n_index, s_html = '
';
   while (a_items.length && n_count) {
       n_index = Math.ceil(Math.random() * a_items.length) - 1;
       s_html += '
' + a_items[n_index] + '
';
       a_items[n_index] = a_items[a_items.length - 1];
       a_items.length = a_items.length - 1;
       n_count--;
   }
   return s_html + '
';
}

document.write (randomize (chess_blogs, 3));

</script>

3. Buradaki bağlantıları kendinize göre düzenleyebilirsiniz. Dikkat etmeniz gereken bir nokta: En son düzenlediğiniz bağlantının sonunda ,(virgül) yok.
4. Sayda rastgele kaç bağlantı olmasını istiyorsanız chess_blogs, 3 kelimesini aratın. Burdaki 3, rastgele 3 bağlantının gözükeceğini gösteriyor. Bunu kendinize göre düzenleyin.
Oldu bitti.