Bazı sitelerde, bazı içeriklerin görüntülenmesinde karşınıza engeller çıkabilmektedir. Bu engellere kilitleme de denilebilir. Bir içeriğin belli şartlar yerine getirilirse gösterilmesi durumunu temsil eder.
Blogger sitelerinde bu özellik yok diye bilinir ama birkaç basit yöntemle, blog sitelerinizi çok daha aktif hale getirebilirsiniz. Eğer aşağıdaki talimatları yerine getirirseniz, siteniz için bir sosyal medyada paylaşma eklentisini aktif hale getirebilirsiniz.
İstediğiniz bir içeriği, sosyal medyada paylaşması şartıyla gösterebilir ve bu sayede sitenizin, sosyal medyada yayılmasını sağlayabilirsiniz.
Ancak dikkat edilmesi gereken bir husus var. Eğer çok fazla kullanırsanız, sitenize gelen kullanıcılar rahatsız olacaktır. Herkes sosyal medyada bu tür paylaşımlar yapmak istemeyebilir ve bu uygulama ters tepebilir.
Az ve öz kullanarak bu uygulamadan fayda sağlayabilirsiniz. Şimdi gelin kodları gerekli yerlere yerleştirelim.
Blogger Sosyal Medya Paylaşım Kilidi
İlk önce blogger yönetici panelinden tema sekmesine tıklıyoruz ve html düzenleme kısmına geliyoruz.
<head>
Yukarıdaki kodu aratıyoruz ve bu kodun hemen altına aşağıdaki kodu yapıştırıyoruz.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Sıra geldi css kodlarını eklemeye, bunun için </body> kodunu bulup, bu kodun hemen üstüne aşağıdaki kodu ekleyin.
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create', function(href, widget) {
$.event.trigger({
type: "pageShared",
url: href
});
});
};
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function (event) {
$.event.trigger({
type: "pageShared",
url: event.target.baseURI
});
});
});
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plusOned(obj){
console.log(obj);
$.event.trigger({
type: "pageShared",
url: obj.href
});
}
$(document).on('pageShared',function(e){
if(e.url == window.location.href){
$(".secret").show();
$(".secret-share").hide();
}
});
//]]>
</script>
<style>
.secret {
text-align:center;
display:none
}
.secret-share {
padding: 20px;
text-align: center;
border: 3px solid #ddd;
background: #f8f8f8;
}
.secret-share .fb-like {
margin-top: 0;
top: -7px;
position: relative;}
.secret-share .twitter-share-button {
margin-right: 25px;
}
</style>Eklememiz gereken kalıcı kodlar bu kadar, bir daha eklememize ve üzerinde oynamamıza gerek yok. Peki işimiz bitti mi derseniz, hayır bitmedi. Yazacağınız yazılarda kilitlemek istediğiniz içerik için yine bir kod yazmanı gerekecektir.
Bu kodu ister bir yere not ederek, isterseniz de bu sayfamızı sık kullanılanlara ekleyerek istediğiniz zaman kullanabilirsiniz. Aşağıda verdiğimiz kodu, yazacağınız yazıların olduğu panelde yer alan Oluştur / HTML kısmından HTML'ye geçerek ekleyebilirsiniz.
div class="secret">
Buraya İstediğiniz İçeriği Ekleyebilirsiniz. </div>
<div class="secret-share">
<p>Gizlenmiş içeriği görmek için bu yazıyı paylaşmanız gerekmektedir.</p>
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="mybloggerlab" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>Yapmanız gerekenler bu kadar, eğer örnek görmek isterseniz aşağıdan deneyebilirsiniz.