En iyi ve en yeni blogger temaları Tam Bir Blogda

Blogspot için her gün yepyeni profesyonel temalar hazırlanıyor. Bunları sizlere sunmaya devam ediyorum.
En iyi ve en yeni blogger temaları Tam Bir Blogda

Photoshop hiç bu kadar kolay olmamıştı.

Resimlerinize efekt uygulamak için saatlerce uğraşmanıza gerek kalmadı.Photofunia size bunu tek tıkla sunuyor.Yapmanız gereken tek şey resmi upload etmek. Tam Bir Blog logosuyla yaptığım çalışmalarla sitenin ne kadar eğlenceli olduğunu görebilirsiniz.
Photoshop hiç bu kadar kolay olmamıştı.

Blogger İpuçları ve Önemli Noktaları

Daha iyi bir blog için neler yapabilirsiniz? Tüm ince noktalar,hileler, yeni ve kullanışlı araçlar...
Blogger İpuçları ve Önemli Noktaları

Blogger Resimli Son Yazılar Eklentisi

Bu eklenti sayesinde son yazılarınızı resimleri ve yorum sayısıyla birlikte blogunuzda gösterebileceksiniz. Hem kullanışlı hem de görsel açıdan zengin ve tasarımınıza göre ayarlarıyla oynayabilirsiniz:
Blogger Resimli Son Yazılar Eklentisi

Blogger'a Smile Ekleyin.. Yazılarınız Şenlensin:D

Blogger'da çok smile kullanmak istemez misin. Yalnızca Firefoxta kullanabileceğiniz bu eklenti sayesinde artık yazılarınız daha renkli, daha sevimli...
Bloggera Smile Ekleyin.. Yazılarınız Şenlensin:D
blogger ipuçları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
blogger ipuçları etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Bloggera Resimleri Daha Büyük Geniş Nasıl Yükleriz? "HQ"

Bloggerda resimleri yüklediğimizde üç boyut var büyük,küçük ve orta boyutlarda olmak üzere. Resmi büyük yüklediğimizde bile blogger otomatik olarak resmi küçültüp önizleme boyutuna getiriyor. Bu boyutlar da maalesef temalarımızda küçük kalıyor.
İşte bunu mümkün kılan bir ipucu açıklayacağım.
Yüklediğimiz resimlerin daha öne çıkmasını ve temanıza daha uyumlu olmasını kendi belirlediğiniz genişliklerde yazılarınızın içinde gözükmesini istiyorsanız bu yöntem tam size göre.
Resmimizin yazı içerisinde normaldeki büyük görünümü:


Bu hileyi yaptıktan sonra resmimizin görünümü:



Önce htmlyi düzenle kısmına giriyoruz ve yazı alanımızın genişliğine bakıyoruz. Eğer klasik şablon kullanıyorsunuz main-wrapper veya main bölümünde bulabilirsiniz yazı alanı genişliğinizi. Bulmakta zorluk çektiyseniz hileyi uyguladıktan sonra temanıza göre genişliğiyle oynayıp düzeltebilirsiniz.
Koldarımızın içerisinden aşağıdaki kodu buluyoruz.

]]></b:skin>

Kodu bulduysak hemen üstüne aşağıdaki kodlarımızı ekliyoruz:

img {
max-width: 600px;
width: expression(this.width > 600 ? 600: true);
}

***Lacivert ile gösterilen sayılar resminizin büyük boyutta göstermek istediğiniz genişliğini vermektedir. İlk adımda bulduğunuz genişlik şu anda işe yaramaktadır. Örneğin yazı alannızın genişliğini 610 bulduysanız resim boyutunu 600 yaparak temanızda daha güzel durmasını sağlayabilirsiniz.
Adımları tamamladıktan sonra şablonumuzu kaydedebiliriz. Şimdi yüklediğimiz resmi büyük boyutta göstermeye geldi.

Resimlerimizi normal yüklediğimiz gibi yükleyelim. Resmimizi yükledikten sonra yazı içerisinde HTML'yi Düzenle kısmına gelip aşağıdaki kodlara benze kodları göreceksiniz. Bu kodlar yüklediğimiz resmin kodlarıdır.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpRH6sIvMBKKat5jx8Wa4oTApDbPUxkM1yaVRvmqhm07D38ZcnBq8A3ihTXKNHpD9GxS4CdvhxDOyyen0QmhetQszlmymX7v1i4A3fsQv4bbnxzYUt50CxZOqH5S8x_7uUTdcqsgjBWgl/s800/Image3.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 291px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpRH6sIvMBKKat5jx8Wa4oTApDbPUxkM1yaVRvmqhm07D38ZcnBq8A3ihTXKNHpD9GxS4CdvhxDOyyen0QmhetQszlmymX7v1i4A3fsQv4bbnxzYUt50CxZOqH5S8x_7uUTdcqsgjBWgl/s400/Image3.png" alt="" id="BLOGGER_PHOTO_ID_5356425568508049202" border="0" /></a>

Resmi daha büyük boyutta yazı içerisinde göstermek için artık tek yapmanız gereken yukarıdaki kodlarda mor kodları silmek ve mavi s400 yerine s800 yazmak.

Aşağıdaki örneği inceleyebilirsiniz:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpRH6sIvMBKKat5jx8Wa4oTApDbPUxkM1yaVRvmqhm07D38ZcnBq8A3ihTXKNHpD9GxS4CdvhxDOyyen0QmhetQszlmymX7v1i4A3fsQv4bbnxzYUt50CxZOqH5S8x_7uUTdcqsgjBWgl/s1600-h/Image3.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpRH6sIvMBKKat5jx8Wa4oTApDbPUxkM1yaVRvmqhm07D38ZcnBq8A3ihTXKNHpD9GxS4CdvhxDOyyen0QmhetQszlmymX7v1i4A3fsQv4bbnxzYUt50CxZOqH5S8x_7uUTdcqsgjBWgl/s800/Image3.png" alt="" id="BLOGGER_PHOTO_ID_5356425568508049202" border="0" /></a>

Evet artık yazı içerisinde büyük ve ferah resimler sergileyebileceksiniz. Anlayamadığınız bir yer olursa yardımcı olurum yorumlara sorununuzu yazmanız yeterli.
Kaynak: bloggertricks.com
9 Temmuz 2009 Perşembe

Birbirinden güzel Sıralama/Rank Widgetları

Blogumuzun içeriğini ne kadar sağlam tutmaya çalışsak da blogger ziyaretçilere ve sıralama sitelerindeki yerlerini de yükseltmeye çalışırlar. Bu siteleri her gün takip etmektense bunları tek bir eklenti sayesinde blogunuzda görmeniz mümkün. Rankwidget size bunu sağlıyor. Yahoo Search, Alexa, Technorati ve Google sıralamalarının yer aldığı 4 farklı eklentiyi blogunuza ekleyebilirsiniz.Her sıralama sitesi için farklı animasyonlar mevcut. Blogunuzun temasına en uygun olanını kendiniz seçebilirsiniz.
İşte eklentilerden örnekler:

17 Haziran 2009 Çarşamba

Blogunuz İçin Yararlı Eklentiler - 3. Seri

Blogunuz için kullanabileceğiniz en güzel wdgetlara devam ediyoruz. 1. seriyi ve 2. seriyi incelediysek 3. seriye geçebiliriz.
9.Plugoo: Plugoo sitenizde ziyaretçilerinle bir çok cahat programını kullanarak sohbet edebileceğiniz bir eklenti. Eklenti Msn Messenger,Yahoo! Messenger,AIM,Google Talk,Jabber ve ICQ'yu desteklemektedir. Geniş bir online iletişim hattı isteyenlerin  bu eklenti vazgeçilmezleri olacak.
 

10.Radar Url: Radar url sitenizle ilgili istatistikleri anında gösterir.
 
11 Shoutmix: Blogunuzdan anlık mesajlaşmayı sağlayan bir eklentidir.
12 Spring widgets: Spring widgets sayesinde bir çok cool eklentiye sahip olabilirsiniz...
16 Haziran 2009 Salı

Blogunuz İçin Yararlı Eklentiler - 2. Seri

. Blogger temalarımız daha cazip kılan ve bloglarımızı bir adım daha öte taşıyan eklentilerdir.  Eklentilerin 1. serisini tamamladıktan sonra 2. seriye geçebiliriz

5.Feedwind: Feedwin bir RSS widgetıdır. Yazdığınız her konuyu RSS sayesinde  blogunuza taşıyabilirsiniz. Feed Url kısmını kendi Url adresinizle değiştirmeniz gerekmektedir: http://tambirblog.blogspot.com/feeds/posts/default





6.gwt-ext:: Güçlü bir eklenti kütüphanesidir.


 

7.magtoo: Do you MagShow? sloganlı site... Panoramik fotoğraflar,slide showlar hazırlayıp sunabileceğiniz eklentiler mevcut.  Slide showlar için  14 farkllı efekt mevcut. Gerçekten bu siteyi sevdim. Fotoğraf çekmeyi ve panoramik fotoğraflardan hoşlananlar için birebir:))


8. Monitter: Monitter bir twitter aracıdır. Bu araç twitterda sizin hakkınızda neler söylendiğini, twitterdaki yazılarınızı gösterir. Arama kutularına isminizi/blogunuzu/kullanıcı adınızı  yazarak sonuçlara ulaşabilirsini.

 

 
14 Haziran 2009 Pazar

Blogunuz İçin Yararlı Eklentiler - 1. Seri

Bunları yayınlamazsam olmazdı. Bugün bildirgeç'te gördüğüm bu listeyi sizlerle paylaşıyorum tamamen kendi yorumlarımla.
Blogunuzda kullanabileceğiniz 16 eklenti. Bu widgetlar sayesinde bloglarınızı daha profesyonel ve kullanışlı hale getirebilirsiniz. Liste uzun hemen başlayalım....

1.Blipback :Blogunuza video mesajları bırakabileceğiniz mükemmel bir eklenti. Bu eklenti sayesinde artık isteyen herkes blogunda yorumlarını vdeo ile bırakabilecek.

2.Blogupp : Bu eklenti blogunuzun reklamına yardımcı olur ve blogunuza doğru ziyaretçilerin gelmesini sağlar. Aynı zman ücretsiz bir blog dizini vardır. Üyelik istememektedir.
3.Clearspring: İçeriğiniz Her Yerde.... Blogunuzun içeriğini sosyal ağ sitelerine taşımanın en hızlı yolu.Bu eklentiyle yazılarınız binlerce kişiye ulaşabilecek.
 4.Eurekster swicki: Blogunuza özel arama motoru oluşturma zamanı geldi diye mi düşünüyorsunuz. O zaman bu eklenti tam size göre.Build new swicki butonuna basarark kendinize sitenize özel  arama motoru oluşturmaya başlayabilirsiniz. Eklentiyle birlikte istediğiniz etiketler de listelenmektedir.

Listenin devamını daha sonra inceleyeceğim... Eklentilerin keyfini çıkarın:))

Banner Snack Online Banner Yapımı

Profesyonel bannerler hazırlamak için artık usta ellere ihtiyacınız olmayabilir. Bir kaç tıklamayla profesyonel görünüme sahip flash bannerler hazırlayabileceksiniz.

flash banner site banner snack
Online flash banner yapım sitesiyle bugün tanışma fırsatı buldum. Muhteşem özellikleri var. Banner yapımında sıkıntı çekenler için çok kulanışlı ve kolay kullanımı olan bir site. Bence şu ana kadar yapılan en iyi online flash banner hazırlama aracı diyebilirim. Üstelik ücretsiz.




*Online olarak banner yapımına izin vermektedir.
*Kolay ve anlaşılır kullanıma sahip.
*Bedava, sadece reklam kaldırmak için ücret talep ediyorlar. Ayrıca premium hesap oluşturarak daha fazla özellikten de yararlanabilirsiniz.
*Bir çok sosyal ağ sitesinde yaptığınız bannerleri yayınlama imkanı sağlıyor.

Profesyonnelere taş çıkarmak istiyorsanız Banner Snackle en yakın zamanda siz de tanışmalısınız. Bannerdeki ufak reklamı silmek için sadece 9$ ödemeniz gerekiyor.
Tam Bir Blog'un önerisidir:)))
13 Haziran 2009 Cumartesi

Blogunuzu Hala Google'a Kaydettirmediniz Mi?

Blogunuz Google sonuçlarında çıkmıyor mu? Peki Google'a blogunuzu kaydettirdiniz mi? Yeni bloglamaya başlayan bir çok arkadaş Googleda hemen görünmek istemektedir ama unutulan küçük bir ayrıntı var Google'a blogunu kaydettirmek. Aslında Google sizi buluyor (özellikle blogspot kullanıcıları bu konuda çok karlı) ama daha çabuk sonuç almak isteyebilirsiniz.

Dünyanın en çok kullanılan arama motoru Google, webmasterlar için de ziyaretçi makinesidir. Blogların çoğuna büyük bir ziyaretçi Google tarafından gelmektedir. Siz de bloglamaya yeni başladıysanız blogunuzu öncelikle Google'a kaydederek büyük bir aşama kaydedebilirsiniz. Blogunuzun Google Blog Search sonuçlarında yer almasını istiyorsanız buraya ve sitenizin Google kaydettrilmesini de istiyorsanız buraya tıklayıp kayıt işlemini yapabilirsiniz.
9 Haziran 2009 Salı

Blogger Paylaşmak Güzeldir Sosyal Ağ Butonları (İlk Kez Türkçe)

!YENİLENDİ! TÜRKÇE OLARAK İLK DEFA TAM BİR BLOG FARKIYLA




İnternette gezinirken çok güzel bir yazıya rastladım sosyal bookmarklarla ilgili.Hemen bloguma eklemiştim. Sizlerden de gelen yoğun talep üzerine bu yazıyı yazıyorum. Orjinalinde "paylaşmak seksidir" yazısı var ama ben "paylaşmak güzeldir" olarak çevirdim. Stil sahibi ve seksi bir eklenti...Ekran görüntüsü yukarıdaki gibidir.
Bu eklentiyi önceden yazmıştım, yanlışlıkla yakın tarihe alınca hemen yayına girdi. Kontrol etmediğimden dolayı da hatalar olmuş.
Ben de bunun Türkçesini paylaşarak kendimi affettirebilirim diye düşündüm. Türkçe sosyal ağ butonlarını güle güle kullanın::))
***Uzun diye gözünüz korkmasın sadece kodlar biraz fazla yer kaplıyor yapmanız gerekn sadece iki aşama var...


KODLARA GİRİŞ:

1.Yerleşim ----> HTMLyi Düzenle ----> (Widget şablonunu genişletin.)

Css Kodlarını Yükleme
1. Aşağıdaki kodu buluyoruz (CTRL+F) :
]]></b:skin>

2.Bu kodu bulduktan sonra hemen altına aşağıdaki kodları yapıştırıyoruz:


<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://img394.imageshack.us/img394/9527/paylasmakgl.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://img394.imageshack.us/img394/9527/paylasmakgl.png') no-repeat right bottom;
position:absolute;
right:-17px;
}
div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover, .sexy-tbb, .sexy-tbb:hover {
background:url('http://img30.imageshack.us/img30/3131/sexysprite.png') no-repeat !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}

.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}
.sexy-tbb {
background-position:-250px top !important;
}
.sexy-tbb:hover {
background-position:-250px bottom !important;
}
</style>








Kodları eklediysek Css ile işimiz bitti şimdi Html kısmına geçelim:

Html Kodlarını Yükleme:
1. Şimdi aşağıdaki kodu bulalım:

<data:post.body/>

Dikkat:

 <data:post.body/> , bu koddan blogunuzda çok fazla olabilir. Siz
bu kodun en sonuncusunu buluyorsunuz.En son <data:post.body/>
kodunu eklentinin yazılarınızın altına eklenmesini sağlayacaktır.
http://tambirblog.blogspot.com/


2. Şimdi aşağıdaki kodları <data:post.body/>; kodundan önce yapıştırıyoruz. Ama her temaya göre değişiyor. Benim temam da bu koddan sonra çalıştı. Lütfen şablonu kaydetmeden önce önizleme yapın her ikisini de deneyiniz.

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>


<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/tambirblog' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>


<li class='sexy-tbb'><a href='http://tambirblog.blogspot.com/' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>


3.Eklentiyi eğer çalıştırmayı başardıysanız, kodların içinde bulunan FEED BURNER IDNIZ
bölümüne kendi feedburner adresinizi giriniz.
4.Şablonu sonunda kaydediyoruz. İşte bu güzel butonlar artık sizin blogunuzda...
Lütfen eklentinin kredisiyle (http://tambirblog.blogspot.com/) oynamyınız, emeğe saygı duyduğunuz sürece paylaşmaya devam edeceğim...

Paylaşmak Güzeldir!



Çalışmanın Türkçe versiyonu "Tam Bir Blog" 'a aittir. Tüm hakları cc lisansıyla korunmaktadır. Türkçe versiyonunu kullanırken lütfen krediyle oynamayınız!. Yazının orjinali bir çok yabancı blog tarafından kopyalanmış. O yüzden ilk yayınlayanın kim olduğunu bulamadım. Burada da onlardan bir tanesi....

Creative Commons License
Blogger Paylaşmak Güzeldir Sosyal Ağ Butonları (İlk Kez Türkçe) by Blogger Paylaşmak Güzeldir Sosyal Ağ Butonları (İlk Kez Türkçe) is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.
Based on a work at tambirblog.blogspot.com.
Permissions beyond the scope of this license may be available at http://tambirblog.blogspot.com/.
31 Mayıs 2009 Pazar

Bloggera Sosyal Bookmark Butonları Ekleyin


***Yepyeni Türkçe Versiyonuyla Tam Bir Blog'da...
Lütfen bu yazıya ışınlanın...


30 Mayıs 2009 Cumartesi

Blogger Resimli Rastgele Yazılar Eklentisi

LinkWithin Resimli Rastgele Yazılar Eklentisi Artık Türkçe!!!

Rastgele yazılar eklentisi geçmişte yazdığınız yazılarınızın, güncelliğini korumasını sağlar ve ziyaretçilerinizin sitenizde daha fazla zaman geçirmesine yardımcı olur.

rastgele yazılar eklentisi linkwithin
Link Within sitesinin geliştirmiş olduğu eklentiyle artık her yazınızın altına resimli olarak tamamen rastgele yazılarınızı gösterebileceksiniz. Böylece eski yazılarınızın çöpe gitmesine engel olabileceksiniz. Zarif ve göze batmayan tasarımıyla şablonunuzla uyum içinde bir eklenti. Tamamen ücretsiz olması da cabası:))

Yüklemesi de çok kolay. Linkwithin sitesini ziyaret ediyorsunuz email,blog link ve platform seçeneklerini doldurup Get Widget! butonuna basıyoruz. Bu kadar... Kesinlikle yazılarınızın okunma sayısınızı arttıracak bir eklenti. Tam bir blog'un tavsiyesidir...
28 Mayıs 2009 Perşembe

Blogger Otomatik Devamını Oku Bağlantısı-2

blogger otomatik devamını oku bağlantısı
Otomatik devamını oku eklentisi tüm blogger kullanıcıları çok sevdi. Fakat 1. eklentide bazı sorunlar çıkmıştı. Otomatik devamını oku artık yazılarımıza tek tek kod eklemek zorunda kalmayacağımız mükemmel bir eklenti. Artık sadece yazınızı yazdıktan sonra yayınla tuşuna basmanız yeterli. Ana sayfanızda resminiz ve devamını oku bağlantınız otomatik olarak gözükecektir. Eklentinin önizlemesi:

blogger otomatik devamını oku tambirblog

Şimdi bu eklentiyi blogumuza nasıl uygulayacağımıza geçelim.
Bildiğimiz gibi yayınladığım eklentilerin çoğunda javascript dosyaları var. Dosyalarımızın blogumuzda daha hızlı çalışmasını istiyorsak bu dosyaları kendi hostumuza yükmemiz gerekiyor. (Hotlinks, 110 mb iyi birer alternatif). Bu dosyalaı önce buradan indiriyoruz. Daha sonra ücretsiz hostlarımızdan birine yükleyip linklerimizi bir yere kaydediyoruz.

Şimdi Blogger'a giriş yapıyoruz. Yerleşim > Html'yi Düzenle ve Widget Şablonlarını genişletin.

Html kodlarımızdan </head> kodunu buluyoruz. (Ctrl+f tuş kombinasyonuyla arama yapabilirsiniz.) Kodu bulduysak aşağıdaki kod dizisini bulduğumuz head kodundan önce yapıştırıyoruz.




<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://js_dosyasını_yüklediğiniz_hostu/devamini_oku_tambirblog.js' type='text/javascript'/>

Kırmızı renkli linki siliyoruz ve yüklediğimiz .js dosyasının Url'sini yapıştırıyoruz. Aksi halde eklenti çalışmayacaktır. (javascript yüklerken sorun yaşayanlar için ben bir tane yükledim. İşte bu linki kırmızı kodla yer değiştirebilirsiniz. Yalnız dikkat etmeniz gereken bir konu var bu linki kullanan birden fazla site olunca doğal olarak siteniz çok az yavaşlayacaktır.)

Yukarıdaki kodları kendi temamıza göre düzenleyebiliriz.

summary_noimg = 430; resimsiz yazınızın boyu;
summary_img = 340; resimli yazınızın boyu;
img_thumb_height = 100; ana sayfada gözükecek resmin boyu;
img_thumb_width = 120; ana sayfada gözükecek resmin genişliği;

Şimdi <data:post.body/> kodu buluyoruz. Tamamızda bu koddan birden fazla olabilir. Siz en son kodu buluyorsunuz.

Ve aşağıdaki kodla yer değiştiriyorsunuz.


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Devamını oku "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


Temamızı şimdi önizlemeye alıyoruz. Eğer eklenti temamızda sorunsuz çalıştıysa kaydediyoruz. Artık devamını oku eklentisinin keyfini çıkarabilirsiniz:D


Otomatik devamını oku eklentisi-1'i kullanıp sorun yaşayan arkadaşlar, temanızda eski kodlar olduğu için html düzenle kısmından eski kodları temizlemenizde yarar var.

15 Mayıs 2009 Cuma

Zinmag Primus Resimli Manşet/Slide Yapımı

Zinmag Primus, bildiğimiz gibi bu senenin en beğenilen blogger temalrından oldu. Hem profesyonelliği hem de sahip olduğu eklentilerle bloggerı bir adım daha öteye taşıyan bir temaydı. Bu temanın tabiiki en dikkat çeken kısmı resimli manşet/slide show menüsüydü. Bir çok arkadaş bana nasıl diğer şablonlara uyarlayacağımızı da sormuştu. "Oom" bunu bizler için yapmış bulunuyor. Bizde ona değerli bilgileri için teşekkür ediyoruz. Slide showun nasıl olduğunu merak edenlere orjinal temadan önizleme.



1. Adım:İlk olarak şablonumuzda Html kodlarından ]]></b:skin> kodunu buluyoruz ve hemen önüne aşağıdaki kodları yapıştırıyoruz.


#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}


2. Adım: Şimdi ]></b:skin> kodundan sonra aşağıdaki kodları yapıştırıyoruz.



<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>


3. Adım: Şimdi aşağıdaki kodları arıyoruz.

<div id='header-wrapper'>
.......... ..........
......... .........
</b:section> </ b: section>


4. Adım: Header-wrapper kodunun bittiği b:section kodundan sonra aşağıdaki kodları ekliyoruz. Header-wrapper kodu temanızda bulunmayabilir, o zaman sadece header olarak da aratabilirsiniz. Yalnız temanızın yedeğini almayı unutmayın. Temayı kaydetmeden önce de önizleyin. Geniş temalar için uyumludur.



<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/resimli-son-yazlar-eklentisi.html'>Resimli Son Yazılar Eklentisi</a></h2>
<p>Bu eklenti Türkiye'de ilk kez Tam Bir Blog'da. Bu eklenti sayesinde son yazılarınızı resimleri ve yorum sayısıyla birlikte blogunuzda gösterebileceksiniz. Hem kullanışlı hem de görsel açıdan zengin ve tasarımınıza göre ayarlarıyla oynayabilirsiniz.</p>
<img alt='' src='http://img5.imageshack.us/img5/3928/resimlisonyazlartambirb.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>


Şimdi kaydediyoruz ve blogu görüntülüyoruz.
Peki nasıl düzenleyebiliriz bu kodları temamız göre? 1) Eklentinin daha hızlı çalışması için tüm javascript dosyalarını ücretsiz host sitelerine upload edebiliriz. Javascript dosyalarını buradan indirebilrisiniz.

2) Arkaplan başka bir resim mi koymak istiyorsunuz ya da farklı bir renkli bir arkaplan mı yerleştireceksiniz; yapmanız gereken tek şey kodlardan
# slider (background: url (http://img99.imageshack.us/img99/9594/slide.png); height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;)

kodunu bulup yeşil renkli linkle kendi resim Url'nizin yerini değiştirmek.

3) Slide showuna resim ve yazı eklemeye geldi sıra. 4. adımda bulunan aşağıdaki kodları farkedeceksiniz. Bu kodlar slide showdaki yazı ve resimlerinizin görünmesini sağlayacaktır. Birazdan vereceğim kodu 4. adımda istediğiniz kadar çoğaltarak birden fazla yazınızın manşette çıkmasını sağlayabilirsiniz.

<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>

Lacivet kod: yazınızın linki,
Mor kod: Yazınızın başlığı.
Yeşil kod: Yazınızın özeti.
Kırmızı kod: Slide showda gözükmesini istediğiniz resmin Urlsi.

Tekrar yinelemek istiyorum. 4. Adımda verdiğim kodlarla yalnızca slide showunuzda 3 adet yazı çıkacaktır. Siz yukarıdaki kodu 4. adımda istediğiniz kadar yapıştırarark daha fazla yazınızın manşette gözükmesini sağlayabilirsiniz.


Bugünlük bu kadar... Biraz geç de olsa yazıyı yayınlayabildim. Güle güle kullanın...
3 Mayıs 2009 Pazar

Blogger Yorumlara Avatar Ekleme

Yepyeni, mükemmel bir eklentiyle daha karşınızdayım.Blogger Gravatar Eklentisi... Bu eklentiden haberim olmasını sağlayan Savaş Çocukları'na ve eklentinin sahibi o-om'a teşekkür ederim...
Bu eklentinin ismi sanırım wordpress'te gravatar olarak geçiyor. Eklentiyi kurmadan önce MyBlogLog sitesine kayıt oluyoruz ve kayıt olduktan sonra My sites and Services bölümünden tüm kullandığımız sosyal ağ sitelerini ve websitemizi kaydettiriyoruz. Burada en önemlisi tabii ki blogger'ı kaydettirmek, avatarımızın gözükmesi için bu şart.
Peki Blogger id'mizi nasıl bulacağız?
Blogger'a giriş yaptıktan sonra profili görüntüle kısmına tıklıyoruz.
Açılan pencerede tarayıcımızda gözüken id numaramızı alıp MyBlogLog'da blogger servisine kaydediyoruz. İsterseniz add website bölümüne tıklayarak da blogunuzun MyBlogLog'da yer almasını sağlayabilirsiniz. Bu işlemleri yaptıysak artık kodlarımıza geçip yorumlara avatar ekleyebiliriz. Bu blogger için büyük bir gelişme:D
MyBlogLog sitesine nasıl blogger id kaydedilir? Resimli açıklama:
Önce profilimizdeki gülücük resmine tıklayıp profil kısmına geliyoruz ve burada change image kısmına tıklayarak avatar resmimizi yüklüyoruz.

Avatar resmini yükledikten sonra anasayfaya tekrar dönüp servisleri ve websitemizi ekliyoruz.
(Önemli olan blogger idsi elbette, websiteniz tercihinize kalmış...)



Eklentinin görünümü:


Bir dakika yazıma devam etmeden önce yazılarımı kendine mal eden arkadaşlara sesleneyim, emeğe birazcık saygı gösterin ben burada zamanımı harcayıp bir şeyler paylaşmaya çalışıyorum. Emek hırsızlığına artık bir son verin!!!

Türkiyede İlk defa Tam Bir Blog'da...:)))


Html kodları:
1. Blogger'a giriş yapıyoruz.
2.Yerleşim---->Html'yi Düzenle---->Widget şablonlarını genişlet.
3.Html kodlarımızdan </head> kodunu buluyoruz.
4. Head kodunu bulduktan sonra. Bu kodun önüne aşağıdaki kodları yapıştırıyoruz.





<script type='text/javascript'>
//<![CDATA[
/*
Merlinox and Napolux MyBlogLog Avatar Creator
created by Merlinox (blog.merlinox.com)
helped by Napolux (www.napolux.com)
turkish by TamBirBlog (http://tambirblog.blogspot.com)
version 0.1 (20061214)
version 0.2 (20061215)
compatible with all blogger blog
*/




if(typeof(myLayer)!='function'){
function myLayer (x){
//individuo l'oggetto
if(document.layers){ // browser="NN4";
lay=document.layers[x];
}
if(document.all){ // browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
}


//lo prendo da blogger
function myBlogAvatar(codiceCommento,autore,stile){
//scrivo lo span
//var myBlogSpan = "myBlog-" + codiceCommento;
//document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");
//metto tutto minuscolo perchè indexOf è case sensitive
if (autore != ""){
alt="MyBlogLog: " + autore;
myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
//myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
//myLayer(myBlogSpan).innerHTML = myBlog;
document.write(myBlog);
}
}
//]]>
</script>


5.Kodları yapıştırdıysak şimdi <b:loop values='data:post.comments' var='comment'> kodunu temamızın html kodlarında arıyoruz.
Bulduk mu? Bulduysak süper 6. adıma geçebilirsiniz.

6.Bulduğumuz kodun hemen önüne ve arkasına aşağıdaki kodları yapıştırıyoruz. http://tambirblog.blogspot.com





<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

7. Artık işimiz bitti. Temayı kaydedip çıkıyoruz ve artık yorumcularınızın avatarları var.


NOT:
*1.Tam Bir Blog, daha iyi bir blog için çalışmalarına devam ediyor sizde blogumu desteklemek istiyorsanız sidebardaki (yan menüdeki) email ile üyelik kısmında bloguma üye olabilir, sitene ekle bölümünden blogumun ufak butonunu sitenize ekleyebilir ya da destek verin bölümündeki bannerlerden 1 tanesini sitenize yerleştirebilirsiniz. Blogumu takip ettiğiniz için ve destekleriniz için binlerce kez teşekkürler:))

**2.Bu eklentiyi kumadan önce lütfen şablonunuzun yedeğini alınız. Şablonunuzun başına gelebilecek herhangi bir problemden Tam Bir Blog sorumlu değildir:)))

Temama bende bu eklentiyi kurdum. Yorumlarda avatarınızın gözükmesini istiyorsanız. Sizi MyBlogLog sitesine üye olmaya davet ediyorum...



Creative Commons License
http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html by Tam Bir Blog is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
Based on a work at tambirblog.blogspot.com.
Permissions beyond the scope of this license may be available at http://tambirblog.blogspot.com/.
28 Nisan 2009 Salı

Resimlerinize Zoom Efekti


Bugün çok güzel bir eklentiyle daha karşınızdayım. Blog yazılarınıza resim ekliyorsunuz değil mi? Peki resimlerinizin zoom efektiyle açılmalarını ister miydiniz? Zoom efekti de ne diyorsanız sizi orjinal sayfasındaki örneklere alabilirim ya da isterseniz Deneme blogumdaki Zoom Efekti yazımdaki resme tıklayıp eklentiyi kendiniz test edebilirsiniz. Bence her blogda bulunması gereken eklentilerden de bir tanesi de zoom efekt eklentisi. Resierinize hareket katmak istiyorsanız aşağıdaki kodları blogunuza uygulayabilirsiniz.

Birinci adıımımız Blogger'a giriş Yerleşim---->Html'yi Düzenle kısmına geliyoruz ve </head> kodunu bulup hemen önüne aşağıdaki kodları yapıştırıyoruz.

<script src='http://zendersto.110mb.com/FancyZoom.js' type='text/javascript'/>
<script src='http://zendersto.110mb.com/FancyZoomHTML.js' type='text/javascript'/>




Evet ikinci adımımız ise <body> kodunu bulup <body onload="setupZoom()"> koduyla değiştiriyoruz. ( <body> kodunu değiştirdiğimizi unutmuyoruz. İlerde body koduyla işimiz olursa artık bu kodu temamızda arayacaksınız.)

Şimdi şablonumuzu önizleyelim bir sorun yoksa kaydedelim. Şu anda zoom efektine sahip oldunuz bile.


***Fakat zoom efekti uygulamak istiyorsanız yazı yazarken yeni bir formda resim eklemeniz gerekiyor. Yazı yazarken Html'yi düzenle kısmına gelip: Ekleyeceğiniz resme:


<a href="Image link"><img src="image link" width="300" border="0" height="200" />




bu kodları uyguluyoruz.
Not:
Image link : yazan yerleri silip jpg, png, gif formatlı resminizin linkini yapıştırıyoruz...
Width : resmin genişliği
Height: resmin yüksekliği.
Border: resim çerçevesi.



Örneğin:
<a href="http://img6.imageshack.us/img6/4505/336x280.png"><img src="http://img6.imageshack.us/img6/4505/336x280.png" width="300" height="200" border="0" /></a>

Zorlanacak olan arkadaşlar için de resim koyuyorum. Yazı içerisinde zoom efektini nasıl kullanacağınız hakkında:


***NOT: Eklentinin daha hızlı çalışmasını istiyorsanız Lütfen Fancyzoom .js dosyasını bilgisayarınıza indirin. HotLinkFiles.com ya da SigMirror.com gibi ücretsiz hostlara yükleyiniz. Yüklediğiniz dosyanın adresini kodlarda bulunan
http://zendersto.110mb.com/FancyZoom.js
ve
http://zendersto.110mb.com/FancyZoomHTML.js
.js dosyalarıyla yer değiştiriniz.
25 Nisan 2009 Cumartesi

Blogunuza Kayan Mesaj Kutusu Ekleyin


Blogunuza ekleyeceğiniz mesaj kutusuyla ziyaretçilerinizi karşılamak ister misiniz? Mesaj kutunuz mousela beraber otomatik olarak kayma özelliğine de sahiptir. İzleyicilerinize duyurmak istediğiniz her şeyi yazabilirsiniz. Rss beslemenizi ekleyebilir, özel bir yazınıza link verebilir veya resim ekleyebilirsiniz.Örneğini görmek için sizi bu siteye alıyorum (konu da bu siteden alınmıştır.)

Kodlara geçelim:
 Yerleşim---->Html’yi düzenle kısmına geliyoruz ve  </head>  kodunu buluyoruz. Head kodundan hemen önce aşağıdaki kodları yapıştırıyoruz.





<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

</style>
<script type="text/javascript">
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
* Code from http://tambirblog.blogspot.com

***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &
amp;&amp; get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

Lacivert renkli kodlarla rengini ve boyutlarını ayarlayabiliyoruz.
Şimdi Yerleşim---->Sayfa Öğeleri kısmına geliyoruz.Gadget ekleye basıp Html/Javascripti seçiyoruz.
Daha sonra aşağıdaki kodları içine yapıştırıyoruz.




<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="http://www.gigaimage.com/images/6gxult9ji6pxr9r7wo.gif" align="right" border="0" /></a>
Mesajınızı buraya ekleyin.
</div>        


Yeşil renkli Url yerine eğer mesaj kutusunun tasarımını beğenmediyseniz kendi zevklerinize uygun kapatma ikonuyla değiştirebilirsiniz. Lacivert olarak yazılmış "Mesajınızı buraya ekleyin."olan bölümüne silip eklemek istediğiniz mesajları yerleştirebilirsiniz. Artık izleyicilerinize siteniz açıldığında göstereceğiniz bir mesaj kutunuz var.
***Not: Mesajınız eğer soluk bir renkte görünüyorsa, bloggera Gönderme---->Oluştur bölümüne gelip yazınızı burada yazın ve yazınızı kalınlaştırıp Html'yi Düzenle kısmına tıklayıp kodu kopyalayın. Tekrar Html/Javascript dosyasına gelerek mesajınızı tekrar yapıştırın. Son olarak en doğru sonuçlar için mesajınızı önce yeni bir kayıt olarak yazın daha sonra html kodlarını alıp "Mesajınızı buraya ekleyin." bölümüne ekleyin.


22 Nisan 2009 Çarşamba

Blogger Resimli Manşet(Featured Content) Yapımı-1

Blogger slide show

Tam Bir Blog daha iyi bir bloga sahip olmanız için yardımcı olmaya devam ediyor. Gelecek üç yazımda sizlere bloggerda üç değişik manşet yapımını göstereceğim. Bu eklenti sayesinde blogunuzdaki en özel ve en iyi içerikli yazılarınızı blogunuzun istediğiniz bir yerine taşıyabileceksiniz. İnanılmaz slideshowlar artık sizinde blogunuzda yer alabilecek. Yazınızın başlığı ve kısa bir özeti farklı efektleriyle etkileyici bir görselliğe sahip.
Tabiiki demosunu incelemeden olmaz. İşte üç farklı özel içerik eklentisinin tamanının önizlemesi…

Bu üç eklenti temanıza göre tamamen özelleştirilebilir. Enini,boyunu temanıza uyumlu hale getirmek sizin elinizde, sadece Tam Bir Blog farkıyla sizlerle… “(Bu sıralar yazılarımın çok fazla kopyalandığını görüyorum, yazılarımdan eğer faydalanmak istiyorsanız ya da blogunuzda yazıma yer vermek istiyorsanız lütfen altına alıntıdır ibaresiyle yazının ulaşılabilir linkini veriniz.)”

Özel İçerik-Manşet (Featured Content-Slayt Şov)-1
Blogger slide show
1. Adım:
Bir sorun yaşamamak için aşağıdaki dosyaları bilgisayar indirmenizi ve varsa kendi hostunuza yoksa bşrazdan isimlerini vereceğim sitelere yükleyebilirsiniz. Böylece eklentiler güvenli ve hızlı çalışacaktır.
jquery.js
s3Slider.js

Dosyaları buradan indirebilirsiniz.
2. Adım:
İndirdiğim,iz bu iki dosyayı varsa kendi hostumuza yoksa HotLinkFiles.com ya da SigMirror.com adreslerine yüklüyoruz. Tabikii önce kayıt oluyoruz. Daha sonra yüklediğimiz dosyaların direkt linkini bir yere not alıyoruz.
3. Adım:
Şimdi kod bölümüne geldik. Blogger’a giriş yaptıktan sonra Yerleşim---->Html’yi düzenle---->Widget şablonunu genişlet diyoruz.
Aşağıdaki kodu buluyoruz.
</head>
Kodu bulduktan sonra bu kodun hemen önüne aşağıdaki kodlarımızı yapıştırıyoruz.

<!--SLIDE-SHOW-BASLANGICI-->
<!-- JavaScripts-->
<script type="text/javascript" src="http://hotlinkfiles.com/........./jquery.js"></script>
<script type="text/javascript" src="http://hotlinkfiles.com/........./s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
<!-- CSS -->
<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>
<!--SLIDE-SHOW-BITISI-http://tambirblog.blogspot.com-->
Mavi olan linklieri silip, 2. adımda yüklemiş olduğumuz dosyaların linkini yapıştırıyoruz. Şimdi şablonumuzu önizlemeye alıyoruz. Eğer bir sorun yoksa kaydediyoruz. Yukarıdaki kırmızı renkteki sayılar ise eklentinin genişliğidir. Onları kendi temanıza göre düzenlemeniz gerekmektedir.
4. Adım
Şimdi Yerleşim---->Sayfa Öğeleri kısmına geliyoruz.Gadget ekleye basıp Html/Javascripti seçiyoruz.
Daha sonra aşağıdaki kodları içine yapıştırıyoruz.

<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 /&gt;Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/3.jpg" alt="3" />
<span class="top"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/4.jpg" alt="4" />
<span class="top"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><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>
Kırmızı kodları silip gözükmesini istediğimiz resimlerin linkini giriyoruz.
class=”bottom/top” ise yazılarınızın üstte mi altta mı görünmesini istiyorsanız ona göre değiştirebilirsiniz. (Top:yukarı bottom:aşağı)
# işaretinin yerine ise yazının gideceği adresi giriyoruz.
Mavi kodlar ise anlaşılacağı gibi (Text title) yazınızın başlığı ve (content text) yazınızın özeti:)) Eklentide resimlerinizin daha hoş durmasını istiyorsanız. Temanıza göre ayarlamış olduğunuz eklentinin genişlik ve eninin yükleyeceğiniz resimlerle aynı ölçüde olmasına dikkat ederseniz daha iyi sonuçlar elde edebilirsiniz.
Şimdi widgetı kaydediyoruz ve istediğimiz yere sürüklüyoruz. Bence en iyi yer blog yazılarınızın üst kısmı olacaktır. Diğer iki eklentiyi kullanmak istiyorsanız tabiiki biraz beklemeniz gerekecek:))
20 Nisan 2009 Pazartesi

Bunu Okudunuz Mu?


Son Eklenen Yazılar

Son Yorumlar

Kategoriler

Online İletişim

Link to...

Son Yazılar

Son Yorumlar

Translate

İzleyiciler