Teknoloji Blog'u: Göster/Sakla Kodu

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ddR506xX4fI/UVQh5SfNV9I/AAAAAAAAHjw/hGlKqFkfIv0/s1600/goster-hizle-kodlari-10linenet.PNG" imageanchor="1" style=""><img border="0" src="http://2.bp.blogspot.com/-ddR506xX4fI/UVQh5SfNV9I/AAAAAAAAHjw/hGlKqFkfIv0/s1600/goster-hizle-kodlari-10linenet.PNG" /></a></div>
<br />
Bloggerınızda Kod Penceresi yapımını size <a href="http://www.10line.net/2012/07/blogger-kod-penceresi-yapimi.html" target="_blank">Blogger Kod Penceresi Yapımı</a> yazımıda gösterdik. Şimdi daha değişik bir yöntem ile Göster/Sakla yöntemi ile değişik bir kod penceresi yapımı göstermek istiyoruz. Bu kod penceresi size neler kazandıracak?<br />
<ul>
<li>Daha düzenli bir görünüm</li>
<li>Daha kısa ve anlaşılır bir yazı</li>
<li>Daha basit anlatım</li>
</ul>
Bu Göster/Sakla kod penceresi yardımıyla daha etkili kod anlatımları yapabilirsiniz. Hemen teknik detaylara geçelim.<br />
<br />
</head> tagını bulun ve ondan önce aşağıdaki kodları yapıştırın<br />
<br />
<pre><style type="text/css">
/* Göster/Sakla Kod Penceresi 10LineNET */
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Göster"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Sakla"] + .spoiler {padding:5px;} 
</style> </pre>
<pre></pre>
<br />
Bu işlemi bitirdikten sonra geriye HTML kısmı kaldı. aşağıdaki kodları bu özelliği kullanmak istediğiniz yere yapıştırın.<br />
<br />
<pre><input class="spoilerbutton" type="button" value="Göster" onclick="this.value=this.value=='Sakla'?'Göster':'Sakla';">
<div class="spoiler"><div>
Saklanacak ve gösterilecek içerik buraya
</div></div></pre>
<pre></pre>
<br />
Şimdi bu özelliği kod penceresi olarak nasıl göstereceğiz diyenler için burdaki yazıda anlattığımız yazılanları yaptıktan sonra <span style="background-color: white; color: #444444; font-size: 14px; line-height: 18.200000762939453px;"><pre><code>Kodları Buraya Yazın</code></pre> </span>şeklinde kod kullanımını aağıdaki gibi düzenlemek olacak.<br />
<br />
<pre><input class="spoilerbutton" type="button" value="Göster" onclick="this.value=this.value=='Sakla'?'Göster':'Sakla';">
<div class="spoiler"><div>
<span style="background-color: white; color: #444444; font-family: 'Times New Roman'; font-size: 14px; line-height: 18.200000762939453px; white-space: normal;"><pre><code>Kodları Buraya Yazın</code></pre></span>
</div></div></pre>
<pre></pre>
<br />
Umarım faydalı olur. Hata ile karşılaşan olursa lütfen bize bildirin.

Bloggerınızda Kod Penceresi yapımını size Blogger Kod Penceresi Yapımı yazımıda gösterdik. Şimdi daha değişik bir yöntem ile Göster/Sakl...

Devamı »