BLOĞUNUZA KOD KOPYALICI EKLEYİN

SYNTAXHIGHLIGTER 3.2.1 NOKTA BİLMEM KAÇ
Aslında kaça kaç olduğu benim için pek önemli değil,önemli olan işlevselliği.Yabancı uzmanlar ihtiyaca anında yanıt veriyorlar.Web kullanıcılarının neye ihtiyacı olduğunu çok iyi biliyorlar,bunlardan bir tanesi de
 blogcuların,özellikle öğretici blogların,sıklıkla karşılaştığı problem,html,css javascript gibi etikekleri bloğa yerleştireme.Bu etiketleri çıplak olarak bloğunuza koyarsanız blog kaydınız haddinden fazla uzar ve de diğer konularla karışır,tablo oluşturup tablo içine koyarsanız aralara başka etiketlerde karışır ki aslında siz bu etiketleri görmek ve anlatmak istememiştiniz   Ama merak etmeyin peki ne yapacağız diye Türk uzmanların blogcular umrunda olmasa da yabancu uzmanlar blogcuları fazlasıyla umursuyor

Bloğunuz da kodları renklendirmek,copyalama şansı tanımak ya da yazdırmak gibi işlevleri yerine getirmek için hazırlanan Syntaxhighlighter'ı ve bloğunuza nasıl uygulayacağınız anlatacağım.

Bu yazılımı bloğunuza uygulamak için kodlarınızın arasına yine bazı kodlar ekleyeceğiz uygulama oldukça basit tabi benim anlatımıma göre başka kaynaklardan eklemeye çalışırsanız durum daha karmaşık hal alabilir,elbette ki benden daha iyi ve daha değişik uygulamaya sahip arkadaşlar da olacaktır ama benim anlatımım ihtiyacınızı fazlasıyla görecektir öyleki bende bloğumda kendi anlattığım uygulamayı kullanıyorum,yani önce kendim tadıyıorum sonra misafire sunuyorum ki olası aksiliklerin önüne geçebileyim

  dilerseniz ilk önce css kodlarından başlayalım
adım-1
ilk olarak bu kodu araştırın daha rahat bulmak için ctrl+f tuş bileşenini kullanın
<br /> ]]></b:skin><br />
adım-2
daha sonra aşağıdaki kodları yukardaki ctrl+f tuşlarını kullanarak bulduğumuz kodun hemen bir üst satırına yapıştırın
<br /> /* syntax css begin */<br /> .dp-highlighter<br /> {<br /> font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;<br /> font-size: 12px;<br /> background-color: #E7E5DC;<br /> width: 99%;<br /> overflow: auto;<br /> margin: 18px 0 18px 0 !important;<br /> padding-top: 1px; /* adds a little border on top when controls are hidden */<br /> }<br /> <br /> /* clear styles */<br /> .dp-highlighter ol,<br /> .dp-highlighter ol li,<br /> .dp-highlighter ol li span <br /> {<br /> margin: 0;<br /> padding: 0;<br /> border: none;<br /> }<br /> <br /> .dp-highlighter a,<br /> .dp-highlighter a:hover<br /> {<br /> background: none;<br /> border: none;<br /> padding: 0;<br /> margin: 0;<br /> }<br /> <br /> .dp-highlighter .bar<br /> {<br /> padding-left: 45px;<br /> }<br /> <br /> .dp-highlighter.collapsed .bar,<br /> .dp-highlighter.nogutter .bar<br /> {<br /> padding-left: 0px;<br /> }<br /> <br /> .dp-highlighter ol<br /> {<br /> list-style: decimal; /* for ie */<br /> background-color: #fff;<br /> margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */<br /> padding: 0px;<br /> color: #5C5C5C;<br /> }<br /> <br /> .dp-highlighter.nogutter ol,<br /> .dp-highlighter.nogutter ol li<br /> {<br /> list-style: none !important;<br /> margin-left: 0px !important;<br /> }<br /> <br /> .dp-highlighter ol li,<br /> .dp-highlighter .columns div<br /> {<br /> list-style: decimal-leading-zero; /* better look for others, override cascade from OL */<br /> list-style-position: outside !important;<br /> border-left: 3px solid #6CE26C;<br /> background-color: #F8F8F8;<br /> color: #5C5C5C;<br /> padding: 0 3px 0 10px !important;<br /> margin: 0 !important;<br /> line-height: 14px;<br /> }<br /> <br /> .dp-highlighter.nogutter ol li,<br /> .dp-highlighter.nogutter .columns div<br /> {<br /> border: 0;<br /> }<br /> <br /> .dp-highlighter .columns<br /> {<br /> background-color: #F8F8F8;<br /> color: gray;<br /> overflow: hidden;<br /> width: 100%;<br /> }<br /> <br /> .dp-highlighter .columns div<br /> {<br /> padding-bottom: 5px;<br /> }<br /> <br /> .dp-highlighter ol li.alt<br /> {<br /> background-color: #FFF;<br /> color: inherit;<br /> }<br /> <br /> .dp-highlighter ol li span<br /> {<br /> color: black;<br /> background-color: inherit;<br /> }<br /> <br /> /* Adjust some properties when collapsed */<br /> <br /> .dp-highlighter.collapsed ol<br /> {<br /> margin: 0px;<br /> }<br /> <br /> .dp-highlighter.collapsed ol li<br /> {<br /> display: none;<br /> }<br /> <br /> /* Additional modifications when in print-view */<br /> <br /> .dp-highlighter.printing<br /> {<br /> border: none;<br /> }<br /> <br /> .dp-highlighter.printing .tools<br /> {<br /> display: none !important;<br /> }<br /> <br /> .dp-highlighter.printing li<br /> {<br /> display: list-item !important;<br /> }<br /> <br /> /* Styles for the tools */<br /> <br /> .dp-highlighter .tools<br /> {<br /> padding: 3px 8px 3px 10px;<br /> font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;<br /> color: silver;<br /> background-color: #f8f8f8;<br /> padding-bottom: 10px;<br /> border-left: 3px solid #6CE26C;<br /> }<br /> <br /> .dp-highlighter.nogutter .tools<br /> {<br /> border-left: 0;<br /> }<br /> <br /> .dp-highlighter.collapsed .tools<br /> {<br /> border-bottom: 0;<br /> }<br /> <br /> .dp-highlighter .tools a<br /> {<br /> font-size: 9px;<br /> color: #a0a0a0;<br /> background-color: inherit;<br /> text-decoration: none;<br /> margin-right: 10px;<br /> }<br /> <br /> .dp-highlighter .tools a:hover<br /> {<br /> color: red;<br /> background-color: inherit;<br /> text-decoration: underline;<br /> }<br /> <br /> /* About dialog styles */<br /> <br /> .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }<br /> .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }<br /> .dp-about td { padding: 10px; vertical-align: top; }<br /> .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }<br /> .dp-about .title { color: red; background-color: inherit; font-weight: bold; }<br /> .dp-about .para { margin: 0 0 4px 0; }<br /> .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }<br /> .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }<br /> <br /> /* Language specific styles */<br /> <br /> .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }<br /> .dp-highlighter .string { color: blue; background-color: inherit; }<br /> .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }<br /> .dp-highlighter .preprocessor { color: gray; background-color: inherit; }<br /> <br /> /* syntax css end */ <br /> <br /> <br /> <br />
adım-3
daha sonra bu kod için arama yapın
<br /> </head><br />
adım-4
bahsettiğim kodu bulduktan sonra yine bu kodu onun bir üstüne gelecek şekilde yapştırın
<br /> <br /> <!-- SyntaxHighlighter begin --><br /> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/> <!-- SyntaxHighlighter end -->
adım-5
şimdi de bu kod için arama yapın,hiç bitmeyecek gibi görünüyor neyseki bu son arama
<br /> </body><br />
adım-6
son olarak da bir script ekliyoruz
<br /> <!-- Add-in Script for syntax highlighting --><br /> <script language='javascript'> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script><br />

aslında işlem buraya kadar ancak eski blogger'ı kullananlar bilir bloğumuzdaki kayıtların devamını okutmak için html etiketlerinin arasına bazı kodlar ekliyor sonra da bunu uygulamak için yazılarımızı bir takım kodların arasında yazıyorduk, burada da mantık aynı kodlarımızı kayıt sayfamızdayken HTML'yi Düzenle dedikten sonra kodlarımızı şu etikeklerin arasına yerleştiriyoruz

  
...buraya bazı kod ekleyin...

isterseniz cols ve rows yazan kısımdaki sayısal değerleri değiştirebilirsiniz o zaman tablonuz uzar,daralır,büyür yada küçülür

iyi bloglamalar

bu yazıyı beğendiyseniz lütfen arkadaşlarınızla paylaşınız