 |
| CSS İle Blogger İçin Tablo Yapımı |
Blogger Dersleri kuşağında bir çok menü örneğini sizler ile paylaştım şimdi ise Bloglarda yer sıkıntısı yaşayan bir çok blogcu tarafından kullanılan değişen menü stilini elden geldiğince size anlatmaya çalışacağım. Öncelikle tam olarak neyden bahsettiğimin anlaşılabilmesi için örnek bir gösterim sunmak istiyorum.
Değişken menü ile hem alandan tasaruf ederken hem şık bir blog görünümü elde edebilirsiniz.
Blogger Değişen Tablo Menü Yapımı
1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.2 ) Ardından CTRL+F yardımı ile ]]></b:skin> kodunu bularak hemen üzerine aşağıda ki Blogger Blogger Değişen Tablo Menü Yapımı kodlarını ekliyoruz.
#tabs
{
overflow: auto;
width:100%;
list-style: none;
margin: 0;
padding: 0;
}
#tabs li
{
margin: 0;
padding: 0;
float: left;
}
#tabs a
{
-moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
background: #ad1c1c;
background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
color: #fff;
float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
}
#tabs a:hover
{
background: #c93434;
background: -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
background: linear-gradient(220deg, transparent 10px, #c93434 10px);
}
#tabs a:focus
{
outline: 0;
}
#tabs #current a
{
background: #fff;
background: -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
background: -o-linear-gradient(220deg, transparent 10px, #fff 10px);
background: linear-gradient(220deg, transparent 10px, #fff 10px);
text-shadow: none;
color: #333;
}
#content
{
border:1px solid #000000;
background-color: #fff;
width:200px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(top, #fff, #ddd);
-moz-border-radius: 0 2px 2px 2px;
-webkit-border-radius: 0 2px 2px 2px;
border-radius: 0 2px 2px 2px;
-moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
-webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
padding: 30px;
}
/* Remove the rule below if you want the content to be "organic" */
#content div
{
height: 220px; }
Blogger Değişen Tablo Düzenlemesi - I
- Kırmızı ile yazılmış alan tablonun tüm ölçüsüdür. İstediğinizi boyutlarda ayarlama yapabilirsiniz.
- Pembe olarak belirlenmiş kodlar menülerde ki yazı fontunun çeşidi ve büyüklüğünü belirler isterseniz değiştirebilirsiniz.
- #tabs ile açılmış her kod paragrafı menünün renk kodlarını belirler. Renk kodlarını inceleyerek değiştirebilirsiniz. Kullanmak istediğiniz renk kodlarına buradan ulaşabilirsiniz : Renk Kodları
4 ) CTRL+F kombinasyonu ile </head> kodunun hemen üzerine Blogger değişen tablo menü kodlarını ekliyoruz.
<script type='text/javascript'>
$(document).ready(function() {
$("#content div").hide();
$("#tabs li:first").attr("id","current");
$("#content div:first").fadeIn();
$('#tabs a').click(function(e) { e.preventDefault(); $("#content div").hide(); $("#tabs li").attr("id",""); $(this).parent().attr("id","current"); $('#' + $(this).attr('title')).fadeIn(); }); })();
</script>
5 ) Tabloyu yayınlar içerisinde HTML bölümünü açarak kullanabilir yada Gadget Ekle diyerek kullabilirsiniz. Kullanmak için eklemeniz gereken kod dizini :
<ul id="tabs">
<li><a href="#" title="Menü 1">Menü 1</a></li>
<li><a href="#" title="Menü 2">Menü 2</a></li>
<li><a href="#" title="Menü 3">Menü 3</a></li>
</ul>
<div id="content">
<div id="tab1">İstediğiniz İçeriği Girin <a href="http://www.bloggerdersleri.com/" title="Blogger Dersleri">Blogger Dersleri</a> </div>
<div id="tab2">İstediğiniz İçeriği Girin</div>
<div id="tab3">İstediğiniz İçeriği Girin</div>
</div>
Blogger Değişen Tablo Düzenlemesi - II
- Pembe olarak verilmiş alan oluşturduğunuz sıralı menünün başlıkları ve başlığa ait title açıklaması. Oluşturmak istediğiniz tabloların başlıklarını kendinize göre belirleyerek pembe olarak verilmiş menü yazısı ile değiştirin.
- Kırmızı olarak yazılmış olanlar menü başlığına tıkladığınızda görünecek içerik. Kullanmak istediğiniz şekilde düzenleyebilirsiniz .
- <div id="tab2"> ---- </div> kodları arasına düzenlediğiniz menü içeriği arasına HTML kodları ekleyebilirsiniz. Ben örnek teşkil etsin diye bir adet html link kodu ekleyerek mavi olarak belirtim. Oluşturmak istediğiniz içeriğe her türlü HTML kodunu ekleyerek bloglarınız da kullanabilirsiniz.
Yorum Gönder