31 Ekim 2015 Cumartesi

Blogger renkli popüler yazılar widgeti

  Hiç yorum yok
Renkli popüler yazılar widgeti Blogger popular post widget


Renkli popüler yazılar widgeti - Blogger Popular Post widgeti şüphesiz bir blogun olmazsa olmaz temel widgetlerinden biridir. Çünkü ziyaretçileriniz mutlaka en çok okunan yazılarınızı merak edecekleri için gözleri Popüler Post yayınlarınızı arayacaktır.

İnternette aradığınızda karşınıza yüzlerce popüler yazılar eklentisi çıkabilir. Fakat Arlina Design tarafından hazırlanmış olan bu widget daha gösterişli hoş ve sıcak bir arayüze sahiptir.


Kuruluma geçmeden önce popüler yazılar ayarlarınızı lütfen aşağıdaki gibi yapın:



1. Blogger kumanda paneli > Şablon > HTML Düzenle > daha sonra aşağıdaki kodları kopyalayarak
]]></b:skin> kodunun hemen üzerine yapıştırın.



/* Popular Posts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}


2. Yukarıdaki kodları ekledikten hemen sonra aşağıdaki kodları kopyalayarak </body> kodunun üzerine yapıştırın.


<script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>


3. Temanızı kaydederek çıkın.

Eğer daha önceden eklemiş olduğunuz popüler post kodlarınız varsa kodların birbiriyle çakışmaması için lütfen silmeyi unutmayın. 

Demo
click to view

30 Ekim 2015 Cuma

Blogger Seo Akıllı Bağlantıları nasıl yapılır?

  Hiç yorum yok
Blogger Seo Smart link kurulum Blogger Seo Akıllı Bağlantıları nasıl yapılır?

Seo Akıllı Bağlantıları, makaleniz içinde bağlantı verilmesini istediğiniz kelimelere otomatik olarak bağlantı verir.

Seo Akıllı Bağlantıları nasıl yapılır? - İlk kez Blogduzenim adresinde paylaşılan Seo Smart links eklentisi. Seo açısından sizi bir adım yukarı taşıyacaktır.


SEO Smart Link Nasıl Çalışır?


Örneğin apple ürünleri ile bir bloga sahip olduğunuz varsayarsak, eklenti içindeki etiket adına apple yazdığınız takdirde yazdığınız tüm yazılarınızdaki apple kelimesi otomatik olarak bir bağlantı haline gelecektir.

SEO Smart Link Kurulum:


Blogger kumanda paneli > Şablon > HTML Düzenle > daha sonra aşağıdaki kodları kopyalayarak </body> kodunun hemen üzerine yapıştırın.


<script type='text/javascript'>
function smartLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout(&quot;f.createAnchor()&quot;, 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new smartLink();
f.add(&quot;SEO&quot;, &quot;http://www.blogduzenim.blogspot.com/&quot;);
f.startScript();
</script>


Kod içindeki SEO link vermek istediğiniz kelime ve http://www.blogduzenim.blogspot.com adresi o kelimeye vermek istediğiniz bağlantı adresidir.  Bu bölümleri istediğiniz şekilde düzenleyerek temanızı kaydedin.


Ek Bilgilendirme : 

Bağlantı isimleri büyük küçük harf duyarlı olduğu için yazdığınız her kelimede gözükmeyebilir. Örneğin kod içine bağlantı adınızı Blogger olarak yazdığınızda makale içindeki blogger ya da BLOGGER kelimeleri ototmatik bağlantı almayacaktır.


Birden fazla kelime için otomatik bağlantı oluşturmak istiyorsanız. Aşağıdaki şekilde ikinci ve üçüncü satır olarak ekleyebilirsiniz.


f.add(&quot;SEO&quot;, &quot;http://www.blogduzenim.blogspot.com/&quot;);
f.add(&quot;Template&quot;, &quot;http://www.blogduzenim.blogspot.com/&quot;);
f.add(&quot;Blogger&quot;, &quot;http://www.blogduzenim.blogspot.com/&quot;);


Uyarı ! 

Ekleyeceğiniz anahtar kelimeler 1 ile 3 arasında olmalıdır. Aşırı anahtar kelimeler tavsiye edilmez. 

27 Ekim 2015 Salı

Blogumu nasıl duyururum?

  Hiç yorum yok
Blogumu nasıl duyururum? Blog yazılarınız okunmuyor mu?

Blogunuzu daha fazla kitlelere duyurmanın yolları hakkında ipuçları:

Hevesle yeni bir blog açmak:

Günümüz istatistiklerine göre 260 milyon blog olduğu tahmin ediliyor. Hatta yakın arkadaşlarınız ya da tanıdıklarınız arasında blog yazarları da olabilir. Siz de bu geniş blog ağına katılıp ilk blogunuzu hevesle açarsınız. İlk başlangıç her zaman en zor olan kısımdır. Düzeni oturtmanız hayli zaman alabilir. Gerek teması, gerekse ne tür içerikler paylaşacağınız konusunda ciddi bir çalışma yapmalısınız.

Yazılarınızı paylaştıktan sonra:

Herşeyin tamam olduğundan emin olmaya başladığınız anda yazılarınızı yazmaya başlarsınız. Bir kaç ziyaretçi de kazanmışsınızdır muhtemelen. Ama yine de yazılarınıza yapılan yorumlar, paylaşımlar ya da ziyaretçi sayısı sizi tatmin etmeyecektir. Kendinizi ''acaba nerede yanlış yapıyorum'' sorusunu sorarken bulacaksınız.

Hayır aslında siz her şeyi doğru yaptınız. Sadece biraz desteğe ihtiyacınız var. 

Sosyal ağlar bu konuda elbette size yardımcı olacaktır. Yazdığınız yazıları facebook, twitter gibi ağlarda paylaşmanızın olumlu etkileri mutlaka olacaktır. Fakat yine de yeteri kadar ziyaretçi almadığınızı düşünüyorsanız o halde farklı şeyler de denemelisiniz.

Faydalı kaynaklardan yardım almak:

Çok eski bir blog yazarı arkadaşınızdan bu konuda yardım isteyebilirsiniz. Sizin adınıza paylaşım yaparak ufak da olsa bloğunuzun duyulmasına katkı sağlayabilir. Bu işi özenle yapan blog siteleri de mevcuttur.
Blogumutanit.com'da bu sitelerden biridir. Her ne kadar arkadaşlarımızdan ya da sosyal ağlardan gelen trafikle ayakta durmaya çalışsak da ''yeni bloggerler için'' blogumutanit sayfası çok faydalı olacaktır.

Nasıl çalışır?

Blogumutanit sayfası yerel bir blog ağı sayfasıdır. Veritabanı başta kişisel bloglar olmak üzere bir çok kategoride blog barındırır. Yeni bir blog keşfetmek isteyenler için de ayrıca güzel bir kaynaktır. Blogunuz blogumutanit dizinine eklendiğinde artık farklı kitlelerden ziyaretçiler sayfanızı ziyaret edecek ve yazılarınız daha fazla insana ulaşmaya başlayacaktır.

Önünüzde yüksek bir duvar olduğunu düşünün. Duvarın arka tarafında ise yüzlerce milyonlarca insan. Emin olun ki o insanlar arasında size ulaşmak isteyenler olacaktır. Ama şunu da bilmelisiniz ki önce sizin o duvarı aşıp o insanlara kendinizi gösterip, ben burdayım demeniz gerekir.

Ben bile bazen öylesine güzel bloglar görüyorum ki şimdiye kadar nasıl fark etmemişim ya da denk gelmemişim diye merak ediyorum. Nedeni aslında gayet açık tam da üzerinde durduğumuz konu ile alakalı. O blog herhangi bir ağ üzerinden tanıtım yazısı yayınlamamıştı. Siz de en azından blogumutanit gibi ağlara blogunuzu ekleyerek yazılarınızın daha fazla kitleye ulaşmasını sağlayabilirsiniz.

25 Ekim 2015 Pazar

Mobil ziyaretçileriniz için whatsapp share butonu

  Hiç yorum yok
Blogger whatsapp nasıl eklenir?

Blog sayfanıza mobilden giren ziyaretçiler için whatsapp share buttonunu gösterir.

Ocak 2015 yılı itibari ile 700 milyon aktif Whatsapp kullanıcısı olduğu tahmin ediliyor. Bu gerçekten ciddi bir rakam. Bu durumda sayfamızı ziyaret eden ziyaretçilerimiz için whatsapp share butonu eklememiz bizim yararımıza olacaktır. Aslında ne zamandır bu kodu arıyordum bulur bulmaz da hemen paylaşmak istedim.
Kodlar sadece mobilde ve yazı sayfalarında gözükür şekilde ayarlıdır.

Blogger whatsapp butonu

Nasıl eklenir?
Blogger kumanda panelinizden Şablon / HTML Düzenle diyerek
Kodları paylaşım butonlarınızın olduğu kısımda uygun gördüğünüz bir yere eklemeniz yeterli olacaktır.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
var whattitle=encodeURIComponent(document.title);
var whattitle_esc=unescape(whattitle);
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share on Whatsapp : </span>\
<a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>
</b:if></b:if>

Kodlar içinde yapabileceğiniz küçük değişiklikler :
wa_btn_m (Standard buton için) veya
wa_btn_l (Büyük WhatsApp butonu için)

Blogger mobil ziyaretçileriniz için whatsapp share butonu

Yedek js kodlar:
Olur ki ileri bir zamanda kodlarınızda bir sıkıntı yaşarsanız aşağıdaki kodları kopyalayıp kendi dropbox hesabınıza ya da hostunuza atarak url ile çağırabilirsiniz.
(function(){"use strict";var root=this,WASHAREBTN=function(){this.buttons=[],this.isIos===!0&&this.cntLdd(window,this.crBtn)};WASHAREBTN.prototype.isIos=navigator.userAgent.match(/Android|iPhone/i)&&!navigator.userAgent.match(/iPod|iPad/i)?!0:!1,WASHAREBTN.prototype.cntLdd=function(win,fn){var done=!1,top=!0,doc=win.document,root=doc.documentElement,add=doc.addEventListener?"addEventListener":"attachEvent",rem=doc.addEventListener?"removeEventListener":"detachEvent",pre=doc.addEventListener?"":"on",init=function(e){("readystatechange"!==e.type||"complete"===doc.readyState)&&(("load"===e.type?win:doc)[rem](pre+e.type,init,!1),!done&&(done=!0)&&fn.call(win,e.type||e))},poll=function(){try{root.doScroll("left")}catch(e){return void setTimeout(poll,50)}init("poll")};if("complete"===doc.readyState)fn.call(win,"lazy");else{if(doc.createEventObject&&root.doScroll){try{top=!win.frameElement}catch(e){}top&&poll()}doc[add](pre+"DOMContentLoaded",init,!1),doc[add](pre+"readystatechange",init,!1),win[add](pre+"load",init,!1)}},WASHAREBTN.prototype.addStyling=function(){var s=document.createElement("style"),c="body,html{padding:0;margin:0;height:100%;width:100%}.wa_btn{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTguMTI5LDAuOTQ1Yy0zLjc5NSwwLTYuODcyLDMuMDc3LTYuODcyLDYuODczDQoJCQljMCwxLjI5OCwwLjM2LDIuNTEyLDAuOTg2LDMuNTQ5bC0xLjI0LDMuNjg4bDMuODA1LTEuMjE5YzAuOTg0LDAuNTQ0LDIuMTE2LDAuODU0LDMuMzIxLDAuODU0YzMuNzk1LDAsNi44NzEtMy4wNzUsNi44NzEtNi44NzENCgkJCVMxMS45MjQsMC45NDUsOC4xMjksMC45NDV6IE04LjEyOSwxMy41MzhjLTEuMTYyLDAtMi4yNDQtMC4zNDgtMy4xNDctMC45NDZsLTIuMTk4LDAuNzA1bDAuNzE1LTIuMTI0DQoJCQljLTAuNjg2LTAuOTQ0LTEuMDktMi4xMDMtMS4wOS0zLjM1NGMwLTMuMTU1LDIuNTY2LTUuNzIyLDUuNzIxLTUuNzIyczUuNzIxLDIuNTY2LDUuNzIxLDUuNzIyUzExLjI4MywxMy41MzgsOC4xMjksMTMuNTM4eg0KCQkJIE0xMS4zNTIsOS4zNzljLTAuMTc0LTAuMDk0LTEuMDItMC41NS0xLjE3OC0wLjYxNUMxMC4wMTQsOC43LDkuODk4LDguNjY2LDkuNzc1LDguODM3QzkuNjUyLDkuMDA3LDkuMzAxLDkuMzksOS4xOTMsOS41MDUNCgkJCUM5LjA4OCw5LjYxNyw4Ljk4NCw5LjYyOSw4LjgxMiw5LjUzM2MtMC4xNzEtMC4wOTYtMC43My0wLjMtMS4zNzgtMC45MjNjLTAuNTA0LTAuNDg0LTAuODM0LTEuMDcyLTAuOTMtMS4yNTINCgkJCWMtMC4wOTUtMC4xOCwwLTAuMjcxLDAuMDkxLTAuMzU0QzYuNjc3LDYuOTI4LDYuNzc4LDYuODA1LDYuODcsNi43MDZjMC4wOTEtMC4xLDAuMTI0LTAuMTcxLDAuMTg3LTAuMjg2DQoJCQljMC4wNjItMC4xMTUsMC4wMzgtMC4yMTgtMC4wMDMtMC4zMDhDNy4wMTIsNi4wMjMsNi42OTQsNS4xNDYsNi41NjEsNC43OUM2LjQyOCw0LjQzNCw2LjI4LDQuNDg2LDYuMTc3LDQuNDgyDQoJCQlDNi4wNzUsNC40NzksNS45NTgsNC40NTksNS44NDEsNC40NTZDNS43MjQsNC40NTEsNS41MzMsNC40ODcsNS4zNjYsNC42NTdjLTAuMTY3LDAuMTctMC42MzcsMC41NzYtMC42NjksMS40MzkNCgkJCXMwLjU2NSwxLjcyMiwwLjY0OCwxLjg0MWMwLjA4NCwwLjEyMSwxLjE0LDEuOTkxLDIuODk3LDIuNzYyYzEuNzU2LDAuNzcsMS43NjYsMC41MzQsMi4wODgsMC41MTgNCgkJCWMwLjMyMi0wLjAxOCwxLjA1NS0wLjM4NiwxLjIxNS0wLjc4OWMwLjE2Mi0wLjQwNSwwLjE3Ni0wLjc1NSwwLjEzNS0wLjgzMUMxMS42MzksOS41MjEsMTEuNTIzLDkuNDc1LDExLjM1Miw5LjM3OXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==);border:1px solid rgba(0,0,0,.1);display:inline-block!important;position:relative;font-family:Arial,sans-serif;letter-spacing:.4px;cursor:pointer;font-weight:400;text-transform:none;color:#fff;border-radius:2px;background-color:#5cbe4a;background-repeat:no-repeat;line-height:1.2;text-decoration:none;text-align:left}.wa_btn_s{font-size:12px;background-size:16px;background-position:5px 2px;padding:3px 6px 3px 25px}.wa_btn_m{font-size:16px;background-size:20px;background-position:4px 2px;padding:4px 6px 4px 30px}.wa_btn_l{font-size:16px;background-size:20px;background-position:5px 5px;padding:8px 6px 8px 30px}";return s.type="text/css",s.styleSheet?s.styleSheet.cssText=c:s.appendChild(document.createTextNode(c)),s},WASHAREBTN.prototype.setButtonAttributes=function(b){var url=b.getAttribute("data-href"),text="?text="+encodeURIComponent(b.getAttribute("data-text"))+(b.getAttribute("data-text")?"%20":"");return text+=encodeURIComponent(url?url:document.URL),b.setAttribute("target","_top"),b.setAttribute("href",b.getAttribute("href")+text),b.setAttribute("onclick","window.parent."+b.getAttribute("onclick")),b},WASHAREBTN.prototype.setIframeAttributes=function(b){var i=document.createElement("iframe");return i.width=1,i.height=1,i.button=b,i.style.border=0,i.style.overflow="hidden",i.border=0,i.setAttribute("scrolling","no"),i.addEventListener("load",root.WASHAREBTN.iFrameOnload()),i},WASHAREBTN.prototype.iFrameOnload=function(){return function(){this.contentDocument.body.appendChild(this.button),this.contentDocument.getElementsByTagName("head")[0].appendChild(root.WASHAREBTN.addStyling());var meta=document.createElement("meta");meta.setAttribute("charset","utf-8"),this.contentDocument.getElementsByTagName("head")[0].appendChild(meta),this.width=Math.ceil(this.contentDocument.getElementsByTagName("a")[0].getBoundingClientRect().width),this.height=Math.ceil(this.contentDocument.getElementsByTagName("a")[0].getBoundingClientRect().height)}},WASHAREBTN.prototype.crBtn=function(){for(var b=[].slice.call(document.querySelectorAll(".wa_btn")),iframes=[],i=0;i<b.length;i++)root.WASHAREBTN.buttons.push(b[i]),b[i]=root.WASHAREBTN.setButtonAttributes(b[i]),iframes[i]=root.WASHAREBTN.setIframeAttributes(b[i]),b[i].parentNode.insertBefore(iframes[i],b[i])},root.WASHAREBTN=new WASHAREBTN}).call(this);


24 Ekim 2015 Cumartesi

Duyarlı sosyal paylaşım butonları

  Hiç yorum yok
Blogger duyarlı sosyal paylaşım butonları

Duyarlı sosyal paylaşım butonları ve daha fazlası için widgets sayfasını ziyaret ediniz.

Blog yazılarının altında ya da üstünde bulunan sosyal paylaşım butonlarını özelleştirip toplam paylaşım sayınızı gösterir.


Sosyal paylaşım butonları, bir blogda ya da web sitesinde olması gereken en önemli eklentilerden biridir. Ziyaretçiler sayfanıza girdiğinde bu eklentileri mutlaka kullanırlar. Böylelikle yazılarınızı daha bu eklentiyle fazla kitleye kolaylıkla ulaştırmış olursunuz. SEO seo

Eklenti bütün temalarda çalışmayabilir. Ayrıca Font Awsome iconlarını daha önceden yüklemeniz gerekmektedir.

Duyarlı sosyal paylaşım butonları kurulum:



1. CSS kodlarını ekleme:
Blogger kumanda panelinden şablon> HTML Düzenle > CTRL + F kombinasyonuyla ]]></b:skin> kodunu bulun. Hemen üzerine aşağıdaki kodları ekleyin.



/* Share Button dengan Counter untuk Blogger by http://twistedshape.blogspot.com */
.arlina_share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.arlina_share_button .share_blog {display:block;}
.arlina_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.arlina_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.arlina_share_button .share_blog ul {margin:0;padding:0;}
.arlina_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.arlina_share_button .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.arlina_share_button .share_blog .btn_fb{background:#3a579a}.arlina_share_button .share_blog .btn_fb:hover{background:#314a83}.arlina_share_button .share_blog .btn_twtr{background:#00abf0}.arlina_share_button .share_blog .btn_twtr:hover{background:#0092cc}.arlina_share_button .share_blog .btn_gplus{background:#df4a32}.arlina_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.arlina_share_button .share_blog .btn_pntrst{background:#cd1c1f}.arlina_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.arlina_share_button .share_blog .btn_linkdin{background:#2554BF}.arlina_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.arlina_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.arlina_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.arlina_share_button .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
@media only screen and (max-width: 979px) {
.arlina_share_button .share_blog .btn_linkdin {width:34px;}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn{display:none}}
@media only screen and (max-width:768px) {
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.arlina_share_button .share_blog .wrap{min-width:34px}.arlina_share_button .share_blog .btn_linkdin,.arlina_share_button .share_blog .btn_pntrst{width:30px}.arlina_share_button .share_blog ul li{margin:1px 3px}}
@media only screen and (max-width:479px) {
.arlina_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.arlina_share_button .share_blog ul li{width:25px;margin:2px;}.arlina_share_button .share_blog .wrap{display:none}.arlina_share_button .share_blog ul li .fa{width:25px}}


2. HTML kodlarını ekleme:
Aşağıdaki kodları eğer yazılarınızın üst kısmında gözükmesini istiyorsanız <data:post.body/>üzerine, alt kısmında gözükmesini istiyorsanızda
<div class='post-footer'> kodunun üzerine ekleyin.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='arlina_share_button'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='btn_fb'><a expr:href='&quot; http://www.facebook.com/share.php?v=4&amp; src=bm&amp; u=&quot; + data:post.url + &quot; &amp; t=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @BlogDuzenim - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-twitter'/></div>
<div class='wrap'>Tweet</div>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'>
<div class='wrap1'><i class='fa fa-google-plus'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot; http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-pinterest'/></div>
<div class='wrap'>Pin</div>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='btn_linkdin'><a expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp; url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title + &quot; &amp; summary=&amp; source=&quot; ' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-linkedin'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>


Twitter paylaşımlarında kullanıcı adınızın gözükmesi için lütfen kod içindeki BlogDuzenim kısmını düzenlemeyi unutmayın.



3. Javascprit kodlarını ekleme :
Son olarak aşağıdaki kodları da temanızda </body>  üzerine ekleyin.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by twistedshape.blogspot.com
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>


4. Temanızı kaydedin.



22 Ekim 2015 Perşembe

Blogger yorumları gizleme ve gösterme

  Hiç yorum yok
Blogger yorumları gizleme ve gösterme nasıl yapılır?

Blogger yorumları gizleme ve gösterme ve daha fazlası için Tips Blogger başlıklarına da göz atabilirsiniz.
 Bu eklenti blogger yorumlarınızın gizle/göster şeklinde gözükmesini sağlar. Kodlar içindeki renk kodlarıyla oynayarak temanıza uygun hale de getirebilirsiniz.


1. Blogger Kumanda Paneli/ Şablon/ HTML Düzenle kısmına geliniz :

HTML editörü sayfanızda CTRL + F tuşu kombinasyonuyla aşağıdaki kodu aratın.


<div class='comments' id='comments'>


Bulduğunuz kodu hemen aşağıdaki ile değiştirin

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a>
<div class='clear'/>
<div class='comments hide-content' id='comments'>
<a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a>
<div class='clear'/>


2. Daha sonra yine temanız içinde ]]></b:skin> kodunu aratın:

Hemen üzerine aşağıdaki kodları yapıştırın.

/* Show and Hide Comments */
.hide-content{display:none;margin:0;padding:0;}
a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s}
#comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s}
a.showcontent:hover{background:#fff;color:#5593f0;}
#comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}


3. Son adım olarak </body>kodunu aratın:

Bulduğunuz kodun üzerine aşağıdaki kodları ekleyin.


<script type='text/javascript'>
//<![CDATA[
// Show and Hide Comments
function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))};
//]]>
</script>


4. Temanızı kaydedip çıkabilirsiniz.

Demo için aşağıdaki sayfayı ziyaret edebilirsiniz :


Demo
click to view

14 Ekim 2015 Çarşamba

Blogger takipci widgetini duzenleme

  Hiç yorum yok
Blogger takipçi widgetini düzenleme

Blogger followers eklentisi ziyaretçilerin bir blogu kolaylıkla takip etmesi ve okuması için tasarlanmış blogger özelliklerinden biridir.

Genel olarak her blogun sağ ya da sol kenar (sidebar)'ında rastlarız bu eklentiye. Fakat son zamanlarda oluşan bir hata nedeniyle üye profilleri gözükmemektedir. Bir takipçi avatarına tıkladığınızda eklenti tamamen içe gömülü bir şekilde kaybolmaktadır. Eğer bu hatanın farkında değilseniz hemen şimdi kendi blog sayfanızda bir takipçi avatarına tıklayıp görebilirsiniz.

Hem bu hatayı gidermek hem de blogger takipçi eklentinizi özelleştirmek için aşağıdaki adımları uygulayın:


1. Takipçiler widgeti ekle

Blogunuzda henüz bir takipçi widgeti yoksa Blogger kumanda panelinden Yerleşim/Gadget ekle/Diğer/İzleyiciler diyerek gadgetinizi ekleyin ve kaydedin. 

Blogger followers widget edit

2. Öğeyi denetleme

Widgetinizi ekledikten sonra sayfanızda widgetinizin üzerine gelip farenizin sağ tuşuna tıklayarak öğeyi denetle sekmesine tıklayın. Hemen altta karşınıza çıkan kodlara bir kez tıklarak ardından CTRL + F kombinasyonu yardımıyla arama kutucuğunu açın. Oraya friendconnect yazarak enter tuşuyla aramaya başlayın. Ta ki şu kodlar çıkana dek aramaya devam edin. 
Blogger followers widget code
Resmi büyültmek için tıklayın
Kırmızı kutu içinde işaretlenmiş olan iki adet kodumuz var. Şimdi masaüstünüzde bir not defteri açarak bu kodları (sadece tırnak içinde olanlar) kopyalayarak not defterinize yapıştırın. 

3. Yeni bir widget ekle

Öncelikle widgetinizi eklemeden sayfanızda bulunan izleyiciler widgetini mutlaka kaldırın. Daha sonra yeni bir HTML widgeti ekle diyerek içine aşağıdaki kodları yapıştırın. 

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">
</script>
<div id="div-KISAKODBURAYA" style="width: 50%;">

</div>
<script type="text/javascript">
var skin={};skin.FACE_SIZE="32", /* 7 */
skin.HEIGHT="350", /* yükseklik değeri */
skin.TITLE="Turkish",
skin.BORDER_COLOR="#fff", /* 4 */
skin.ENDCAP_BG_COLOR="#b4a7d6", /* 1 */
skin.ENDCAP_TEXT_COLOR="#000000", /* 2 */
skin.ENDCAP_LINK_COLOR="#FF0000", /* 3 */
skin.ALTERNATE_BG_COLOR="transparent",
skin.CONTENT_BG_COLOR="#3399FF", /* 9 */
skin.CONTENT_LINK_COLOR="#006600", /* 6 */
skin.CONTENT_TEXT_COLOR="#FFFF00", /* 8 */
skin.CONTENT_SECONDARY_LINK_COLOR="#ccc",
skin.CONTENT_SECONDARY_TEXT_COLOR="#FFFFFF",
skin.CONTENT_HEADLINE_COLOR="#9933FF", /* 5 */
skin.FONT_FACE="arial", /* yazı tipi */
google.friendconnect.container.setParentUrl("/"),google.friendconnect.container.renderMembersGadget({id:"div-KISAKODBURAYA",

height:300,

site:"UZUNKODBURAYA",locale:"tr"},skin);
</script>



Şimdi not defterinize yapıştırdığınız kısa kodlarınızı (KISAKODBURAYA-2 TANE VAR) yazan yerlere ve uzun kodunuzu (UZUNKODBURAYA) yazan yere yapıştırın.

4. Blogunuza uygun olarak tasarlayın

Kodların sonunda bulunan /* 2*/ gibi numaralar aşağıdaki resimde bulunan değerleri göstermektedir. Bu şekilde takipçiler widgetinizi sayfanıza özel hale getirebilirsiniz. Ayrıca kodlar eklemiş olduğunuz herhangi bir sayfa içinde de çalışabilir. Demo için buradan bakabilirsiniz.

Blogger followers widget düzenleme
Ayrıca göz atabilrsiniz : Blog takip etmenin en kolay yolu 

Bu kodlar Portekiz ve İndonezya kaynaklı blogger sitelerinden alınmıştır.