Web Günlüğü

Blogger Webkid Teması

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.

Xiaomi Mi Band 2 Akıllı Bileklik İncelemesi

Xiaomi Mi Band 2 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.

Hyde Blogger Teması

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

Blogger Resmi Sosyal Paylaşım Butonları

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'/>

Willow Blogger Teması

willow blogger temasıWillow blogger teması, Raivis Vitols arkadaşımızın Ghost blog platformu için hazırlamış olduğu bir temaydı. Ben de boş bir vaktimde bloğum için yeni bir tema arayışında iken blogger'a entegre etmiş bulundum. Fakat daha sonra kullanmak yerine paylaşmayı tercih ettim.

Tabi temayı entegre ederken küçük değişikler ve eklemeler yaptım. İlk başta ana sayfada yazılar için etikete göre görsel gösterme işlemini yaparken, sonrasında yazı görselinin daha iyi olacağını düşündüm. (Ana sayfada resimlerin daha orantılı gözükmesi için yazı için eklenen görsellerin 600*300 veya katları olması gerekiyor.) Ayrıca yorum formu var olan temada bulunmadığı için bizzat kendim sade bir şekilde düzenledim.

Önizleme : http://bloggerwillowtemplate.blogspot.com/ncr

İndirme : https://yadi.sk/d/ZY1hBqsAyYkkc