Blogger Yazı içinde Tab Oluşturma

Blogger kullanan arkadaşlar için yazı içerisinde nasıl tab oluşturulur onu göstereyim. Bunu bir menü olarak da düşünebilirsiniz. Özellikle film ve dizi blogları olan arkadaşların işini görecektir. Bunları yapabilmemiz için öncelikle Blogger'da Şablon dan HTML'yi Düzenle kısmına geliyoruz. Aşağıda sizlere iki kod verecem bunlardan birini Şablon kısmına diğerini paylaşımı yaparken direk olarak yazının HTML bölümüne eklemeniz gerekecek. İlk olarak aşağıdaki kodları kopyalıyoruz. Bu kodları </head> kodunu buluyoruz ve onun hemen önüne yapıştırıyoruz.


<style type="text/css"> body {font: 12px Arial} a {text-decoration: none} ul,li {margin: 0; padding: 0; list-style-type: none} :focus {outline: 0} /* Tıklanacak kısmım */ ul.tab {background-color: #eee; border: 1px solid #ddd; height: 26px} ul.tab li {float: left; padding: 5px} ul.tab li a {color: #656565; padding: 5px} ul.tab li.aktif a {color: red; font-weight: bold} /* içerik kısmım */ .icerik {padding: 5px; border: 1px solid #ddd} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // tüm içerik divlerini gizle $(".icerik").hide(); // İlk tabı seç ve aktif classı ekle. Ve göster.. $(".tab li:first").addClass("aktif").show(); // İlk içeriği göster $(".icerik:first").show(); // Tıklandığında yapılacak işlemler $(".tab li").click(function(){ // Tıklandığında aktif classını silelim $(".tab li").removeClass("aktif"); // Seçilene aktif classını ekleyelim $(this).addClass("aktif"); // İçeriği tekrar gizle $(".icerik").hide(); var aktifTab = $(this).find("a").attr("href"); $(aktifTab).fadeIn(); return false; }); }); </script>
Bu kodları </head> kodundan önce yapıltırdıktan sonrada aşağıda vereceğim kodları konuya yapıştırıyoruz. <ul class="tab"> <li><a href="#tab1">İlk Sekme</a></li> <li><a href="#tab2">İkinci Sekme</a></li> <li><a href="#tab3">Üçüncü Sekme</a></li> </ul> <div id="tab1" class="icerik"> burası ilk gözüken kısım olacaktır.. </div> <div id="tab2" class="icerik"> Burası 2.ye tıklandığında gözükecek kısımdır.. </div> <div id="tab3" class="icerik"> Burasıda 3.ye tıklandığında gözükecek kısımdır.. </div>
Bu yazının içerisine yapıştırdığınız kodlarda zaten açıklama yazıyor. Örneğin bir video paylaşacaksınız ve videonun partlı olduğunuz düşünürsek, ilk görünen kısım yazan yere birinci embed, ikinci görünen yere ikinci embedi yazarak partlı bir yazı hazırlayabilirsiniz. Eğer takıldığınız bir yer olursa yorum atın yardımcı oluruz.