Blogger jQuery Tab Menu Ekleme

Blogger jQuery tab menu ekleme yöntemlerinden en basitini ve yazı içerisinde kullanımı en kolay olanı blogunuza uygulama yöntemini sizlerle paylaşacağız.Blogger tab menu ne işime yarayacak diyenleriniz olabilir, aslında blogger tab menuyu her yerde kullanabilirsiniz, sizin hayal gücünüze ve yaratıcılığınıza kalmış bir durum yine de bir örnekle açıklamaya çalışayım;

Örnek:Yemek tarifleri yayınladığınız bir blogunuz olsun, bu blogunuzda herşeyi alt alta çarşaf liste şeklinde yayınlamaktansa tab menuyu kullanarak birinci taba kullanılacak malzemeler, ikinci tab kısmına hazırlanışı,üçüncü tab kısmına videolu anlatım, dördüncü taba da resimleri koyarak ziyaretçinizin bir tıkla istediği tarif içerisinde istediği bilgilere kısa yoldan ulaşmasına ve sayfanızda ziyaretçi 1.tab kısmına göz atarken diğer tabdaki yazılarınızında bir yandan yüklenmesi için zaman kazanarak sayfa boyutunuz büyük olsa bile hızlıca yüklenmesini sağlamış olursunuz, yani ziyaretçi hiç beklemeden bütün veriler yüklenmiş olur.Bu sadece basit bir örnekti, siz bunu kendinize göre istediğiniz şekilde uyarlayabilirsiniz.
DEMO GÖRÜNÜM

Bloguma Blogger Tab Menu nasıl ekleyebilirim?

1-Blogger hesabınızla giriş yapın.
2-Blogunuzun kodlarını her ihtimale karşı yedekleyin.(Blogger yedek alma)
3-Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun.
5-Aşağıdaki kodu kopyalayıp  4.adımda bulduğumuz ]]></b:skin> kodunun hemen üst satırına yapıştırıyoruz.

/*-----Shortcode Tabs--------*/
.sc-tab ul.tabset.tabs li a.active{
border-bottom: 1px solid #70CF0A;
border-top: 3px solid #70CF0A;
padding: 8px 10px 10px 10px;
background: #70CF0A;
color: #fff;
border-left: 1px solid #70CF0A;
border-right: 1px solid #70CF0A;
}
.sc-tab ul.tabset.tabs li a:hover {
background: #70CF0A;
color: white;
border-color: #70CF0A;
}

.sc-tab ul.tabset.tabs {
margin: 0;
padding: 0;
list-style: none;
}
.sc-tab ul.tabset.tabs li {
float: left;
margin: 0px 4px 0px 0px;
border-right: 1px solid #EEE;list-style: none !important;
}
.sc-tab ul.tabset.tabs li a {
color: #666;
text-decoration: none;
    font-family: oswald, arial;font-size: 14px;
}
.sc-tab .tab-box {
clear: both;
position: relative;
z-index: 50;
top: 3px;
}
.sc-tab .tab_content {
display: none;
border: 1px solid #EEE;
padding: 1em;
border-bottom: 3px solid #70CF0A;
box-shadow: 2px 4px 6px #EEE;
font-family: arial;
font-size: 14px;
}
.sc-tab ul.tabset.tabs li a {
padding: 10px;
display: block;
border: 1px solid #EEE;
background: #fbfbfb;
position: relative;
z-index: 100;
} 

6-Yukarıdaki kodlar içeriisnde (5.adım) #70CF0A   kodunu değiştirip html renk kodlarını kullanarak istediğimiz renkte blogger tab menu oluşturabilirsiniz.
7-Html kodları içerisinde Ctrl+F yardımı ile </head> kodunu aratıp bulun.
8.Aşağıdaki kodu kopylayın ve 7. adımda bulduğunuz </head> kodunun üst satırına yapıştırın.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 
<script src='https://googledrive.com/host/0B4LZsB4bN2rdNE4yRjdreDBIcUU/blogokulu-kisa-kod.js' type='text/javascript'/>

9- Tab menu eklemek istediğiniz yere aşağıdaki kodu yapıştırıp ilgili kısımları doldurun.

[tab]
[content title="Tab 1"] Tab1 Açıklama için yazınızı yada resimlerinizi buraya ekleyin.[/content]
[content title="Tab 2"] Tab2 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. [/content]
[content title="Tab 3"] Tab3 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. [/content]
[/tab]

Tab1, Tab2,Tab3 yerine tab başlıklarını yazın.
Tab1 Açıklama için yazınızı yada resimlerinizi buraya ekleyin. yazan yere içeriğinizi ekleyin.
Bütün bu işlemleri doğru yaptığınnızda blogger tab menu eklentisini artık istediğiniz her yere ekleyebilirsiniz.