× İletişim Formu Blog Yayınlarına Zippy Ekleme Arlina Design 5/03/2018 Etiketler : CSS3 jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Layouts için Widget Etiketleri</title> <style type="text/css"> body {background:#eee;font-family:monospace;font-size:14px;padding:16px} .post-body{background:#fff;padding:8px 16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);} .head-title{position:relative;margin:auto;text-align:center} pre{direction:ltr;margin:0;text-align:left;white-space:pre-wrap;word-wrap:break-word} pre{direction:ltr;margin:0;text-align:left;white-space:pre-wrap;word-wrap:break-word} code{color:#060} /* ===== Zippy ===== */ .zippy{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;color:#28a1f0;cursor:pointer;margin:-1px;padding:10px 0;position:relative;width:100%;transition: all .0s ease} .zippy:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAHlBMVEVChfRChfRChfRChfRChfRChfRChfRChfRChfRChfSnCpalAAAACXRSTlMALYH8WFuAWVpIu53cAAAAOElEQVR42t3JsREAIAxC0SiKZv+FLULjsUGouP+i2Yad2sSqs8EPmDjVk+GibnLVXdRd1F0Y/fYAIYwA+YcaWtQAAAAASUVORK5CYII=);content:'';height:24px;margin-top:-12px;position:absolute;right:0;top:50%;width:24px} .zippy-wrapper.open .zippy:before{margin-top:-12px;transform:scaleY(-1);-webkit-transform:scaleY(-1);-moz-transform:scaleY(-1);-ms-transform:scaleY(-1);-o-transform:scaleY(-1)} .zippy-wrapper.open .zippy{position:relative;border-bottom:1px solid #fff} .zippy-content{overflow:hidden;position:relative;display:none} .zippy-overflow{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;position:relative} .zippy-wrapper.open .zippy-content{-webkit-animation:slide-down 0.218s ease-out;-moz-animation:slide-down 0.218s ease-out;display:block} @-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0)}} @-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}100%{opacity:1;-moz-transform:translateY(0)}} </style> </head> <body> <div class="post-body"> <div class="head-title"><h1>Layouts için Widget Etiketleri</h1></div> <p>Blogunuzun gövde bölümünü oluşturmak için Layouts temasını kullanıyorsanız, resim ve blogroll gibi sayfa öğeleri eklemek üzere widget'ları kullanabilirsiniz.</p> <br> <div class="zippy-wrapper"> <div class="zippy">Başlık</div> <div class="zippy-overflow"> <div class="zippy-content"> <h3>Include öğeleri ne zaman kullanılır?</h3> <p>Koddan oluşan bir bölümünüz varsa ve bu bölümü birkaç farklı yerde ya da yalnızca belirli durumlarda kullanmak istiyorsanız include öğeleri işinize yarayacaktır.</p> <p>Bunu yapmak için içeriği bir <code>b:includable</code> içine yazın ve sonra bu içeriğin görünmesini istediğiniz yerlerde <code>b:include</code> öğesini kullanın.</p> <h3>Biçim</h3> <pre><code><b:includable id='main' var='thiswidget'> [istediğiniz içeriği buraya ekleyin] </b:includable></code></pre> <h3>Özellikler</h3> <ul> <li><strong>id</strong> (gerekli): Harf ve sayılardan oluşan benzersiz bir tanımlayıcı. Her widget'ta id='main' şeklinde bir includable olmalıdır.</li> <li><strong>var</strong> (isteğe bağlı): Söz konusu bölüm içindeki verilere başvurulması amacıyla kullanılan, harf ve sayılardan oluşan bir tanımlayıcı.</li> </ul> <p>Farklı ID'leri olan includable öğeleri oluşturduğunuzda, bu öğeler otomatik olarak görüntülenmez. Ancak, <code>id='new'</code> ile bir includable oluşturduğunuzda, bu öğeye main includable öğenizde <code><b:include name='new' /></code> ile başvurulmasını sağlayabilirsiniz. Bu durumda yeni includable, istediğiniz şekilde gösterilecektir.</p> <p>b:include etiketinin özellikleri aşağıda verilmiştir:</p> <ul> <li><strong>name</strong> (gerekli): Harf ve sayılardan oluşan bir tanımlayıcı. Bu özelliğin, aynı widget'ta yer alan mevcut bir <code>b:includable</code> öğesinin ID'siyle eşleşmesi gerekir.</li> <li><strong>data</strong> (isteğe bağlı): Includable bölümüne iletilecek bir ifade veya veri parçası. Bu, includable içindeki var özelliğinin değeri olacaktır.</li> <li><strong>cond</strong> (isteğe bağlı) Include öğesinin yalnızca sonuç doğru olduğunda yürütülmesini sağlayan bir ifade. Bu, b:if öğesindeki cond özelliğiyle aynıdır.</li> </ul> <h3>Örnek</h3> <p><code>b:includable</code> ile <code>b:include</code> öğesinin nasıl kullanılacağını gösteren bir örneği aşağıda bulabilirsiniz.</p> <p>Unutmamanız gereken en önemli nokta, "main" bölümünün "post" bölümünü kendi içinde nasıl tuttuğudur. "main" bölümü, "p" adını verdiği bir post'u iletir. Included bölümü ise buna kendisine ait var "post" değeri olarak başvurur ve ardından başlığı ekrana getirir.</p> <p>Include öğesinin yalnızca index değerinin 10'dan az olduğu durumlarda çalıştığını göz önünde bulundurun. Yani, bu örnekte en çok 10 post işlenecektir (index 0'dan başlamaktadır).</p> <pre><code><b:includable id='main'> <b:loop var='p' index='index' values='posts'> <b:include name='post' data='p' cond='index < 10'/> </b:loop> </b:includable> <b:includable id='post' var='post'> Başlık: <data:post.title/> </b:includable></code></pre> </div> </div> </div> <h2>Örnek incelemesi</h2> <p>Blogunuzdaki bir PageList widget'ının HTML kodunda bu etiketlerin hepsinin nasıl kullanıldığını öğrenin.</p> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script> //<![CDATA[ // Zippy URL: https://bloggereklentileri.blogspot.com $(function() { $('.zippy').on('click', function(e) { $(this).parent().toggleClass('open');}).on('zippy-down', function(e) { e.stopPropagation(); e.preventDefault(); return false;});}); //]]> </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blog Yayınlarına Zippy Ekleme" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blog Yayınlarına Zippy Ekleme Arlina Design 5/03/2018 Etiketler : CSS3 jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Layouts için Widget Etiketleri</title> <style type="text/css"> body {background:#eee;font-family:monospace;font-size:14px;padding:16px} .post-body{background:#fff;padding:8px 16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);} .head-title{position:relative;margin:auto;text-align:center} pre{direction:ltr;margin:0;text-align:left;white-space:pre-wrap;word-wrap:break-word} pre{direction:ltr;margin:0;text-align:left;white-space:pre-wrap;word-wrap:break-word} code{color:#060} /* ===== Zippy ===== */ .zippy{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;color:#28a1f0;cursor:pointer;margin:-1px;padding:10px 0;position:relative;width:100%;transition: all .0s ease} .zippy:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAHlBMVEVChfRChfRChfRChfRChfRChfRChfRChfRChfRChfSnCpalAAAACXRSTlMALYH8WFuAWVpIu53cAAAAOElEQVR42t3JsREAIAxC0SiKZv+FLULjsUGouP+i2Yad2sSqs8EPmDjVk+GibnLVXdRd1F0Y/fYAIYwA+YcaWtQAAAAASUVORK5CYII=);content:'';height:24px;margin-top:-12px;position:absolute;right:0;top:50%;width:24px} .zippy-wrapper.open .zippy:before{margin-top:-12px;transform:scaleY(-1);-webkit-transform:scaleY(-1);-moz-transform:scaleY(-1);-ms-transform:scaleY(-1);-o-transform:scaleY(-1)} .zippy-wrapper.open .zippy{position:relative;border-bottom:1px solid #fff} .zippy-content{overflow:hidden;position:relative;display:none} .zippy-overflow{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;position:relative} .zippy-wrapper.open .zippy-content{-webkit-animation:slide-down 0.218s ease-out;-moz-animation:slide-down 0.218s ease-out;display:block} @-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0)}} @-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}100%{opacity:1;-moz-transform:translateY(0)}} </style> </head> <body> <div class="post-body"> <div class="head-title"><h1>Layouts için Widget Etiketleri</h1></div> <p>Blogunuzun gövde bölümünü oluşturmak için Layouts temasını kullanıyorsanız, resim ve blogroll gibi sayfa öğeleri eklemek üzere widget'ları kullanabilirsiniz.</p> <br> <div class="zippy-wrapper"> <div class="zippy">Başlık</div> <div class="zippy-overflow"> <div class="zippy-content"> <h3>Include öğeleri ne zaman kullanılır?</h3> <p>Koddan oluşan bir bölümünüz varsa ve bu bölümü birkaç farklı yerde ya da yalnızca belirli durumlarda kullanmak istiyorsanız include öğeleri işinize yarayacaktır.</p> <p>Bunu yapmak için içeriği bir <code>b:includable</code> içine yazın ve sonra bu içeriğin görünmesini istediğiniz yerlerde <code>b:include</code> öğesini kullanın.</p> <h3>Biçim</h3> <pre><code><b:includable id='main' var='thiswidget'> [istediğiniz içeriği buraya ekleyin] </b:includable></code></pre> <h3>Özellikler</h3> <ul> <li><strong>id</strong> (gerekli): Harf ve sayılardan oluşan benzersiz bir tanımlayıcı. Her widget'ta id='main' şeklinde bir includable olmalıdır.</li> <li><strong>var</strong> (isteğe bağlı): Söz konusu bölüm içindeki verilere başvurulması amacıyla kullanılan, harf ve sayılardan oluşan bir tanımlayıcı.</li> </ul> <p>Farklı ID'leri olan includable öğeleri oluşturduğunuzda, bu öğeler otomatik olarak görüntülenmez. Ancak, <code>id='new'</code> ile bir includable oluşturduğunuzda, bu öğeye main includable öğenizde <code><b:include name='new' /></code> ile başvurulmasını sağlayabilirsiniz. Bu durumda yeni includable, istediğiniz şekilde gösterilecektir.</p> <p>b:include etiketinin özellikleri aşağıda verilmiştir:</p> <ul> <li><strong>name</strong> (gerekli): Harf ve sayılardan oluşan bir tanımlayıcı. Bu özelliğin, aynı widget'ta yer alan mevcut bir <code>b:includable</code> öğesinin ID'siyle eşleşmesi gerekir.</li> <li><strong>data</strong> (isteğe bağlı): Includable bölümüne iletilecek bir ifade veya veri parçası. Bu, includable içindeki var özelliğinin değeri olacaktır.</li> <li><strong>cond</strong> (isteğe bağlı) Include öğesinin yalnızca sonuç doğru olduğunda yürütülmesini sağlayan bir ifade. Bu, b:if öğesindeki cond özelliğiyle aynıdır.</li> </ul> <h3>Örnek</h3> <p><code>b:includable</code> ile <code>b:include</code> öğesinin nasıl kullanılacağını gösteren bir örneği aşağıda bulabilirsiniz.</p> <p>Unutmamanız gereken en önemli nokta, "main" bölümünün "post" bölümünü kendi içinde nasıl tuttuğudur. "main" bölümü, "p" adını verdiği bir post'u iletir. Included bölümü ise buna kendisine ait var "post" değeri olarak başvurur ve ardından başlığı ekrana getirir.</p> <p>Include öğesinin yalnızca index değerinin 10'dan az olduğu durumlarda çalıştığını göz önünde bulundurun. Yani, bu örnekte en çok 10 post işlenecektir (index 0'dan başlamaktadır).</p> <pre><code><b:includable id='main'> <b:loop var='p' index='index' values='posts'> <b:include name='post' data='p' cond='index < 10'/> </b:loop> </b:includable> <b:includable id='post' var='post'> Başlık: <data:post.title/> </b:includable></code></pre> </div> </div> </div> <h2>Örnek incelemesi</h2> <p>Blogunuzdaki bir PageList widget'ının HTML kodunda bu etiketlerin hepsinin nasıl kullanıldığını öğrenin.</p> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script> <script> //<![CDATA[ // Zippy URL: https://bloggereklentileri.blogspot.com $(function() { $('.zippy').on('click', function(e) { $(this).parent().toggleClass('open');}).on('zippy-down', function(e) { e.stopPropagation(); e.preventDefault(); return false;});}); //]]> </script> </body> </html>
Yorum Gönder