Show / Hide - Göster / Gizle - Aç / Kapat - Daralt / Genişlet Mesaj Kodu
Sitelerde veya bloglarda içeriği daha iyi aktarmak ve gerekli olduğunda açılabilecek bir bölüm oluşturmak sayfa içi düzeninde oldukça faydalı oluyor. Özellikle uygulama paylaşan bloglar için oldukça faydalı bir HTML - CSS kod düzenledim.
Show / Hide - Göster / Gizle - Aç / Kapat - On / Off mesaj oluşturan kodlar :
<script type="text/javascript">
var weblordu =
"Birinci satır <br />"+
"İkinci satır.<br /><br />";
function MesajGoster() {
document.getElementById('iccerceve').innerHTML = weblordu;
}
function MesajGizle() {
document.getElementById('iccerceve').innerHTML = '';
}
</script>
<body>
<input type="button" value="Mesajı Göster" onClick="MesajGoster()" />
<input type="button" value="Gizle" onClick="MesajGizle()" />
<br/><br/>
<div id="discerceve">
<div id="iccerceve"> </div>
</div>
</body><!--Author: webkenti.net-->
Birinci satır / ikinci satır : Yazan yerlere istediğiniz mesajı yazabilirsiniz. Eğer tek satır mesaj yazmak isterseniz birinci satırın olduğu ( "Birinci satır <br />"+ ) bölümü silmeniz ve sadece ikinci satır yazan yeri değiştirmeniz yeterlidir.
Mesajı Göster / Gizle : Bölümüne buton üzerinde ne yazmasını istiyorsanız onunla değiştirebilirsiniz.
Sayfamıza HTML olarak eklediğimizde açılır kapanır butonlu mesaj alanımız kullanıma hazır.
HTML / JAVASCRIPT EKLEMEK
Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz
Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.
* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.
Yorumlar
Yorum Gönder
🔺 YUKARI ÇIK 🔺