Kodları sırayla verelim;
* Kod 1;
Not 1: Buraya bir not düşmek istedim, hemen şunu söyleyeyim "block1" isimli mavi ile yazılmış bölüm eklentinin adıdır, aynı yazı içerisinde birden fazla kullanmak isterseniz bu isimleri değiştirin yoksa aynı isimli birden fazla eklenti olacağı için çakışma yapacaktır ve dolayısıyla eklenti çalışacaktır fakat ilk eklenen eklenti hangisi ise o çalışacaktır, aksi halde eklediğiniz tüm açılır kapanır div yapılarınız çalışmayacaktır.<script type="text/javascript">function showBlock(blockId){document.getElementById(blockId).style.display = "block";}function hideBlock(blockId){document.getElementById(blockId).style.display = "none";}</script><a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a><div style="display: none;" id="block1">OLAY<a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>
* Kod 2 - Açılıp Kapanan İçerik Bölümün Arka Plan Rengini Değiştirme;
Not 2: Bu kod da ise, uçuk mavi ile yazılmış "#f5f5f5" kodlarını isteğinize göre değiştirerek arka plan rengini kendi isteğinize göre özelleştirebilirsiniz.<script type="text/javascript">function showBlock(blockId){document.getElementById(blockId).style.display = "block";}function hideBlock(blockId){document.getElementById(blockId).style.display = "none";}</script><a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a><div style="display: none;" id="block1"> <span style="background-color: #f5f5f5;">OLAY</span><a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>
* Kod 3 - Video veya Resim Gizle Göster;
Not 3: Bu kodda ise yeşil renk ile "Resim-Video URL'si" yazan yere gizleyip göstermek istediğiniz video veya resmimizin linkini ekliyoruz.<script type="text/javascript">function showBlock(blockId){document.getElementById(blockId).style.display = "block";}function hideBlock(blockId){document.getElementById(blockId).style.display = "none";}</script><a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a><div style="display: none;" id="block1"> <img src="Resim-Video URL'si" > <br /> <img src="Resim-Video URL'si" ><a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>
* Kod 4 - Kodları Gizle/Göster Kodu;
Not 4: Burada ki özelleştirilebilecek değişkenler ise; gizlenip gösterilecek içerik için oluşturulmuş yazı alanının arka plan rengini uçuk mavi le yazılmış "#transparent" bölüme istediğiniz bir kodu yazarak değiştirebilirsiniz, ikinci değişken ise oluşturulmuş içerik alanının genişlik ve yükseklik ayarları turuncu ile yazılmış "width: 630px; height: 135px" değerlerini isteğinize göre değiştirerek kafanıza göre boyutlandırabilirsiniz.<script type="text/javascript">function showBlock(blockId){document.getElementById(blockId).style.display = "block";}function hideBlock(blockId){document.getElementById(blockId).style.display = "none";}</script><a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')">Demo Göster</a><div style="display: none;" id="block1"><textarea style="background-color:#transparent; width: 630px; height: 135px;" >Gizlemek İstediğiniz Yazı, Resim, Video vb</textarea><a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br />Demo Gizle</a></div>
Kod 5 - Butonlu Gizle/Göster Kodu;
Burada pek değişiklik yapmanıza gerek yok açıkçası...<script type="text/javascript">function showBlock(blockId){document.getElementById(blockId).style.display = "block";}function hideBlock(blockId){document.getElementById(blockId).style.display = "none";}</script><a href="javascript:showBlock('block1')" _fcksavedurl="javascript:showBlock('block1')"><button>İçeriği Göster</button></a><div style="display: none;" id="block1">OLAY<a href="javascript:hideBlock('block1')" _fcksavedurl="javascript:hideBlock('block1')"><br /><button>İçeriği Gizle</button></a></div>
Not: Paylaştığım tüm kodlar sitenizde yazı içerisinde çalışacağı için sitenizin yüklenme hızını olumsuz yönde etkilemez, aksine daha hızlı yüklenecektir çünki sayfalar yüklenirken yukarıdan aşağı doğru yüklenir ve bu sırada yayın içeriğinizin yüklemesi ağırsa sayfa performansı düşecektir fakat bu eklenti sayesinde yayınlarınız daha hızlı yüklenecektir. Ekleyeceğiniz resim, video, link, yazı gibi elementleri html olarak eklerseniz renk, boy, font gibi özellikleri değiştirmek için html tagları kullanmalısınız.
* "OLAY" içerisine eklediğiniz her şeye (HTML/ Java kodlama dilleri) duyarlıdır. Örneğin yazdığınız yazıyı alt satıra geçirmek için <br /> etiketi kullanılmalıdır. Bu kodu yazmamda ki sebep örneğin bir java yada html kodu yayınladınız, demo yada canlı görünümü sayfada yayınlarsanız sayfa çok uzuyor yada anlatım bozuluyor, bazen de demo sayfa dışına taşabiliyor bu nedenle genelde test blogları tercih ediliyor. Bu kod sayesinde ziyaretçi önizlemeyi aç/kapa şeklinde görebilir. böylece adminlerde bir demo için boş yere fazladan bir test blogu açmak zorunda kalmazlar.
* "Gizlemek İstediğiniz Yazı, Resim, Video vb" sitenizde yayınladığınız kodlar bazen çok uzun yada çok geniş olup düzeni bozuyor , bazende örnek kodu kopyalanamaz hale getiriyor. <textarea> ile çerçeve içerisine alınmış kullanışlı bir açılır kapanır kod penceresidir. Bu kod penceresini ziyaretçi açarak rahatça kodu alabilir yada yazdığınız uzun yazılara alt açıklama , referans, örnek resim gibi alt bilgiler eklemek için kullanabilirsiniz.
* Değişkenler;
"background-color: #f5f5f5" açılıp kapanan bölümün arka plan rengini uçuk mavi ile yazılmış hex kodlarını değiştirebilirsiniz. Renk kodları bulmak için tıklayın Renk Kodu Editörü yahut Renk Tablosundan yararlanabilirsiniz.
"width: 630px" Açılacak alanın genişliği
"height: 135px" Açılacak alanın yüksekliği
"Demo Göster,İçeriği Göster" Yazan yerleri istediğiniz gibi adlandırabilirsiniz.
"block1" yazan yerler ise eklentimizin ismidir, bunu da dilediğiniz gibi değiştirebilirsiniz. Tekrardan hatırlatıyorum aynı sayfa, yazı içerisinde birden fazla bu eklentiyi kullanacaksanız muhakkak eklentinin adını türkçe karakter kullanmadan değiştirin, aksi halde çakışma olacaktır.
Bu eklenti çok kullanışlı gerçekten ihtiyacınızı karşılamak için bu eklentinin hangi yöntemini kullanmak istiyorsanız onu seçin ben şimdilik ikinci yöntemi paylaşıyorum üçüncü bir yöntem de var, onu da paylaşacağım ilerleyen yayınlarda şimdilik bu kadar, esenle kalın iyi çalışmalar...
