Blogger spoiler butonu nasıl eklenir?

Okuyucularınızdan spoiler verdiğiniz için tepki almayın! Öğrenciler, sorudan önce cevabı gördüğü için size kızmasın! Tüm bu dertlerin çaresi: Blogger spoiler butonu nasıl eklenir?
Spoiler, bir eserin konusu veya detayları hakkında bilgi veren; eser okunmadan, dinlenmeden veya izlenmeden önce öğrenilmesi durumunda alıcının eser ile ilgili düşüncelerini etkileyebilecek açıklama veya ipucudur.

Özellikle dizi, film veya kitap blogu yöneten kişilerin oldukça işine yarayacak bu kod, sitenize apayrı bir hava katacaktır. Yazınızı okuyan ziyaretçiler, kendi istekleri ile spoiler butonuna tıklamadıkları sürece film dizi veya kitap hakkında bilgi almayacaklar.

Bu kodu sadece spoiler engellemek için de kullanmanıza gerek yok. Eğer Blogger tabanlı bir eğitim sitesi kurmayı planlıyorsanız, spoiler kodu tam size göredir. Öğrencilerinize hazırladığınız soruları sitenize ekleyebilir, cevap için ayrı bir spoiler butonu ekleyebilirsiniz.

Gelelim bu kodu sitenize nasıl ekleyeceksiniz. Oldukça kolay, aşağıdaki kodu yazı içerisinde HTML bölümüne eklediğiniz taktirde buton aktif bir biçimde çalışacaktır.

<button title="Spoileri göster/gizle" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button>
<br/>
<div id="spoiler" style="display:none">
SPOİLER GİRECEĞİNİZ BÖLGE
</div>

Yukarıda yer alan kod Blogger editöründe HTML bölümünde bulunmalıdır. Eğer Oluştur bölümüne eklerseniz kod normal bir yazı gibi okuyucuya aktarılır. Burada dikkat etmeniz gereken püf noktalar bulunmaktadır:

  • Aynı sayfaya birden fazla spoiler butonu eklemek istiyorsanız, kod içerisinde yer alan 'spoiler' (yeşil ile üzeri çizili) id'lerini değiştirmeniz gerekiyor. Örneğin yukarıdaki kodda yeşil ile çizili spoiler id'lerinin hepsini spoiler0 olarak değiştirerek aynı sayfada 2.kez kullanabilirsiniz. Her kullanımda sayıyı arttırabilirsiniz veya istediğiniz bir id ile değiştirebilirsiniz, bu tamamen size kalmıştır.
  • Kırmızı işaretli bölüm, buton açıldığı zaman gözükecek metindir. Dilediğiniz gibi değiştirebilirsiniz.
  • Buton yerine resim ekleyebilirsiniz. Bunu yapmak için aşağıdaki kod içerisinde kırmızı alan içerisinde yer alan IMAGE URL bölümüne buton yerine ekleyeceğiniz resmin bağlantısını girmelisiniz. İlk maddede olduğu gibi aşağıdaki kodu kullanırken de id'leri değiştirmeyi unutmayın.

<img src="IMAGE_URL" title="Spoileri göster/kapa" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"/>

Umarım, işinizi görmüştür. Eğer bu içerik faydalıysa, blogger breadcrumbs eklentisi nasıl oluşturulur ve blogger rastgele yazı eklentisi nasıl eklenir yazılarıma da göz atabilirsiniz. Bir sonraki yazımızda görüşmek dileğiyle.

Blogger URL Yapısını Wordpress gibi yapma

Bildiğiniz üzere Blogger permalink yapısı alanadi.com/yil/ay/yazi-adi.html şeklindedir. Bu yazımızda paylaşacağım javascript kodu ile bu permalink yapısını göstermelik de olsa alanadi.com/yazi-adi şekline getireceğiz. Blogger URL yapısı nasıl Wordpress gibi yapılır?
Blogger URL Yapısını Wordpress gibi yapma


Kodu paylaşmadan önce permalink kavramına göz atalım. Permalink ya da kalıcı link , uzun yıllar boyunca gelecekte değişmeden kalması ve bağlantı hatalarına karşı daha az duyarlı bir köprü oluşturması amaçlanan bir URL'dir.

Daha anlaşılabilir bir dille, internet üzerinde denk geldiz kısaltılmış ve kulağa mantıklı gelen bağlantı çeşididir. Wordpress gibi bazı CMS'ler permalink düzenlemesine izin vermektedir ancak Blogger sadece belirli bir bölümü değiştirmeye izin verir.

Blogger URL Yapısını Wordpress gibi yapmak

Bunun için bir javascript komutu kullanacağız. Bu yapıyı değiştirmek için Blogger yönetici paneli üzerinde Tema > HTML'yi düzenle diyor ve kod editörüne giriş yapıyoruz. CTRL+F ile </body> veya <head> kodlarından istediğiniz bir tanesini aratıyoruz. Body kodunu seçtiyseniz hemen üzerine, head kodunu seçtiyseniz hemen altına aşağıdaki kodu yapıştırın.
Bu kodu eklemeniz sonucunda oluşacak durumlardan sitemiz sorumlu değildir.
<script type='text/javascript'>
//<![CDATA[
// BloggerJS v0.3.1
// Copyright (c) 2017-2018 Kenny Cruz
// Licensed under the MIT License
var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&amp;"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS();
//]]>
</script>

Yapmanız gereken işlem bu kadar. Şu andan itibaren web siteniz https://elvirabt.blogspot.com/2017/03/shoes-and-accessories.html bu site gibi olacaktır. Ancak, lütfen bu kodu aşağıdaki yazıyı okumadan eklemeyin.

Bu kodun SEO'ya etkisi

Yukarıda yer alan kodu sitenize ekledikten sonra ziyaretçi sayınızda düşüşler yaşayabilir ve arama motorlarında blogunuzun otoriterliği kaybolabilir. Çünkü bu kod kalıcı bir işlem değil, sadece göstermeliktir; temelde Blogger permalink yapısı en uyumlu olduğu için değiştirmeniz gerekmez. Özellikle Adsense kullanıcıları eğer bu kodu uygularsa, çok yüksek ihtimalle Google tarafından ceza yiyebilirler.

Ama SEO benim umurumda değil, kod benim hoşuma gitti ve kullanmak istiyorum, zaten kendi halimde bir blog yazarıyım diyorsanız gönül rahatlığı ile kullanabilirsiniz. Şunu da söylemeden geçemeyeceğim, blogunuza rastgele yazı eklentisi veya son dakika haberleri eklentisi eklemek sitenize bu eklentiye göre çok daha fayda sağlayacaktır, bundan emin olabilirsiniz. Bir sonraki yazımızda görüşmek üzere..

Blogger Otomatik Kaynak Bağlantısı nasıl oluşturulur?

Günümüzde içerik çalmak ne yazık ki çok kolay. Ufak bir bot yazdırılarak sitenizdeki içerikleri sizden önce dahi yayımlamak rüya değil maalesef. Ancak, bu botları da bir nebze olsun sekteye uğratacak bir şey var: kopyalanan yazılarınıza otomatik olarak kaynak bağlantısı bırakmak.
Blogger Otomatik Kaynak Bağlantısı nasıl oluşturulur?

Yazı veya içerik alıntılanması, isminden de anlaşılacağı üzere sadece bir alıntılama işlemidir. Yazının belirli bir bölümü alınır ve içeriğinizden faydalandığını belirten bir bağlantı bırakır. Ancak ne yazık ki, günümüzde öyle insanlar var ki, ben bunlara direkt HIRSIZ diyorum, ufak bir alandan faydalanmak yerine tüm içeriği kopyalamayı tercih ediyorlar. Hâl böyle olunca insanda yazma isteği falan kalmıyor.

Bu kod ile bu sorunu bir nebze olsun çözebilmeyi umuyorum. İçerik hırsızı bir içeriğinizi olduğu gibi kopyalayıp yapıştırdığında kopyaladığı metinde sizin sitenize giden kaynakça bağlantısını büyük ihtimalle fark etmeyecek.

Blogger Otomatik Kaynak Bağlantısı nasıl oluşturulur?


Blogger yönetici panelinden Tema > HTML'yi düzenle diyerek kod editörüne giriş yapıyor ve  CTRL+F ile bulduğumuz </head> veya </body> kodlarının bir üzerindeki satıra aşağıdaki kodu bırakıyoruz.

<script type='text/javascript'>
//<![CDATA[
function copaslink(){var e,n=document.getElementsByTagName("body")[0],t=(e=window.getSelection())+("<br/><br/>Kaynakça: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>"),o=document.createElement("div");o.style.position="absolute",o.style.left="-99999px",n.appendChild(o),o.innerHTML=t,e.selectAllChildren(o),window.setTimeout(function(){n.removeChild(o)},0)}document.oncopy=copaslink;
//]]>
</script>

Tüm yapmanız gereken işlem bu kadar. Temayı kaydet diyerek yeni kaynakça kodunuzu sitenizde test edebilirsiniz. Sitenizdeki tek bir harf bile kopyalansa, bu kod sayesinde otomatik olarak içeriğiniz alındığı sayfa yazının sonunda kendini gösterecektir. Aynı zamanda, eğer blogger son dakika haberleri eklentisi ve blogger yükleniyor efekti yazılarımıza da göz atarak sitenizi geliştirebilirsiniz. Bir sonraki yazımızda görüşmek dileğiyle..

Blogger Rastgele Yazı Eklentisi nasıl eklenir?

Ziyaretçileriniz hep aynı yazıları görmesin! Blogger rastgele yazı eklentisi sayesinde her sayfa yenilemede yeni yazılarınız ziyaretçilere önerilecek! Blogger Rastgele Yazı Eklentisi nasıl eklenir?
Blogger Rastgele Yazı Eklentisi nasıl eklenir?

Özellikle yazı sayısı fazla ve ziyaretçinin işine yarayacak pek çok site için, ziyaretçiye sitede hoş vakit geçirmesinde yardımcı olacak bir özellik olan rastgele yazı gösterme eklentisi anlatacağız. Bu eklenti webmaster sitesi, fıkra sitesi gibi eğlenceli veya bilgilendirici içeriklerle dolu sitelerde oldukça işe yarar bir eklentidir. Şimdi gelelim, sitemize nasıl ekleyeceğimize.

Aslında oldukça kolay! Blogger yönetici paneline giriş yaptıktan sonra Düzen bölümüne gelip yeni bir HTML/Javascript widgeti oluşturuyor ve aşağıda yer alan kod parçasını widgete ekliyoruz. Dikkat etmeniz gereken nokta, kırmızı işaretli bağlantıyı kendi site adresiniz ile değiştirmenizdir.

<style scoped='' type="text/css">
#arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
#arlina-random li:last-child{border-bottom:0;}
#arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline}
</style>
<div id='arlina-random'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'http://www.kemalcagriunlu.com',
    maxResults = 10,
    containerId = 'arlina-random';
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
function ArlinaRandomPosts(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=ArlinaRandomPosts"></scr' + 'ipt>');
//]]>
</script>

Blogger Rastgele Yazı Eklentisi nasıl eklenir?
Blogger Rastgele Yazı Eklentisi nasıl eklenir? // GIF anlatım

Gördüğünüz gibi oldukça uzun bir javascript kodu olmasına rağmen, siteyi çok az yorduğunu da söyleyebilirim. Widgeti kaydettikten sonra sitenize göz atın, eğer bir sorun olursa yorumlarda belirtin ki yardımcı olalım. Eğer bu eklenti hoşunuza gittiyse, blogger son dakika haberi eklentisi nasıl eklenir yazımıza da göz atabilirsiniz. Bir sonraki yazımızda görüşmek üzere..

Blogger son dakika haberleri eklentisi nasıl eklenir?

Haber sitelerinde denk gelmişsinizdir, son dakika haberleri bir çerçeve içerisinde oldukça dikkat çekici bir şekilde verilir. Bu eklentiyi Blogger'a eklemek pek de zor değil! Blogger'a son dakika haberleri eklentisi nasıl eklenir?
Blogger'a son dakika haberleri eklentisi nasıl eklenir?

Öncelikle yapmanız gerek şey, Tema > HTML'yi düzenle diyerek Blogger kod editörüne giriş yapmak. Daha sonra, CTRL+F kombinasyonu ile </body> kodunu aratıyor ve hemen üzerine aşağıda yer alan kodu ekliyoruz.
<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by https://www.arlinadzgn.com
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="https://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

Bu işlemi gerçekleştirdikten sonra, yine CTRL+F ile bu sefer</b:skin>kodunu aratıyor ve aşağıda yer alan CSS kodunu hemen üzerine ekliyoruz.

/* CSS News Ticker
https://www.kemalcagriunlu.com/2020/07/blogger-son-dakika-haberi-eklentisi.html
 */
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}

Ve eğer bu zamana kadarki işlemleri sorunsuzca yaptıysanız, sona yaklaştık demektir! Şimdi Tema alanından çıkarak yönetici panelinden Düzen alanına gireceğiz. Burada yeni bir widget oluşturarak aşağıdaki kodu o widgete ekliyoruz. Kırmızı işaretli alana kendi web sitenizin bağlantısını ekleyebilirsiniz, alan adı bağlı olan web siteleri mümkünse özel alan adlarını yazarsa kod daha rahat çalışacaktır.
Blogger'a son dakika haberleri eklentisi nasıl eklenir?

<div class='ticker-wrap' data-domain='gvusiondua.blogspot.com'>
<div id='ticker'>
</div>
</div>

Ve işte her şey bu kadar! "Blogger'a son dakika haberleri eklentisi nasıl eklenir?" yazımızın da burada sonuna geldik. Bu arada, eğer blogger rastgele yazı eklentisi yazımızı okumak isterseniz bu cümleye tıklayabilirsiniz. Bir sonraki yazımızda görüşmek üzere..

Blogger breadcrumbs kodu nasıl eklenir? Blogger breadcrumbs hatası nasıl çözülür?

Blogger breadcrumbs kodu nasıl eklenir? Blogger breadcrumbs hatası nasıl çözülür?

Uzun bir süre sonra, Blogger içerikleri ile geri dönmeye ve her zamankinden farklı olarak 2 yazı birden paylaşmaya karar verdim. Blogger üzerinden sitenize ekleyebileceğiniz en önemli kodlardan birisi breadcrumbs kodudur. Peki breadcrumbs nedir? Ne işe yarar? SEO için kattıkları nelerdir? Ve Blogger breadcrumbs kodu hatası nasıl çözülür?


SEO'ya katkısı ve kullanım amacı

Gelelim Bredcrumbs yani navigasyon eklentisinin kullanım amacına. Örnek verecek olursak, hastaneleri düşünebiliriz. Her katta; o katta neler olduğunu, hangi bölüm ve kategorilerin olduğunu anlatan büyük tabelalar olacaktır. İşte breadcrumbs eklentisi de bu olayı internete taşır: kullanıcı için tabela niteliğindedir. Hangi kategorinin hangi sayfasında bulunduğunu kullanıcıya yansıtır.

Aynı zamanda Google ve benzeri arama motorlarının da hoşuna giden bir detaydır. Bu kodu sitenize ekledikten bir süre sonra indekslenen sayfalarınızın aşağıdaki gibi olduğunu görebilirsiniz:
Blogger breadcrumbs kodu nasıl eklenir? Blogger breadcrumbs hatası nasıl çözülür?
Gördüğünüz gibi, bağlantının geri kalanı yerine daha şık bir şekilde listelenmiş bir halde sitemizi gösterdi. Ayrıca Adsense'nin dikkat ettiği şartlardan biri olması da Google'ın nasıl bir önem verdiğini size anlatmama yardımcı olabilir. Kısacası bu kod hem kullanıcı dostu, hem Google dostu bir eklentidir.

Blogger breadcrumbs kodu nasıl eklenir?

Öncelikle şunu eklemeliyim, bu içerikte toplamda 2 adet yazının olmasının temel sebebi, aşağıdaki kodun da hatalı olması. İnternet üzerinde henüz hatasız bir kod bulamadığım için mecburen hatalı kodu sizlere sunuyorum.
Ancak endişelenmenize gerek yok,  bu kodu ekledikten hemen sonraki adımlara uyarak kolayca hatasız bir breadcrumbs eklentisini kuracaksınız.
<b:includable id='main' var='top'>

Tema ve HTML'yi düzenle diyerek kod editörüne giriş yaptıktan sonra, CTRL+F diyerek yukarıda yer alan kodu aratıyoruz. Bulduktan sonra, bulduğunuz kodu silmeli ve aşağıdaki kodu eklemelisiniz. Burada dikkat etmeniz gerek bir detay var, sadece arama sonucundan bulduğunuz kodu silmelisiniz; devamında kodlar kalacaktır ancak aşağıda yer alan kodlar buna göre kodlandığı için bir sorun oluşmayacaktır.
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Ana Sayfa</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Ana Sayfa</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Ana Sayfa</a></span> &#187; <span>Etiketi yok</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb etiket sayfaları ve arama sonuçları -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a></span> &#187; <span>Arşiv <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a></span> &#187; <span>Tüm Yazılar</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Ana Sayfa</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Şu anda yapmanız gereken çok az şey kaldı. CTRL+F ile </b:skin> kodunu buluyor ve hemen üzerine aşağıdaki kodu ekleyerek eklentiyi ekliyoruz.
.breadcrumbs {
font-size :13px;
font-style :normal;
border : 1px solid #e06666;
border-radius : 5px;
margin-bottom :5px;
padding : 5px 0px 5px 5px;
background: #fff;
}
Ve bu işlemi de yaptıysanız işlemimiz bitti... Ama hatalı olarak. Maalesef bu kodu aldığım yerde de güncel hali paylaşılmamış ve benim henüz hatasız kod ile entegre etme fırsatım olmadı. Ancak dert etmeyin, yazının devamındaki işlemi de yaptığınız zaman eklenti hatasız şekilde sitenizde çalışacaktır.

Blogger breadcrumbs hatası nasıl çözülür?

Hatadan bahsedecek olursak, maalesef Blogger artık data-vocabulary.org desteklemiyor. Bu yüzden Yapısal Veri Aracı ile sitenizi tarattığınızda veya Search Console ile ziyaret ettiğimizde breadcrumbs eklentinizin data-vocabulary.org schema deprecated gibi bir uyarı verdiğini göreceksiniz. 2 dakika sonra, Blogger için data-vocabulary.org schema deprecated hatasını ortadan kaldıracağız!

Blogger panelinden Tema > HTML'yi düzenle diyerek blogumuzun kod editörüne giriş yapıyoruz. Daha sonra CTRL+F yolu ile <b:includable id='breadcrumb' var='posts'> kodunu aratıyoruz.
Blogger breadcrumbs kodu nasıl eklenir? Blogger breadcrumbs hatası nasıl çözülür?
Gördüğünüz üzere kolay bir şekilde kodumuzu bulduk. Şimdi yapmanız gereken şey <b:includable id='breadcrumb' var='posts'>...</b:includable> kodunu seçerek silmek ve bu kod yerine aşağıdaki hatasız breadcrumb kodunu eklemektir.

      <b:includable id='breadcrumb' var='posts'> 
  <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <b:loop values='data:posts' var='post'> 
      <b:if cond='data:post.labels'> 
        <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> 
          <svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'/></svg> 
          <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
            <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
              <span itemprop='name'>Ana Sayfa</span></a>
              <meta content='1' itemprop='position'/>
          </span>
          <svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
          <b:loop index='num' values='data:post.labels' var='label'>
            <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
              <a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
                <span itemprop='name'><data:label.name/></span>
              </a>
              <meta expr:content='data:num+2' itemprop='position'/>
            </span>
            <b:if cond='data:label.isLast != &quot;true&quot;'>
              <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
            </b:if>
          </b:loop>
          <svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
          <span><data:post.title/></span>
        </div>
      </b:if>
    </b:loop>
  </b:if>
      </b:includable>

Breadcrumbs eklentisinin iskeletini yeniledik ancak size yukarıda verdiğim kodları ekleyip tasarımı kaydettiğinizde, eski CSS kodlarınız ile bir yerde çakıştığını göreceksiniz. Bunun için korkmanıza gerek yok, Tema ve ardından HTML'yi düzenle diyerek panele giriyor ve </b:skin> kodunu aratarak hemen üzerine aşağıda yer alan kodları ekliyoruz.
  .breadcrumbs svg{width:16px;height:16px;vertical-align:-4px} .breadcrumbs svg path{fill:#666}

Eğer buraya kadar okumuş ve işlemleri gerçekleştirdiyseniz sitenizdeki herhangi bir yazı Google Yapısal Veri Test Aracı ile kontrol edin. Büyük ihtimalle bir sorun kalmayacaktır ancak olur da bir sorun olursa bana yorum formu aracılığıyla ulaşıp destek isteyebilirsiniz.
Blogger breadcrumbs kodu nasıl eklenir? Blogger breadcrumbs hatası nasıl çözülür?

Blogger breadcrumbs kodu nasıl eklenir? Blogger breadcrumbs hatası nasıl çözülür? adlı breadcrumbs eklentisi ile ilgili detaylı bir yazıyı da burada bitirmiş olduk. Eğer eksik bulduğunuz, anlamadığınız bir nokta olursa yorumlar bölümünden mutlaka belirtiniz. Bir sonraki yazıda görüşmek üzere..

Google Aramasında Haber Sitelerini Engelleyin!

Her türlü alana bulaşıp emeklerinizi çalan haber siteleri canınızı sıkmasın! Bu Google eklentisi ile Google aramasında haber sitelerini engellemek hayal değil!
Google Aramasında Haber Sitelerini Engelleme

Yapmanız gereken şeyler aşırı basit... Öncelikle kısaca eklentinin mantığından bahsedecek olursam, bu bir kara liste uygulaması. Görüntülemek istemediğiniz web sitelerinin bir listesini eklentiye ekliyorsunuz ve bu eklenti otomatik olarak bu siteleri arama sonuçlarından sizin için kaldırıyor. Öncelikle, eklentiyi aşağıdaki bağlantıdan indirmelisiniz.
Eklentiyi çok kısa bir şekilde indirip tarayıcınıza indirdikten sonra, aşağıda yer alan listeyi olduğu gibi yapıştırıp resimdeki alana ekliyorsunuz. Bu listede aklıma gelen arama motorunu işgal edip mağdur eden tüm haber sitelerinin bağlantısı yer almakta.
aksam.com.tr
aydinlik.com.tr
birgun.net
cumhuriyet.com.tr
diken.com.tr
dunya.com
fanatik.com.tr
fotomac.com.tr
fotospor.com
gazetevatan.com
gunes.com
haberturk.com
hurriyet.com.tr
karar.com
milligazete.com.tr
milliyet.com.tr
posta.com.tr
sabah.com.tr
sozcu.com.tr
star.com.tr
takvim.com.tr
turkiyenewspaper.com
yeniakit.com.tr
yenicaggazetesi.com.tr
yenisafak.com
haber7.com

Haber siteleri listesini ise aşağıdaki gibi eklentiye ekliyorsunuz.
Google Aramasında Haber Sitelerini Engellemek

Şimdi gelin ufak bir test yapalım. Çok sevgili(!) haber sitelerimiz, domatesin faydalarına da el atmışlar. Ufak bir öncesi sonrası testi yaptığımız zaman,

Google Aramasında Haber Sitelerini Engellemek

gördüğünüz üzere her alanda uzman haber siteleri domatesin faydalarına da el atmışlar, Google amca da hiç durmadan snippet yazı olarak arama sonucuna getirmiş. Ancak, gördüğünüz gibi eğer eklentiyi kullanırsak arama sonuçlarımız tertemiz, arınmış ve kullanıma hazır halde karşımızda.

Bu arada, yukarıdaki gibi GIF Kaydı nasıl alınır merak ettiyseniz aşağıdaki yazıma da göz atabilirsiniz. Oldukça işinize yarayacaktır.
Bu yazı ufak, kısa bir bilgilendirme yazısı oldu ancak sizlerden ricam bu yazıyı internet kullanmayı bilen, bilmeyen tüm arkadaşlarınıza; eşinize dostunuza yollayıp kullanmalarını sağlarsanız internet bir nebze olsun haber sitesi tekelinden kurtulacaktır. Bir sonraki yazıda görüşmek üzere...

GIF Kaydı nasıl alınır?

GIF Kaydı nasıl alınır?

Ufak işleriniz için bir GIF kaydetmeye ihtiyaç duydunuz mu? Genelde böyle ufak işler için önce bir video kaydetme uygulaması ile istediğimiz alanı kaydeder, daha sonra videoları GIF formatına çeviren bir program ile GIF'imizi kullanırız. Ancak şimdi paylaşacağım ufacık bir uygulama ile, istediğimiz alanı doğrudan GIF şeklinde kaydedeceğiz. GIF kaydı nasıl alınır?

Öncelikle yapmanız gereken şey aşağıdaki bağlantıya giderek GifCam adlı uygulamayı indirmek.
Uygulamayı verdiğim bağlantıdan indirdiğinizde oldukça ufak bir boyuta sahip olduğunu göreceksiniz. Tahmini olarak 70 kilobayt civarında .rar dosyası bilgisayarınıza iniyor ve herhangi bir kurulum yapmadan uygulamayı doğrudan kullanabiliyorsunuz. Uygulamayı çalıştırdığınızda aşağıdaki gibi bir ekran sizi karşılayacaktır:

GIF Kaydı nasıl alınır?

#1 numaralı alana göz atalım. Kırmızı işaretlediğim bölge, kaydedilecek alan olacaktır. Bu alanın boyutu program penceresinin boyutları ile belirleyebilirsiniz, program penceresini küçültürseniz daha küçük bir alanı kaydedecektir ve aynı şekilde pencere büyürse kaydedilecek ekran da büyüyecektir. #2 numaralı alanda 4 adet seçeneğimiz var. Rec tuşu ile kayda başlayabilirsiniz. Rec tuşunun yanındaki ok simgesine tıkladığınızda sizi aşağıdaki gibi bir ekran karşılayacaktır:

GIF Kaydı nasıl alınır?

#3 numaralı alanda gördüğünüz gibi bazı ayarlamalar var. Buradaki seçeneklerden GIF kaydınız için istediğiniz FPS miktarını seçebilirsiniz. Bilmeyenler için, FPS miktarı arttıkça GIF'iniz daha akışkan bir şekilde oynayacaktır. Bu ekranı kendinizin incelemesi daha doğru olacaktır, zira tüm bilgileri yazarak anlatmak mümkün değil.

Rec tuşuna basıp GIF kaydını aldıktan sonra Rec tuşu yerine çıkan Stop tuşuna tıklayarak kaydı durdurabilir, en alttaki Save tuşu ile GIF formatındaki dosyanızı kaydedebilirsiniz. Burada size nereye kaydedileceğini soracaktır, istediğiniz bir dosyayı seçtikten sonra kaydedebilir ve başarıyla çalıştırabilirsiniz.
GIF Kaydı nasıl alınır?

Bu yazımızda GIF Kaydı nasıl alınır, bundan bahsettik. Uygulamanın tüm detayı, anlatımı ve kullanım bilgileri bu kadardı. Oldukça ufak bir uygulama olmasına karşın benim gibi blog yazarları için gerçekten de mucizevi bir program diyebilirim. Bir sonraki yazımızda görüşmek dileğiyle..