Blogger Yayınlarına Basit Ön Kod Vurgulayıcı Ekleme

Blogger gönderisine kod yazmak biraz zor. Ama merak etmeyin blogcu mantık blogger yazı kodları yazmak için güzel bir araç sunuyor. Blogger blogunuza seçenek belirleyerek basit ön kod Vurgulayıcı ekleyin, Ziyaretçilerin kaynak kodunu bir metin olarak kopyalamasını sağlar.

Bir HTML belgesinde, ön eleman önceden biçimlendirilmiş metni temsil eder. Bu, sekme girintilerinizin, çift boşlukların, yeni satırların ve diğer tipografik biçimlendirmelerin bir ön öğenin içinde korunacağı anlamına gelir.

Varsayılan olarak, tarayıcılar Courier veya Monaco gibi tek aralıklı (veya sabit genişlikli) bir yazı tipi kullanarak içeriği bir ön öğenin içinde görüntüler.

Şimdi Blogger yayınlarınıza renk vermek için Html,JavaScript,Css ve Jquery kodlarını web sitemize nasıl ekleyeceğiz onu anlatmaya çalışacağız. Bu kodları eklemek için aşağıda ki adımları takip edin.

Öncelikle Blogger şablon düzenle'ye tıklayın. Ve daha sonra şablonumuzda Ctrl+f yardımıyla </head> kodunu aratalım.

Daha sonra bulduğumuz kodun üzerine gelecek şekilde aşağıda ki JavaScript kodunu ekleyin.

JS   <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

Şimdi sıra geldi kodları şekillendirmeye gelmeye bunu da nasıl yapacağız tabii ki CSS kodlarını ekleyerek.

Yine şablon editör sayfamızda Ctrl+f yardımıyla ]]></b:skin> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekliyoruz.

CSS/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}

Şimdi sıra geldi kapanış kodunu eklemeye yine şablon editör sayfamızda Ctrl+f yardımıyla </body> kodunu aratıyoruz ve daha sonra bulduğumuz kodun üzerine gelecek şekilde aşağıda ki kodları ekliyoruz.

Jquery  <script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Bütün kodları ekledikten sonra kodlarımızı çalıştırmak için Yeni Yayın sayfamızı açıyoruz ve Html bölümüne geçiyoruz. Daha sonra kullanmak istediğimiz kodlarından birini seçerek yayınımıza ekliyoruz. Bu kodlar aşağıda size vermiş olduğumuz kodlardır.

HTML... kode HTML (yang telah diparse) di sini ...
CSS... kode CSS di sini ...
JS... kode JavaScript di sini ...
Jquery... kode jQuery di sini ...

Bütün işlemler bu kadar umarım herkes için faydalı bir makale yazısı olmuştur. Yazımızı beğendiyseniz eğer bizi takip etmeyi unutmayın.