Blogger İçin Yeni Çok Sekmeli Widget - Düzenlenebilir Sekmeler
Blogger için tamamen özelleştirilebilir ve düzenlenebilir bir Menü Sekmeleri bileşeninin yeni bir sürümü. Bu bileşen, Blogger blogları için oluşturduğumuz Wordpress Menü Sekmesi bileşenimizin birebir aynısı. Tek fark, bu seferki tasarımı ve daha kolay bir eğitimle birlikte gelmesi. Umarım beğenirsiniz. Hadi şimdi işe koyulalım!
Yeni Blogger'a Menü Sekmeleri Widget'ı Ekleme
Lütfen şu adımları izleyin:
Blogger > Tasarım > HTML Düzenle'ye gidin
Şablonunuzu yedekleyin
]]>/b:skin> için arama yapın
Hemen altına şu kodu yapıştırın –> MBT Menü Sekmeleri JavaScript
Ve hemen üstüne ]]>/b:skin> şu kodu yapıştırın:
/*----- MBT Multi Tabbed Widget ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2Z1ZXYEdN4oGaWQzLG1_codqPSEM-RWlUn5s_rbI7_BAsp1SxyGEZFQEfK8iesGc3hpytWoyWJrTz86ZOLDaTbBMHvdXLCU4eF9-K0cLPH6vZNgzS9mHLaj-OvSKMJC-t4QJUPJ6m94/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2Z1ZXYEdN4oGaWQzLG1_codqPSEM-RWlUn5s_rbI7_BAsp1SxyGEZFQEfK8iesGc3hpytWoyWJrTz86ZOLDaTbBMHvdXLCU4eF9-K0cLPH6vZNgzS9mHLaj-OvSKMJC-t4QJUPJ6m94/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
6. Şimdi, widget'ın şablonunuzdaki konumunu içerdiğinden, bu adımı dikkatlice izleyin. Çoğu şablonun farklı kodlamaları olduğundan, aşağıda eşleşen bir kod bulamazsanız endişelenmeyin ve blog URL'nizi Yorumlar Formu'na yazarak bana bildirin.
Yeni Blogger şablon tasarımları kullanıyorsanız, bu kodu arayın.
<div class='column-right-inner'>
<div id='sidebar-wrapper'>
ve bulduğunuz kodun hemen altına aşağıdaki kodu yapıştırın,
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/>
Post a Comment