Subscribe For Free Updates!

We'll not spam mate! We promise.

Menü Oluşturma etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Menü Oluşturma etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

14 Şubat 2015 Cumartesi

Blogger Menü Çubuğu Nasıl Düzenlenir

Blogger’un varsayılan şablon görünümleri ile şık renklerden oluşan, üzerine gelince değişen renk gösteren menü çubuğu, diğer ismi ile menü sekmesi statik sayfa linkleri ve etiket sistemi ile nasıl yapılır? Yeni blogger ve eski blogger yayıncı arkadaşlarımız aşağıda açıklaması yapılan menü sekmesinin nasıl yapıldığını okuyarak bloglarını özelleştirebilirler. Blogger kumanda panelinde Sayfalar iki isimden oluşmaktadır. Sayfaların nerede olduğunu ne işe yaradığını bilmiyorsanız, aşağıdaki bağlantıdan okuyabilirsiniz. Sayfaların ne olduğunun bilindiğini kabul ederek nasıl özelleştireceksiniz okumaya devam edin.

Blogger sayfalar ile ilgili bilgiler

Blogger’un sayfalar menü sekmesinin özelleştirilmesi :
1. Blogger → Şablon seçeneklerinde basit görünüm ismi kısmında bulunan ilk turuncu renkli şablon üzerinden anlatımıza devam edelim. (Bu bir örnektir. Her türlü şablon için geçerlidir.)
2. Blogger kumanda paneli şablon seçeneğinde iken Özelleştir ismine tıklayın.
3. Açılan pencerede Gelişmiş seçeneğine tıklayın.
4. Sağ tarafta dikey seçenekler arasında Sekme metni ve Sekme arka planı isimli 2 ad. seçeneğimiz menü sekmesine kumada eden kısımdır.
5. Bu 2 ad seçenek şablon kodlarında içinde /*Tabs etiket isminin altında yer alır. Şablon özelleştirme kısmında yaptığınız tüm işlemler bu kısımda kod olarak değişim gösterir. Şimdi bu iki seçeneği inceleyelim.
6. Sekme metni : Sekme metni için 3 ad. seçenek mevcut olup, bazı temalarda bu seçenekler değişebilir. Bu seçenekleri incelediğimiz de;
Yazı tipi : Yazı font’unu değiştirebileceğiniz birçok alternetif sunar. Mevcut olanı kullanabilir veya herhangi biri ile değiştirebilirsiniz. Bu seçenekleri kullanırken hatalı bir seçeneğe tıklarsanız çekinmeyin. Hemen alt kısımda (sekme metni üzerinde yapılan değişikleri sil) seçeneği ile varsayılan eski konuma alabilirsiniz.
Metin rengi : Seçmiş olduğunuz yazı font’unun rengini değiştiren seçenektir.
Seçilen renk : Seme çubuğunda seçilmiş alan kısmında haricinde görülmesini istediğiniz rengi belirler. Yukarıda verilen resimde Turuncu renk görünümlü basit şablon kullanımı için yazı ve renk kodları aşağıda verilecektir. Blog’unuzda aynı özellikleri kullanabilirsiniz.
7. Sekme arka planı : Turuncu görünümlü şablon için burada 2 ad seçenek mevcuttur.
Arka plan rengi : Yatay sekme çubuğunuzun komple görünümünü sağlayan renk seçim kısmıdır. Bir renk belirleyin yada aşağıdaki özelleştirmeyi kullanın.
Seçilen renk : Menü çubuğunuzda bir etiket ismi üzerine maus’u yanaştırdığınız zaman değişen reng görünümünü belirler. şablon kodlamalarındaki diğer adı (Li)Hover olarak bilinir.
Açıklama : (li) : Tek satırlık etiket linkidir. (lu) : Açılır etiket link kodlama ismidir.
Tüm yapmanız gereken bu iki seçeneği dilediğiniz gibi özelleştirerek şık bir menü sekmesi elde edebilirsiniz. Bunun için herhangi bir kod bilgisine bile ihtiyaç duymazsınız.
Yukarıda gördüğünüz turuncu ve mavi renklerden oluşan menü çubuğu ayarları için ;
1. Sekme metni :
Yazı tipi : Arial 14 px, Metin rengi : #f9f9f9, Seçilen renk : #0000ff
2. Sekme arka planı :
Arka plan rengi : #0000ff, Seçilen renk : #ff9900,
Ayrıca okuyabileceğiniz bilgilerBlogger Gelişmiş Ayarlar Hakkında genel anlatım.

7 Şubat 2015 Cumartesi

Dikey ve Yatay Facebook Stili Açılır Menü Oluşturun

Blog’unuz için, Facebook mavisi renk stil’i görünümde dikey ( vertical ) ve yatay ( horizontal ) görünüme sahip menü çubuğunu yerleşim panelinde gadget olarak ekleyerek açılır menü sekmesi olarak kullanabilirsiniz. Açılır menü çubuğu eklentisini kullanabilmeniz için şablon kodlarına küçük bir kod daha ekleyeceğiz. Blogger’un varsayılan şablonlarında açılır menü yapılandırmasını yapılandıracak kodlar maalesef halen Blogger tasarımcıları tarafından yapılmadığından böyle yamalar ile idare edeceğiz. Blogger şablon kodlarında menü sekmesi tek satır olarak yapılandırılmış ve bu kodlar da Blogger için Google sunucularında barındırılmaktadır. Bu kodlara müdehale etme şansımız olmadığından terzi yaması gibi kod üreterek blog şablonumuzu yamayıp kullanıyoruz. 

Bu arada belki bir Blogger geliştirici veya tasarımcısı bu yazıyı okurda utanarak bu işe bir el atar düşüncesi ile devamlı yazıyorum. Yama işimize devam ederek bugün dikey ve yatay Facebook mavi stil ile Açılır Menü Oluşturmayı nasıl yapacağımızı aşağıda takip ederek kurulum aşamasına geçebilirsiniz. Arzu ettiğiniz bir format ile menü sekmesini dilediğiniz gibi özelleştirebilirsiniz.

Blogger için açılır menü sekmesinin kurulum aşamaları :

1. Blogger kumanda paneline giriş yapın.

2. Kumanda panelinde yerleşim gadget ekle sekmesini açın, Html/javaScript gadget’ini açın.

3. Aşağıda verilen kodları gadget içine ekleyin ve kaydedin.

4. Eklediğiniz gadget’i blog kayıtları yerleşiminin üst kısmına sürükleyerek konumlandırın.

Html ve Css kodları hepsi bir aradadır. Sadece gadget içine kodları yapıştırın.
<style> 
#agnavbar {
background: #3B5998;
width: 100%;

color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}

#agnav {
margin: 0;
padding: 0;
}
#agnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#agnav li {
list-style: none;
margin: 0;
padding: 0;

}
#agnav li a, #agnav li a:link, #agnav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;
}
#agnav li a:hover, #agnav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;

}
#agnav li {
float: left;
padding: 0;
}
#agnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#agnav li ul a {
width: 140px;
}
#agnav li ul ul {
margin: -25px 0 0 161px;
}
#agnav li:hover ul ul, #agnav li:hover ul ul ul, #agnav li.sfhover ul ul, #agnav li.sfhover ul ul ul {
left: -999em;
}
#agnav li:hover ul, #agnav li li:hover ul, #agnav li li li:hover ul, #agnav li.sfhover ul, #agnav li li.sfhover ul, #agnav li li li.sfhover ul {
left: auto;
}
#agnav li:hover, #agnav li.sfhover {
position: static;
}
#agnav li li a, #agnav li li a:link, #agnav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;

}
#agnav li li a:hover, #agnav li li a:active {
background: #627AAD;
color: #FFF;
display: block;

}

#agnav li li li a, #agnav li li li a:link, #agnav li li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;
}
#agnav li li li a:hover, #agnav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
</style>
<div id='agnavbar'>
<ul id='agnav'>
<li>
<a href='#'>Ana Sayfa</a>
</li>
<li>
<a href='#'>Hakkında</a>
</li>
<li>
<a href='#'>İletişim</a>
</li>
<li>
<a href='#'>Kategoriler ▼</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a>
<ul>
<li><a href='#'>Sub Sub Page #1</a></li>
<li><a href='#'>Sub Sub Page #2</a></li>
<li><a href='#'>Sub Sub Page #3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Açılır menü çubuğunun açılır olması için ekleyeceğimiz Css Yama kodları :

1. Blogger şablon kodlarını açın ve aşağıdaki etiketi Ctrl+F kısayol yardımı ile aratarak bulun.

/* Tabs

2. Bulduğunuz yukarıdaki etiketin hemen altındaki kod bitimine aşağıdaki Css kodlarını ekleyip blog’u kaydedin. Bu kodlar Blogger menü çubuğunu açılır konuma getiren yama kodlarıdır.

.tabs .widget ul, .tabs .widget ul {
margin: 0px;
padding: 0px;
list-style: none outside none;
overflow: visible;
}
.tabs-outer {
background: 0 ;
 
3. Css kodlarının ekleneceği kısmı tam anlayabilmeniz için aşağıdaki resmi inceleyin.
4. Resime dikkat ederseniz, “/* Columns” ismini göreceksiniz. Tabs, etiketinin içindeki kodların bittiği yerde böyle bir isim olacak. Bu isim blog şablonlarına göre değişebilir. Ancak Tabs kodlarının başladığı ve bittiği son kısmı resimde gösterdim. Gösterdiğim alt kısımda bulunan etiketin hemen üs kısmında bir boşluk yaratın ve kodları ekleyin.

Yayıncı Blogger arkadaşlar. Kodlardan çekinmeyin. Hiçbir kod bilginiz olmasa bile Blog’unuzun yedeğini nasıl alacağını bilmeniz tüm sorunlarınızı çözer. Tüm kodları yanlış ekleseniz bile aldığınız yedeği geri yüklediğinizde eski blogger konumunuza dönersiniz. 

Artık kodlar ile oynamak durumunda olduğunuzu hatırlatmak isterim. Blog’a sadece yazı yazmak blogcu olmak demek değildir. Araştırma ve kendinizi zaman buldukca geliştirmeniz gerekir. Hiç zamanım yok demeyin! Damlaya damlaya göl olur unutmayın.

Ayrıca bilgi edinin ⇒ Blogger yedekleme nasıl yapılır

Gadget içine eklediğiniz kodların özelleştirilmesi :

1. Eklediğiniz kodlar için çok fazla yapacağınız bir işlem yoktur.

2. background: #3B5998 menü çubuğunun arka mavi rengini değiştirmek içindir.

3. # : Bu işaretin olduğu yerlere linklerinizi ekleyeceksiniz.

4. Diğer açıklama kısımları mavi ile renklendirilmiştir.

5. Sub Page #1 : ilk açılan menülerdir. Etiket ismi buraya yazılır.

6. Sub Sub Page #1 : Açılır ismin yan açılır sekmesidir. Diğer etiket ismi buraya yazılır.

7. Satır linki olan ( <li><a href='#'>Sub Page #1</a></li ) kalıbı kopyalayıp bir alt satıra yapıştırarak çoğaltabilirsiniz.

8. Ana sayfa gibi farklı bir isimde kategori açmak için böyle bir kalıbı kopyalayın ve hemen alt satıra yapıştırarak isimleri ve linki değiştirdiğinizde yeni bir menü sekmesi yaratmış olursunuz.
Kalıp :

<li>
<a href='#'>Ana Sayfa</a>
</li>


Yukarıda anlatılan konular ile ilgili sorun yaşarsanız yorumlar bu amaçla yapılmıştır. Yardım alabilirsiniz. Başarı dileklerimle, kolay gelsin. Demo görmek isterseniz sayfanın alt kısmındaki menü sekmesine bakabilirsiniz. DEMO

1 Şubat 2015 Pazar

Blogger için Statik Menü Navigasyon Sekmesi

Blogger kullanıcıları için, Css3 saf kodlama ile tasarlanmış, maus üzerine gelince farklı bir renk ile clone olarak açılan statik link ve etiket kategorisi oluşturabileceğiniz sade hover renkli menü navigasyon çubuğu. Blog menü navigasyon sekmesini ben sade kullanmayı severim diyenler için oldukca kullanışlı bir eklenti. Css3 saf kodlama ile tasarlanmıştır yazılmasının anlamı ise kodlar içinde hiçbir Json veya Javascrip kodlarının kullanılmamış olmasıdır. Blog’unuz için statik sayfalar (hakkında, hakkımda, iletişim,) formatında kullanabileceğiniz gibi, etiketlerinizden oluşan birçok yazınıza bağlantı veren link formatı ile de kullanabilirsiniz.
Etiket link formatının nasıl olduğunu aşağıda verilen kalıptan inceleyin.

Örnek link : http://guney59.blogspot.com/search/label/Adsense

Örnek format : http://blogunuzunurlsi/search/label/etiketiniz

Menü sekmesinin görünümünü yukarıdaki resimden, canlı uygulamasını ise demo link’inden inceleyin. DEMO

Menü navigasyon sekmesinin kurulum uygulaması :

1. Blogger kumanda paneline giriş yapın.
2. YerleşimGadget ekleHtml/JavaScript gadget’inizi açın ve aşağıdaki Html kodlarını ekleyin.
<nav id='rolling-nav'>
<ul>
<li><a href='http://guney4.blogspot.com' data-clone='Ana Sayfa'>Ana Sayfa</a></li>
<li><a href='http://guney4.blogspot.com/p/hakknda.html' data-clone='Hakkında'>Hakkında</a></li>
<li><a href='#' data-clone='İletİşİm'>İletİşİm</a></li>
<li><a href='#' data-clone='Blogger'>Blogger</a></li>
<li><a href='#' data-clone='Eklentİyİ Al'>Eklentİyİ Al</a></li>
</ul>
</nav>

Html kodlarının Özelleştirilmesi :

1. Ana sayfa isminin solundaki URL’i kendi blog URL’niz ile değiştirin.
2. Dikkat ederseniz 2 ad. Ana sayfa ismi yazılıdır. Yukarıda yapılan açıklamada Clone diye isim kullandım. Yani kopyalanmış çift görünüm demektir. İlk isme ne yazacaksanız ikinci isminde aynısı olması gerekir. Bu şekilde kullanarak ilk görünüm renkli, üzerine maus yanaştırıldığında farklı bir renk yeni bir pencere açılacaktır.
3. # : bu işaretin olduğu yere bağlantı linkini ekleyeceksiniz. Bu statik bir bağlantı linki olabildiği gibi, bir etiket linkide olabilir. Etiket linki kullanırsanız, yazınıza bağlantı verdiğiniz  etiketiniz de topladığınız tüm yazılar tıklandığında blog sayfanızda sıralanarak açılır.
4. Yeni bir link eklemek istiyorsanız aşağıda verilen örnek gibi başlangıç ve bitiş kodlarını kopyalayın bir alt satıra yapıştırın ve isim ve link'i değiştirip kaydedin.
Örnek : Kopyalayıp yapıştıracağınız satır biçimi.

<li><a href='#' data-clone='Blogger'>Blogger</a></li>

5. Yukarıda verilen kodları yapılandırdı iseniz, şimdide aşağıdaki saf Css3 kodlarını blog'unuza ekleyin. İlgili adımları takip edin.
6. Blogger kumanda paneli → Şablon → Htm’yi düzenle ile aşağıdaki etiketi Ctrl+f klavye kısa yolu ile aratın.

]]></b:skin> 
7. Bulduğunuz bu etiketin hemen üstüne aşağıdaki kodları yapıştırın.
#rolling-nav {
font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
color:white;
text-transform:uppercase;
}

#rolling-nav ul {
height:50px;
margin:0px 0px;
padding:0px 0px;
overflow:hidden;
}

#rolling-nav li {
float:left;
display:inline;
list-style:none;
margin:0px 0px;
padding:0px 0px;
}

#rolling-nav a,
#rolling-nav a:before {
display:block;
margin:0px 0px;
padding:0px 30px;
line-height:50px;
color:white;
text-decoration:none;
background-color:#900;
background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
position:relative;
/* CSS Transisi */
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}

#rolling-nav a:before {
content:attr(data-clone); /* Memuat data atribut */
position:absolute;
top:100%;
left:0px;
display:block;
background-color:white;
background-image:-webkit-linear-gradient(top, #ddd, white);
background-image:-moz-linear-gradient(top, #ddd, white);
background-image:-ms-linear-gradient(top, #ddd, white);
background-image:-o-linear-gradient(top, #ddd, white);
background-image:linear-gradient(top, #ddd, white);
border-top:2px solid rgba(0,0,0,0.2);
color:#333;
}

#rolling-nav a:hover {
margin-top:-50px;
margin-bottom:1px;
}
 
8. Tüm işleminiz bitmiş durumda blog’unuzu kaydedin ve yeni menü navigasyon sekmenizi kullanmanın tadını çıkarın.
Ayrıca ⇒ Menü Oluşturma ile ilgili diğer konulara da bakabilirsiniz.

29 Ocak 2015 Perşembe

Blogger Siyah Dikey Açılır Menü Çubuğu

Blogger kullanıcıları için, kullanışlı Css3 kodlardan oluşan Siyah renkli, Sabit ve mavi hover dikey açılır menü seçeneklerinden oluşan dikey açılır menü navigasyon çubuk eklentisi. Okuyucu kitlenize blog’unuzun Ana sayfa, hakkında, iletişim ve kategori linklerinden oluşan etiketlerinizi önerebileceğiniz şık görünümlü geliştirilmiş Css3 kodlama ile düzenlenmiş açılır menü sekmesi. Okuyucu kitlenize aradığı yazıları menü navigasyon sekmesi ile yönlendirmek Google Seo olarak da büyük önem taşımaktadır. Başlık kısmında Menü sekmesi olmayan bir Blogger olamaz. Blog’unuza kendinizin baktığı gibi değil bir okuyucu gözüyle bakarak bu eksikliği gidermeniz, Google Seo, Web yönetici araçları, Web kuralları ile eş anlamda değerlendirilir. Bu neden ile mutlaka bir menü navigasyon sekmesi kurmanız gerekir. Aşağıda açıklaması yapılacak olan Menü sekmesinin görünü yukarıda verilen resim gibidir. Menü navigasyon sekmesini ayrıca test blog’umdan canlı olarak inceleyebilirsiniz.
Dikey açılır menü bar kurulum aşamaları :
Dikey açılır menü bar’ın kurulumu oldukca basittir. Tüm kodlar bir arada olup kurulum için ;
1. Blogger kumanda paneline giriş yapın.
2. Yerleşim → Gadget ekle → Html/JavaScrip gadget’ini açın ve aşağıdaki kodları kopyalayın yapıştırın ve blogu kaydedin. Diğer özelleştirmeler için aşağıdaki yazıyı okumaya devam edin.
Ayrıca farklı bir menü çubuğu eklentisi inceleyin :
Dikey açılır menü bar kodları :
<style>
/*------ CSS3 Drop Down Menu By AG (http://adnanguney.blogspot.com)----*/
#ag-menu, #ag-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#ag-menu {
width: 1210px;
margin: 0px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#ag-menu:before,
#ag-menu:after {
content: "";
display: table;
}
#ag-menu:after {
clear: both;
}
#ag-menu {
zoom:1;
}
#ag-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#ag-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#ag-menu li:hover > a {
color: #fafafa;
}
*html #ag-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#ag-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#ag-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#ag-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#ag-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#ag-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#ag-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#ag-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#ag-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#ag-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#ag-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#ag-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#ag-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#ag-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="ag-menu">
<li><a href="http://guney13.blogspot.com">Ana Sayfa</a></li>
<li>
<a href="#">Kategoriler</a>
<ul>
<li><a href="#">List1</a></li>
<li><a href="#">List2</a></li>
<li><a href="#">List3</a></li>
<li><a href="#">List4</a></li>
</ul>
</li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
 
Menü Özelleştirme :
1. width: 1210px; Menü sekmesinin genişlik ayarı. Temanıza göre rakamları değiştirin.
2. http://guney13.blogspot.com Kendi blog Url’nizi yazın.
3. Kategoriler İsimlerin olduğu yeri kendi belirledikleriniz ile değiştirin.
4. # Hastag işaretinin olduğu yere etiket link’inizi ekleyin.
5. List1 ve Link1 : Bu kısımlar kategori isimlerinin eklendiği yerlerdir. Örnek: Kek çeşitleri
Ayrıca okuyun : Blogger Açılmayan Menü Çubuğu Nasıl Açılır Yapılır

12 Ocak 2015 Pazartesi

Blogger Sayfalar ile Menü Nasıl Yapılır

Klasik ve Dinamik Blogger sayfalar ile menü yapımı 2014 senesinde değiştirildi. Blog’unuzu yeni kurdu iseniz sayfalar sekmesi ile statik ve dinamik linklerin nasıl yapılacağı konusunu okumaya devam edin. Dinamik ve Klasik Blogger Sayfalarının kullanımı aynı olduğundan her iki görünümü kullanan yeni blogger yazarların dikkat etmesi gereken iki biçim kullanım mevcuttur. Bunlar nelerdir aşağıda görelim.
a : Statik sayfa : Statik sayfalar, Hakkında, Gizlilik ve İletişim gibi tek kullanımlık sayfaları açar. Yani ayı etikete sahip diğer yazılarınızı statik sayfa kullandığınızda etiketleriniz çalışmaz. Zaten böyle bir kullanımda yoktur. Statik sayfa açtığınızda tarayıcınızdaki link için de P harfini görürsünüz. P harfi, page sayfa anlamındadır. Linkin statik ve dinamik olup olmadığını bu linkten de anlamanız mümkündür.
b: Dinamik sayfa : Aynı etiketlerinizden oluşan ne kadar yazınız varsa hazırladığınız link kalıbı ile tüm yazılarınızı açan bir bağlantıdır.
Her blogger kullanıcısının okuyucularına yol gösteren sayfalar sekmesi ile bir navigasyon yapması gerekir. Bu navigasyon sayfalarınız arasında gezinmeyi kolaylaştırdığı kadar SEO olarak da önemi çok fazladır. Birçok blogger kullanıcılarının blog’larını incelediğimde maalesef ana sayfa üzerinde sadece bir resim görüyorum. Herhangi bir sayfayı açtığımda ana sayfaya dönmek için resime tıklamak zorunda olmak inanın çok üzücü bir durum. Blogger kullanıpta sayfalar sekmesi ile menü hazırlamayan bir blog’cunun Google arama sonuçlarına giden raporda verilen veriler ile ne durumda olduğunuzu artık siz düşünün. Tabiy ki bu size zarar vermez. Ancak blog’unuzun gerekli olan kaliteye sahip olmadığının bir göstergesi olarak kaydedilir. Herhalde böyle yanlışa düşmek istemezsiniz. Blog’unuzu açtığınızda ilk yapılacak işlem blog Ana sayfa navigasyon girişini oluşturmaktır.
Blogger sayfalar sekmesi kumanda panelinizde iki yerde bulunur. Bunlar ;
1. Kumanda paneli sol menülerde bulunan Sayfalar statik sayfa oluşturmanıza yarar.
2. Diğer sayfaları ancak gadget ekle Sayfalar gadgeti eklediğinizde oluşur.
Statik sayfa oluştur :
1. Blogger kumanda paneline giriş yapın.
2. Sol tarafta sayfalar sekmesine tıklayın. Açılan pencerede üst kısımda Yeni sayfa ismine tıklayın.
Blogger yazı editörü açılacaktır. Örneğin hakkında sayfası yapalım.
Yazı başlığına Hakkında yazın. Alt kısma hakkınızda kısa bir açıklama yazabilirsiniz. Sağ tarafta açıklamaları aktifleştirdiyseniz kısa bir açıklama yazın. Menüdeki biçimleme sekmelerini kullanarak yazınızı biçimleyin ve yayınlayın. Yayınlanan sayfa sayfalar sekmesinde görülür. Ana sayfaya baktığınızda nerde bu yazı diyebilirsiniz. İşte şimdi yukarıda bahsettiğimiz gadget içindeki sayfaları yapılandıracağız.
Gadget içindeki Sayfaları aktifleştirme :
1. Blogger kumanda panelinde iken, Yerleşim→  Gadget ekle sekmesine tıklayın. Gadgetler içindeki Sayfalar ismine tıkladığınızda sayfalar gadget’iniz sidebara kendini atayacaktır.
2. Sayfalar gadgeti açın. Biraz önce eklediğiniz hakkında sayfanızı göreceksiniz. Yan kısmındaki kutuyu işaretleyerek görülür olmasını sağlayın. Artık Ana sayfada Hakkında sayfanızı görebilirsiniz. Bu şekilde 20 ad. sekme menü yapabilirsiniz. Sınır budur.
Sayfalar gadget’i ile etiketlerinize bağlantı verip kullanma :
1. Sayfalar gadget’inizin içinde harici bağlantı linki oluştur seçeneği mevcuttur. Üst kısma yazınıza verdiğiniz ismi büyük küçük yazabilirsiniz. Ancak alt kısım link kısmıdır. Buraya yazınızda oluşturduğunuz etiketin aynısı yazmak zorundasınız. Yoksa link çalışmayacaktır.
2. Etiketlere verilen Link kalıbımız şu şekildedir. Bu kalıbı ezberleyin veya bir yere not alın. Her zaman lazım olabileceğini unutmayın.
Örnek :
http://guney59.blogspot.com.tr/serch/label/Etiket ismi
3. Etiketler bazen uzun ve Html kodlarının tarayıcı tarafından okunması için bazı harf ve rakamlardan oluşabilir. O zaman şuna benzer ifadeleri görürsünüz.
%29 gibi alfanumarik sayılar. Bu sizi yanıltmasın. Böyle bir etiketin çalışması için etiketi tarayıcınızdan kopyalayıp link sonuna eklemeniz gerekir.
Örnek çalışan bir etiket :
Bu etiketin sonunda şu kelimeler vardır.  Blog Kullanım Rehberi
Dikkat ederseniz label isminden sonraki yazıdır. Her ikisde aynı sayfayı açar. Tıklayın deneyin.
4. Etiket kalıp linki ile etiket kullanımı bu şekildedir. mümkün oldukca etiket yazımına dikkate edin. Örneğin pastalar etiketi genel bir isimdir. Ancak Yaş pastalar genel ismi kategoriye ayırır.

Bu tür bir kullanım SEO olarak da önemlidir. Yukarıda anlatılanlar hakkında anlaşılmayan ksımları yorumlarda belirterek yardım alabilirsiniz. Blogger Ana sayfanızda Ana sayfa sekmesi olmadan blog’unuzu kullanmamaya özen gösterin. Ücretsiz olarak kullandığınız Blogger Web internet ortamında yazıya link veren gerçek bir siteden hiçbir farkı yoktur.

Haberci

Destek3

Related Posts Plugin for WordPress, Blogger...