Blogger JQuery Tab Menü Ekle

   Blogger JQuery Tab Menü ne işe yaradığını bilmeyen yoktur umarım.Yine kısaca anlatayım JQuery ile çalışan javascript kod yapısıdır.Yazılarınızda genelde uzun makalelerde çok işinize yarayan bu tab menü bazı Blogger temalarında tema dosyaları içerisinde bulunan seçenekler vardır örneğin benim kullandığım temanın tab menü seçeneği var.

   Neyse konuya geri dönelim ve nasıl uygulayacağız ona bakalım.Artık 2016 yılındayız ve Blogger ile yeni tanışan veya kod bilgisi olmayanlar altta ki anlatımı sırası ile yapmaya çalışsın.Her hangi bir hata alımında en alt kısımdan yorum yapınız veya iletişime geçiniz.

A) Blogger hesabınıza giriş yapın
B) Unutmadan her ihtimale karşı şablon yedeğinizi almayı unutmayın.
C)  Kumanda paneli > Şablon > HTML Düzenle yolunu izleyin
D) Kısa yol tuşları CTRL+F ile ]]></b:skin> kodunu aradın.
E) Bulduğunuz ]]></b:skin> kodun hemen üst kısmana altta ki CSS kodlarını ekleyin.

/*-----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;
} 

F) Tekrar CTRL+F tuşları ile </head> kodu aratıp buluyoruz.
G) Bulduğunuz </head> kodun hemen üst kısmına altta ki Javascript kodunu ekleyin

<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'/>

H) Şablonu kaydedip kumanda paneline dönün.

Şimdi tek yapacağınız işlem tab menüyü kullanacağınız zaman HTML kısmına tıklayarak altta ki kodlarda ki renkli belirttiğim yerleri kendinize göre düzenleyin buraya yapıştırın ve yazınıza Oluştur tıklayarak devam edin.

[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]

Hepsi bu kadar.İşlemimiz sona ermiştir. Kolay gelsin bizi takip etmeye devam edin.

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!