× İletişim Formu CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi 2 Arlina Design 4/24/2017 Etiketler : Blogger Tablo Arlina Design <!DOCTYPE html> <html> <head> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 20px auto 0 auto; } a { text-decoration: none; } .container-content { max-width:600px; margin: 0 auto 10px } ul.tabs { margin: 0 0 -1px; padding: 0; list-style: none } ul.tabs li { background: 0 0; display: inline-block; margin: 0; padding: 10px 15px; cursor: pointer; font-weight: 700; border-radius: 4px 4px 0 0; } .tab-content, ul.tabs li.current { background: #555; color: #fff } .tab-content { display: none; padding: 15px } .tab-content.current { display: inherit } .container-content .tab-content p, .container-content .tab-content ul, .container-content .tab-content ol { margin: 0 } .container-content .tab-content ul li, .container-content .tab-content ol li { margin: 0 0 0 20px; padding: 0 } .tab-content a { color: #9fe3ff } .technical-box { display: block; line-height: 1.3 } .technical-box:after { content: ""; clear: both; display: block } .technical-box .field-name { display: inline-block; font-weight: 700; width: 180px; margin: 0; position: relative; top: 0; float: left } .technical-box .field-value { display: inline-block; margin: 0; width: calc(100% - 180px); float: left } .tab-content input[type="checkbox"] { position: absolute; left: -9999px; } .hideContent { position: relative; height: auto; } label { background: #FF9800; display: block; height: 30px; line-height: 30px; cursor: pointer; position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; } label:before { position: absolute; content: 'Devamı...'; width: 120px; text-align: center; left: 50%; margin-left: -60px; font-weight: bold; } .tab-content input[type="checkbox"] ~ div { width: 100%; overflow: hidden; max-height: 144px; padding-bottom: 30px; position: relative; } .tab-content input[type="checkbox"] ~ div:after { content: ""; width: 100%; height: 70px; position: absolute; bottom: 15px; background: -moz-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%); background: -webkit-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgb(85, 85, 85) 100%); background: linear-gradient(to bottom, rgba(126, 139, 150, 0) 0%, rgb(85, 85, 85) 100%); z-index: 1; } .tab-content input[type="checkbox"]:checked ~ div { max-height: 3000px; transition: 2s; } .tab-content input[type="checkbox"]:checked ~ div:after { background: 0 0; } .tab-content input[type="checkbox"]:checked + label:before { content: 'Kapat'; } @media screen and (max-width: 414px) { ul.tabs li { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 4px; background: #7e8b96; margin: 0 0 5px; color: #fff; opacity: .7; } ul.tabs li.current { opacity: 1 } } </style> </head> <body> <div class="container-content"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1">Açıklama</li> <li class="tab-link" data-tab="tab-2">Teknik bilgi</li> <li class="tab-link" data-tab="tab-3">Özellikler</li> </ul> <div id="tab-1" class="tab-content current hideContent"> <input type="checkbox" id="check_id"> <label for="check_id"></label> <div> <p> Hayatınızdaki kişilere anında ve ücretsiz ulaşın. Messenger tıpkı kısa mesaj gibidir ancak her mesaj için ücret ödemeniz gerekmez (veri tarifenizi kullanır).<br /> <br /> Sadece Facebook arkadaşları için değildir: Telefon rehberinizdeki kişilere mesaj gönderebilir ve telefon numarası girerek yeni bir kişi ekleyebilirsiniz.<br /> <br /> Grup sohbetleri: En sık mesajlaştığınız kişiler için gruplar oluşturun. Gruplara ad verebilir, grup fotoğrafları belirleyebilir ve hepsini bir arada tutabilirsiniz.<br /> <br /> Fotoğraflar ve videolar: Doğrudan uygulamadan video, selfie veya başka fotoğraflar çekebilir ve tek dokunuşla gönderebilirsiniz.<br /> <br /> Sohbet balonları: Başka uygulamaları kullanırken konuşmanıza devam edin.<br /> <br /> Ücretsiz arama: Başka ülkelerdeki kişilerle bile istediğiniz kadar konuşun. (Aramalar Wi-Fi üzerinden ücretsizdir. Aksi halde veri bağlantısı ücretli olabilir.)<br /> <br /> Mesajlaşmanın daha da fazla yolu:<br /> Çıkartmalarla canlı konuşmaların keyfini çıkarın.<br /> Konuşmadan ayrılmadan galerinizdeki fotoğraf ve videoları görün; ardından mükemmel olanları seçip gönderebilirsiniz.<br /> Söyleyecekleriniz bitmediğinde sesli mesaj kaydedin.<br /> <br /> İlave özellikler:<br /> İnsanların mesajlarınızı ne zaman gördüğünü bilin.<br /> Mesajları veya fotoğrafları konuşmada olmayan kişilere iletin.<br /> İnsanları ve grupları arayarak konuşmanıza çabucak geri dönün.<br /> Yakında olduğunuzda insanların bilmesi için konumu açın.<br /> Kimlerin Messenger'da müsait olduğunu ve Facebook'ta aktif olduğunu görün.<br /> Ana ekranınızdan istediğiniz konuşmaya ulaşmak için kısayollar oluşturun.<br /> Çalışırken, uyurken veya ara vermeye ihtiyaç duyduğunuzda bildirimleri kapatın.<br /> Mesajları hiçbir zaman kaçırmamak için oturumunuzu açık tutun. </p> </div> </div> <div id="tab-2" class="tab-content"> <span class="technical-box"> <span class="field-name">Başlık:</span> <span class="field-value">Android 3.0.5</span> <span class="field-name">Dosya adı:</span> <span class="field-value">wsplayer</span> <span class="field-name">Dosya boyutu:</span> <span class="field-value">4.9 MB</span> <span class="field-name">İşletim sistemi:</span> <span class="field-value">Android 2.2</span> <span class="field-name">Lisans:</span> <span class="field-value">Ücretsiz</span> <span class="field-name">Yazar:</span> <span class="field-value"><a href="http://bloggereklentileri.blogspot.com/" rel="follow" target="_blank" class="external-link">Blogger Eklentileri</a></span> </span> </div> <div id="tab-3" class="tab-content"> <p> Özellik ve ek bilgiler için bu bölümü kullanabilirsiniz. </p> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> <script> $(document).ready(function() { $('ul.tabs li').click(function() { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); }) }) </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi 2" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
CSS ve jQuery ile Sekmeli Blog Yayını Oluşturma Eklentisi 2 Arlina Design 4/24/2017 Etiketler : Blogger Tablo Arlina Design <!DOCTYPE html> <html> <head> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 20px auto 0 auto; } a { text-decoration: none; } .container-content { max-width:600px; margin: 0 auto 10px } ul.tabs { margin: 0 0 -1px; padding: 0; list-style: none } ul.tabs li { background: 0 0; display: inline-block; margin: 0; padding: 10px 15px; cursor: pointer; font-weight: 700; border-radius: 4px 4px 0 0; } .tab-content, ul.tabs li.current { background: #555; color: #fff } .tab-content { display: none; padding: 15px } .tab-content.current { display: inherit } .container-content .tab-content p, .container-content .tab-content ul, .container-content .tab-content ol { margin: 0 } .container-content .tab-content ul li, .container-content .tab-content ol li { margin: 0 0 0 20px; padding: 0 } .tab-content a { color: #9fe3ff } .technical-box { display: block; line-height: 1.3 } .technical-box:after { content: ""; clear: both; display: block } .technical-box .field-name { display: inline-block; font-weight: 700; width: 180px; margin: 0; position: relative; top: 0; float: left } .technical-box .field-value { display: inline-block; margin: 0; width: calc(100% - 180px); float: left } .tab-content input[type="checkbox"] { position: absolute; left: -9999px; } .hideContent { position: relative; height: auto; } label { background: #FF9800; display: block; height: 30px; line-height: 30px; cursor: pointer; position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; } label:before { position: absolute; content: 'Devamı...'; width: 120px; text-align: center; left: 50%; margin-left: -60px; font-weight: bold; } .tab-content input[type="checkbox"] ~ div { width: 100%; overflow: hidden; max-height: 144px; padding-bottom: 30px; position: relative; } .tab-content input[type="checkbox"] ~ div:after { content: ""; width: 100%; height: 70px; position: absolute; bottom: 15px; background: -moz-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgba(126, 139, 150, 1) 100%); background: -webkit-linear-gradient(top, rgba(126, 139, 150, 0) 0%, rgb(85, 85, 85) 100%); background: linear-gradient(to bottom, rgba(126, 139, 150, 0) 0%, rgb(85, 85, 85) 100%); z-index: 1; } .tab-content input[type="checkbox"]:checked ~ div { max-height: 3000px; transition: 2s; } .tab-content input[type="checkbox"]:checked ~ div:after { background: 0 0; } .tab-content input[type="checkbox"]:checked + label:before { content: 'Kapat'; } @media screen and (max-width: 414px) { ul.tabs li { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 4px; background: #7e8b96; margin: 0 0 5px; color: #fff; opacity: .7; } ul.tabs li.current { opacity: 1 } } </style> </head> <body> <div class="container-content"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1">Açıklama</li> <li class="tab-link" data-tab="tab-2">Teknik bilgi</li> <li class="tab-link" data-tab="tab-3">Özellikler</li> </ul> <div id="tab-1" class="tab-content current hideContent"> <input type="checkbox" id="check_id"> <label for="check_id"></label> <div> <p> Hayatınızdaki kişilere anında ve ücretsiz ulaşın. Messenger tıpkı kısa mesaj gibidir ancak her mesaj için ücret ödemeniz gerekmez (veri tarifenizi kullanır).<br /> <br /> Sadece Facebook arkadaşları için değildir: Telefon rehberinizdeki kişilere mesaj gönderebilir ve telefon numarası girerek yeni bir kişi ekleyebilirsiniz.<br /> <br /> Grup sohbetleri: En sık mesajlaştığınız kişiler için gruplar oluşturun. Gruplara ad verebilir, grup fotoğrafları belirleyebilir ve hepsini bir arada tutabilirsiniz.<br /> <br /> Fotoğraflar ve videolar: Doğrudan uygulamadan video, selfie veya başka fotoğraflar çekebilir ve tek dokunuşla gönderebilirsiniz.<br /> <br /> Sohbet balonları: Başka uygulamaları kullanırken konuşmanıza devam edin.<br /> <br /> Ücretsiz arama: Başka ülkelerdeki kişilerle bile istediğiniz kadar konuşun. (Aramalar Wi-Fi üzerinden ücretsizdir. Aksi halde veri bağlantısı ücretli olabilir.)<br /> <br /> Mesajlaşmanın daha da fazla yolu:<br /> Çıkartmalarla canlı konuşmaların keyfini çıkarın.<br /> Konuşmadan ayrılmadan galerinizdeki fotoğraf ve videoları görün; ardından mükemmel olanları seçip gönderebilirsiniz.<br /> Söyleyecekleriniz bitmediğinde sesli mesaj kaydedin.<br /> <br /> İlave özellikler:<br /> İnsanların mesajlarınızı ne zaman gördüğünü bilin.<br /> Mesajları veya fotoğrafları konuşmada olmayan kişilere iletin.<br /> İnsanları ve grupları arayarak konuşmanıza çabucak geri dönün.<br /> Yakında olduğunuzda insanların bilmesi için konumu açın.<br /> Kimlerin Messenger'da müsait olduğunu ve Facebook'ta aktif olduğunu görün.<br /> Ana ekranınızdan istediğiniz konuşmaya ulaşmak için kısayollar oluşturun.<br /> Çalışırken, uyurken veya ara vermeye ihtiyaç duyduğunuzda bildirimleri kapatın.<br /> Mesajları hiçbir zaman kaçırmamak için oturumunuzu açık tutun. </p> </div> </div> <div id="tab-2" class="tab-content"> <span class="technical-box"> <span class="field-name">Başlık:</span> <span class="field-value">Android 3.0.5</span> <span class="field-name">Dosya adı:</span> <span class="field-value">wsplayer</span> <span class="field-name">Dosya boyutu:</span> <span class="field-value">4.9 MB</span> <span class="field-name">İşletim sistemi:</span> <span class="field-value">Android 2.2</span> <span class="field-name">Lisans:</span> <span class="field-value">Ücretsiz</span> <span class="field-name">Yazar:</span> <span class="field-value"><a href="http://bloggereklentileri.blogspot.com/" rel="follow" target="_blank" class="external-link">Blogger Eklentileri</a></span> </span> </div> <div id="tab-3" class="tab-content"> <p> Özellik ve ek bilgiler için bu bölümü kullanabilirsiniz. </p> </div> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> <script> $(document).ready(function() { $('ul.tabs li').click(function() { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); }) }) </script> </body> </html>
Yorum Gönder