Flash Animasyonlu Etiket Bulutu

1 Temmuz 2012 Pazar
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.

30 Haziran 2012 Cumartesi

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>


Related Posts Plugin for WordPress, Blogger...