Blogger Kod Penceresi [Show / Hide]

                   
Bloggerinizde Kod Penceresi yapımını size Blogger Kod Penceresi Yapımı yazımda gösterdim. Ş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?

• Daha düzenli bir görünüm.
• Daha kısa ve anlaşılır bir yazı.
• Daha basit anlatım.
• Güzel bir görüntü
• İlgi çekici bir görsellik.

Bu Göster/Gizle kod penceresi yardımıyla daha etkili kod anlatımları yapabilirsiniz. 
Hemen teknik detaylara geçelim ve nasıl yapıldığını aşağıda anlatmaya başlayalım.

1. Bloggere giriş yapın,
2. Kumanda Paneli>Şablon>Html Düzenle yolunu izliyoruz,
3. Şablon yedeğini alıyoruz,
4. Ctrl+F yardımı ile </head> kodunu aradıyoruz,
5. </head> kodundan önceki kısıma aşağıdaki kodları ekliyoruz,ve kaydediyoruz.

<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> 

Bu işlemi bitirdikten sonra geriye HTML kod kısmı  kaldı. Aşağıdaki kodları bu özelliği kullanmak istediğiniz yere yapıştırın ve düzenleyin.
Kodlar:

<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>

Şimdi bu özelliği kod penceresi olarak nasıl göstereceğiz onu anlatayım. Bu yazıda anlattığımız yazılanları yaptıktan sonra <pre><code>Kodları Buraya Yazın</code></pre> şeklinde kod kullanımını aşağıdaki gibi düzenlemek olacaktır.

<input class="spoilerbutton" type="button" value="Göster" onclick="this.value=this.value=='Sakla'?'Göster':'Sakla';">
<div class="spoiler"><div>
<pre><code>Kodları Buraya Yazın</code></pre>
</div></div>

İnşallah işinize yarar bir bilgi olmuştur.Bu kodda hata veya yapamazsanız alttan yorum yapın...
Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.