Web Günlüğü

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

14.11.2016

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

11.11.2016

Blogger yazı etiketine özel ikon nasıl gösterilir

Blogger yazı etiketine özel ikon gösterme olayı şuan benim bloğumda da kullanmış olmuş olduğum kısa bir kod parçasından ibaret fakat her etiket için aynı kodu koplamak ve o etikete ait bir ikon veya görsel belirlemek gerekiyor. Eğer çok fazla etiket kullanılıyorsa bu işlemi sadece önemli etiketlerde veya sık kullanılan etiketler için uygulamakta fayda var.

Ben ikonlar için Font Awesome ikon fontunu kullanıyorum. Bu sistem içerisinde yüzlerce resmi ve gayrıresmi ikon bulunuyor. İkonların font haline dönüştürüldüğü, resimler kadar siteyi yormayan bir araç. Eğer normal ikon kullanılmak isteniyorsa google'dan veya ücretli-ücretsiz ikonların bulunduğu diğer sitelerden yararlanılabilir.

Aşağıdaki kodlar ikonların gösterilmek istendiği yere koyulmalı. Turuncu olarak belirttiğim satırlar yazıya eklenmiş sadece son etiketi temsil ediyor. Eğer yazıda birden fazla etiket kullanılıp hepsinde ikon gösterilmek isteniyorsa turuncu olan satırlar kaldırılmalı.

blogger yazı etiketine özel ikon gösterme kodları

<b:loop values='data:post.labels' var='label'> 
    <b:if cond='data:label.isLast == "true"'> 
        <!-- Birinci etiket -->
        <b:if cond='data:label.name == "Facebok"'>
        <i class='fa fa-facebook'/> veya <img src="resimadresi"/>
        </b:if>
        <!-- Birinci etiket bitiş -->

        <!-- İkinci etiket -->
        <b:if cond='data:label.name == "Twitter"'>
        <i class='fa fa-twitter'/> veya <img src="resimadresi"/>
        </b:if>
        <!-- İkinci etiket bitş -->
    </b:if>
</b:loop>

08.11.2016

Blogger Son Yorumlar Eklentisi

Şuan bloğumda kullanmış olduğum blogger son yorumlar eklentisi basit bir eklenti gibi gözükse de bu eklentiyi bulmak ve düzenleme yapmak bir hayli zordu. Bir çok benzer son yorumlar eklentisi mevcut fakat şifrelenmiş veya çok uzun satırlara sahip olması tercih etmememe neden oldu.

Bulduğum bu eklenti istediğim şekilde olmasına rağmen büyük gibi görünen aslında küçük bir sorunu vardı bu da yorum içerisinde gösterilen yazı başlıklarına ait bağlantıların hatalı olmasıydı. Normalde yazı başlıklarına tıklanıldığında direkt olarak o yoruma gitmesi gerekiyordu. Yani bağlantı yapısı yazı sonundan itibaren ?showComment=1477700577162#c4202767265987136193 şeklinde olmalıydı ki o yoruma gitsin fakat bağlantılar sadece ?showComment=1477700577162 şeklindeydi ve bu yüzden yazıya ait o yoruma gitmiyordu. Aslında zorluk yaşamamın sebebi javascript özürlüsü olmamdan kaynaklı. Yapılması gereken sadece bir harf değişikliğiymiş.

İlerde hem kendime hem de diğer blogger kullanıcılarına gerekli olur diye daha kolay ulaşmak için bloğumda kodları paylaşayım istedim. Fakat herhangi bir görsel geliştirme yapmadım. Biraz CSS bilgisiyle istenilen şekilde özelleştirilebilir.

Demedi demeyin bu eklentinin aynısını bulabilirsiniz fakat düzenlenmiş halini bulamazsınız, köşeye bir yere sıkıştırın.

Son Yorumlar Eklentisi kodları :

<script type="text/javascript">
var a_rc = 5; // Gösterilecek yorum adedi
var m_rc = false; // Tarih göster/gizle true/false
var n_rc = true;  // Yazı başlığı göster/gizle true/false
var o_rc = 100; // Yorum uzunluğu karakter sayısı
function showrecentcomments(e){for(var r=0;r<a_rc;r++){var t,n=e.feed.entry[r];if(r==e.feed.entry.length)break;for(var i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel){t=n.link[i].href;break}t=t.replace("#","#");var a=t.split("#");a=a[0];var c=a.split("/");c=c[5],c=c.split(".html"),c=c[0];var s=c.replace(/-/g," ");s=s.link(t);var o=n.published.$t,l=(o.substring(0,4),o.substring(5,7)),u=o.substring(8,10),m=new Array;if(m[1]="Ocak",m[2]="Şubat",m[3]="Mart",m[4]="Nisan",m[5]="Mayıs",m[6]="Haziran",m[7]="Temmuz",m[8]="Ağustos",m[9]="Eylül",m[10]="Ekim",m[11]="Kasım",m[12]="Aralık","content"in n)var d=n.content.$t;else if("summary"in n)var d=n.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("Tarih "+m[parseInt(l,10)]+" "+u+" "),document.write('<span class="author-rc"><a href="'+t+'">'+n.author[0].name.$t+"</a></span> -  "),1==n_rc&&document.write(s+" "),0==o_rc)document.write("</div>");else if(document.write(": "),d.length<o_rc)document.write("<span>&#8220;"),document.write(d),document.write("&#8221;</span></div>");else{document.write("<span>&#8220;"),d=d.substring(0,o_rc);var w=d.lastIndexOf(" ");d=d.substring(0,w),document.write(d+"&hellip;&#8221; </span></div>"),document.write("")}}}
</script>
<script src="http://www.zaferzent.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

* http://www.zaferzent.com yazan yeri kendi blog adresiniz ile değiştirin.

14 Mart 2019 Güncelleme :
Son Yorumlar Eklentisi 2 (Bloğumda aktif kullandığım son yorumlar eklentisi)

<style type="text/css">
a.sneeit-srcbw {
    /*item-color*/color: #000000;/*item-color*/
    /*border-color*//*border-color*/
    display: block;
    padding: 0.5em 1.5em;
    position: relative;
}
.sneeit-srcbw-icon-comment {
    position: absolute;
    left: 0;
    top: 1.1em;
}
.sneeit-srcbw-icon-arrow {
    /* arrow-icon-color*/color: #ff4400;/* arrow-icon-color*/
    position: absolute;
    right: 0;
    font-size: 200%;
    top: 50%;
    margin-top: -0.55em;
}
.sneeit-srcbw-credit {
    font-size: 90%;
    text-align: right;
    padding: 1em 0;
    /*credit*/display: none;/*credit*/
    /*border-color*/border-top: 1px solid #dddddd;/*border-color*/
}
html[dir="rtl"] .sneeit-srcbw-icon-comment {
    right:0;
    left: auto;
}
html[dir="rtl"] .sneeit-srcbw-icon-arrow{
    left:0;
    right: auto;
}
html[dir="rtl"] .sneeit-srcbw-credit {
    text-align: left;
}
</style> 

<script type="text/javascript">
// settings
var sneeit_srcbw_count = 5;
var sneeit_srcbw_summary_length = 500;
var sneeit_srcbw_icon_comment = 'fa-comments-o';
var sneeit_srcbw_icon_arrow = 'fa-angle-right'; _s7MpY = ['link','href','font-awesome','link','text/css','stylesheet','https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css','string','undefined','feed','entry','Yorum bulunamadı',' ...','','','alternate','self','#','/','#c','<a class="sneeit-srcbw" href="','"><i class="sneeit-srcbw-icon-comment fa ','"></i><span><strong>',':</strong> ','</span><i class="sneeit-srcbw-icon-arrow fa ','"></i></a>','<span class="sneeit-srcbw-credit">Powered by <a href="https://bloghocam.blogspot.com" target="_blank">Blog Hocam</a></span>','<script type="text/javascript" src="https://www.zaferzent.com/feeds/comments/summary?alt=json-in-script&max-results=','&callback=_fWeX"><\/script>'];var _vRvL=document.getElementsByTagName(_s7MpY[0]);for(var _vObG=0;_vObG<_vRvL.length;_vObG++){if(_s7MpY[1] in _vRvL[_vObG]&&_vRvL[_vObG].href.indexOf(_s7MpY[2])!=-1){break;}}if(_vObG>=_vRvL.length){var _vThG=document.createElement(_s7MpY[3]);_vThG.type=_s7MpY[4];_vThG.rel=_s7MpY[5];_vThG.href=_s7MpY[6];document.head.appendChild(_vThG);}function _fWeX(json){if(typeof(json)==_s7MpY[7]||typeof(json)==_s7MpY[8]||!(_s7MpY[9] in json)||!(_s7MpY[10] in json.feed)||!json.feed.entry.length){document.write(_s7MpY[11]);return;}for(var _vObG=0;_vObG<json.feed.entry.length;_vObG++){var _vIfF=json.feed.entry[_vObG];var _vMcB=_vIfF.author[0].name.$t;var _vHnM=_vIfF.summary.$t;if(_vHnM.length>sneeit_srcbw_summary_length){_vHnM=_vHnM.substring(0,sneeit_srcbw_summary_length)+_s7MpY[12];}var _vSrM=_s7MpY[13];var _vPmR=_s7MpY[14];for(var _vSeB=0;_vSeB<_vIfF.link.length;_vSeB++){var _vThG=_vIfF.link[_vSeB];if(_s7MpY[15]==_vThG.rel){_vSrM=_vThG.href;}else if(_s7MpY[16]==_vThG.rel){_vPmR=_vThG.href;}}if(!_vSrM){continue;}if(_vSrM.indexOf(_s7MpY[17])==-1){_vPmR=_vPmR.split(_s7MpY[18]);_vPmR=_vPmR[_vPmR.length-1];_vSrM+=(_s7MpY[19]+_vPmR);}document.write(_s7MpY[20]+_vSrM+_s7MpY[21]+sneeit_srcbw_icon_comment+_s7MpY[22]+_vMcB+_s7MpY[23]+_vHnM+_s7MpY[24]+sneeit_srcbw_icon_arrow+_s7MpY[25]);}document.write(_s7MpY[26]);}document.write(_s7MpY[27]+sneeit_srcbw_count+_s7MpY[28]);
</script>

30.10.2016

Hacker Blogger Teması

Hacker blogger teması birkaç gün önce wordpress tema galerisinde gözüme çarpan temalardan biri olmuştu. Ara ara böyle gözüme çarpan worpress veya diğer blog sistemlerine özel hazırlanmış temaları blogger'a entegre etmeye çalışıyorum. İlerleyen zamanlarda da daha önce blogger'a uyarladığım temaları paylaşmaya devam edeceğim.

Tabi uzun süredir kodlarla uğraşmayınca biraz pas tutmuşum sanırım, o yüzden eskiye nazaran biraz daha zorlanıyorum tema uyarlama işinde. Yine de blogger'ın diğer blog sistemlerindeki bu tip güzel temalardan mahrum kalmaması için tema uyarlamaya devam etmeyi düşünüyorum. Ayrıca bundan sonra Blogger Temaları kategorisinde sadece kendi uyarladığım temalar kalacaktır.

*Temada bulunan benden kaynaklı eksiklik veya gözüme çarpan hataları giderip yazıda güncelleme yapabilirim. Bunun dışında özel destek veremiyorum.

Önizleme - İndir