Web Günlüğü

14.05.2017

Blogger yorum yazarlarının avatar boyutu nasıl değiştirilir

Blogger yorumlarda yer alan avatarların (yorum yazar resimleri) boyutu CSS ile artırılıp, azaltılabiliyor. Fakat bunu yaparken çözünürlük ayarlarına müdahele edilemediği için bozuk görüntüler ortaya çıkıyor.

Daha önce kullandığım temaların birisinde çözünürlük değiştirmeye yarayan javascript koduna denk geldim. Bu kod sayesinde avatar boyutları artıldığında oluşan bozukluk da ortadan kalkmış oluyor.

CSS ile avatar boyutunu değiştirme

.avatar-image-container{
margin-left: -30px;
background:#fff;
height:70px;min-height: 70px;
width:70px;min-width:70px;
}
.avatar-image-container img {background: url(http://2.bp.blogspot.com/-gcjQ0sgWw7M/T6WpkK4S5AI/AAAAAAAACEQ/hYAWpCPl6P0/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}

JavaScript ile çözünürlük değiştirme /body (bitiş etiketinin önüne)

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.comments .comments-content .avatar-image-container img').each(function(){
this.src = this.src.replace('/s35-c/', '/s80-c/');
});
$('.comments .comments-content .avatar-image-container img').each(function(){
this.src = this.src.replace('/s35/', '/s80-c/');
});
});
//]]>
</script>

*/s-35-c/ varsayılan olarak gelen değer /s80-c/ yeni atanan değer. Eğer 80*80 den fazla büyüklükte avatar kullanılacaksa ona göre değişiklik yapılabilir.

24.02.2017

Blogger Webkid Teması

Blogger Webkid teması, mobil cihazlar ile uyumlu diğer bir deyişle responsive, Ghost blog platformu için hazırlanan temalardan entegre ettiğim diğer bir tema. Teamada kullandığım eklentiler için, blogger instagram eklentisi, blogger son yorumlar eklentisi ve blogger son tweetleri gösterme yazılarına bakılabilir.

Son Yazılar Eklentisi Kodları :

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Ocak",A[2]="Şubat",A[3]="Mart",A[4]="Nisan",A[5]="Mayıs",A[6]="Haziran",A[7]="Temmuz",A[8]="Ağustos",A[9]="Eylül",A[10]="Ekim",A[11]="Kasım",A[12]="Aralık",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+v+" "+A[parseInt(w,10)]+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<style>
      .recent-post-title{margin-left: -10px;}
#HTML1 .widget-content {
    padding: 1em;
}

#HTML1 .widget-content ul li a {
    font-weight: bold;
}
</style>

Tema Önizleme : http://webkidtema.blogspot.com

Tema İndirme Adresi : https://yadi.sk/d/BfUyU97g3EU5sU

UYARI : Temada kaynaklanan sorunlar nedeniyle kullanmamanız tavsiye olunur.

19.01.2017

Xiaomi Mi Band 2 Akıllı Bileklik İncelemesi

En son aldığım bir teknoloji ürünü olan xiaomi mi band 2 isimli akıllı bileklik oldu. Teknoloji takipçisi biri olarak ben de elimden geldiği kadar aşırı olmamak kaydıyla yeni çıkan, fark yaratan ürünleri, hizmetleri test etmeye, alıp kullanmaya çalışıyorum. Tabi şunun yenisi çıkmış bundan alayım, a bunun da yenisi çıkmış bundan da alayım, en sonu ben alayım, en iyiyi en pahalıyı ben alayım gibi bir takıntım da yok açıkçası. Ben teknolojiyi daha çok ihtiyaç, eksikliği giderme, kolaylık sağlama amaçlı kullanan birisiyim.

04.12.2016

Hyde Blogger Teması

Hyde Blogger Teması yaklaşık bir hafta önce uyarlama yaptığım diğer sade blogger temalarından birisi. Aslı Mark Dotto tarafından Jekyll blog platformu için hazırlanmıştı.

Hyde Blogger Teması ile ilgili kısa bilgiler

Tema varsayılan hariç 8 farklı renk seçeneğine sahip olup <body> etiketine renklere ait class ismi eklenerek kullanılabiliyor. Fakat ben bir güzellik yaparak jQuery ve Cookies (çerezler) nimetlerinden yararlanarak dinamik bir hale getirdim. Önizleme adresinden de görüleceği gibi tek tıklamayla renk değişimi yapılabiliyor. Sidebar'ı da sağ tarafta göstermek için böyle bir kolaylık sağladım. Üstelik bu değişiklik cookies'ler vasıtasıyla kaydedildiği için sayfa yenilemesinde veya daha sonraki ziyaretlerde değişmiyor. Bu özelliğin blogger temalarında bir ilk olduğunu da belirtmeden geçemeyeceğim. Bu özellik sadece değişikliği yapan ziyaretçi için geçerli. Eğer statik bir şekilde bütün kullanıcılara aynı renk yansıtılacaksa yine body etiketine manuel olarak class ismi eklemek gerekiyor.

Statik renk değişimi için class isimleri

theme-base-08
theme-base-09
theme-base-0a
theme-base-0b
theme-base-0c
theme-base-0d
theme-base-0e
theme-base-0f

Kullanımı

<body class="theme-base-08">
...
</body>

Sidebar'ı sağ tarafta gösterme

<body class="layout-reverse">
...
</body>

Farklı renk ayarı ile birlikte sidebar'ı sağ tarafta gösterme

<body class="theme-base-08 layout-reverse">
...
</body>

Tema Önizleme : http://hydebloggertemplate.blogspot.com

Tema İndirme Adresi : https://yadi.sk/d/Pt261kpi32E5a4

Alternatif ve temanın güncel hali için : https://github.com/zaferzent/hydebloggertemplate

20.11.2016

Blogger Resmi Sosyal Paylaşım Butonları

Şuan bloğumda kullanmakta olduğum blogger resmi sosyal paylaşım butonları üşenilmeden sosyal ağ sitelerinden direkt olarak alınmıştır. Aslında üçüncü parti veya özel paylaşım butonları yapılıp kullanılabilir. Fakat resmi sosyal paylaşım butonlarının kendilerine özel sayaç sisteminin olması(twitter yakın zamanda sayaç sistemini kaldırmış) ve renkli bir hava kattığı için daha cazip geliyor.

Tabi ben butonları yalın halde paylaşıyorum bloglardan kaynaklanan sorun sebebiyle düzenleme yapılması gerekebilir. Ayrıca Facebook'un Beğen ve Paylaş butonlarının sayaçları aynı sayaç üzerinden çalışmakta özetle bir yazı bir defa beğenilmişse bir defa da paylaşılmış sayılıyor. Bu yüzden ya beğen ya da paylaş butonunun herhangi birini tek başına kullanmak gerekiyor.

Eğer kodlar eklendikten sonra sablon editöründe özel karakterler ile ilgili bir hata uyarısı alınıyorsa kodlar blogger kod dönüştürücü aracı ile dönüştürülüp eklenebilir.

Resmi sosyal paylaşım butonları için gerekli kodlar

Facebook Paylaş Butonu

<iframe allowTransparency='true' expr:src='"https://www.facebook.com/plugins/share_button.php?href=" + data:post.canonicalUrl + "&layout=button_count&size=small&mobile_iframe=true"' frameborder='0' scrolling='no' style='height:20px; width: 75px;'/>

Facebook Beğen Butonu

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='height:20px; width: 75px;'/>

Twitter Tweet Butonu

<a class='twitter-share-button' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Google Plus +1 Butonu

<script async='defer' src='https://apis.google.com/js/platform.js'/>
<g:plusone size='medium'/>