Sayfa İçi Devamını Oku Eklentisi

Yayın İçi Devamını Oku (Show / Hide - Göster / Gizle - Aç / Kapat - Daralt / Genişlet Alanı) Kodu

Blogger veya HTML sitelerde bir sayfanın içinde ziyaretçinin bir butonu tıklaması ile açılıp kapanabilen Göster/Gizle alanı oluşturabilirsiniz. Uzun yazılar yada kod paylaşımı gibi çeşitli amaçlarda kullanılabilecek faydalı bir eklenti.

<style>
.toggle-box {
display: none;
}
.toggle-box + label {
cursor: pointer;
display: block;
font-weight: bold;
line-height: 21px;
margin-bottom: 5px;
}
.toggle-box + label + div {
display: none;
margin-bottom: 10px;
}
.toggle-box:checked + label + div {
display: block;
}
.toggle-box + label:before {
background-color: #4F5150;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-right: 5px;
text-align: center;
width: 20px;
}
.toggle-box:checked + label:before {
content: "\2212";
}
</style>
<input class="toggle-box" id="identifier-1" type="checkbox" >
<label for="identifier-1">Devamını Oku!</label>
<div>Devamını Oku! BUTONU TIKLANDIĞINDA AÇILAK BÖLÜM. </div>

HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :

Blogger > Düzen > 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.