Blogger Sekmeli Widget Eklentisi
Blogger, Klasik blogunuzda kullanabileceğiniz, blogger’un üç gadget eklentisini bir gadget sekmesinde birleştirip sidebar alanından yer kazandırarak kullanım kolaylığı sağlayan sekmeli widget eklentisi. Blogger özel temalarda sıkca rasladığınız Popüler yayınlar, Etiketler, Arşiv, gadget modül seçeneklerini bir gadget içinde birleştirerek okuyucularınıza daha fazla seçenek sunacağınız yer sağlayabilirsiniz. Eklenti kodlarını şablonunuza uyguladığınızda tek yapmanız gereken işlem ingilizce yazılı olan başlık isimlerini değiştirmektir.
Adım 1 :
Blog’unuzun önce yedeğini alın. Blogger şablon kodları içinde (Ctrl+F) aşağıdaki kod’u bulun.]]></b:skin>
Blog yazı sayfasında çok uzun yer kaplamaması için kodlar ücretsiz barındırma Box sürücüsüne yüklüdür. Sizde dosya yedekleme ve bağlantı paylaşmak için Box Drive kayıt olabilirsiniz.
Şu anda gördüğünüz bu kodları kendi tasarladığım Klasik Blog’umda görmek isteyebilirsiniz.
Adım 2 :
Yukarıda verilen bağlantı linki ile dosyayı indirip kodları ekleme işiniz bitti ise, eklediğimiz kodlarımıza stil veren CSS kodlarını ekleye başlayabiliriz. Adım 1 de verilen kodu bulun ve hemen üstüne aşağıdaki CSS kodlarını yapıştırın ve blog’unuzu kaydedin.
Özel tasarım şablon kullanıyor iseniz bulacağınız kod aşağıda verilmiştir./* Tabview Section G59P------------------------- */
.tabs-widget{list-style:none;list-style-type:none;height:26px;margin:0 0 10px;padding:0;}
.tabs-widget li{list-style:none;list-style-type:none;float:left;margin:0 0 0 4px;padding:0;}
.tabs-widget li:first-child{margin:0;}
.tabs-widget li a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimMSasZPgWhJn9b5kutlBEJvHM1JNWsstYvAc7qIutZ67RPZReLyMl0Jfb_1N9MSV0eFqahAtHqDzRS52QMbE8DYgnOU61NdJCiKrgBGCyp4oINk-aKYZBiIQXAUn6GJLHBV8DLLduHrD/s1600/tabs-widget-bg.png) left top repeat-x;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;display:block;text-decoration:none;font-size:12px;line-height:12px;padding:6px 16px;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimMSasZPgWhJn9b5kutlBEJvHM1JNWsstYvAc7qIutZ67RPZReLyMl0Jfb_1N9MSV0eFqahAtHqDzRS52QMbE8DYgnOU61NdJCiKrgBGCyp4oINk-aKYZBiIQXAUn6GJLHBV8DLLduHrD/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;text-decoration:none;}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}
.tabs-widget {height: 40px;}
}
<div id='sidebar-wrapper'>
<div class='column-right-inner'>
<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'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog 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;'/>
Özelleştirme :
1. Adım 2, içinde iki adet resim linki vardır. Resim linkinin yanındaki bağlantıyı kaldırarak aşağıdaki kodları ekleyip arka plan renklerini değiştirebilirsiniz.(Görünüm bozulduğundan tavsiye edilmez.)
Aşağıda verdiğim kodtan sonrasını silin ve hemen aşağıdaki kodu ekleyin.
Silinecek kodların olduğu bölüm bilgisi 1. Resim linki :
.tabs-widget li a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimMSasZPgWhJn9b5kutlBEJvHM1JNWsstYvAc7qIutZ67RPZReLyMl0Jfb_1N9MSV0eFqahAtHqDzRS52QMbE8DYgnOU61NdJCiKrgBGCyp4oINk-aKYZBiIQXAUn6GJLHBV8DLLduHrD/s1600/tabs-widget-bg.png) left top repeat-x;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;display:block;text-decoration:none;font-size:12px;line-height:12px;padding:6px 16px;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimMSasZPgWhJn9b5kutlBEJvHM1JNWsstYvAc7qIutZ67RPZReLyMl0Jfb_1N9MSV0eFqahAtHqDzRS52QMbE8DYgnOU61NdJCiKrgBGCyp4oINk-aKYZBiIQXAUn6GJLHBV8DLLduHrD/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;text-decoration:none;}
#C80000;color:#fff;text-decoration:none}
.tabs-content{background:#212121}
3. Blogunuzu kaydedin ve Ana sayfanıza bakın.
4. Ayrıca siyah başlık sekme, mavi başlık sekme resim linklerini ilgili yazılardan alarak kullanabilirsiniz. Blog’unuzda tema tasarımı ile ilgili sorun mu yaşıyorsunuz. Menü başlık çubuğunda bulunan Tema Tasarım kanularından yardım alabilirsiniz.
Blogger klasik blog’unuzu kendiniz tasarlayın nasıl mı yapacaksınız ? Buradan giriş yaparak tüm ana sayfanızı kendi emeğiniz ile tasarlayarak zevkle kullanabilirsiniz.
Kaydol:
Kayıt Yorumları (Atom)
.jpg)
0 yorum: