blogspot ipuçları ve temaları

Blogger İçin Resimli Mause İmleci

2011-06-05T12:53:00.000-07:00

Tek yapmanız gereken ]]></b:skin> kodun üst kısmına aşağıdaki kodu yapıştırmak.

body, a, a:hover {cursor: url(http://1.bp.blogspot.com/-PspLOVhBgnU/TevdJ7hEqGI/AAAAAAAAIEc/5rxqOuJqAoo/s1600/apple-tmani.gif), progress;}

Lacivertle yazılan link yerine beğendiğiniz resmin linkini ekleyebilirsiniz.

Blogger İçin Giriş Yap Eklentisi

2011-02-21T09:17:00.000-08:00

.Bu eklenti sayesinde blogunuzda giriş yapma aparatına kavuşacaksınız.Bu eklenti size blogunuzda bir bölüm açıyor.Bu bölümdeki gerekli alanları doldurarak blogunuza giriş yapabiliyorsunuz.Dolayısıyla blogger hesabınıza giriş yapmış oluyorsunuz.Bu eklentiyi kullanmak için aşağıdaki yönergeleri izleyin.

Yerleşim > Gadget Ekle > HTML/JavaScript > aşağıdaki kodları yapıştırın;

<form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Kullanıcı Adı: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Şifre: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Şifremi Unuttum?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Giriş Yap" class="ubtn ubtn-block" name="submit" type="submit"/></form>

Bloggere Arama Kutusu Yapmak

2011-02-21T08:57:00.000-08:00

Tek yapmanız gereken aşağıdaki kodları HTML/JavaScripte yapıştırın.

Bloggerde Kategori Oluşturma

2011-02-21T06:33:00.000-08:00

Öncelikle admin paneline girişi yapıyoruz
Yerleşim-sayfa öğeleri- gadget ekle yolunu takip ediyoruz.
Bağlantı listesi ekle seçeneğini seçiyoruz.
Aşağıdaki gibi ayarlamanızı yapıyorsunuz.

1. Birinci kısıma kategorinin linkini yapıştırırız. örneğin ( http://iyibirblog.blogspot.com/search/label/Blogger%20Skype%20Smileyleri%20Eklentisi ) bu şekilde. Daha da açacak olursak örneğin bir konu yayınlayacaksınız o konunu etiket kısmına Blogger İçin Renk Kodları yazdınız. kaydı yayınladıktan sonra Blogger İçin Renk Kodları diye bir kategori oluşturmak istiyorsunuz. Yayınladığınız kaydın etiketler kısmına yazdığınız Blogger İçin Renk Kodları kısmını tıklayın. Tıkladıktan sonra linki yeni site url'si ekle kısmına yapıştırın. ve yeni site adı yazan yerede Blogger İçin Renk Kodları yazın ve kaydedin. Bundan sonrada etiket kısmına Blogger İçin Renk Kodları yazdığınız her konu kategorimizde tıkladığımız zaman o etikete sahip tüm konular karşımıza çıkacak.

2. İkinci kısıma Kategorimizin ismini yazarız. örneğin temalar.

3. Her yeni kategori için bağlantı ekleyi tıklayarak aynı adımları uygularız.

Blogger İçin Renk Kodları 2

2011-02-13T04:32:00.000-08:00

RENK İSMİ	RENK KODU	RENK
Black	#000000
Grey0	#150517
Grey18	#250517
Grey21	#2B1B17
Grey23	#302217
Grey24	#302226
Grey25	#342826
Grey26	#34282C
Grey27	#382D2C
Grey28	#3b3131
Grey29	#3E3535
Grey30	#413839
Grey31	#41383C
Grey32	#463E3F
Grey34	#4A4344
Grey35	#4C4646
Grey36	#4E4848
Grey37	#504A4B
Grey38	#544E4F
Grey39	#565051
Grey40	#595454
Grey41	#5C5858
Grey42	#5F5A59
Grey43	#625D5D
Grey44	#646060
Grey45	#666362
Grey46	#696565
Grey47	#6D6968
Grey48	#6E6A6B
Grey49	#726E6D
Grey50	#747170
Grey	#736F6E
Slate Grey4	#616D7E
Slate Grey	#657383
Light Steel Blue4	#646D7E
Light Slate Grey	#6D7B8D
Cadet Blue4	#4C787E
Dark Slate Grey4	#4C7D7E
Thistle4	#806D7E
Medium Slate Blue	#5E5A80
Medium Purple4	#4E387E
Midnight Blue	#151B54
Dark Slate Blue	#2B3856
Dark Slate Grey	#25383C
Dim Grey	#463E41
Cornflower Blue	#151B8D
Royal Blue4	#15317E
Slate Blue4	#342D7E
Royal Blue	#2B60DE
Royal Blue1	#306EFF
Royal Blue2	#2B65EC
Royal Blue3	#2554C7
Deep Sky Blue	#3BB9FF
Deep Sky Blue2	#38ACEC
Slate Blue	#357EC7
Deep Sky Blue3	#3090C7
Deep Sky Blue4	#25587E
Dodger Blue	#1589FF
Dodger Blue2	#157DEC
Dodger Blue3	#1569C7
Dodger Blue4	#153E7E
Steel Blue4	#2B547E
Steel Blue	#4863A0
Slate Blue2	#6960EC
Violet	#8D38C9
Medium Purple3	#7A5DC7
Medium Purple	#8467D7
Medium Purple2	#9172EC
Medium Purple1	#9E7BFF
Light Steel Blue	#728FCE
Steel Blue3	#488AC7
Steel Blue2	#56A5EC
Steel Blue1	#5CB3FF
Sky Blue3	#659EC7
Sky Blue4	#41627E
Slate Blue	#737CA1
Slate Grey3	#98AFC7
Violet Red	#F6358A
Violet Red2	#E4317F
Deep Pink	#F52887
Deep Pink2	#E4287C
Deep Pink3	#C12267
Deep Pink4	#7D053F
Medium Violet Red	#CA226B
Violet Red3	#C12869
Firebrick	#800517
Violet Red4	#7D0541
Maroon4	#7D0552
Maroon	#810541
Maroon3	#C12283
Maroon2	#E3319D
Maroon1	#F535AA
Magenta	#FF00FF
Magenta1	#F433FF
Magenta2	#E238EC
Magenta3	#C031C7
Medium Orchid	#B048B5
Medium Orchid1	#D462FF
Medium Orchid2	#C45AEC
Medium Orchid3	#A74AC7
Medium Orchid4	#6A287E
Purple	#8E35EF
Purple1	#893BFF
Purple2	#7F38EC
Purple3	#6C2DC7
Purple4	#461B7E
Dark Orchid4	#571B7E
Dark Orchid	#7D1B7E
Dark Violet	#842DCE
Dark Orchid3	#8B31C7
Dark Orchid2	#A23BEC
Dark Orchid1	#B041FF
Plum4	#7E587E
Pale Violet Red	#D16587
Pale Violet Red1	#F778A1
Pale Violet Red2	#E56E94
Pale Violet Red3	#C25A7C
Pale Violet Red4	#7E354D
Plum	#B93B8F
Plum1	#F9B7FF
Plum2	#E6A9EC
Plum3	#C38EC7
Thistle	#D2B9D3
Thistle3	#C6AEC7
Lavendar Blush2	#EBDDE2
Lavendar Blush3	#C8BBBE
Thistle2	#E9CFEC
Thistle1	#FCDFFF
Lavendar	#E3E4FA
Lavendar Blush	#FDEEF4
Light Steel Blue1	#C6DEFF
Light Blue	#ADDFFF
Light Blue1	#BDEDFF
Light Cyan	#E0FFFF
Slate Grey1	#C2DFFF
Slate Grey2	#B4CFEC
Light Steel Blue2	#B7CEEC
Turquoise1	#52F3FF
Cyan	#00FFFF
Cyan1	#57FEFF
Cyan2	#50EBEC
Turquoise2	#4EE2EC
Medium Turquoise	#48CCCD
Turquoise	#43C6DB
Dark Slate Grey1	#9AFEFF
Dark Slate Grey2	#8EEBEC
Dark Slate Grey3	#78C7C7
Cyan3	#46C7C7
Turquoise3	#43BFC7
Cadet Blue3	#77BFC7
Pale Turquoise3	#92C7C7
Light Blue2	#AFDCEC
Dark Turquoise	#3B9C9C
Cyan4	#307D7E
Light Sea Green	#3EA99F
Light Sky Blue	#82CAFA
Light Sky Blue2	#A0CFEC
Light Sky Blue3	#87AFC7
Sky Blue	#82CAFF
Sky Blue2	#B0E2FF
Light Sky Blue4	#566D7E
Sky Blue	#6698FF
Light Slate Blue	#736AFF
Light Cyan2	#CFECEC
Light Cyan3	#AFC7C7
Light Cyan4	#717D7D
Light Blue3	#95B9C7
Light Blue4	#5E767E
Pale Turquoise4	#5E7D7E
Dark Sea Green4	#617C58
Medium Aquamarine	#348781
Medium Sea Green	#306754
Sea Green	#4E8975
Dark Green	#254117
Sea Green4	#387C44
Forest Green	#4E9258
Medium Forest Green	#347235
Spring Green4	#347C2C
Dark Olive Green4	#667C26
Chartreuse4	#437C17
Green4	#347C17
Medium Spring Green	#348017
Spring Green	#4AA02C
Lime Green	#41A317
Spring Green	#4AA02C
Dark Sea Green	#8BB381
Dark Sea Green3	#99C68E
Green3	#4CC417
Chartreuse3	#6CC417
Yellow Green	#52D017
Spring Green3	#4CC552
Sea Green3	#54C571
Spring Green2	#57E964
Spring Green1	#5EFB6E
Sea Green2	#64E986
Sea Green1	#6AFB92
Dark Sea Green2	#B5EAAA
Dark Sea Green1	#C3FDB8
Green	#00FF00
Lawn Green	#87F717
Green1	#5FFB17
Green2	#59E817
Chartreuse2	#7FE817
Chartreuse	#8AFB17
Green Yellow	#B1FB17
Dark Olive Green1	#CCFB5D
Dark Olive Green2	#BCE954
Dark Olive Green3	#A0C544
Yellow	#FFFF00
Yellow1	#FFFC17
Khaki1	#FFF380
Khaki2	#EDE275
Goldenrod	#EDDA74
Gold2	#EAC117
Gold1	#FDD017
Goldenrod1	#FBB917
Goldenrod2	#E9AB17
Gold	#D4A017
Gold3	#C7A317
Goldenrod3	#C68E17
Dark Goldenrod	#AF7817
Khaki	#ADA96E
Khaki3	#C9BE62
Khaki4	#827839
Dark Goldenrod1	#FBB117
Dark Goldenrod2	#E8A317
Dark Goldenrod3	#C58917
Sienna1	#F87431
Sienna2	#E66C2C
Dark Orange	#F88017
Dark Orange1	#F87217
Dark Orange2	#E56717
Dark Orange3	#C35617
Sienna3	#C35817
Sienna	#8A4117
Sienna4	#7E3517
Indian Red4	#7E2217
Dark Orange3	#7E3117
Salmon4	#7E3817
Dark Goldenrod4	#7F5217
Gold4	#806517
Goldenrod4	#805817
Light Salmon4	#7F462C
Chocolate	#C85A17
Coral3	#C34A2C
Coral2	#E55B3C
Coral	#F76541
Dark Salmon	#E18B6B
Salmon1	#F88158
Salmon2	#E67451
Salmon3	#C36241
Light Salmon3	#C47451
Light Salmon2	#E78A61
Light Salmon	#F9966B
Sandy Brown	#EE9A4D
Hot Pink	#F660AB
Hot Pink1	#F665AB
Hot Pink2	#E45E9D
Hot Pink3	#C25283
Hot Pink4	#7D2252
Light Coral	#E77471
Indian Red1	#F75D59
Indian Red2	#E55451
Indian Red3	#C24641
Red	#FF0000
Red1	#F62217
Red2	#E41B17
Firebrick1	#F62817
Firebrick2	#E42217
Firebrick3	#C11B17
Pink	#FAAFBE
Rosy Brown1	#FBBBB9
Rosy Brown2	#E8ADAA
Pink2	#E7A1B0
Light Pink	#FAAFBA
Light Pink1	#F9A7B0
Light Pink2	#E799A3
Pink3	#C48793
Rosy Brown3	#C5908E
Rosy Brown	#B38481
Light Pink3	#C48189
Rosy Brown4	#7F5A58
Light Pink4	#7F4E52
Pink4	#7F525D
Lavendar Blush4	#817679
Light Goldenrod4	#817339
Lemon Chiffon4	#827B60
Lemon Chiffon3	#C9C299
Light Goldenrod3	#C8B560
Light Golden2	#ECD672
Light Goldenrod	#ECD872
Light Goldenrod1	#FFE87C
Lemon Chiffon2	#ECE5B6
Lemon Chiffon	#FFF8C6
Light Goldenrod Yellow	#FAF8CC

Blogger İçin Highslide Eklentisi

2011-02-11T14:35:00.000-08:00

Bu eklenti ile resmi tıkladığınız zaman resmin orjinal halini görürüz tekrar tıkladığımız zaman resim eski haline döner.

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip edin.

Sonra Widget Şablonlarını Genişlet yazan kutucuğu işaretleyin.

Bu işlemlerden onra klavyenizin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda aşağıdaki kodu aratın.

</head>

1 Adım:

</head> Bulmuş olduğunuz bu kodun üst kısmına aşağıdaki kodları yapıştırın.

2 Adım:

Daha sonra </body> kodu bulun ve üst kısmına aşağıdaki kodları yapıştırın.

Ve şablonunuzu kaydedin.

Blogger için sabit yan menü yapın

2011-02-07T14:01:00.000-08:00

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip edin.

Sonra Widget Şablonlarını Genişlet yazan kutucuğu işaretleyin.

Bu işlemlerden onra klavyenizin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda aşağıdaki kodu aratın.

]]></b:skin>

Bulduğumuz kodun üst kısmına aşağıdaki kodları yapıştırın.

#sidemenu{ position:fixed; text-align:left; /*If the menu location is not ok, modify the next values */ margin-top:100px; margin-left:-28px; } * html #sidemenu{ /*for IE*/ position:absolute; } #sidemenu a img{ opacity:1; -moz-opacity:1; filter:alpha(Opacity=100); } #sidemenu a:hover img{ opacity:0.8; -moz-opacity:0.8; filter:alpha(Opacity=80); position:relative;top:0px;left:2px; } * html #sidemenu a img{ filter:alpha(Opacity=100); } #sidemenu img{ margin-bottom: -5px; } * html .sidemenu{ margin-bottom: -3px; }

Şimdide blog’unuzun HTML kodları arasında bu kodu bulun.

<div id='content-wrapper'> bulduğunuz bu kodun üst kısmına aşağıdaki kodları yapıştırın.

Yeşille yazılan yeri silerek kendi linklerinizi yapıştırın.

Blogger İçin Skype Smileyleri Eklentisi

2011-02-07T11:18:00.000-08:00

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip edin.

Tam şablon yükle yazan bağlantıyı kullanarak şablonunuzu yedekledikten sonra Widget Şablonlarını Genişlet yazan kutucuğu işaretleyin.
Bu işlemlerden onra klavyenizin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda aşağıdaki kodu aratın.

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Daha sonra <h4 id='comment-post-message'>.........<data:postCommentMsg/></h4> kodun arasına aşağıdaki kodları yapıştırın.

Daha sonra şu kodu bulalım ;

</body>

Bulduğumuz bu kodun üst kısmına aşağıdaki kodları yapıştıralım.

Temamızı kaydedip çıkıyoruz.

Blogger İçin Scroll Bar Oluşturmak

2010-07-22T15:57:00.000-07:00

Eğer blogunuzda göstermek istediğiniz bir listeniz var ve bunu blogunuza yerleştirmeniz çok fazla yer kaplayacağından endişe ediyorsanız bu widget size bir çözüm olabilir.Bu widget sayesinde blogunuzda göstermek istediğiniz listeyi küçük bir alanda göstermenizi sağlar.

Tek yapmanız gereken aşağıdaki kodları HTML/JavaScripte yapıştırın.

<div class="widget-content">
<ul style="height:150px;width:150px; overflow:auto; ">
<li><a href="http://iyibirblog.blogspot.com">Başlık</a></li>
<li><a href="http://iyibirblog.blogspot.com">Başlık</a></li>
<li><a href="http://iyibirblog.blogspot.com">Başlık</a></li>
<li><a href="http://iyibirblog.blogspot.com">Başlık</a></li>
<li><a href="http://iyibirblog.blogspot.com">Başlık</a></li>
<li><a href="http://iyibirblog.blogspot.com">Başlık</a></li>
<li><a href="http://iyibirblog.blogspot.com">Başlık</a></li>
<li><a href="http://iyibirblog.blogspot.com">Başlık</a></li>
<span style="font-weight:bold;"></span>
</ul></div>

http://iyibirblog.blogspot.com yazan yere başlığa tıklandığınada açılması gereken sayfanın linkini yapıştırın.

Blogger navbarı Kaldırma

2010-07-22T15:28:00.000-07:00

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle gidin.

Tam şablon yükle yazan bağlantıyı kullanarak şablonunuzu yedekledikten sonra Widget Şablonlarını Genişlet yazan kutucuğu işaretleyin.

Bu işlemlerden onra klavyenizin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda ]]></b:skin> ifadesini aratın.

]]></b:skin> ifadesini bulduktan sonra üst kısmına aşağıdaki Javascript kodlarını ekleyin.

#navbar-iframe { display: none !important; }

Ekledikten sonra şablonu kaydedin ve Widgetları sile tıklayın.

En Çok Okunan Yorumları Listelemek

2010-07-21T11:21:00.000-07:00

Bu eklenti bloğunuzda en çok yorum yapılan konuları otomatik olarak listeler.
Tek yapmanız gereken aşağıdaki kodları HTML/JavaScripte yapıştırın.

function pipeCallback(obj) {

document.write('<ul style="text-transform: capitalize;">');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ul>');

}

</script>

sitenizinlinki yazan yere sitenizin adresini yapıştırın ama www ile başlamalı. örnek www.iyibirblog.blogspot.com.

Konu Başlığının Yanına Resim Ekleme

2010-07-21T00:25:00.000-07:00

Bu eklenti ile blok konu başlıklarının sağına veya soluna resim ekleyebilirsiniz.

1.ADIM: <a expr:href='data:post.url'><data:post.title/></a> kodunu bulun.

2.ADIM: bulmuş olduğunuz kodun alt kısmına veya üst kısmına aşağıdaki kodu ekleyin. Eğer kodu üst kısmına eklerseniz resim solda. Alt kısmına eklerseniz resim sağda görülür.

<img src='http://www.thechangeworks.com/images/still%20penpad.gif'/>

Lacivertle yazan kısıma isterseniz bulmuş olduğunuz farklı bir resim urlside ekleyebilirsiniz.

Blogger İçin Slayt Haber Geçişi

2010-07-20T14:00:00.000-07:00

Öncelikle bu linkteki ( http://www.ziddu.com/download/4361160/s3Slider_js.zip.html ) js uzantılı dosyaları indirin ve www.fileave.com adresine yükleyin.

1.ADIM: </head> Kodunu bulun ve üst kısmına aşağıdaki kodları yapıştırın.

<script type="text/javascript" src="http://mydatanest.com/........./jquery.js"></script>
<script type="text/javascript" src="http://mydatanest.com/........./s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>

<style type="text/css" media="screen">
#slider {
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}
</style>

pembeyle yazan yere fileaveye yüklediğiniz js. uzantılı dosyaları yapıştırın.Ve şablonunuzu kaydedin.

2.ADIM: Daha sonra aşağıdaki kodları HTML/JavaScripte yapıştırın.

<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href=""><img src="images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/3.jpg" alt="3" />
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/4.jpg" alt="4" />
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/5.jpg" alt="5" />
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>

images/410/5.jpg yazan yere slayt sırasında görüntülemek istedğiniz resimlerin urlsini yapıştırın.

Title text yazan yere başlık ekleyin.

Content text... yazan yere açıklama ekleyin.

Bloggere Resimli Menü Yapma

2010-07-20T01:48:00.000-07:00

Resimde görüldüğü gibi menü yapacaz.

1.ADIM: Öncelikle bu linkteki ( http://www.ziddu.com/download/4687442/fisheye-menu.zip.html ) css. ve js uzantılı dosyaları indirin ve www.fileave.com adresine yükleyin.

2.ADIM: </head> kodunu bulun ve üst kısmına aşağıdaki kodları yapıştırın.

<link rel="stylesheet" type="text/css" href="css" />
<script src="js" type='text/javascript'></script>

pembe yerdeki css. ve js. uzantıları yerine linkteki dosyaları indirip www.fileave.com adresine yükledikten sonraki url'leri ekleyin. örnek: http://iyibirblog.fileave.com/fisheye.js http://iyibirblog.fileave.com/fisheye.css

3.ADIM: Daha sonra aşağıdaki kodları HTML/JavaScripte yapıştırın.

</ul>

DÜZENLEME

sitenin linki yazan yere menüdeki resime tıklayınca açılacak sayfanın urlsini yapıştırın. örnek:http://iyibirblog.blogspot.com

lacivertle yazan yer ise menüdeki resmin url'sidir.

Blogger İçin 125x125 Reklam Kutusu Ekleme

2010-07-19T16:08:00.000-07:00

Tek yapmanız gereken aşağıdaki kodları HTML/JavaScripte yapıştırmak.

<center><table border="0"><tr>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
</tr><tr>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
</tr></table></center>

Kırmızı linkli yere yerine istediğiniz resim linkini yapıştırın

Resimli Yorum Numaralandırma

2010-07-19T11:52:00.000-07:00

1.ADIM: </head> kodunu bulup üst kısmına aşağıdaki kodları yapıştırın.

.comm-num a:link, .comm-num a:visited {

color: white !important;

text-decoration: none !important;

background: url(http://i50.tinypic.com/egx3t3.jpg) no-repeat;

width: 50px;

height: 48px;

float: right;

display: block;

margin-right: 5px;

margin-top: -15px; /*comments-counter position*/

text-align: center;

font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;

font-size: 15px;

font-weight: normal;

}

.comm-num a:hover, .comm-num a:active {

color: gray !important;

text-decoration: none !important;

}

</style>

2.ADIM: <b:loop values='data:post.comments' var='comment'> kodunu bulup üst kısmına aşağıdaki kodları yapıştırın.

3.ADIM: <data:commentPostedByMsg/> kodunu bulup alt kısmına aşağıdaki kodları yapıştırın.

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

Şablonunuzu kaydedip çıkın.

DÜZENLEME:

Eğer bu ( http://i50.tinypic.com/egx3t3.jpg ) linkteki resmi beğenmediyseniz aşağıdaki resimlerin urlsiyle değiştirebilirsiniz.

Yorum Gönder Kutucuğuna Arka Plan Resmi Eklemek.

2010-07-18T14:37:00.000-07:00

Bu eklenti ile yorum gönder arka plan resmini değiştirebilirsiniz.

1.Adım: <div class='comment-form'> bulun ve bulmuş olduğunuz kodu aşağıdaki kodla değiştirin.

2.Adım: ]]></b:skin> kodunu bulun ve alt kısmına aşağıdaki kodları yapıştırın.

#mbt-form iframe{
background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0etM/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
}
#mbt-form iframe:hover{
background:#ffffff url(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS0/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;
}
#mbt-form a{
color:#7EB2AC;
}

şablonunuzu kaydedin ve çıkın.

Yeşil kodlu resim url si yerine beğendiğiniz resim urlsini yapıştırın. 1. kısımdaki resim urlsi yorum kutusunun mause üzerinde olmadan önceki görüntüsü 2. resim urlsi ise mauseyle yorum gönder üzerine geldiğimiz zamanki görüntüsü.

Footer Kısmına 3'lü Gadget Ekleme

2010-07-18T10:05:00.000-07:00

Bu eklenti ile Footere (Alt kısıma) 3 lü gatget ekler.

1.Adım: ]]></b:skin> kodunu bulup üst kısmına aşağıdaki kodları yapıştırın.

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

2.Adım: </body> kodunu bulup üst kısmına aşağıdaki kodları yapıştırın.

Bu kadar şablonunuzu kaydedin.

Bloggere Reklam Kutucuğu Ekleme

2010-07-18T05:27:00.000-07:00

Bu eklenti ile reklamkutucuğu oluşturabilirsiniz. tek yapmanız gereken aşağıdaki kodları HTML/JavaScripte yapıştırmak.

Blogger'a giriş yapıp ve Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin. İçerik kısmına alttaki kodu yapıştırın.

images = new Array(1);

images[0] = "<a href = 'Sitenin URLsi' rel='nofollow' ><img src='Resmin URLsi' border='0' height='125' width='125' alt='iyibirblog'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

</script>

</center></td>

images = new Array(1);

images[0] = "<a href = 'Sitenin URLsi' rel='nofollow' ><img src='Resmin URLsi' border='0' height='125' width='125' alt='iyibirblog'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

</script>

</center></td>

</tr>

<tr>

images = new Array(1);

images[0] = "<a href = 'Sitenin URLsi' rel='nofollow' ><img src='Resmin URLsi' border='0' height='125' width='125' alt='iyibirblog'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

</script>

</center></td>

images = new Array(1);

images[0] = "<a href = 'Sitenin URLsi' rel='nofollow' ><img src='Resmin URLsi' border='0' height='125' width='125' alt='iyibirblog'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

</script>

</td></center>

</tr>

</tbody></table>

<tbody>

<tr>

</tbody></table>

</div>

Sitenin URLsi yerine reklam yaptığınız sitenin linkini yapıştırın.

Resmin URLsi yerinede istediğiniz resmin linkini yapıştırın.

height='125' width='125' height resmin yüksekliği width resmin genişliği sitenizin temasına göre resmin yükseklik ve genişliğini ayarlayabilirsiniz.

Daha fazla kutucuk eklemek istiyorsanız aşağıdaki kodları çoğaltabilirsiniz.Ya da azaltmak istiyorsanız yine aynı şekilde aşağıdaki kodları silebilirsiniz.

images = new Array(1);

images[0] = "<a href = 'Sitenin URLsi' rel='nofollow' ><img src='Resmin URLsi' border='0' height='125' width='125' alt='iyibirblog'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

</script>

</center></td>

Blogger İçin Renk Kodları

2010-07-18T01:29:00.000-07:00

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000

#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000

#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#999933	#999900
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000

#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000

#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000

#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000

Blogger Page Navi,Blogger Sayfa Numaralandırma

2010-07-17T13:38:00.000-07:00

1.Adım: ]]></b:skin> kodunu bulun ve üst kısmına aşağıdaki kodları yapıştırın.

.showpageArea {

font-family:verdana,arial,helvetica;

color: #000;

font-size:11px;

margin:10px;

}

.showpageArea a {

color: #000;

text-shadow:0 1px 2px #fff;

font-weight: 700;

}

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

border:1px solid #999;

-webkit-border-radius:3px;-moz-border-radius:3px;

background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;

}

.showpageNum a:hover {

border:1px solid #888;

background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;

}

.showpageOf{

margin:0 8px 0 0;

}

.showpagePoint {

color:#fff;

text-shadow:0 1px 2px #333;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

-webkit-border-radius:3px;-moz-border-radius:3px;

border:1px solid #999;

background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;

text-decoration: none;

}

2.Adım: </body> kodunu bulup kodun üst kısmına aşağıdaki kodları yapıştırın.

<b:if cond='data:blog.pageType != "item"'>

var pageCount=5;

var displayPageNum=5;

var upPageWord ='Previous';

var downPageWord ='Next';

</script>

</b:if>

Bu kadar şablonunuzu kaydedip ve çıkın.

Bloggere Sosyal İmleme Eklentisi

2010-07-11T01:48:00.000-07:00

İlk olarak blogger'a giriş yapıyoruz..Yerlerşim-->Html Düzenle-->Widget şablonunu genişlet işlemlerini takip edin..Daha Sonra bu kodu bulun..

<data:post.body/>

yukarıda bulmuş olduğunuz kodun altına aşağıdaki kodları yapıştırıp kaydedin.

<span style='display:none;'>I'm reading: <data:post.title/></span><img alt='Add To Yahoo' border='0' class='icon-action' src='http://www.cbc.ca/news/yourvoice/assets/images/yourvoice-twitter.png'/></a>

</span>

</div>

Bloğunuza facebook beğen tuşu ekleme

2010-07-11T00:14:00.000-07:00

Yerleşim > HTML'yi Düzenle'ye tıklayın Ctrl+F tuşlarına basın ve aşağıdaki kodu aratın.

<div class='post-header-line-1'/> <div class='post-header-line-1'/> bu kodun altına aşağıdaki kodları yapıştırın ve şablonunuzu kaydedin.

<b:if cond='data:blog.pageType == "item"'>

</b:if>

Yorum Gönder Yazısını Değiştirmek

2010-07-09T00:58:00.000-07:00

Yorum Gönder yazısını değiştirmek için temanızda alttaki kodu bulun.

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Bulmuş olduğunuz bu kodda <data:postCommentMsg/> kısmına istediğiniz yazıyı yazabilirsiniz. Kodun yerine yazdığınız yazı, Yorum Gönder yazının yerine görüntülenir.

Yorum Gönder Yazısının Yerine Resim Ekleme

2010-07-08T23:35:00.000-07:00

Tek yapmanız gereken ]]></b:skin> kodunu aratıp hemen üst satırına aşağıdaki kodları eklemek.

#comment-post-message {

background:url("http://1.bp.blogspot.com/_ZpFeH-YiIIw/TDbCY1ZNSwI/AAAAAAAAORw/pJYCcdBwNyc/s1600/ixvbkw.jpg.png") no-repeat scroll left top transparent;

height:25px;

margin-bottom:10px;

text-indent:-9999px;

width:267px;

}

yeşil renkli yere istediğiniz resmin linkini ekleyebilirsiniz

height:25px; ve width:267px; yazan yerlerede istediğiniz yükseklik ve genişlik değerlerini verebilirsiniz.

Blogspot İçin Yorum Numaralandırma

2010-07-07T15:06:00.000-07:00

1. Adım: Öncelikle aşağıdaki kodu buluyoruz:

2. Adım: Bulduğumuz kodun altına şu kodları yapıştıralım:

3. Adım: Daha sonra aşağıdaki kodu aratalım

<data:commentPostedByMsg/>

4. Adım: Bulduğumuz bu kodun altına aşağıdaki kodu yapıştıralım.

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

Bu kadar şablonunuzu kaydedip çıkın.

Blogger için Renkli Kutu Yapımı

2010-07-04T15:48:00.000-07:00

]]></b:skin> kodunu bulun ve üst kısmına aşağıdaki kodu kopyalayınız.

.kutucuk {

background: #FFFF99;

width: 500px;

height: 40px;

text-align:justify;

overflow: hidden;

position:relative;

}

Kodlarımızı ekledikten sonra Şablonumuzu kaydediyoruz. Bu kadar. Konunuzda kullanmak için aşağıdaki Satırı kullanın:

<div class="kutucuk">iyibirblog</div>

iyibirblog yazan yere kutu içinde yazmak istediğiniz yazıyı yazın.

background --> Arkaplan Rengi
width --> Kutunun genişliği
height --> Kutunun yüksekliği
text-align --> Kutunun içindeki Yazının geleceği yer (left,right,center,justify)
overflow --> Kutuda taşan yerleri taşmamış gibi göstertir.
position --> Kutunun olduğu yerde kalıp kıpırdamamısını sağlar.

Arka plan rengini değiştirmek için http://www.mybloggertricks.com/2009/10/embeddable-css-color-chart-table-for.html

Bloggere Yan Menü Ekleme

2010-07-04T15:15:00.001-07:00

1. Adım

Blogger hesabımıza giriş yaptıktan sonra yerleşim/html düzenle diyoruz.

2. Adım

]]></b:skin>

bu kodu buluyoruz (CSS) ve üstüne aşağıdaki kodları yapıştırıyoruz.

.fixed_menu {

position: fixed; /*set the position type for non IE systems*/

top: 140px;

left: 0px;

width: auto;

margin: 0 0px 0px 0px;

background: #ffffff;

opacity:.900;

filter: alpha(opacity=90);

padding: 7px 5px 5px 5px;

-moz-border-radius-topright: 10px;

-moz-border-radius-topleft: 0px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-bottomleft: 0px;

}

.fixed_menu a:hover img {

position: relative;

top: 2px;

left: 2px;

border-top: 1px solid #b3b3b3;

border-left: 1px solid #b3b3b3;

border-bottom: 2px solid #999999;

border-right: 2px solid #999999;

}

.fixed_menu a { display: block; } /*Optional : This puts each link in the menu on a new line, remove if you want a horizontal menu*/

* html .fixed_menu {position:absolute;} /*IE only change the position mode of the menu*/

3. Ve Son Adım

<body>

bu kodu buluyoruz ve hemen alt tarafına şu kodları yapıştırıyoruz.

<div class='fixed_menu'>

<a href='http://iyiresim.blogspot.com/search/label/Kristen%20Stewart' title='Kristen stewart'><img src='http://3.bp.blogspot.com/_ZpFeH-YiIIw/TDjcjjqqUAI/AAAAAAAAOVA/bME-ncF4-R4/s1600/icons_bella.gif'/></a>

<a href='http://iyiresim.blogspot.com/search/label/Natalie%20Portman' title='natalie portman'><img src='http://bestuff.com/images/images_of_stuff/64x64crop/natalie-portman-11329.jpg'/></a>

<a href='http://iyiresim.blogspot.com/search/label/Emma%20Roberts' title='Emma Roberts'><img src='http://userserve-ak.last.fm/serve/64s/19840837.jpg'/></a>

<a href='http://iyiresim.blogspot.com/search/label/Leighton%20Meester' title='leighton meester'><img src='http://bestuff.com/images/images_of_stuff/64x64crop/leighton-meester-152230.jpg'/></a>

<a href='http://iyiresim.blogspot.com/search/label/Taylor%20Lautner' title='Taylor Lautner'><img src='http://3.bp.blogspot.com/_ZpFeH-YiIIw/TDjckCUcmvI/AAAAAAAAOVQ/FE9_2YxACsI/s1600/icons_jacob.gif'/></a>

<a href='http://iyiresim.blogspot.com/search/label/Josh%20Holloway' title='Josh Holloway'><img src='http://bestuff.com/images/images_of_stuff/64x64crop/josh-holloway-124137.jpg'/></a>

</div>

Bunları yaptıktan sonra kaydedip çıkıytoruz..

kırmızı yazan yere sitenizin linkini yazıyorsunuz

yeşil yazan yere herhangi bir isim yazıyorsunuz

pembe yazan yere resmin linkini ekliyorsunuz

bloggerde Sayfa Oluşturma

2010-05-04T05:24:00.000-07:00

1.Blogger Hesabınıza giriş yapın. Daha sonra yerleşim - sayfa öğelerini tıklayın.

2.Daha sonra gadget ekleyi tıklayın.

3.Daha sonra gadgetten sayfalar seçeneğini ekleyin

4.En sonundada göderme - sayfaları düzenle kısmı tıklayarak yeni sayfa ekleyebilir veya sayfalarınızı düzenleyebilirsiniz.

Bloğunuzda Sağdan Sola Doğru Kayan Başlık

2010-04-20T10:19:00.000-07:00

Yerleşim > HTML'yi Düzenle'ye tıklayın Ctrl+F tuşlarına basın ve aşağıdaki kodu aratın.

</head>

bulmuş olduğunuz bu kodun üstüne alttaki kodu yapıştırın;

var txt="iyibirblog";

var espera=200;

var refresco=null;

function rotulo_title()

{

document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);

}

rotulo_title();

</script>

iyibirblog yazan yere istediğiniz bir şey yazıp kaydedin.

Blogger İçin Yorum Kuralları Ekleme

2010-04-15T13:24:00.000-07:00

Blogger yorum kurallarınızı oluşturabilir. Yorumlarınızın hemen üstüne yerleştirebilirsiniz. Yorum kuralları eklemek, blog yazarının ziyaretçilerini ve yorumcularını yorumlar hakkında önceden bilgilendirmesini sağlar. Bunun için tek yapmanız gereken Blogger'a giriş yapıp Yerleşim///Htlmy'i düzenle kısmına gelip aşağıdaki kodu Ctrl+F tuş kombinasyonu ile buluyoruz.

Bu kodun hemen altına yorum kurallarınızı ekleyebilirsiniz.

<b>Yorum Kuralları:</b><br/>

1- Yaptığınız yorumun, hakaret içermemelidir .<br/>

2- http://iyibirblog.blogspot.com/<br/>

3- http://iyibirblog.blogspot.com/.<br/>

4- Yukarıdaki kurallardan herhangi birine uymamanız durumunda, site sahibi yorumunuzu yayınlama ya da yayınlamama hakkına sahiptir.<br/>

yorumlarınızı kendinize göre düzenleyebilirsiniz.

Google buzz eklentisi

2010-04-15T09:34:00.000-07:00

Google buzz yazınızın başkalrı tarafından paylaşılmasını sağlayan güzel bir eklenti. Bu eklenti ile yazınızın kaç kişi tarafından paylaşıldığınıda görebilirsiniz.Blogger'a giriş yapıp Yerleşim///Htlmy'i düzenle kısmına gelip aşağıdaki kodu Ctrl+F tuş kombinasyonu ile buluyoruz.

yukarıdaki kodu bulduktan sonra hemen altına bu linke tıklayıp seçtiğiniz kodu yapıştırın. ve şablonunuzu kaydediniz.

bloğunuzda bir sayfanın kaç defa okunduğu gösteren eklenti

2010-04-15T04:50:00.000-07:00

Bloğunuzdaki konuların kaç defa okunduğunu gösteren güzel bir eklenti. Tek yapmanız gereken Blogger'a giriş yapıp Yerleşim///Htlmy'i düzenle kısmına gelip aşağıdaki kodu Ctrl+F tuş kombinasyonu ile buluyoruz.

yukarıdaki kodu bulduktan sonra aşağıdaki kodu yukarıdaki kodun hemen altına yapıştırın.

<b:if cond='data:blog.pageType == "item"'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><img height='16' src='http://lh4.ggpht.com/_lv37Ahxkj3U/S8b67QWc95I/AAAAAAAAGYs/jk2S8XGYs6g/stats.gif' width='16'/> <a href='http://iyibirblog.blogspot.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>

yapıştırdıktan sonra şablonunuzu kaydedin.

Blogger için Google translate bayrak

2010-03-11T14:34:00.000-08:00

Google translate yabancı takipçiler için bloğunuzu anında diğer dillere çeviren güzel bir eklenti. Tek yapmanız gereken Blogger'a giriş yapıp ve Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin. İçerik kısmına alttaki kodu yapıştırın.

<style>

.google_translate img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

border:0;

}

.google_translate:hover img {

filter:alpha(opacity=30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

.google_translatextra:hover img {

filter:alpha(opacity=0.30);

-moz-opacity: 0.30;

opacity: 0.30;

border:0;

}

</style>

<div>

<div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

<br/>

<a href="http://iyibirblog.blogspot.com/"><font size="1px">this widget by http://iyibirblog.blogspot.com</font></a>

Blogger için Renkli Menü Yapmak

2010-03-11T14:06:00.000-08:00

Resimdede görüldüğü gibi renkli meni yapmak için tek yapmanız gereken.Blogger'a giriş yapıp ve Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin. İçerik kısmına alttaki kodu yapıştırın.

/* Made By iyibirblog.blogspot.com */

#ddblueblockmenu{

border: 1px solid #000000; /*Main Border Color */

border-bottom-width: 0;

width: 100%;

}

#ddblueblockmenu ul{

margin: 0;

padding: 0;

list-style-type: none;

font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

#ddblueblockmenu a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 94%; /*94% minus all left/right paddings and margins*/

text-decoration: none;

color: #ffffff; /* Menu Font Color */

background-color: #2175bc; /*Menu background Color */

border-bottom: 1px solid #90bade; /*Bottom border color */

border-left: 7px solid #1958b7; /*Left border color */

list-style-type:none;

}

* html #ddblueblockmenu a{ /*IE only */

width: 94%; /*IE 5*/

width: 94%; /*94% minus all left/right paddings and margins*/

}

#ddblueblockmenu a:hover {

background-color: #2586d7; /*Menu background Color On Hover*/

border-left-color: #1c64d1; /*Left border color On Hover*/

}

#ddblueblockmenu div.menutitle{

color: #ffffff; /* Title Font Color */

border-bottom: 1px solid black;

padding: 1px 0;

padding-left: 5px;

background-color: #000000; /*Menu Tite Background Color*/

font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

/* Made By iyibirblog.blogspot.com */

</style>

<div class="menutitle">Browse</div>

<ul>

<a href="http://iyibirblog.blogspot.com/">About us</a>

<a href="http://iyibirblog.blogspot.com/">Blogger

templates</a>

<a href="http://iyibirblog.blogspot.com/">Blogger

Tricks</a>

<a href="http://iyibirblog.blogspot.com/">Blogger Tools</a>

</ul></div><font size="1">Menu By <a

href="http://iyibirblog.blogspot.com/">iyibirblog.blogspot.com</a></font>

kırmızı renkle gördüğünüz kısıma site uzantısını. Lacivert renkle gördüğünüz kısıma ise istediğiniz ismi verin.

Blogger a otomatik devamını okuyun eklentisi

2010-02-26T12:44:00.000-08:00

ilk önce bu dosyayı indirin
indirdiğiniz dosyayı fileave.com adresine veya bildiğiniz başka bir siteye yükleyin.

</head> kodunu bulup üst kısmına aşağıdaki kodları ekleyin

indirdiğiniz dosyayı fileave.com sitesine yükledikten sonra yüklediğiniz linki http://iyibirblog.blogspot.com/.js ile değiştirin.

Daha sonra <data:post.body/> kodunu bulup silin ve sildiğiniz yere aşağıdaki kodları yapıştırın.

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <div style='clear: both;'/> <p class='devamini-oku'><a expr:href='data:post.url' rel='bookmark'>Devamını okuyun!</a></p> </b:if>

ve kaydedin.

summary_noimg = 550;
summary_img = 300;
img_thumb_height = 90;
img_thumb_width = 90;

lacivert rakamlar Resim yoksa yazıda şu kadar özet karakter göstersin. Resim varsa şu kadar özet karakter göstersin.
Yeşil rakamlar ise resmin genişliği ve uzunluğu.

Blogspot için favicon ekleme

2010-01-05T14:29:00.001-08:00

favicon site isminizin yanındaki küçük simgedir.
Yani Blogspot'un simgesini kullanmak zorunda değiliz değiştirebiliyoruz.

Tek yapmamız gereken aşağıdaki adımı uygulamak.

Şablon düzenle >> HTML
<title> kodunu bulup titlenin başına
<link href="http://sayfa.googlepages.com/favicon.ico" rel='shortcut icon' />
<link href="http://sayfa.googlepages.com/favicon.ico" rel='icon' />
bunu ekliyoruz..

Farklı facicon kullanmak istiyorsanız linkini internetten bulup kırmızı kodlarla değiştirin.

Rengareng link yapmak

2009-11-13T15:00:00.000-08:00

Bu eklentideki amaç fareyle hangi linkin üzerine gelirsek o link renk değiştirmeye başlıyor. güzel bir eklenti tavsiye ederim.

Blogger dan giriş yapıp Yerleşim///Htlmy'i düzenle kısmına gelip aşağıdaki kodu Ctrl+F tuş kombinasyonu ile buluyoruz.

</head>

yukarıda bulduğumuz koddan önce aşağıdaki kodları yapıştırın.

//<![CDATA[

var rate = 20;

if (document.getElementById)

window.onerror=new Function("return true")

var objActive; // The object which event occured in

var act = 0; // Flag during the action

var elmH = 0; // Hue

var elmS = 128; // Saturation

var elmV = 255; // Value

var clrOrg; // A color before the change

var TimerID; // Timer ID

if (document.all) {

document.onmouseover = doRainbowAnchor;

document.onmouseout = stopRainbowAnchor;

}

else if (document.getElementById) {

document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);

document.onmouseover = Mozilla_doRainbowAnchor;

document.onmouseout = Mozilla_stopRainbowAnchor;

}

function doRainbow(obj)

{

if (act == 0) {

act = 1;

if (obj)

objActive = obj;

else

objActive = event.srcElement;

clrOrg = objActive.style.color;

TimerID = setInterval("ChangeColor()",100);

}

function stopRainbow()

{

if (act) {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

function doRainbowAnchor()

{

if (act == 0) {

var obj = event.srcElement;

while (obj.tagName != 'A' && obj.tagName != 'BODY') {

obj = obj.parentElement;

if (obj.tagName == 'A' || obj.tagName == 'BODY')

break;

}

if (obj.tagName == 'A' && obj.href != '') {

objActive = obj;

act = 1;

clrOrg = objActive.style.color;

TimerID = setInterval("ChangeColor()",100);

}

function stopRainbowAnchor()

{

if (act) {

if (objActive.tagName == 'A') {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

function Mozilla_doRainbowAnchor(e)

{

if (act == 0) {

obj = e.target;

while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {

obj = obj.parentNode;

if (obj.nodeName == 'A' || obj.nodeName == 'BODY')

break;

}

if (obj.nodeName == 'A' && obj.href != '') {

objActive = obj;

act = 1;

clrOrg = obj.style.color;

TimerID = setInterval("ChangeColor()",100);

}

function Mozilla_stopRainbowAnchor(e)

{

if (act) {

if (objActive.nodeName == 'A') {

objActive.style.color = clrOrg;

clearInterval(TimerID);

act = 0;

}

function ChangeColor()

{

objActive.style.color = makeColor();

}

function makeColor()

{

// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB

if (elmS == 0) {

elmR = elmV; elmG = elmV; elmB = elmV;

}

else {

t1 = elmV;

t2 = (255 - elmS) * elmV / 255;

t3 = elmH % 60;

t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {

elmR = t1; elmB = t2; elmG = t2 + t3;

}

else if (elmH < 120) {

elmG = t1; elmB = t2; elmR = t1 - t3;

}

else if (elmH < 180) {

elmG = t1; elmR = t2; elmB = t2 + t3;

}

else if (elmH < 240) {

elmB = t1; elmR = t2; elmG = t1 - t3;

}

else if (elmH < 300) {

elmB = t1; elmG = t2; elmR = t2 + t3;

}

else if (elmH < 360) {

elmR = t1; elmG = t2; elmB = t1 - t3;

}

else {

elmR = 0; elmG = 0; elmB = 0;

}

elmR = Math.floor(elmR).toString(16);

elmG = Math.floor(elmG).toString(16);

elmB = Math.floor(elmB).toString(16);

if (elmR.length == 1) elmR = "0" + elmR;

if (elmG.length == 1) elmG = "0" + elmG;

if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;

if (elmH >= 360)

elmH = 0;

return '#' + elmR + elmG + elmB;

}

//]]>

</script>

Bu kadar şablonunuzu kaydedip ve çıkın.

Bloggere Resim Galerisi Eklemek

2009-11-12T11:02:00.000-08:00

1)Galeri kodlarını şablonunuza yerleştirin

Blogger dan giriş yapıp Yerleşim///Htm i düzenle kısmına gelip aşağıdaki kodu Ctrl+F tuş kombinasyonu ile buluyoruz.

]]></b:skin> bu kodu arıyoruz.

Hemen bu koddan önce aşağıdaki kodları ekliyoruz

/* Blogger Zoom Gallery */

ul.thumb {

float: left;

list-style: none;

margin: 0; padding: 10px;

width: 360px;

}

ul.thumb li {

margin: 0; padding: 5px;

float: left;

position: relative; /* Set the absolute positioning base coordinate */

width: 110px;

height: 110px;

}

ul.thumb li img {

width: 100px; height: 100px; /* Set the small thumbnail size */

-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;

left: 0; top: 0;

}

ul.thumb li img.hover {

background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect

border: none; /* Get rid of border on hover */}

Daha sonra bu kodu buluyoruz:

</head>

Hemen bu koddan önce aşağıdaki kodu ekliyoruz.

type='text/javascript'/>

$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {

$(this).css({'z-index' : '10'});

$(this).find('img').addClass("hover").stop()

.animate({

marginTop: '-110px',

marginLeft: '-110px',

top: '50%',

left: '50%',

width: '174px',

height: '174px',

padding: '20px'

}, 200);

} , function() {

$(this).css({'z-index' : '0'});

$(this).find('img').removeClass("hover").stop()

.animate({

marginTop: '0',

marginLeft: '0',

top: '0',

left: '0',

width: '100px',

height: '100px',

padding: '5px'

}, 400);

});

//Swap Image on Click

$("ul.thumb li a").click(function() {

var mainImage = $(this).attr("href"); //Find Image Name

$("#main_view img").attr({ src: mainImage });

return false;

});

</script>

2)Galery blogunuza yerleştirin

Galeriyi nereye ekleyeceksek oraya Gadget Ekle /// Html/JavaScript seçerek aşağıdaki kodları ekliyoruz.

# yazan yere resime tıklandığında gidilmesi gereken link adresini picture link yazan yere de resmin adresini veriyoruz.

bloggerde konular arasına şekilli ayırıcı ekleme

2009-11-06T05:59:00.000-08:00

Öncelikle, Sayfa Ögeleri > HTML düzenle yolunu zileyin. Widget Şablonu genişlet kutucuğuna tıkladığınızdan emin olun. Temanızda .post kodunu aratın.

karşınıza aşağıdaki koda benzer kod çıkacak.

.post {
margin: 0 0 40px 0;
width: 90%
}

bu kod arasına aşıdaki kodu yapıştırın.

background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

yapıştırdığınız kod son görünümü aşağıdaki gibi olacak.

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

son olarak Separator-Image-Url yerine aşağıdaki kodlardan birini yapıştırın.

http://4.bp.blogspot.com/_JwD5r652h00/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxwg/s1600/barsnake.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutti1AMlHI/AAAAAAAAANY/n-pJyLWbbhE/s1600/bar47.gif

http://4.bp.blogspot.com/_JwD5r652h00/SuttiqsszII/AAAAAAAAANQ/raAoX-EHDUY/s1600/astarl7s.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutu7XMmvBI/AAAAAAAAAOY/8XQyk53329Y/s1600/dividers_129.gif

http://4.bp.blogspot.com/_JwD5r652h00/Sutv28LLgLI/AAAAAAAAAOo/3ykBTaQOofw/s1600/flowerbar.gif

Bloğumuza Yukarı Git Butonu Eklemek

2009-11-05T08:38:00.000-08:00

Öncelikle, Sayfa Ögeleri > HTML düzenle yolunu zileyin. Widget Şablonu genişlet kutucuğuna tıkladığınızdan emin olun. Temanızda ]]></b:skin> kodunu aratın. Bulduğunuz bu koddan hemen önce alttaki kodu yapıştırın.

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Daha sonra </body> kodunu aratın. Bulduğunuz bu koddan hemen önce alttaki kodu yapıştırın.

<a href="#" id="backtotop"><img src="resim-Url" alt="back to top" /></a>

sonra resim-Url yazan yere alttaki kodlardan birini veya internette bulduğunuz bir kodu yapıştırın.

http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png

Blogger Rastgele Sözler Eklentisi

2009-11-04T05:33:00.000-08:00

Blogger'a giriş yapın ve Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin. İçerik kısmına alttaki kodu yapıştırın.

<i><center>

<center><script language="JavaScript">
//store the quotations in arrays
quotes = new Array(7);
quotes[0] = "Kılıcın yapamadığını adalet yapar.";
quotes[1] = "Vezir, padişahtan korktuğu kadar Allah'tan korksaydı melek olurdu.";
quotes[2] = "Hazine, eziyet çekene, çalışıp çaba gösterene gözükür.";
quotes[3] = "Daima başkalarının kusurlarını gören, bir gün rüsvaylık içinde ağzını açamaz olur.";
quotes[4] = "http://iyibirblog.blogspot.com/";
quotes[5] = "Tatlı suyun başı kalabalık olur.";
quotes[6] = "Atın iyisine doru yiğidin iyisine deli derler.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>

</center></i>

sözleri istediğiniz gibi düzenleyin.

Bloggerda Toplam Yazı ve Yorumların İstatistik Eklentisi

2009-11-04T04:45:00.000-08:00

1. Blogger adresinden kullanıcı adınız ve şifreniz ile giriş yapın.
2. Kumanda panelinde yerleşim'e tıklayın.
3. Yönlendirildiğiniz sayfada "Gadget Ekle" seçeneğine tıklayın.
4. Açılacak olan pencerede, HTML/JavaScript seçeneğine tıklayın
5.Tıkladığınızda karşınıza gelecek ekrana aşağıdaki kodu yapıştırın;

http://iyibirblog.blogspot.com/ yazan yere kendi blog adresinizi yazın ve kaydedin.

Blogger Tepkiler Sorununa Çözüm

2009-11-03T15:04:00.000-08:00

bazı temalar tepki eklentisini desteklemiyor bu sorunu ortadan kaldırmak için aşağıdaki adımları izlemeniz yeterli.

Öncelikle, Sayfa Ögeleri > HTML düzenle yolunu zileyin. Widget Şablonu genişlet kutucuğuna tıkladığınızdan emin olun. Temanızda <data:post.body/> kodunu aratın. Bulduğunuz bu koddan hemen sonra alttaki kodu yapıştırın.

<b:if cond='data:top.showReactions'>

<data:top.reactionsLabel/></span>

</td>

</tr></table>

</b:if>

</span>

bu kadar kaydedip ve çıkın.

Yazı Sonuna Resimli Benzer Yazı Ekleme

2009-11-03T14:57:00.000-08:00

1. Adım: Kumanda Paneli > Yerleşim > HTML Düzenle yolunu izleyin ve Widget Şablonlarını Genişlet kutucuğuna tıklayın.

Ardından CTRL+F tuşları yardımı ile temanızda </head> kodunu bulun.

2. Adım: Bulmuş olduğunuz bu kodun üst satırına alttaki kodu yapıştırın;

<b:if cond='data:blog.pageType == "item"'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, “Times New Roman”, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }

    #related-posts a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if>

3. Adım: Ardından temanızda alttaki kodu bulun;

4. Adım: Bulmuş olduğunuz koddan hemen sonra alttaki kodu bir alt satıra yapıştırın;

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Benzer Yazılar";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

5. Adım : Yukarıdaki kodda isteğe bağlı olarak şu değişiklikler yapılabilir. Bunlar;

* Benzer Yazılar yazısını istediğiniz şekilde değiştirebilirsiniz.

* Yazıların altında görüntülenmesini istediğiniz benzer yazı sayısını değiştirmek için;

var maxresults=6;

bloğumuza facebook düğmesi ekleme

2009-11-03T10:41:00.000-08:00

<div class='post-header-line-1'/> bu kodu blup altına aşağıdaki kodlardan birini yapıştırın.

<b:if cond='data:blog.pageType == "item"'>

<a name="fb_share" type="icon_link" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

</span></b:if>

<b:if cond='data:blog.pageType == "item"'><span style="text-align: right;">

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

</span></b:if>

<b:if cond='data:blog.pageType == "item"'><span style="text-align: right;">

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

</span></b:if>

Blogger Açılır Menü (Drop Down Menu) Yapımı

2009-11-03T10:07:00.000-08:00

Menümüzü nasıl yükleyeceğimize bakalım:
HTML/JavaScript (Yerleşim--->Sayfa Öğeleri--->Gadget Ekle--->HTML/JavaScript)'e aşağıdaki kodları kopyalıyoruz:

<select id="Select1"onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" style="width: 100%; " class="text_noresize" name="select">

<option selected="selected">Bir Link Seçin</option>

<option value='1. URL linki giriniz' > İsim 1</option>

<option value='2. URL linki giriniz' > İsim 2</option>

<option value='3. URL linki giriniz' > İsim 3</option>

</select>

<a href="http://iyibirblog.blogspot.com/">İyiBirBlog</a>

Kırmızı kod: "Bir link seçin" yazısını istediğiniz gibi değiştirebilirsiniz. İzleyicelerinize bağlantılara tıklaması için bir mesaj bırakabilirsiniz.
Yeşil Kod: Yeşi kodla verdiğim yerlere istediğiniz bağlantıyı verebilirsiniz. Yanındaki isim yazan yere de bağlantınızın ismini giriniz.

Blog Yorumlarına Profil Resmi (Avatar ) Ekleme

2009-11-02T07:45:00.000-08:00

1.
Yerleşim--HTML'yi Düzenle---Widget Şablonlarını Genişlet

2.
ctrl+f ile
<dl id='comments-block'>
kodunu bulup
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
kodu ile değişiyoruz.

3.
<a expr:name='data:comment.anchorName'/>
kodunu alttaki kod ile değişip kaydediyoruz.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Böylece yorumlarınızda avatarlar gözükecektir. Eğer avatarların boyutlarını ayarlamak isterseniz yukarıdaki kodda verilen aşağıdaki renkli bölüm üzerinde oynamanız yeterli olacaktır.

<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>

Sekmeli Navigasyon Menü Yapımı

2009-10-31T16:35:00.000-07:00

1. Yerleşim--->Html Düzenle-- diyerek ctrl+f ile ]]></b:skin> kodunun hemen alt satırına veya </head> kodunu hemen üst satırına alttaki kodu ekliyoruz.

Not:

dosyalarını ileride sorun yaşamamak için kendi hosting sitenize yükleyiniz.

2. Yerleşim--> Sayfa Öğeleri--> Gadget Ekle--> Html JavaScript diyerek alttaki kodu ekliyoruz.

<div class='widget' id='tabvanilla'>

<ul class='tabnav'>
<li><a href='#popular'>Popüler Yazılar</a></li>
<li><a href='#recent'>Duyuru</a></li>
<li><a href='#featured'>Son Yorumlar</a></li>
</ul>

<div class='tabdiv' id='popular'>
<ul>
<li><a href='#'>Resimli Son Yazılar Eklentisi</a></li>
<li><a href='#'>Benzer Yazılar Eklentisi (Türkçe karakter Destekli)</a></li>
<li><a href='#'>Verilen Linklere Açıklama Ekleme</a></li>
<li><a href='#'>Yazı Başlık Kutusu/ Post Box</a></li>
<li><a href='#'>Blogger Slideshow (Manşet Atma)</a></li>
<li><a href='#'>jQuery Feed Menü Yapımı</a></li>
<li><a href='#'>Blogger Yazılarına Kod Ekleme</a></li>
<li><a href='#'>Meta Tag Nedir? Nasıl Eklenir?</a></li>
<li><a href='#'>5 Çeşit Açılır Menü</a></li>
<li><a href='#'>Blogger Resimleriniz Mouse İle Canlansın</a></li>
</ul>
</div>

<div class='tabdiv' id='recent'>
<p>Bu bir denemedir.</p>
</div>

<div class='tabdiv' id='featured'>
<ul>
<li><a href='#'>Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href='#'>Are We Alone? A Look Into Space</a></li>
</ul>
</div>

</div>

Blogger Footer Alanına Sütun Ekleme

2009-10-31T16:24:00.000-07:00

Yerleşim > HTML'yi Düzenle'ye tıklayın. Ve "Ctrl+F" yardımı ile alttaki kodu aratın.

<b:section class='footer' id='footer'/>

Bulmuş olduğunuz bu kodun yerine alttaki kodu yapıştırın;

Yukarıdaki kodu ekledikten sonra sayfanızı şablonu görüntüleyerek sorun olup olmadığını kontrol edin. Eğer herhangi bir sorun yoksa sonraki adıma geçin.

Temanızda ]]></b:skin> kodunu bulun ve hemen üstüne alltaki kodu yapıştırın ve şablonunuzu kaydedin.

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

BLOG’UMUZA ARKA PLAN RESMİ YERLEŞTİRMEK

2009-10-31T15:53:00.000-07:00

öncelikle blogger temamizin Html düzenle kismina giriyoruz..Arka plana resim eklemek için..

body {

yazan yerin altına

background-image: url(arka plan linki);

ekliyoruz..

eğer yandaki kolonlarin arka planina resim eklemek istiyorsanız ayni şekilde

#sidebar-wrapper {

kodunun altına

background-image: url(arka plan linki);

kodu ekliyoruz..

yazilarinizin olduğu yere arka plan içinde;

#main-wrapper {

kodunun altına

background-image: url(arka plan linki);

kodu ekliyoruz..Kolay gelsin..sadece arka plan linki yazan yere internetten bulduğunuz veya sizin kendinize özel arka plan linkini yapıştırımanız yeterli.

yazı boyutunu değiştirmek

2009-10-09T23:45:00.001-07:00

Eğer okuyucularınız yazılarınızı büyük veya küçük buluyorsa bu kodlar sayesinde okuyucunuz yazı boyutunu istediği gibi değiştirebilir.

aşağıdaki kodları HTML/JavaScript (Yerleşim--->Sayfa Öğeleri--->Gadget Ekle--->HTML/JavaScript)'e kopyalıyoruz:

Metin Boyutu Değiştirmek <br/>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"> <span > Küçük </ span> </ a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"> <span style="font-size: x-small;"> Orta </ strong> < / a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"> <span > Büyük </ strong> </ a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"> <span style="font-size: large;"> Daha Büyük </ strong> </ a >
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"> <span > En büyük </ span> </ a>

otomatik kayan yazı

2009-10-09T23:10:00.001-07:00

aşağıdaki kodları HTML/JavaScript (Yerleşim--->Sayfa Öğeleri--->Gadget Ekle--->HTML/JavaScript)'e kopyalıyoruz:

<div class="textwidget"> <marquee direction ="up"width ="105"onmouseover = "this.stop ()" = "2" onmouseout = "this.start ()" height ="200" scrollamountalign = "left">
iyibirblog 1
iyibirblog 2
iyibirblog 3
iyibirblog 4
iyibirblog 5
</ marquee> </ div>

lacivert renkle yazılan yerleri silip yerine istediğiniz şeyleri yazın.
kırmızı renkle yazılanlarda yükseklik ve genişliğidir.

bloglarda kota arttırma

2009-10-07T14:39:00.001-07:00

sitelerinde çok resim kullanan blog kullanıcılarını en büyük sıkıntılarından biride 1 gb'lık sınırlamadır.

aslında blog kullanıcılarının yüklediği her resim otomatik olarak picasa adresine yüklenir. picasa yazısını tıklayarak resimlerinizi burdan kontrol edebilirsiniz.

Picasa ve 1 GB Yükleme Alanı
Picasa'nın vermiş olduğu 1 GB'lık resim yükleme alanının ekonomik olarak kullanılması için blogger otomatik olarak kullanıcılarına 3 seçenek sunmaktadır. Bunlar;

- Küçük (genişlik; 200px)
- Orta (genişlik; 320px)
- Büyük (genişlik; 400px)

picasa kullanıcılarına yıllık

10 GB (yıllık $20.00 USD)

40 GB (yıllık $75.00 USD)

150 GB (yıllık $250.00 USD)

400 GB (yıllık $500.00 USD)

fiyata depolama alanı sunmaktadır.

yedeği alınan bloğu geri yükleme

2009-10-07T14:17:00.001-07:00

yedeğini aldığınız bloğunuzu yeniden yüklemek isteyenler veya bloğunun içeriğini başka bir bloğa yüklemek isteyen arkadaşlar için resimli anlatım.

öncelikle bloğunuza giriş yapı ayarlar sekmesini tıklayın.

daha sonra resimdede görüldüğü gibi bloğu içe aktar sekmesini tıklayın.

resimleri büyütmek için üzerine tıklayın.

en sonundada 1 nolu nolu kısımda gözat seçeneğine tıklayın ve bloğunuzun yedeğini aldığınız konumu seçin. örneğin yedeğini aldığınız bloğunuzun ismi iyibirblog olsun yedeğinizde belgelerimde olsun götat seçeneğinden belgelerime girip iyibirblog dosyasını seçeriz. 2 nolu kısımda kelime doğrulamadır. 3 nolu seçenekte isteğe bağlıdır. kutuyu işaretlerseniz yüklediğiniz içeriklerin hepsi otomatik olarak yayınlanacak.

bloğunuzun yedeğini almayı öğrenmek için tıklayın.

iyibirblog.blogspot.com

blog silmek

2009-10-07T14:05:00.001-07:00

bloğunu silmek isteyen arkadaşlar için resimli anlatım.

resimleri büyütmek için üzerine tıklayın.

bloğun yedeğini alma

2009-10-07T13:57:00.001-07:00

blogspotunuzun herhangi bir sorunda konularınızın kaybolmasını istemiyorsanız ayda bir veya hergün yediğini alabilirsiniz. üstelik tek tıklamayla.

öncelikle bloğunuza giriş yapın.

ayarlar sekmesini tıklayın.

sonra bloğu dışarı aktar seçeneğini tıklayın. Resmi büyütmek için üzerine tıklayın.

sonra bloğu yükle seçeneğini tıklayın. ve bloğunuzdaki konular artık harddiskinizde güvende ve sorun halinde bloğunuzun yedeğini harddiskinizden yüklersiniz.

yedeği alınan bloğu geri yükleme resimli anlatım için tıklayın.

bloga reklam kodu ve html kodu eklemek ''resimli anlatım''

2009-10-07T13:39:00.001-07:00

bloğumuza reklam kodları veya html kodları eklemek isteyen arkadaşlar için resimli anlatım.

önce bloğumuza giriş yapıyoruz daha sonra yukarıdaki resimde görüldüğü gibi yerleşim seçeneğini tıklıyoruz.

sonra gadget ekle seçeneğini tıklıyoruz. gadget seçenekleri temaya göre farlı sayıda ve farklı yerde olabilir.

daha sonra çıkan kududa html/javascript seçeneğini tıklıyoruz.

ve sonrada yapıştırmak istediğimiz kodu yapıştırıyoruz. ve kaydedip çıkıyoruz.

resimlerin büyük halini görmek için resmin üstüne gelip resmi tıklayın.

http://iyibirblog.blogspot.com/

Yorum Penceresini Boyutlandırma

2009-10-07T11:42:00.001-07:00

Yorum penceresinin küçüklüğünden şikayet edenler için yorum penceresinin alanını büyütmek.

şimdi aşağıdaki adımları izleyin.

Kumanda Paneli > Yerleşim > HTML Düzenle yolunu izleyin ve Widget Şablonlarını Genişlet kutucuğuna tıklayın.

Ardından temaznıda alttaki kodu CTRL+F tuşları yardımı ile bulun;

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>

Yukarıdaki kodda yer alan yükseklik (height) ve genişlik (width) değerlerini istediğiniz şekilde değiştirebilirsiniz.

Resimli Son Yazılar Eklentisi

2009-09-26T17:08:00.001-07:00

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://img4.imageshack.us/img4/7205/038qii.jpg";
imgr[1] = "http://img14.imageshack.us/img14/3585/075r.jpg";
imgr[2] = "http://img4.imageshack.us/img4/1585/057pjl.jpg";
imgr[3] = "http://img4.imageshack.us/img4/1638/026ciq.jpg";
imgr[4] = "http://img4.imageshack.us/img4/8459/080o.jpg";

showRandomImg = true;


tablewidth = 220;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 50;
imgheight = 50;
fntsize = 12;
acolor = "#666";
aBold = true;

icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://iyibirblog.blogspot.com/";

</script>
<script src="http://www.hotlinkfiles.com/files/2372421_o45gf/sonyazilar_iyibirblog.js]sonyazilar_iyibirblog.js" type="text/javascript"></script>

"Yeşil koda kendi blogunuzun ismini yazıyorsunuz. Kırmızı koda kesinlikle dokunmuyorsunuz yoksa çalışmaz."
Kendi blogunuza göre düzenlemek hiç de zor değil. Sadece yukarıdaki kodları temanıza göre ayarlamanız yeterli. Aşağıdaki kodların hangi işlevi yerine getirdiğini açıkladım temanıza göre düzenleyebilirsiniz...

imgr[0] = …; Buradaki yazınızda resim yoksa bu resimler devreye girer ve sayfanız her yenilendiğinde 5 resimden biri rastgele gözükür.. Bu bölgelere istediğiniz resimleri ekleyebilirsiniz.
tablewidth = 220; Eklentinin genişliği, temanıza göre değiştirin.
borderColor = “#ffffff”; Sınır rengi.
bgTD = “#ffffff”; Arkaplan rengi.
imgwidth = 50; Resmin genişliği.
imgheight = 50; Resmin yüksekliği.
fntsize = 12; Yazı boyutu.
acolor = “#666″; Yazı rengi.
showPostDate = false; Tarihi göstermek istiyorsanız false yerine "true" giriniz
summaryPost = 50; Yazınızın özetinden kaö karekter göstermesini isterseniz onu yazın.
summaryFontsize = 11; Yazı Özetinin boyutu
summaryColor = “#666″; Yazı özetinin rengi
numposts = 5; Gösterşlmesini istediğiniz yazı sayısı...

Bu kadar basit bu kodları Yerleşim---->Sayfa Öğeleri---->Gatget Ekle---->Html/Javascript içine düzenledikten sonra kopyalayabilirsiniz...

Blogger Yorum Numaralandırma

2009-09-26T03:09:00.001-07:00

Kurulum : İlk önce blogger hesabıza giriş yaptıktan sonra html düzenle kısmına geliyoruz ve widget sablonunu genişletiyoruz..Ha bide yedek alalım ne olur ne olmaz..
Sonra şu kodu buluyoruz..

<dl id='comments-block'>

Bu kodun hemen Altına şu kodu yapıştırıyoruz.

<script type='text/javascript'>var CommentsCounter=0;</script>

Daha sonrada bu kodu bulalım..

<b:loop values='data:post.comments' var='comment'>

Bu kodun altında bulununa

<*div (yıldı yok) yada class ile devam eden kodu bulup ikisinin arasına şu kodu yapıştıruyoruz..Bu ikisinin arasında sadece boşluk var yani birbirini takip ediyor..Bu kodu aralarına yapıştırın..

style='clear: both;'

Daha sonra bu kodu buluyoruz...

<data:commentPostedByMsg/>

Ve altına şu kodu yapıştırıp çıkıyoruz...

<span class='numberingcomments' style='float: right; font-size: 20px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

bu işlemlerden sonra kaydedip çıkın.

TemanizaTab Navigasyon Menüsü Eklemek

2009-09-24T12:40:00.001-07:00

Size anlatacagim konu ise yukardaki resimdeki gibi temaniza menü yapma.

Örnek menüleri görmek icin tiklayin.
Menüleri indirin.

Simdi anlatima basliyalim

menü dosyasini indirdikten sonra dosyanin icinde Menus.htm diye dosya vardir o dosyayi sag tiklayarak bir editor ile aciyoruz

sonra örnek menülerde begendigimiz menünün css kodunu buluyoruz ve kopyaliyoruz

Blogger'a giriyoruz

Yerlesim / HTML’yi Düzenle ve Widget Sablonlarini Genisleti Tikliyoruz

Assagidaki kodu buluyoruz

]]></b:skin>

Bu kodun üstüne kopyaladiginiz css kodunu yapistiriyoruz ve kodlarin icinde 2 tane "background:url" yazisi var bunlarin yaninda resim linki olacak ama koymamislar sadece resimlerin isimlerini yazmislar siz imageshack.us adresinden resimleri yükler degistirsiniz. Resimler indirdiginiz dosyanin icindedir.

şimdi menüleri yerlestirme zamani

Aşağıdaki kodu bulun.

<div id='content-wrapper'>

Bu kodun üstüne gine Menus.htm dosyasinin en assagilarinda sectiginiz menünün harfine bakarak kodumuzu aliyoruz ve yapistirip kendimize göre düzenliyoruz

Herseyi yaptiktan sonra Sablonu Kaydet'e tiklayip isimiz bitmis oluyor.

Sütunlarınız sadece ana sayfada görünsün.

2009-09-24T12:39:00.001-07:00

Blogunuzda kullandığınız sütunların veya bazı eklentilerin sadece anasayfanızda veya sadece yazı sayfalarına görünmesini ister miydiniz?
Yalnızca ana sayfa

Ana sayfada yayımlanmasını istediğiniz öğeyi şu kodlar arasına alın.
<b:if cond='data:blog.pageType == "item"'>

</b:if>
Yalnızca yazı sayfası

<b:if cond='data:blog.pageType != "item"'>

</b:if>
İki kod arasındaki fark sadece = yerine ! işaretinin gelmesidir.
Bunları koşullu da kullanabilirsiniz. Şöyle ki:

<b:if cond='data:blog.pageType == "item"'>
ana sayfada görünecek öğe
<b:else/>
eğer anasayfa değilse bunu gösterir.
</b:if>

Yukarıdakiler XML temalar içindi. Klasik temalar için yapmak isterseniz şu kodları kullanmalısınız.
Ana sayfa ve arşiv sayfası

<MainOrArchivePage>

</MainOrArchivePage>
Yazı sayfaları


<ItemPage>

</ItemPage>