Subscribe For Free Updates!

We'll not spam mate! We promise.

Tema tasarım etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Tema tasarım 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.

28 Ocak 2015 Çarşamba

Blogger Yazı Etiketleri ile Resimli Slayt Eklentisi

Blogger, sidebar kenar çubuğuna sadece yazı etiketi kullanarak, Resimli, Yazı açıklamalı, Resim genişlik ve yükseklik ayarı, Slayt post sayısı ve navigasyon alt numaratörlü, Önceki ve sonraki yazı butonlu, yazı Etiketleri ile Resimli Slayt Eklentisi.  Blog’unuz için Json ve Java kodlama tekniği ile tasarlanmış, tüm yazı etiketlerinizden en popüler olanları veya dilediğiniz zaman sadece diğer etiket ismini değiştirmek suretiyle kullanabileceğiniz resimli slayt eklentisi için tek yapmanız gereken işlem birkaç link değişiminden ibarettir.

Blog’unuz da gadget olarak kullanacağınız slayt eklentisi oldukca hızlı olup, tüm slayt çalışmasını blog’unuzun RSS, feeds bağlantısından almakta olup, açılış hızını etkilemez. Diğer özelliklerinden biri de, resmin üzerine maus’u yanaştırıldığında slayt geçişi durup, kendini otomatikman bekleme pozisyonuna almasıdır. Maus’u yazı, resim üzerinden uzaklaştırdığınızda slayt çalışmasına devam eder.

Eklentinin özelleştirilmesi için yapmanız gereken çok fazla bir işlem mevcut değildir. Sadece blog isminizi (url) girerek, kullanmak istediğiniz etiketinizi seçeceksiniz. Blog şablonunda kullanılan genişlikler değişebildiğinden, genişlik ve yükseklik rakamlarını belirleminiz yeterli olacaktır. Blog yazılarınız için oluşturduğunuz etiketleri kullanarak her hafta farklı yazılarınızı okuyucularınıza tanıtabilirsiniz. Blog’unuz da bu kadar işlevsel bir eklentinin kullanılması tavsiyelerim arasında yer almaktadır.

Herhalde etiketlerden oluşan resimli açıklamalı, numaratör butonlu eklentinin nasıl çalıştığını merak etmişsinizdir ! Aşağıda canlı demosu verilen eklentiyi görebilmeniz için blog’a giriş yapın. Sidebar da, “ TEMA TASARIM İLE İLGİLİ MESAJLAR “ isimli gadget başlığını bularak inceleyin.

Resimli Son Yazılar Slayt Eklentisinin kurulumu :
1. Blogger kumanda paneline giriş yapın.
2. Yerleşim →  Gadget ekle →  Html/JavaScrip, gadget’ini açın ve aşağıdaki kodları ekleyin. Emeğe saygı duyuyor ve bana destek vermek istiyorsanız kod içindeki Gadget’i al link bağlantısını lütfen silmeyin.
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/> <style type="text/css"> .slider-rotator { width:300px; height:400px;} </style> <div id="slider-rotator" class="slider-rotator loading"></div> <script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script> <script type="text/javascript"> makeSlider({ url: "http://adnanguney.blogspot.com", numPost: 10, newTabLink: false, labelName: "Etiketinizinismi", showDetail: true, summaryLength: 240, titleLength: "auto", showThumb: true, thumbWidth: 300, squareThumb: true, noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", showNav: true, navText: { prev: "&lt;", next: "&gt;" }, containerId: "slider-rotator", autoSlide: true, interval: 6000, speed: 1000, hoverPause: true, crossFade: false, autoHeight: false }); </script> <div style="font-size:10px;text-align: center;">By <a href="http://guney59.blogspot.com/2015/01/blogger-yaz-etiketleri-ile-resimli.html"target="_blank"> Adnan Güney Gadgeti Al</a></div>  
 
Özelleştirme :
width: 300 px : Gadget resim genişliği
height: 400 px : Gadget resim yüksekliği
http://adnanguney.blogspot.com : Blog (url) link’ini aynı formatta girin. tr uzantısı olmasın.
numPost : 10 : Görülmesini istediğiniz yazı adetini belirler.
labelName : "Etiketinizinismi" Kullanmak istediğiniz etiket yazınızı trayıcıda açın. Son etiket kısmını kopyalayın bu kısma yapıştırın. Tırnak ayraçlarını bozmamaya özen gösterin.
summaryLength : 240 : Yazı açıklama uzunluğunu belirler.
thumbWidth: 250 : Resmin genişliğini belirler.
ÖNEMLİ NOT : Blog’unuzda Jguery kütüphanesinin son güncelleşmiş linki yoksa aşağıdaki verilen etiketi bularak, hemen altına aşağıdaki link’i yapıştırın. Bu link olmadan yukarıdaki kodlar çalışmayacaktır.
Bulunacak etiket :
]]></b:skin>
Güncelleşmiş Jguery linki :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/> 
Blog yazılarınız için kullandığınız resim ebatlarını standart boyutlarda olmasına özen gösterin. Büyük resim kullanıyor iseniz, genişlik ebatlarını 400 px. veya 500 px. ebatlarında hangisini tercih ederseniz devamlı ilk yazı resminiz de bu ölçüyü kullanmaya özen gösterirseniz, Slayt görseliniz veya bir başka eklentilerinizin de düzgün görülmesini sağlamış olursunuz. Unutmayın sosyal paylaşımlarda ilk resim önerilen resimdir. Bu neden ile çok iyi olması gerekir. Güzel tasarlanmış açıklama alt niteliği kullanmış resimlerin Google Plus Görseller aracılığı ile blog’unuza %10 civarında okuyucu getirmesi demek olduğunu unutmayın.

26 Ocak 2015 Pazartesi

Blogger Alt Bilgi ArkaPlan Renk Değişimi

Blogger’un varsayılan bazı şablonlarında alt bilgi olarak bilinen (Footer) arkaplan renginin değiştirmesi mümkün değildir. Blogger’un değiştirilemeyen şablonları için alt bilgi arkaplan renginin değiştirilmesi ile ilgili açıklamalar. Blogger’un varsayılan bazı şablonları şablon tasarımcısı tarafından değiştirilmemesi için yapılandırılmıştır. Blogger’un varsayılan bazı şablon Tasarımını hazırlayanların gelişmiş ayarlardaki alt bilgi arkaplan rengini değiştirmek için  neden ek bir seçenek eklemediklerine maalesef bir anlam veremiyorum. Adnan Güney, klasik görünümlü blog’umun şablonu bu değiştirilemeyen örneklerlerden biri. Bırakın alt bilgi renginin değişimini, tasarımcıya kızarak blog’umun tüm arka planını transparan yaparak özgürce kullanmanın şu anda zevkini yaşıyorum. Bu ayarlar ile de yetinmeyip diğer, guney5 klasik test blog’umun şablon alt bilgi arkaplan resmini de değiştirdim. Blog’unuzda sizde böyle gereksiz bir konu yaşıyorsanız aşağıda anlatılanları ve video görselini inceleyin. Bu ve bunun gibi, blogger varsayılan şablon veya özel tasarım blogger şablonları için sorunlarınızı çözmek için, menü çubuğunda, Tema Tasarım isminden giriş yaparak yardım alabilirsiniz. Yapılan değişiklikten sonra yukarıdaki önceki ve sonraki resim görünümünü inceleyin.
Blogger altbilgi arkaplan rengi değişim uygulamaları :
1. Blogger kumnda paneline giriş yapın.
2. Şablon → Html’i düzenle ismine tıklayın.
3. Şablon içinde, <b:skin> sol taraftaki ok işaretine tıklayarak genişletin.
4. En üst kısımda şu etiketi göreceksiniz ; /* Variable definitions
5. Bu etiketin bitiminde içeriklerinizi yapılandıran şu etikete kadar dikey kaydırma çubuğunu aşağıya alın. ⇒ /* Content
6. Content etiketinin hemen üst kısmında şu etiketi göreceksiniz.
<Variable name="main.padding.sides"
7. Bu etiketin hemen altında Blogger’un iki ad. baş kısmında, html:// olmayan resim linkini göreceksiniz. Örnek resim linki aşağıdaki gibidir. url isminden sonra başlar.
www.blogblog.com/1kt/transparent/black50.png
8. Bu resim linkinden 2 ad. bulunmaktadır. Bu linkleri değiştirerek istediğimiz bir renk veya resim de ekleyebilirsiniz. Ancak ben renk linki ekleyeceğimden anlatımı ona göre yapacağım.
9. Düşündüğünüz gibi büyük bir renk linki olamayacak. Ebatları 20x20 px. olan Paint ile hazırladıktan sonra test blog'uma kaydedip, link'ini kullandığım bir uygulama olacaktır.
Paint ile hazırlanmış renk paletimizin resmi :
Hazırladığımız resmi buradan görebilirsiniz.
Ancak Paint’in kullanımı ve resim linkinin nasıl alınacağı konularını bilmiyorsanız aşağıda verilen linkten okuyun.
10. Blog altbilgi rengini değiştirmek için resim linkleriniz hazır ise, 8. maddede anlatılanları uygulayın. Aynı yöntemi uygulayarak istediğiniz renkler ile değişim yapabilirsiniz.
Blogger altbilgi rengini değiştirmek için hazırladığımız resim linkimiz ile şablon kodlarında yapacağımız değişimin video’sunu aşağıda izleyin.

22 Ocak 2015 Perşembe

Blogger Gadgetler Nasıl Eklenip Kullanılır

Blogger’un gadget ekle seçeneklerini neden kullanırız ? Blogger gadget nasıl eklenir ? Blogger gadget İd nedir ? Blogger gadget nasıl konumlandırılır ? Blogger’un 2. ve  3. taraf uygulamaları nedir ? Yeni blog kullanıcıları için bilinmesi gerekenler konular. Blogger’un gadget ekle seçeneklerini bilmeyen yok gibidir. Ancak eski yazılarımı, gelişen teknolojik değişimler için güncelleme ve yeni blog kuran blog yazarı arkadaşların tasarım gadget ekleme konusunda yabancılık çekmemeleri için bu yazıyı yazmak istedim. Öncelikle Gadget’in ne olduğunu kendi ifadelerimle anlatmaya çalışıp, sonra kullanım aşamaları nelerdir onlara bakalım.
Gadget nedir ? : (wiki) Gadget, kelimesi tek başına kullanıldığında tam anlamını bulamayan bir kelime. Araçlar, ürünler, gibi anlam ifade eden gadget kelimesi yazılım sektöründe ve bilgisayar proğramları gibi çalışma alanında gerçek kelime ifadesini bulabilmektedir. Blogger tasarımında bulunan gadget seçenekleri belirli güvenlik filitrelerinden geçirildikten sonra bir yazılım proğramı formatında bizlere sunulan diğer benzer ismi ile eklentilerdir. Blogger yerleşim sekmesinde Gadget ekle seçeneği hazır paket bir proğramın çalıştırılmasını sağlayan kısımdır. Ekle seçeneği ile proğramın kurulumuna komut vermiş olursunuz. Bunun sonucunda web sitenize proğram kurularak çalışır duruma getirilir. Blogger gadget ekle seçeneklerinde 28 ad. Google’un onayladığı Gadget’ler vardır ve bunlar ilk sıralamada yer alır.
Diğer gadgetler seçeneği güvenliği 2. taraf dediğimiz gadgetlerden oluşur. 2. taraf gadget’lere en iyi örneği ; İzleyiciler gadget’i olarak verebiliriz. 3. taraf Gadget’ler daha fazla riskli olup pek kullanılmamaktadır. Ancak 3. taraf gadget seçeneklerinden binlerce mevcuttur. Google Gadget Labs için sınıfı geçenler 28 ad. olduğundan bu gadget’leri kullanmanızı öneririm.
Gadget ekle seçenekleri ile ilgili resmi aşağıda inceleyin.
Gadget ekle seçeneklerini neden kullanırız :
Blog’unuzun ilk kurulumunda boş bir ana sayfa ile karşılaşırız. Bu boş ana sayfanıza görsellik ve işlevsellik katmak için gadget ekle seçeneklerindeki proğramlardan beğendiklerimizi seçerek şablon kodlarımızın içine kurulmasını sağlarız. Kurulumun tam tersi olarak gadget’i kaldır dediğinizde proğram şablon kodlarından kaldırılır. Blog’unuza eklediğiniz gadget’ler Google sunucularında sizin hesabınız ile barındırılıp güvenliği sağlanır. Bu nedenle, blogger gadgetleri haricinde  3. taraf bir eklentiyi gadget olarak kurduğunuzda kurmuş olduğunuz eklentinin güvenilir ve sağlam olduğuna emin olmanız sizin lehinizedir. Gadget içindeki link gibi görülen bir kalıbın açılımını yaptığınızda nerde ise bir sayfalık bir kodlardan oluşur. Bu kodları ancak incelerseniz ve bilginiz varsa anlayabilirsiniz. Bu neden ile bilmediğiniz, güvenmediğiniz  her eklentiyi çok güzel diye eklemeyin. Bilinçsizce eklenen bir eklenti için profil hesabınız zarar görebilir. Blogger blog’unuz kapanabilir, spam’a girebilirsiniz.
Blogger gadget nasıl eklenir :
Blogger’un mevcut gadgetleri haricindeki eklentiler kodlardan oluşur. Bu kodların eklendiği yer gadget ekle seçenekleri içindeki Html/JavaScript kod editörüdür. Eklenti kodlarınızı bu seçenekten ekleyebilirsiniz.
Blogger gadget nasıl konumlandırılır :
Blogger gadgetlerini ana sayfa da sidebar (kenar çubuğu), Başlık kısmı (header) veya alt bağlantılar (footer) kısmında konumlandırmak için, gadgeti tutup sürükleyip bıraktıktan sonra blog’unuzu kaydetmeniz yeterlidir. Eklentiniz gadget’in bulunduğu yerde görülecektir.
Blogger gadget İd nedir :
Blog’unuza beğendiğiniz uygulamaları gadget olarak eklediğinizde, bazı eklentileri çalıştırabilmeniz için sizden İd ismi ister. Eklentiniz bu İd ismini girmeden çalışmaz. Blogger şablon kodlarıda bu İd ismi ile yapılandırılmıştır. Şablon → Html’yi düzenle → Widget’e atla ok işaretine tıkladığınızda blog’unuzda ne kadar İd isimli eklenti varsa görebilirsiniz. şimdi aşağıda verilen resimlerde İd isimleri ayrıca görebilirsiniz.
Blogger gadget  İd ismi açmış olduğunuz gadgetin tıpkı tarayıcı link penceresine bakar gibi başlık kısmındaki linkin en sonunda görülür.
Blogger gadget İd isminin görünümü.


Blogger şablon kodlarında Widet’e atla seçeneklerindeki İd isminin görünümü.
Blogger gadget eklentileri ve kullanımı hakkında anlaşılmayan yerler için yorum yazarak bilgi alabilirsiniz. Ayrıca, Gadgetler kategorisindeki yazılar

20 Ocak 2015 Salı

Blogger Resimli Son Yazılar Slayt Eklentisi

Blogger ana sayfa sidebar da son yazılarınızın başlık isim linki, yazı açıklama metni ve yazılarınıza eklediğiniz ilk resmin otomatik geçişler ile görülmesini sağlayan, Son Yazılar Slayt Eklentisi. Blogunuzda gadget olarak kullanacağınız slayt eklentisi oldukca hızlı olup, Json ve Java kodlarından oluşturulmuştur. Blog’unuzun açılış hızını etkilemez. Bloger yazı editöründe yazdığınız yazıların başlık linkini, yazı açıklama metnini ve ilk eklediğiniz resmi otomatik olarak slayt formatına dönüştürür. görülmesini istediğiniz resim ve açıklamaları siz belirlersiniz. Görülmesini istediğiniz yazılar için hemen alt kısımda otomatik bir numaratör navigasyon sistemi çalışır. Resmin üzerine maus yanaştırıldığında slayt kendini otomatikman bekleme pozisyonuna alır. Maus’u navigasyondan uzaklaştırdığınızda slayt çevrimi devam eder. Eklenti içindeki CSS kodlarını değiştirerek genişlik ve yükseklik ayarı yapabirsiniz. Eklentinin en güzel özelliklerinden biride her yeni yazınızda kodlar içine resim linki veya açıklama eklemeden otomarik olarak tüm işlemleri kendinin düzenleyerek görevine devam etmesidir. Bu özellikte de sizin slayt resimleri değiştirme gibi uzun uzadıya bir işlem yapmamanızı sağlar. Resimli Son Yazılar Slayt Eklentisinin bir başka özelliği de, öne çıkan yazılarınızda kullandığınız herhangi bir etiketi ilgili alana girerek o etikete ait ilgili ayazıların görülmesidir. Blog’unuzda bu kadar işlevsel bir eklentinin kullanılması tavsiye ederim. Eklentinin nasıl çalıştığını canlı demosundan inceleyebilirsiniz.
Demo görüntüsünü incelemek için giriş yaptığınızda sidebar sağ alt kısımda Blog Post gadget başlık ismi ile düzenlenmiş slayt görselidir.
Resimli Son Yazılar Slayt Eklentisinin kurulumu :
1. Blogger kumanda paneline giriş yapın.
2. Yerleşim, Gadget ekle, Html/JavaScrip gadgetini açın ve aşağıdaki kodları ekleyin. Emeğe saygı duyuyor ve bana destek vermek istiyorsanız kod içindeki Gadget’i al link bağlantısını lütfen silmeyin.
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
.slider-rotator {
width:250px;
height:340px;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://adnanguney.blogspot.com",
numPost: 4,
newTabLink: false,
showDetail: true,
summaryLength: 120,
titleLength: "auto",
showThumb: true,
thumbWidth: 250,
squareThumb: true,
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png",
showNav: true,
navText: {
prev: "&lt;",
next: "&gt;"
},
containerId: "slider-rotator",
autoSlide: true,
interval: 6000,
speed: 1000,
hoverPause: true,
crossFade: false,
autoHeight: false
});
</script>
<div style="font-size:10px;text-align: center;">By <a href="http://guney59.blogspot.com/2015/01/blogger-resimli-son-yazlar-slayt.html"target="_blank"> Adnan Güney Gadgeti Al</a></div>
Özelleştirme :
width: 250px : Gadget resim genişliği
height: 340px : Gadget resim yüksekliği
http://adnanguney.blogspot.com : Kendi blog isminizi aynı formatta girin.
numPost: 4 : Görülmesini istediğiniz yazı rakamı
summaryLength: 120 : Yazı açıklama uzunluğu.
thumbWidth: 250 : Resmin genişliği
Etiket ile slayt oluşturmak isterseniz :
Aşağıda verilen etiket kalıbını “ newTabLink: false “ etiketinin hemen altına yapıştırın.
labelName: "etiketismi",
Etiketten oluşan slayt’ı kullanmak için “etiketismi “ yazan kısma etiketinizi girin. Tırnak işaretlerinin bozulmamasına ve etiketinizi doğru girmeye dikkat edin.

NOT : Blogunuzda Jguery kütüphanesinin son güncelleşmiş linki yoksa aşağıdaki verilen etiketi bularak, hemen altına aşağıdaki link’i yapıştırın. Bu link olmadan yukarıdaki kodlar çalışmayacaktır.
]]></b:skin> 
Güncelleşmiş Jguery linki :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>

Ads Inside Post

Sitemize Hoşgeldiniz :)

Haberci

Destek3

Related Posts Plugin for WordPress, Blogger...