Blogger için alternatif tab menü eklentisi

 

Blogger eklentileri arasında en çok tercih edilenlerden biri de tab menülerdir. Sekme menüleri olarak da bilinen bu menüleri kullanarak aynı anda birden fazla içeriği bir arada bulundurabiliyor ve bu içeriklerin açılır kapanır sistemle iç içe yer almasını sağlayabiliyoruz. Oldukça kullanışlı olan ve siteye estetik bir görünüm katan bu tab menülere isterseniz widget ekleme imkânınız da mevcuttur. Bunun için yapmanız gereken sadece aşağıdaki adımları izlemektir.
Öncelikle Blogger panelimizin Tasarım > Html’yi Düzenle bölümünü açarak aşağıdaki kodu buluyoruz.

</head>

Bu kodun hemen üzerine aşağıdaki kodları ekliyoruz.

<script type='text/javascript'> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); });</script>

Daha sonra aşağıdaki kodu buluyoruz

]]></b:skin>

Ve bu kodun hemen üzerine de aşağıdaki kodları ekliyoruz.

ul.tabs { border-bottom: 2px solid #F0F0F0; border-left: 1px solid #F0F0F0; float: left; height: 46px; list-style: none outside none; margin: 0; padding: 0; width: 100%; } ul.tabs li { border-color: #F0F0F0; border-style: solid solid solid none; border-width: 1px 1px 1px medium; float: left; height: 45px; line-height: 31px; margin: 0 0 -1px; overflow: hidden; padding: 0; position: relative; text-align: center; width: 105px; text-transform:uppercase; background:#d0d6d9; } ul.tabs li a {border: 1px solid #FFFFFF; color: #999; display: block; font-size: 11px; outline: medium none; padding: 7px 0 6px; text-decoration: none; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; } .tab_container { background: #FFFFFF; border-color: #F9F9F9 #F0F0F0 #F0F0F0; border-style: solid; border-width: 2px 1px 1px; clear: both; float: left; width: 99.5%; } .tab_content { font-family: 'Droid Sans',arial,serif; padding: 20px; font-size: 0.9em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; margin-bottom: 10px; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; }

Son olarak ise tab menünün yer almasını istediğimiz bölüme aşağıdaki kodları ekliyoruz.

<div class='tabbed-widget'> <ul class='tabs'> <li><a href='#tab1'>Sekme 1</a></li> <li><a href='#tab2'>Sekme 2</a></li> <li><a href='#tab3'>Sekme 3</a></li> </ul> <div class='tab_container'> <div class='tab_content' id='tab1'> <b:section class='Tabber' id='tabber_widget1' maxwidgets='1' showaddelement='yes'></b:section> </div> <div class='tab_content' id='tab2'> <b:section class='Tabber' id='tabber_widget2' maxwidgets='1' showaddelement='yes'></b:section> </div> <div class='tab_content' id='tab3'> <b:section class='Tabber' id='tabber_widget3' maxwidgets='1' showaddelement='yes'></b:section> </div> </div> </div>

Hatırlatma:

• Tab menünün ölçülerinde sıkıntı olmaması için Css kodlarını sitenize göre düzenleyebilirsiniz.
• Tab menüye widget eklemek için Tasarım > Sayfa Öğeleri bölümünden arka arkaya dizili 3 adet ‘Gadget Ekle’ ifadelerine tıklayarak istediğiniz widgetleri ekleyebilirsiniz.