Blogger Sitesinde Font Awesome ile Basit Ön Kod Ekleme

Blogger sitesinde Blockquote yerine ön kod toplu olarak kullanılır. Bu blog dostu olduğu için birçok blogcu ön kullanmayı tercih ediyor. Ancak ön kodu kullanmak için Blogunuza büyük miktarda kod eklemelisiniz ve bazen yükleme süresini etkiler. Ancak her zaman alternatif bir yol vardır. Öyleyse bu derste, Font Awesome simgeleriyle basit bir ön kod ekleme hakkında size göstereceğim. Bu profesyonel görünüyor. Ve widget kodunuzu farklı şekillerde sunabilirsiniz.

Monoton bloknotu kullanarak kodunuzu sarabilir ve ziyaretçilerinize basit bir şekilde hizmet verebilirsiniz, ancak blok blok tasarımının çoğu göz alıcı değildir. Blok yalnızca alıntıyı vurgulamak için kullanılır, ancak blog yazıcısının çoğu kodu sunmak için kullanır. Bununla birlikte, widget kodunu profesyonelce ön kodun içine sararak vurgulayabiliriz.

Bu ön kodun bazı benzersiz özellikleri vardır :

• CSS, HTML ve JavaScript dosyasını belirleyebilirsiniz.
• Kodunuz profesyonel şekilde gösterilecektir.
• Ön kod her zaman hatasız ve SEO dostu.
• Widget kodu farklı renkte vurgulanır.
• Kullanıcı ön kod bloğuna çift tıklayarak betiği kolayca seçebilir.

Bu nedenle, ön kodun yararını bildikten sonra, bu özelliği Blogger şablonunuza eklemek isteyebilirsiniz. Bu özelliği eklemek için aşağıdaki adımları izleyin.

Bu widget Font Awesome 4.3.0 sürümüyle güçlendirilmiş olsa da, öncelikle Blogger Şablonunuza Font Awesome dosyasını eklemelisiniz.

Şimdi sıra geldi kodları eklemeye Öncelikle Html şablon editörümüzde kodunu Ctrl+F yardımıyla aratıyoruz. Daha sonra bulduğumuz kodun altına gelecek şekilde aşağıda ki Html kodları ekliyoruz.

HTML... 

Daha sonra yine Html şablon editör sayfamızda Ctrl+F yardımıyla ]]> kodunu aratıyoruz. Daha sonra bulduğumuz kodun üstüne gelecek şekilde aşağıda ki Css kodları ekliyoruz.

CSS... /* CSS Pre Code by www.bloggerspice.com*/
pre {
    background: #444444;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}
pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}
pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 80%;
    color: #3C99F9;
    position: absolute;
    left: 1px;
    top: 15px;
    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 #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}
pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}
pre:hover::after {
    opacity: 0;
    visibility: visible;
}
pre.css code {
    color: #4899CE;
}
pre.html code {
    color: #EF662A;
}
pre.javascript code {
    color: #F4C22B;
}


Step 7 Now find the  by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 8 And Copy and Paste below code above/before 


$('i[rel="pre"]').replaceWith(function() {
    return $('
' + $(this).html() + '
');
});
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);
}

Son olarak yine Html şablon editörümüz de Ctrl+F yardımıyla  kodunu aratıyoruz. Daha sonra bulduğumuz kodun üzerine gelecek şekilde aşağıda ki JavaScript kodlarını ekliyoruz.
JS... 
$('i[rel="pre"]').replaceWith(function() {
    return $('
' + $(this).html() + '
');
});
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);
}

Ve işlem bitti şablonunuzu kaydedip çıkın.


Blogger Blog yayınlarında ön kodu kolayca kullanabiliriz. Blogger şablonunuzda kullanabilmeniz için önce kodu kodlamanız gerekir. Widget kodunu ayrıştırmak için öncelikle aşağıdaki kod ayrıştırıcı aracımızı kullanın.

    ”  https://blogpaylasimlar.blogspot.com/p/portal-blogger-kod-donusturucu-html.html “

Artık kodunuz Blog postasında kullanıma hazır. Bu ön kodun çalışması için, yeni bir yazı yazarken kodu HTML görünümünde eklemeniz gerekir. Yayın Düzenleyiciden HTML görünümünü seçin. Şimdi dönüşüm kodunu ekleyin. Ve yine Oluştur görünümüne geçin ve yayınınızı yayınlayın.
  See the Pen MWWWBGM by Serkan Gündoğdu   (@serkangundogdu13) on CodePen. 
Ziyaretiniz için teşekkürler…Yorumlarınızı bekliyoruz…

		
	
			

			
									
Genel