2009-Son 24 Saat

Bloggerde Yazarların Resimlerini Göstermek

Etiketler: Blogger

Blogunuzdaki yazarların resmini gösterin.

1 -

<b:if cond='data:top.showAuthor'>
  <data:top.authorLabel/> <data:post.author/>
</b:if>

Bununla değiştirin

<div class='post-avatar-frame'>
<div class='post-avatar'>
<script type='text/javascript'>
makeprofilelink(&quot;<data:post.author/>&quot;,&quot;img&quot;);
</script>
<b:if cond='data:top.showAuthor != &quot;true&quot;'> 
<data:post.author/>
</b:if>
</div></div>

<b:if cond='data:top.showAuthor'>  
<data:top.authorLabel></data:top.authorLabel>
<script type='text/javascript'>
makeprofilelink(&quot;<data:post.author></data:post.author>&quot;,&quot;txt&quot;);
</script>
</b:if>

2 - Javascript Kodları <head> </head> arasına,

<script type='text/javascript'>
  var team = new Array();
  team[&quot;yazar&quot;]=&quot;12312312312321353231&quot;;
  team[&quot;yazar1&quot;]=&quot;45645656876854645645&quot;;
  team[&quot;yazar2&quot;]=&quot;456456565646&quot;;
  team[&quot;yazar3&quot;]=&quot;7537537537535314&quot;;
  function makeprofilelink (authorname, type) {
   var pid = team[authorname];
if (type==&quot;img&quot;) { document.write(&quot;<a href='http://www.blogger.com/profile/&quot; + pid + &quot;'><img class='post-avatar' height='40' src='http://isminiz.googlepages.com/resim/&quot; + authorname + &quot;.jpg' title='View Profile'/></a>&quot;); }
else if (type==&quot;txt&quot;) { document.write( &quot;<a href='http://www.blogger.com/profile/&quot; + pid + &quot;'>&quot; + authorname + &quot;</a>&quot;); }
else { document.write(&quot;<a href='http://www.blogger.com/profile/&quot; + pid + &quot;'>&quot; + authorname + &quot;</a"&quot;); }
}
</script>

3 - Css Kodları <head> </b:skin> arasına,

.post-avatar {
border-style:none;
display:block;
}
.post-avatar-frame {
background:#FFFFFF; //arkaplan rengi
border-style:none;  //kenar çizgisini gösterme
display:block;      //sayfada göster
float:left;         //sola yasla
}

Değiştirmeniz gereken yerler :

1- team["yazar"]="12312312312321353231";
2- http://isminiz.googlepages.com/resim/" + authorname + ".jpg

- Burada dosya uzantısı jpg,png,gif olabilir.
Kaynak : Googlegroups - Blogger Yardım Grubu

Demo : demo adresi

17:22 No comments

Blogger İçin Faydalı Eklentiler ve Temalar

Etiketler: Blogger, Her eve lazım, Widget

Bloggerde istediğiniz kadar yazı listeleme (random widget) - Erman Haskan
Otomatik Devamını oku Bağlantısı (auto read-more) - Blogsolute
Recent Post Thumbnail Widget Gadget - Bloggerplugins
Blogger Son yorumlar && Son Yazılar Gadget Eklentisi - Bloggerbuster
Benzer Yazılar (Related Posts Widget Thumbnail) - Linkwithin
Bloggerde sadece yazı başlıklarını listelemek - Mafiamax

Blogger için Tema Adresleri

Blogger Tema Templates Şablon - Bloggertema
Blogger templates,blogger templates BTemplates
Blogger template premium templates - Magznetwork
Free blogger templates wordpress to blogger template - EBlogTemplates

23:36 No comments

Magazine Blogger Template

Etiketler: Blogger, Firefox, IE

Yeni ve güzel bir blogger temasıyla karşınızdayım.Asıl wordpress temasına uyarlanmış fakat biliyorsunuz genelde wordpressten bloggere uyarlama çok oluyor zaten genelide öyle.Normalde devamı oku linkini ayrıca belirtiriz 2 etiket arasında bununla öyle bir mesrafa girmeye gerek yok.Kullanım konusunu aşağıda açıkladım.İndirmek isteyenler buradaki linkten indirip kullanmaya başlayabilirler.Örnek bir şablon ise şuradaki linkte mevcut ayarları kendinize göre yaparsınız.

Henüz resim eklemedim ama demolara bakarak görebilirsiniz..

Wordpress Theme Demo - Blogger Theme Demo

İndirmek için tıkla

Resimleri özel olarak göstermek için bu adresi kullanabilirsiniz
<img class="thumbnail" alt="thumbnail" src="http://resim-adresi.jpg"/>

Yukardaki menu için aşağıdaki kodları header kısmındaki widget ekle kısmından yapabilirsiniz

Suscríbete vía RSS
                  
Ana Sayfa
Kategori
Kategori
Kategori
Kategori
Kategori

Yine aynı şekilde sağdaki html/javascript kısmını açıp kodları ekleyiniz

Yukardaki navbarı kaldırmak isterseniz bu kodu html düzenle kısmından <head> <b:skin/> kodları arasında yerleştirin.

#navbar-iframe {
      height:0px;
      visibility:hidden;
      display:none;
      }

Tarayıcı olarak ie8 ve firefoxda denenmiştir.

20:19 No comments

IE6 ve IE7 Css Sorunu

Etiketler: Css, IE

Benim sorunum ie7 ile alakalıydı aslında ufak bir araştırmadan sonra işimi ayrı bir css dosyası hazırlayarak hallettim.

<!--[if lte IE 7]>

<![endif]-->

Firefoxta ve IE7'de düzgün çalışan transparent png dosyası ie6 tarayıcısında bozuk halde çıkıyor.Bu sorunu halletmek için aşağıdaki yöntemi uyguladım ve güzel bir sonuç aldım.

div#bottom_fade { 
 width: 590px; height: 50px; 
 top:420px; position: absolute; 
 z-index:99; left: 22px;
 background-image: url(image/adres.png)!important;
 background-image: none;
 filter: none !important;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader 
 (src='image/adres.png', sizingMethod='scale');}

IE 6 da top ve left kodları işlemiyor onun içinde ayrıca ie6 css oluşturdum.(bknz)

<!--[if IE 6]>

<![endif]-->

elim değmişken ie 5.5 geçmeyi düşünüyordum fakat sitenin durumu iyi görünmüyordu.Kullanan varsa halen benim yapabileceğim bu kadar umarım akılda kalıcı bir bilgi olmuştur.

21:41 No comments

Bloglar için Google Translate Api Eklentisi

Etiketler: Blogger, Translate, Widget

Sayfama yerleştirmedim fazla kasmaması için ama örnek için şuraya bakabilirsiniz.Google api altyapısını kullanarak ayrıca bir sayfa açmaya gerek duymadan otomatik çeviri yapıyor.Hazır google translateye türkçe dili eklenmişken denemek istedim.Kullanışlı bir eklentiye benziyor ama blogunuzda java script fazlasıyla varsa açılma süreside uzar.Kullanmak isterseniz aşağıdaki javascript dosyalarını ücretsiz bir host bularak kullanabilirsiniz.

<script src='translate/js/jquery-latest.pack.js' type='text/javascript'></script>
<script src='translate/js/jquery.cookie.js' type='text/javascript'></script>
<script src='translate/js/jsapi.js' type='text/javascript'></script>
<script src='translate/js/translate.pages.js' type='text/javascript'></script>

Sonra sayfanızda arayarak <data:post.body/> bulun.

<div id='main' style='font-size: 12px;'>
<div class='sayfa' style='border: 0px inset ; margin: 0px; padding: 0px; overflow: auto; width: 490px;'>
<data:post.body/> </div>
<div class='translate_sayfa' style='display:none;'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
<div style='float: right; margin-top: 15px;'> </div>
</div>

Buradaki kodla değiştirin.

11:02 2 yorum

Blogger Yeni Tema

Etiketler: Blogger İpuçları

Demo - İndir

Şablonu yükledikten sonra aşağıdaki html dosyasını ekleyin

<form id="searchform" action="/search" method="get">
  
<div class="search-form clearfix">
<input id="searchbox" name="q" onblur="if (this.value == '') {this.value = 'search our site...';}" onfocus="if (this.value == 'search our site...') {this.value = '';}" type="text" value="search our site..." /><input class="submit" type="submit" value="enter" />
  </div>
</form>

Eklemek isterseniz bunlarda flickr resimleri