Blogger Syntax Highlighter Benzersiz Kod Kutusu

   Blogger blog'unuz da kod paylaşımı gereğinde kaldığınızda bu eşsiz kod paylaşım kutusu ile kodlarınızı paylaşabilirsiniz.Ayrıca yukarıda ki resimde de gördüğünüz gibi sol kısmında kodların sıra numaralı olarak göstermesi ayrı bir özellik katıyor.
    Her kod çervevesine ait ayrı ayrı renklendirilmiş olması blog kodlarınızı daha belirkin olmasına yardımcı olmasından yana fazla karışıklığı ortadan kaldırıyor.
   Kod kutusu renklerini veya kod başlıkları değiştirmek gibi özelliğide mevcuttur.İstediğiniz kod başlığını yazarak kod paylaşımınızı yapabilirsiniz,renkleri değiştirerek isteğinize göre ayarlayabilirsiniz.
   Bu kod kutusunu blog'unuza eklemek için yapacak olduğumuz işlemler şöyledir?

1. Blogger hesabınıza giriş yapın.
2. Kumanda Paneli> Şablon> Html Düzenle> yolunu takip edin.Şablon kodlarınıza ulaşmış olacaksınız.
3. Ctrl+F kısayol tuşları ile ]]></b:skin> kodunu aradın.
4. Bulmuş olduğunuz ]]></b:skin> kodunun hemen üst kısmına aşağıda ki CSS Javascript kodlarını ekleyin.Şablonunuzu kaydedin.
5. Ayrıca şunu belirteyim eğer yukarıda ki resimde de gördüğünüz gibi kendinize göre renkleri değiştirmek isterseniz eğer aşağıda ki kod içerisinde renklerine göre belirttiğim yerleri değiştirin.

/* Syntax Highlighter Kod Başlangıçı --------- */

  pre {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:13px;color:#839496;font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space: pre-wrap;word-wrap: normal;}

  pre.line-number {background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXHCLopz-lBF091kCSLod3K52HpHYIr9lgHkickciY6RN-X9UCDSOpB52OQBp64RbrQGp2mkjEutdRUWdsoJB5uZGW1SBN-GbwoEOv_PxnxlDcFIcXI3tO9a9zrw1aCmF3xtTbla_tHcY/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none;}

  pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute;}



pre[data-codetype="CSS"]{border-left-color:#5fbbba}

pre[data-codetype="HTML"]{border-left-color:#4fc1eb}

pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}

pre[data-codetype="JQuery"]{border-left-color:#99c262}



  pre.line-number[data-codetype]:before {content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:14px;text-transform:uppercase;background-color:#41749f;color:white}



pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}

pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}

pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}

pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}



  code {font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color: #d14;}

  #comments code {color:#bbbb6d;}

  pre code {padding:0 !important;color: #a3a49a;background: none !important;border:none !important;display:block; }

  pre .line-number {float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px;}

pre .comment,

pre .template_comment,

pre .diff .header,

pre .doctype,

pre .pi,

pre .lisp .string,

  pre .javadoc {color: #586e75;font-style: italic;}

pre .keyword,

pre .winutils,

pre .method,

pre .addition,

pre .css .tag,

pre .request,

pre .status,

  pre .nginx .title {color: #859900;}

pre .number,

pre .command,

pre .string,

pre .tag .value,

pre .rules .value,

pre .phpdoc,

pre .tex .formula,

pre .regexp,

  pre .hexcolor {color: #7195a3;}

pre .title,

pre .localvars,

pre .chunk,

pre .decorator,

pre .built_in,

pre .identifier,

pre .vhdl .literal,

pre .id,

  pre .css .function {color: #569dcf;}

pre .attribute,

pre .variable,

pre .lisp .body,

pre .smalltalk .number,

pre .constant,

pre .class .title,

pre .parent,

  pre .haskell .type {color: #aa985a;}

pre .preprocessor,

pre .preprocessor .keyword,

pre .shebang,

pre .symbol,

pre .symbol .string,

pre .diff .change,

pre .special,

pre .attr_selector,

pre .important,

pre .subst,

pre .cdata,

pre .clojure .title,

  pre .css .pseudo {color: #509a55;}

  pre .deletion {color: #dc322f;}

  pre .tex .formula {background: #073642;

}

   Yukarıda ki işlemleri yaptık dan sonra geriye kalan makaleniz içerisinde kod paylaşımı yaparken aşağıda ki kodları HTML kısmına tıklayarak ekleyin ve Kodlarınızı Buraya Ekleyin yazar yere kodlarınızı ekleyerek yazınıza Oluştur kısmından devam edin.
CSS Kod Kutusu:

<pre class="line-number" data-codetype="CSS"><code>Kodlarınızı Buraya Ekleyin</code></pre>

Jguery Kod Kutusu:

<pre class="line-number" data-codetype="Jquery"><code>Kodlarınızı Buraya Ekleyin</code></pre>

HTML Kod Kutusu:

<pre class="line-number" data-codetype="HTML"><code>Kodlarınızı Buraya Ekleyin</code></pre>

Eğer şöyle bir şey isterseniz?
Kod kutusu içerisine tıklandığında kodları otomatik olarak seçerek ve kenarda kaydırma çubuğu olsun isterseniz o zaman bu kodu kullanın.

<textarea class="bginput" style="WIDTH: 600px; CURSOR: url(''); HEIGHT: 100px" onclick="this.focus();this.select()" name="wep-kodlari" rows="5" cols="42">Kodlarınızı Buraya Ekleyin</textarea>

Bizi Takip Edin
Pinterest>> Facebook>> Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...