linkwithin ile Bunlarda ilginizi Çekebillir.

Bir çok bloglarda yazıların alt kısmında beliren diğer yazı örneklerini widgetini bloggerınıza eklemek istiyorsanız bu linki tıklayın. sayfadaki bilgileri dolduduktan sonra

 

Widget kodunu yükleyin

Açılan pencerede blogunuzu seçip kaydedin.

Tasarımdaki Kilitleri Kaldırın

Yüklediğiniz temada tasarımdan dolayı kaldırılmasını istediğiniz özellikleri kaldıralım.
1. Bloggerdaki hesabınıza girin. Sol menüdeki şablon Html ile düzenleme yapın.
2. Widget şablonların genişlet kutucuğunu işaretleyin.
3. Kaldırmak istediğiniz aşağıdaki benze kodları bulun.
<b:widget id='Attribution1' locked='true' title='' type='Attribution'> <b:includable id='main'> <b:if cond='data:feedbackSurveyLink'> <div class='mobile-survey-link' style='text-align: center;'> <data:feedbackSurveyLink/> </div> </b:if>

4. Kırmızı işaretli olan kısmı false yaptığınızda artık kilitleri açmış oluyorsunuz.

<b:widget id='Attribution1' locked='false' title='' type='Attribution'> <b:includable id='main'> <b:if cond='data:feedbackSurveyLink'> <div class='mobile-survey-link' style='text-align: center;'> <data:feedbackSurveyLink/> </div> </b:if>

Flash Animasyonlu Etiket Bulutu

1. Blogger giriş yapın, Şablonu tıkladıktan sonra, html ile düzenlemeyi seçin.

2. "Widget Şablonlarını Genişlet" kutusunu işaretleyin.

3. Şimdi aşağıdaki kodu arayın.

<b:section class='sidebar' id='sidebar' preferred='yes'>

 Yukarıdaki koddan hemen sonra aşağıdaki kodları ekleyin.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Şablonu kaydedin, sitenizi yenileyin.

Renk Kodları

Sitemizin renklerini değiştirmek için renk kodlarını bilmemiz gerekir. Kullandığınız resmin renk kodunu bulmak istiyorsanız photoshop progrmından yararlanabilirsiniz.

 Aşağıda bir kaç renk kodu örneği

Bloggerda Mesaj Tarihi Yazarı ve Zamanı Gizleme

Mesajın Tarihini Gizleme

1. Blogger giriş yapın, Şablonu tıkladıktan sonra, html ile düzenlemeyi seçin.
2. "Widget Şablonlarını Genişlet" kutusunu işaretleyin.
3. Şimdi aşağıdaki kodu arayın.

<data:post.dateHeader/>

Şimdi bu kodu silin.
Şablon kaydedin ve sitenizi yenileyin.

Mesajın Zamanını Gizleme

Aşağıdaki kodu arayın.

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Şimdi bu kodu silin.
Şablonu kaydedin ve sitenizi yenileyin. 

Mesajın Yazar gizleme

Aşağıdaki kodu arayın.

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Şimdi bu kodu silin.
Şablonu kaydedin ve sitenizi yenileyin.

Siteye Arama Kutusu Ekleme

1. Bloggera giriş yaptıktan sonra Yerleşimi seçin. Gadget eklemesi yaptıktan sonra “HTML/JavaScript” seçin.
2. Aşağıdaki kodu ekleyip kaydedin



<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Blogger Yardım Sitesi

"YOUR BLOG URL/search" : Site URL'si
NAME OF YOUR BLOG    : Blogun Adı


Eğer arama kutusunu yanındaki yazıyı resim olmasını istiyorsanız aşağıdaki kodu denein.



<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" type="image" src="IMAGE URL" align="top"/>
</form></p>

Blogger Yardım

Arka Plana Resim Ekleme

Başlık için resim ekleme

1. Bloggera giriş yaptıktan sonra şablonu seçip. Html ile düzenlemeyi seçin.
Aşağıdaki kodu bulun

# Header-wrapper { 

hemen yanına aşağıdaki satırı ekleyi

background-image: url(URL address of your image);

Aşağıdaki örneğe bakın.

# Header-wrapper { 
background-image: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdW3DH4DY_BYMrhRYNe_wTHEZ8j1rs8vUMZNCxC91GafgcLg1nt59Jw-YhCi7BdnzWEBGZQdR91fqGAmELRDz0CWMCbXfwZhx-hua-4p_ayK3xUhvUlPnYQnx2VFyrLyrx6IfzGZNdLY/s1600/digg1.jpeg );

Şablonu kaydedin ve sitenize yenileyin.

 Ana Arka plan resmi ekleme

1. Bloggera giriş yaptıktan sonra şablonu seçip. Html ile düzenlemeyi seçin.
Aşağıdaki kodu bulun

body {

Bu koddan sonra aşağıdaki satırı ekleyin.

background-image: url ( Resminizin URL adresini );

Aşağıdaki örneğe bakın.

body { 
background-image: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdW3DH4DY_BYMrhRYNe_wTHEZ8j1rs8vUMZNCxC91GafgcLg1nt59Jw-YhCi7BdnzWEBGZQdR91fqGAmELRDz0CWMCbXfwZhx-hua-4p_ayK3xUhvUlPnYQnx2VFyrLyrx6IfzGZNdLY/s1600/digg1.jpeg);

Şablonu kaydedin ve sitenizi yenileyin.

Mesajlara Arka plan resmi ekleme

1. Bloggera giriş yaptıktan sonra şablonu seçip. Html ile düzenlemeyi seçin.
Aşağıdaki kodu bulun

# Main-wrapper {

Bu koddan sonra aşağıdaki satırı ekleyin.

background-image: url ( Resminizin URL adresi );

Aşağıdaki örneğe bakın.

# Main-wrapper { 
background-image: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdW3DH4DY_BYMrhRYNe_wTHEZ8j1rs8vUMZNCxC91GafgcLg1nt59Jw-YhCi7BdnzWEBGZQdR91fqGAmELRDz0CWMCbXfwZhx-hua-4p_ayK3xUhvUlPnYQnx2VFyrLyrx6IfzGZNdLY/s1600/digg1.jpeg);

Şablonu kaydedin ve sitenizi yenileyin.

Kenar Çubuğu Arka plan resmi ekleme

1. Bloggera giriş yaptıktan sonra şablonu seçip. Html ile düzenlemeyi seçin.
Aşağıdaki kodu bulun

# Sidebar-wrapper {

Bu koddan sonra aşağıdaki satırı ekleyin.

background-image: url ( Resminizin URL adresi );

Aşağıdaki örneğe bakın.

# Sidebar-wrapper { 
background-image: url ( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdW3DH4DY_BYMrhRYNe_wTHEZ8j1rs8vUMZNCxC91GafgcLg1nt59Jw-YhCi7BdnzWEBGZQdR91fqGAmELRDz0CWMCbXfwZhx-hua-4p_ayK3xUhvUlPnYQnx2VFyrLyrx6IfzGZNdLY/s1600/digg1.jpeg );

Şablonu kaydedin ve sitenizi yenileyin.

Blog Temanızın Renklerini Değiştirin.

Blogger temanızın arka plan rengini değiştirelim.

1. bloggera giriş yaptıktan sonra şablonu seçip. Html ile düzenlemeyi seçin.
Aşağıdaki kodu bulun.

# header-wrapper {

bu kodun hemen aşağısındaki satırda ,

background:İstediğin renk;

İstediğiniz rengi, renk katologlarından "# FFFFFF" bu örnekteki gibi bulabilirsiniz.

background:# FFFFFF;

Aşağıdaki örneğe bakın.

# Header-wrapper { 
background: # FFFFFF ;

Şablonu kaydedip, sitenizi yenileyin.

Blogger Ana arka plan rengini değiştirme

1. Şablondan HTML Düzenlemeyi seçin.

body {
background:$bgcolor

Eğer istediğiniz rengi ayarlamak istiyorsanız yukarıdaki kodu aşağıdaki kodla değiştirin.
Örnek:
body { 
background-color: # FFFFFF;

Şablonu kaydedin, sitenizi yenileyin.

Blogger Mesaj arka plan rengini değiştirmek;

1. Şablondan Html ie düzenlemeyi seçip aşağıdaki kodu bulun.

# Main-wrapper { 

 # FFFFFF rengini ayarlamak istiyorsanız. Aşağıdaki kodla değiştirin.

Örnek:
# Main-wrapper { 
background-color: # FFFFFF;

Şablonu kaydedin, sitenizi yenileyin.

Blogger Kenar arka plan rengini değiştirmek;

1. Şablondan Html ie düzenlemeyi seçip aşağıdaki kodu bulun.

# sidebar-wrapper {

Eğer # FFFFFF  gibi bir kenar çubuğu rengini ayarlamak istiyorsanız, Yukarıdaki kodu aşağıdaki kodla değiştirin.

# Sidebar-wrapper { 
background-color: # FFFFFF;

Şablonu kaydedin, sitenizi yenileyin. 

Digg Me Butonu eklenmesi

1. Blogger giriş yapın, Şablonu tıkladıktan sonra, html ile düzenlemeyi seçin.

2. "Widget Şablonlarını Genişlet" kutusunu işaretleyin.

3. Şimdi aşağıdaki kodu arayın.

<p> <data:post.body/> </ p>

Eğer Digg me kutusunun sağ üst köşesinde olmasını istiyorsanız. Aşağıdaki kodu yukarıdaki kodla değiştirin.
<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

Eğer yazının sonunda göstermek istiyorsanız, yukarıdaki Aşağıdaki kodla değiştirin.
<p><data:post.body/></p>
<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

Eğer sol üst köşesinde göstermek için butonu istiyorsanız, yukarıdaki kodu aşağıdaki ile değiştirin.

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>
<p><data:post.body/></p>

SEO İçin Standart Tag Başlığının Değiştirilmesi

Blogger başlık etiketini değiştirerek blogunuzla alakalı anahtar kelimelerini arama motoru sıralamasıda arttırabilirsiniz.
Adım adım anlatalım
1. Blogger giriş yapıp sol menüdeki şablon kısmını tıklıyoruz.
2.Html ile düzenle dedikten ve devam ettikten sonra
3. Aşağıdaki kodu buluyoruz.
<title><data:blog.pageTitle/></title>
4. Yukarıdaki kodu aşağıdaki kodla değiştiriyoruz.
<b:if cond='data:blog.pageType == "index"'><title><data:blog.pageTitle/></title><b:else/><title><data:blog.pageName/> ~ <data:blog.title/></title></b:if>

5. Şablonu kaydediyoruz.

Meta Taglarının Bloggera Yerleştirilmesi

Meta tagları ziyaretçi sayımızı artırmamızı sağlayan kodlardır. Ziyaretçi aramak istediklerini arama motorlarına yazdığında site tagları sayesinde sitemizin ziyaretçiler tarafından görünür olacaktır.
Adım adım meta taglarını sitemize yerleştirelim.
1. Blogumuza giriş yapıp sol menüdeki şablonu tıklayalım
2. Html ile düzenle dedikten sonra devam kısmına basalım.
3.Aşağıdaki kodu bulalım.
<b:include data='blog' name='all-head-content'/>
4.Yukarıdaki kodun hemen altına aşağıdaki kodu yerleştirelim.

<meta content=' BURAYA SİTENİZİN AÇIKLAMASI ' name='description'/><meta content=' SİTENİZİN ANAHTAR KELİMELERİ ' name='keywords'/><meta content=' YAZARIN ADI ' name='author'/>

Google Sitenize En Son Ne Zaman Ziyaret Etmiş

Google sitenize en son ne zaman ziyaret ettiğini öğrenmek istiyorsanız. Bu siteye gidip gadget kodu edinebilirsiniz.
........> Sitenizde bu şekil görünüyor.

Googleda Blogger Site Haritası Oluşturma

1. İlk olarak gmail hesabı ile oturum açın.
2.Google webmaster araçlarına tıklayın.
3. Sitenizin veya blogunuzun linkini eklemeniz gerekecek. ön.url:bloggerblogum.blogspot.com bu şekilde ekleyin. www ya da http koymayın.
4. Site sahibi olduğunuzu kanıtlamanız gerekiyor bunun içinde doğrulamanın iki yolu var. İstediğinizi seçip bu meta kodunu kopyalayın
5. Blogunuzun ayarlarına girin şablon--html ayarlarından  <head> kodundan sonra <body>kodundan önce kopyaladığını kodu yerleştirin.
6.. Yerleştirdikten sonra şablonu kaydedin.
7.Google webmaster kısmına girin, doğrulayın dedikten sonra sitenizi onaylamış olacaksınız.
8. Girdiğiniz sayfada sitenizi tıkladıktan sonra karşınıza ayar yapmanız için menüler çıkacak. Buradan site haritası oluşturabilirsiniz.
9. Sitenizin linkinden sonra kutucuk bulunmakta bu kısma rss.xml ya da atom.xml eklerseniz site haritanız oluşmuş olacak.

Blogunuzun Ana Başlık, Kenar Çubuğu ve Başlık Genişliğini Ayarlama

Blogunuzun ana başlık, kenar çubuğu ve başlık genişliğini ayarlamak için aşağıdaki adımları ugulayabiliriz.
1. Hesabınıza giriş yapın ve blogunuzun şablon kısmına tıklayın.
2. Html oarak ayarlamayı seçin
3.Aşağıdaki kodları bulun.

# Header-wrapper { 
width: 750px; 
margin: 10px 0 auto; 
border: 1px solid $ bordercolor; 
}


# Main-wrapper { 
width: 400px; 
margin-left: 20px; 
float: left; 
sözcük kaydırma: break-word; IE sidebar şamandıra kırarak uzun metin için / * düzeltme * / 
}


# Sidebar-wrapper { 
width: 150px; 
float: right; 
word-wrap: break-word; IE sidebar şamandıra kırarak uzun metin için / * düzeltme * /
}


Yukarıdaki ilk kodda başlık genişliğinin 750 px olduğunu söylüyor. İkinci kod grubunda ana sütun genişliğinin 400 piksel olduğunu söylüyor. Son kod ise kenar çubuğu genişliğinin 150 piksel olduğunu söylüyor. Bu kodlardan yararlanarak boyutlarını isteğinize göre şekillendirebilirsiniz.

Bloggera Metin Kutuları Ekleme

Kayan metin kutusu yapmak için aşağıdaki adımları uygulayalım.
1. Yeni bir yayın oluşturun.
2.Mesaj editöründeki html düzenlemeyi tıklayın..
3. Aşağıdaki kodu yerletirin.
<textarea style="WIDTH: 332px; HEIGHT: 70px" onfocus="this.select();" name="textarea" cols="14">İÇERİĞİ BURAYA YERLEŞTİRİN</textarea>

Aşağıdaki gibi görünecektir.

İÇERİĞİ BURAYA YERLEŞTİRİN

Eğer arka planı renkli yapmak isterseniz.
Bu kodu kullanabilirsiniz.
<textarea cols="40" rows="10" style="background: #fcc245;">İÇERİĞİ BURAYA YERLEŞTİRİN</textarea>

İÇERİĞİ BURAYA YERLEŞTİRİN

Blog Resimlerine Hover Özelliği Verme

Bloggerda yerleştirdiğiniz resimlere link verdiğinizde bu resimlerin  efekli bir şekilde göründürerek blogunuzda farklılık kazandırabilirsiniz.

Adım adım hover efeğini yapalım

1. Blogunuza giriş yapıp sol menüdeki şablonlar kısmına girip html ile ayarlama kısmına girin. 

2. </ head> tagını bulun.
3. Aşağıdaki kodu </ head>  tagnın altına yerleştirin.
<style type="text/css">
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>

4.Şablonu kaydedin. Bundan sonra aşağıdaki kodu kullanarak resimlere efek verebiliriz
Kullandıımız bu kod
<a href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a>
Aşağıdaki koda dönüştürebiliriz.
<a class="linkopacity" href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a>


linkopacity eklentisi ile resimler artık hover özelikli...

Örnek:<a class="linkopacity" href=" http://bloggerblogum.blogspot.com" target="_blank" alt="Blogger Destek"><img src="http://c1206.hizliresim.com/y/x/8xt32.jpg"/></a>
Bu kodu metin yazarken html sistemine yerleştirin.

Blogunuza Marquee Kodları ile (Kayan) Metin Ekleme

Bazı durumlarda metnimize hareket ve değişiklik vermek için kayan metin koymamız gerekebiliyor. Bunu en basit yoldan aşağıda adım adım yapalım.
1. Metin yazarken html kodlu şekild ayarlayın.
2. Yazınızın kaymasını istediğiniz kısmını html kod sisteminde aşağıdaki kodlar arasına yerleştirin.
<marquee> BURAYA YAZI EKLE .... </ marquee>

BURAYA YAZI EKLE .... 3. Daha değişik versiyonları için aşağıdaki kodları deneyebilirsiniz.
Kod2.:<Marquee yön = " sol "> BURAYA YAZI EKLE .... </ marquee>


BURAYA YAZI EKLE .... Kod3: <marquee direction="right" width="100%" style="background:#EC4F52"><font color="white">ADD YOUR TEXT HERE....</font></marquee>


BURAYA YAZI EKLE.... Kod4:<marquee direction="left" width="100%" style="background:#EC4F52"><font color="white">ADD YOUR TEXT HERE....</font></marquee> BURAYA YAZI EKLE....

Favicon (Site Logosu) Değiştirme

Favicon; IE, firefox, ya da opera gibi tarayıcılarla sitenize gelen ziyaretçilerin adres çubuğunun yanında görülen, sitenizi temsil eden logodur. Blog kullanıcıları blogger logosunu.kullanırlar. Bu logo özgün bloglar için oldukça çirkin görünmektedir.Bu logoyu size özgü bir logo ile değiştirmek için aşağıdaki adımları uygulayalım.

Blogger faviconu-------->

1. Bloggera giriş yapıp,  html şeklinde düzenlede dedikten sonra, kodu içinde aşağıdaki kodu bulun.

2.Yukarıdaki koddan heen sonra aşağıdaki kodu blogunuza ekleyin.
<link href='Sitenize ait favicon url  ekleyin' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

3.Unutmayın Sitenize ait favicon url  ekleyin kısmına sitenizin favicon resminin urlsini ekleyeceksiniz. daha sonra kaydedin.
Artık sitenize özgü bir  faviconunuz var.

Bloggerdan Navbar Kaldırmak

Blogunuzdaki üst kısımda yer alan blogger navbarını kaldırmak için
1. # Navbar-iframe {height: 0px; visibility: hidden; display: none;} bu kodu aşağıdaki resimde işaretlenen yere yerleştirip kaydedin.

Yeni Blogger Temalarını Bloggera Yükleme

Oturum açın.
1. Sol menüdeki şablon kısmını tıklayın.
2. Sağ üst kısımdaki yedekle/ geri yükle kısmını tıklayın.

3. Açılacak olan sayfada sabit sürücünüzden bir dosyadan şablon seçin kısmının altındaki Dosya Seç kısmını tıklayın şablonu yükleyin.