Bu yazımda html kod önizleme aracını bloğumuza nasıl ekleyeceğimizi anlatıcam.
İnternetteki bir çok websitede html kod önizleme aracı mevcut ancak bence her blogda her sitede özellikle script vb. kod paylaşımı yapan website ve bloglarda.
Eklentiden bir görüntü ;
Fazla uzatmadan bloğumuza bu eklentiyi nasıl kuracağımızı görelim...
Kurulum ;
Öncelikle bu aracı yeni bir sayfaya ekleyeceğimiz için sayfalar bölümünden yeni sayfa butonuna tıklıyoruz ve sol üst köşede bulunan " HTML " butonuna tıklıyoruz ve aşağıdaki kodları yapıştırıyoruz ve kaydedip çıkıyoruz.
<!-- start: index -->
<html lang="tr" xml:lang="tr" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body bgcolor="cccccc">
<!---Lazımlar---->
<style type="text/css">
body{
height:100%;
margin:0px;
padding:0px;
font-family: Verdana, Arial, Trebuchet MS, Lucida Sans Unicode;
color : #636770;
SCROLLBAR-ARROW-COLOR: #696969;
SCROLLBAR-BASE-COLOR: #D3D3D3;
SCROLLBAR-HIGHLIGHT-COLOR: #C0C0C0;
SCROLLBAR-SHADOW-COLOR: #808080;
SCROLLBAR-3DLIGHT-COLOR: #808080;
SCROLLBAR-TRACK-COLOR: #D3D3D3;
SCROLLBAR-DARKSHADOW-COLOR: #808080;
}
</style>
</body></html>
<style type="text/css">body {cursor: url(http://www.blinkyou.com/cursors/pg1/Bender Spinning.ani); }
FONT.sizethree {font-size: 16px}
</style>
<style type="text/css">
a:link {
color : #000000;
text-decoration : none;
}
a:visited {
color : #000000;
text-decoration : none;
}
a:active {
color : #0000FF;
text-decoration : none;
}
a:hover {
color :#0000ff;
text-decoration : none;
}
.font { font-family: Tahoma, Verdana, Geneva, Arial, sans-serif; font-size: 8pt; color: #333333}
</style>
<!---Lazımlar---->
<br />
<table align="center" border="1" bordercolor="666666" cellspacing="0" style="height: 468px; width: 624px;">
<tbody>
<tr>
<td background="/img/bgamavi2.png" bgcolor="#91A1BB" height="31" width="618"><div align="center">
<b><span style="color: black; font-size: medium;">KOD ÖN İZLEME ARACI
(KOD TEST)</span></b></div>
</td>
</tr>
<tr>
<td height="500" width="300"><table cellpadding="0" cellspacing="0" style="height: 412px; width: 500px;">
<!-- MSTableType="layout" -->
<tbody>
<tr>
<td height="368" width="618"><table align="center" cellpadding="0" cellspacing="0" style="width: 360px;">
<!-- MSTableType="layout" -->
<tbody>
<tr>
<td height="320"><div align="center">
<table style="background: #ebebea; border: solid 1px #959492; width: 600px;">
<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border: 1px solid #b9b8b6; height: 297; padding: 5px; scroll: auto; width: 171;" wrap="soft">ÖNİZLEMESİ YAPILACAK OLAN KODU BU ALANA YAPIŞTIRINIZ.
</textarea>
</form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border: 1px solid #b9b8b6; height: 308px; width: 406px;">
</iframe>
</td>
</tr>
</tbody></table>
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">ÖN İZLE</button>
<button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">TEMİZLE</button>
<button onclick="window.location.href=window.location.href">YENİLE</button>
</div>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="44" valign="middle" width="618"><div align="center">
<b>KODUNUZU YAPIŞTIRIP ÖN İZLEYE BASINIZ</b></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
</tr>
</tbody></table>
<center>Lisans Sahibi : <a rel="dofollow" href="http://www.basit-html.blogspot.com.tr">DestWeb</a>
Kod Yayıncısı : <a rel="dofollow" href="http://www.basit-html.blogspot.com">BloggerEklentiDeposu</a></center>
<!-- end: index -->Anahtar Kelimeler ; html kod önizleme aracı, html kod önizleme aracı kodu, siteye html kod önizleme aracı eklemek, blogger html kod önizleme aracı eklemek, html kod önizleme aracı kodu
0 yorum:
Yorum Gönder