Previous Next
  • CineShoot - Blog Tanıtım

    ok fazla film ve dizi izlediğimden, altyazı çevirileri de yaptığımdan, aslında ilk amacım; izlediğim filmler üzerine eleştiri/yorumlar yapmak, çevirdiğim filmlerle ilgili ufak detaylar ve çeviri durumunu paylaşmak, kıyıda köşede kalmış dizileri tanıtmaktı. Bazen de futbola yönelik, tuttuğum takımın maçlarına, oyuncularına yönelik yazılar yazarım diyordum. Ama blogu açtıktan ve yazıları yazmaya başladıktan sonra burnumun dikine gidip en çok ...

  • Türk Okçuluğu ve Türk Okçuları - Kemankeş

    ıllarca uzun menzilli silah olarak kullanılan ok, artık sadece bir spor aracı olarak kullanılıyor. Yüksek disiplin ve önemli bir eğitim süreci gerektiren okçuluk, Türk toplumunda yıllarca önemli bir yere sahip olmuştur. Okçuluk, Osmanlı'da 15.yy.'nın ikinci yarısın itibari ile spor faaliyeti olarak yapılmaya başlanmış. İlk aklıma gelen Okmeydanı okçuluk meydanıdır. Kemankeş sitesinde, Okmeydanı menzilleri hakkında da ilginç bir makale var ...

  • Resmi Google Buzz Tuşları

    Resmi Google Buzz Tuşları sayesinde yazılarınızı direk olarak Google Buzz platformunda paylaşabilirsiniz. Daha önce bu amaç doğrultusunda resmi olmasa da çalışan bir yöntem hakkında sizlere Google Buzz Tuşu Nasıl Eklenir yazısı ile bilgi vermiştim. Şimdi ise Blogger Blogspot uzantılı bloglara, resmi Google Buzz Tuşunu nasıl ekleyebileceğiniz hakkında bilgi paylaşacağım...

  • StumbleUpon Sayısını Gösteren Tuşu Ekleme - Blogger Blogspot

    StumbleUpon sitesinin blog içeriğinizin kolayca paylaşılması için geliştirmiş olduğu paylaş tuşları hakkında daha önce StumbleUpon Paylaş Tuşu Ekleme yazısını yazmıştım. Şimdi de bu tuşlardan farklı olarak StumbleUpon sayısını gösteren paylaş tuşunu Blogger blogunuza nasıl ekleyebileceğinizi anlatacağım. Tweet, digg, delicious gibi sayaçlı paylaş tuşlarından sonra şimdi de sırada Stumble tuşu var ...

5 Kasım 2012 Pazartesi

Blogger Resimlerinize Zoom Efekti Eklentisi

Yayınlayan Unknown | 15:14 Kategori:


Blogger blogunuzda kullandığınız resimlere zoom özelliği eklemek istermisiniz ?

Blogger zoom eklentisi ile , kullanıcılar resimlerin üzerine geldiğinde , resimleriniz belli bir miktarda büyüyerek zoom etkisi gösterir..

Blogger resimlere zoom eklentisini blogger blogunuza eklemek için yapmanız gerekenler aşağıda..

Aşağıda yer alan kodu bulunuz..
]]></b:skin>
Hemen üstüne alttaki kodlarımızı ekleyelim..
/* eklentileri.blogspot.com zoom efekti kod sonu  */
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nA0hqdZf06Uk-5Ri09wj-_BbehENtPJAh96oGtIwj_hSerdZUPRRqLxgmTTUY72sGTK2NXGZpl0McSoKg1LA-mn2lv_zUK8KjC7agirkN84Kiqu_PzJZwgOnKKeod1zdoYYdI9qopkTP/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* eklentileri.blogspot.com zoom efekti kod sonu*/
}
Yukarıdaki işlemi yaptıktan sonra , şimdide bu kodumuzu bulalım.
</head>
Bu kodumuzunda hemen üstüne şu kodları ekleyelim..
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>
Blogger resimlerinize zoom efekti eklentimiz hazır , nasıl kullanılacağına gelirsek , yazılarınızı yazarken , resimlerinizi alttaki şekilde ekleyeceksiniz..
<ul class="thumb">
<li><a href="Http://Eklentileri.Blogspot.Com/"><img src="Resim linki 1" alt="" /></a></li>
<li><a href="Http://Eklentileri.Blogspot.Com/"><img src="Resim linki 2" alt="" /></a></li>
<li><a href="Http://Eklentileri.Blogspot.Com/"><img src="Resim linki 3" alt="" /></a></li>
<li><a href="Http://Eklentileri.Blogspot.Com/"><img src="Resim linki 4" alt="" /></a></li>
</ul>
güle güle kullanın =) 

DEMO


<<< Bu Yazı için Arama Sonuçları  >>>

Blogger Resimlerinize Zoom Efekti Eklentisi , Blogger Resimlerinize Zoom Efekti , Blogger Resimlerinize Zoom , Blogger zoom , zoom eklentisi , zoom , blogger resim yakınkaştırma , resim zoom , zoom efekti , zoom eklentisi , zoom widget , blogger photo zoom effect

Resim üzerine gelince açılan açıklama kutusu

Yayınlayan Unknown | 15:09 Kategori:


Blogger blogunuza eklediğiniz resimlerin üzerine fare ile gelindiğinde, aşağı doğru açılan metin/bilgi kutusu eklentisini blogger blogunuza eklemek için aşağıdaki anlatımı takip edip , blogger blogunuzda bu eklentiyi kullanabilirsiniz.

Alttaki kodu bulunuz..
]]></b:skin>
Bir satır üzerine aşağıdaki kodları ekleyiniz..
.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */

-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}

Yukarıdaki işlemi yaptıysanız eklentimiz hazırdır , bu eklentiyi kullanmak için , aşağıdaki kod dizilimini kullanmanız gerekiyor..
<div class="imagepluscontainer" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTLLRHx9afG9VLu1y1QfA3QJVcIA-Gfp-PD1C0I-zZzYphoO5jBecRG_wdGNDs4cKhIGLoNxiFpLYeF3Y72rD9Mii-0h19K3EjqptPSYeMFx_vzpmipFQWOcvVq7nsiUcSIXggR78UyYa/s1600/yorum.png" style="width:263px; height:199px; z-index:2" />
<div class="desc">
Tüm Blogger eklentilerini , eklentileri.blogspot.com adresinde bulabilir , blogunuza ekleyebilirsiniz..
</div>
</div>
Kırmızı olan yere , resim linkiniz..Mavi olan yer ise görünmesini istediğiniz yazınız..düzenlemeri ona göre yapınız..

DEMO



<<< Bu Yazı için Arama Sonuçları  >>> 

Resim üzerine gelince açılan açıklama kutusu , blogger resim üstüne gelince açıklama ekleme , blogger resim eklentisi , blogger resim üstü yazı eklentisi , blogger image widget , Image With Description Hover Effect , Blogger hower widget ,

4 Kasım 2012 Pazar

ZAMAN AYARLI YAZI KUTULARI [CSS]

Yayınlayan Unknown | 19:14 Kategori:
Merhaba arkadaslar herkese kolay gelsın. Bu aksam kı yazımda sızlere yıne yabancı bır sıteden buldugum zaman ayarlı duyuru kutularını ve kodlarını verecegım. Bu duyuru cubuklarını 3 zaman ayarıyla ve 3 renkle kullanabılırsınız.

Anlatımi Ve Kullanımı Soyledir;

Duyuru cubuklarının css kodlarını ekledıgınız yerde ''Activate Me'' adlı bır buton cıkar.Tabii bunu degistirebilirsiniz.

Daha sonra butona tıkladıgınızda kac tane yazı kutusu ekledıysenız hepsını goruntulersınız.
1 Saniye gectıkten sonra kutudakı yazınızın hemen altında beyaz bir çubuk belirir.

Uzun zamanlı olan 8 saniye de dolar ve yok olur.
Orta zamanlı olan  6 saniye de dolar ve yok olur.
Kısa zamanlı olan ıse 5 saniyede dolar ve kaybolur.

Ben de baska bır sıtede kullanması ıcın bı arkadasımla bunu paylastım. Benım bunu kullanmamdakı amac su:
Bıldıgınız uzere bazı sıtelerdekı uyelık alanları sızlerı adımlarla yönlendirir.
Mesela 1. adım adınız soyadınız adresiniz. 2. adım telefon numaranız okulunuz mesleginiz vb. gibidir.
Ben bu adımları doldururken asagıdakı cubukları kullandım.
1. Adımdayken alttakı kutuda ''1. adımınız tamamlandı ıkıncı adıma gecmex ıcın xxx sanıye bekleyınız'' yazıyor.
2. Adıma geldıgımızde ıse kayıt ıslemı tamamlanmıstır. Kayıt butonuna tıkladıgınızda yıne alttakı cubuk dolar ve yok olur. Daha sonra gırıs sayfasına yonlendırılırsınız.
---
Sizlere Bu Anlattıklarımı Gostermek Icın Bır Kac Resım Ekledım

 ---

Sımdı ıse eklentımızın kodlarını vereyım. Tum platformlarda sorunsuz calısacaktır..

CSS KODLARI SUNLAR;


.tn-box {
    width: 360px;
    position: relative;
    margin: 0 auto 20px auto;
    padding: 25px 15px;
    text-align: left;
    border-radius: 5px;
    box-shadow: 
        0 1px 1px rgba(0,0,0,0.1), 
        inset 0 1px 0 rgba(255,255,255,0.6);  
    opacity: 0;
    cursor: default;
    display: none;
}
 
.tn-box-color-1{
    background: #ffe691;
    border: 1px solid #f6db7b;
}
.tn-progress {
    width: 0;
    height: 4px;
    background: rgba(255,255,255,0.3);
    position: absolute;
    bottom: 5px;
    left: 2%;
    border-radius: 3px;
    box-shadow: 
        inset 0 1px 1px rgba(0,0,0,0.05), 
        0 -1px 0 rgba(255,255,255,0.6);
}
input.fire-check:checked ~ section .tn-box {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
input.fire-check:checked ~ section .tn-box .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}
.tn-box.tn-box-active {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
.tn-box.tn-box-active .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}
.tn-box.tn-box-active {
    display: block;
    animation: fadeOut 5s linear forwards;
}
 
.tn-box.tn-box-active .tn-progress {
    animation: runProgress 4s linear forwards 0.5s;
}


EKLEMEK ICIN SU KODLARI KULLANIYORUZ;

<div class="tn-box tn-box-color-1">
    <p>Kutuda Gorunmesını Istedıgınız Yazıyı Bu Alana Yazıyorsunuz..</p>
    <div class="tn-progress"></div>
</div>

Not: Yesıl ıle gosterılmıs yerler degıstırmenız gereken kodlardır.. 0.5 saniyedir. yani 5 saniyedir. Bunlara gore kendınıze gore degıstırınız..

blogger her başlık yanına resim koyma eklentisi

Yayınlayan Unknown | 09:57 Kategori:


Blogger Başlık Yerine Resim Koyma konusunu sizlere videolu olarak anlatacağız.Blogger başlık resmi sayesinde blogunuz daha çekici ve göze daha hoş görünecek.Sadebir yazı yerine blogger başlığınıza resim koyup yazı ile birleştirip blogculukta profesyonelliğe bir adım daha yaklaşabilirsiniz. Blogger Başlık Yerine Resim Koymak için Eklediğimiz Videoyu İzleyin. 

Blog Yazılarının Altına Yazar Bilgi Kutusu Ekleyin

Yayınlayan Unknown | 09:20 Kategori:

Yazar bilgi kutusu, her blog yazısının sonunda yer alan ve yazarla ilgi kısa bilgiler  ile iletişim bilgilerini içeren bir kutudur.
Blogger Yazar Bilgi Kutusu
Blogger’da birden fazla yazarı olan bloglar için değil ama tek bir yazarı olan bloglar için bu yazar bilgi kutusunu kullanabiliyoruz.Nasıl mı?
1.Adım: Kumanda Paneli > Tasarım > HTML’yi Düzenle  yolunu izleyerek Widget Şablonlarını Genişlet kutusunu işaretleyin ve Ctrl + F tuş kombnasyonunun yardımıyla]]></b:skin> kodunu bulun.Bu kodun hemen üstüne şu kodları ekleyin:
.author_info {

float: right;

width: 450px;

padding: 10px;

border: 1px solid #e0e0e0;

margin-bottom: 15px;

margin-top: 15px;

background: #eee;

}

.author_info h3 {

margin-bottom: 10px;

}

.author_photo {

float: left;

margin: 0 0 0 10px;

}

.author_photo img {

margin-right: 10px;

border: 1px solid #e0e0e0;

}


2.Adım: Şimdi <data:post.body/> kodunu bulun ve bunun altına aşaıdaki kodları ekleyin:


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='author_info'>

<div class='author_photo'>

<img alt='author' 

src='http://i51.tinypic.com/r89tfm.png'/>

</div>

<h3>Yazar Hakkında</h3> Merhaba ben 

<a href='http://bloghocam.blogspot.com/p/hakkmda.html' 

target='_blank' title='Hakkımda'>Serdar Kara</a>.

Geçmişte blog yazarken edindiğim tecrübeleri acemi 

blogcularla ve blogunu geliştirmek isteyenlerle paylaşmanın 

keyifli olacağını düşünerek 

<a href='http://bloghocam.blogspot.com/' 

target='_blank' title='Blog Hocam'>Blog Hocam</a>
&#8217;ı yazmaya başladım.Yazılarımı sürekl okumak 

isterseniz Blog Hocam&#8217;ı 

<a href='http://www.facebook.com/pages/Blog-Hocam/196713297023764' 

target='_blank' title='Facebook İleTakip Et'>Facebook</a>,

<a href='http://twitter.com/bloghocam' target='_blank' 

title='Twitter İle Takip Et'>Twitter</a>, 

<a href='http://feedburner.google.com/fb/a/mailverify?uri=BlogHocam' 

target='_blank' title='E-Posta İle Takip Et'>E-Mail</a> veya 

<a href='http://feeds.feedburner.com/BlogHocam' 

target='_blank' title='RSS İle Takip Et'>RSS</a> ile 

takip edebilirsiniz. 



</div>

</b:if>


Düzenlemeniz Gereken Yerler


- Eğer yazar bilgi kutusu olması gerekenden büyük yada küçük ise 1.adımdaki kodlarda yazan width: 450 px yazan değeri değiştrin.


- 2.adımdaki kodlarda http://i51.tinypic.com/r89tfm.png yerine kendi resminizin U:RL’sini yazın.


- Yazar hakkında bana ait olan bilgileri kendinize göre değiştirin.

Blogger Yazılara Oy Verme Eklentisi

Yayınlayan Unknown | 08:42 Kategori:

Geçtiğimiz günlerde kişisel Google+ hesabımdan Ferhat Bayram isimli bir okuyucumla yazışıyordum.Yeni kullanmaya başlaığı bir temayla ilgili yardımcı oluyordum.Sorunu halettikten sonra adresini hatırlamadığım bir sitede ki yazının sonunda o yazıya oy verme scriptini gösterdi bunu ekleyip ekleyemeyeceğimizi sordu.O scripti buldum ancak türkçeleştirme çalışmalarım hüsranla sonuçlandı.Ben de orjinal haliyle paylaşmaya karar verdim.İsteyenler ekleyebilir.

Blogger Yazıya Oy Verme Eklentisi

Eklentinin mantığı aslında Blogger’ın klasik yıldızlı oy verme olayında olduğu gibi.Ziyaret çiler + veya + olmak üzere sadece 1 kez oy verebiliyor ve oylar hemen değerlendirmeye alınıyor.

Gelelim eklentiyi Blogger’a eklemeye.Öncelikle gerekli Java script kodunu ekleyelim.Bunun için şablonunuzdan şu kodu bulun,

</body>

Hemen üstüne şu kodu ekleyin.

<script src="http://js-kit.com/ratings.js"></script>

İkinci olarak scripti yazı sonlarında göstermek için gerekli kodları ekleyeceğiz.Bunun için şu kodu bulun, 

<data:post.body/>

Hemen altına şu kodları ekleyin. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'> 
</div> 
</b:if>

Blogger Galeri Sayfası Oluşturma

Yayınlayan Unknown | 08:39 Kategori:
Bayan okuyucularımdan birisi ( ismini hatırlayamadım kusura bakma ) kişisel Google Plus sayfamdan bana ulaşarak bloguna bir galeri sayfası eklemek istediğini söylemişti.Bir süredir internette böyle bir galeri ya da portföy sayfasında kullanmak için güzel bir Jquery scripti arıyordum, nihayet buldum.

Galeri

Resimde gördüğünüz galeri sayfasının nasıl çalıştığını görmek için aşağıdaki videoyu izleyebilirsiniz.


Bunun gibi bir galeri sayfası oluşturmak için;

1.Adım: ]]></b:skin> kodundan önce aşağıdaki kodları ekleyin.

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nA0hqdZf06Uk-5Ri09wj-_BbehENtPJAh96oGtIwj_hSerdZUPRRqLxgmTTUY72sGTK2NXGZpl0McSoKg1LA-mn2lv_zUK8KjC7agirkN84Kiqu_PzJZwgOnKKeod1zdoYYdI9qopkTP/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */

2.Adım: </head> kodundan önce aşağıdaki kodları ekleyin. 

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

3.Adım: Sayfa düzenlemeden yeni bir sabit sayfa oluşturun ve sayfanın HTML kodları bölümüne aşağıdaki kodları ekleyerek sayfayı yayınlayın. 

<ul class="thumb">
<li><a href="#"><img src="Resim 1 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 2 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 3 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 4 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 5 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 6 Link" alt="" /></a></li>
</ul>


Galerideki yeni fotoğraf eklemek için; 
Galeriye yeni bir resim eklemek için galeri sayfasının HTML bölümüne eklediğiniz kodlara yeni bir li satırı ekleyebilirsiniz.Örneğin;


Galeriye yeni resim ekleme

Çoğu blogcu kurulumu kolay olduğu için resimli benzer yazılar elentisi olarak LinkWithin kullanıyor.Ziyaret ettiğim blogların çoğunda LinkWithin eklentisinin kullanıldığını görünce farklı olsun diye daha önce resimsiz benzer yazılar eklentisini paylaşmıştım. 

Son günlerde blogumda kullandığım resimli benzer yazılar eklentisini paylaşmamı isteyenlerin sayısı arttı.Sanırım LinkWithin kullanınca köşede çıkan LinkWithin yazısından rahatsız oldular, bu yüzden benden eklentiyi paylaşmamı rica ettiler. 

Resimli Benzer Yazılar Eklentisi

Bu blogda gördüğünüz eklentinin kodlarını olduğu gibi paylaşıyorum.Kurulum 2 aşamadan gerçekleşiyor.Önce </head> </head> kodları arasına stil ve script kodlarını ekleyeceğiz, ikinci aşamada ise Yazının altına HTML kodlarını ekleyeceğiz.Kuruluma geçelim… 

1.Aşama: Şablonunuzdan </head>  kodunu bulun ve bunun hemen üstüne aşağıdaki kodları ekleyin: 

<!--Resimli Benzer Yazılar Eklentisi Stiller Ve Scriptler Başlangıcı--> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<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: #F1921A; 
font-family: Times New Roman; 
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:none; 
border: 1px solid #ddd 

</style> 
<script type='text/javascript'> 
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimJnE7yAFV5AfViy7w88BuwLgr_asPxCIblqteV8nF7LahnEeMnB5agfDfFv5YF_DFZQyl2z3md1Fzod4OanasUp7_kf09rsGMdOX9ovm_WhpTm2fh5th9VccYqlZfcyLqDvNympkjJQc/s72/no-image.PNG&quot;; 
var maxresults=5; 
var splittercolor=&quot;#E6E7E8&quot;; 
var relatedpoststitle=&quot;Benzer Yazılar:&quot;; 
</script> 
<script src='http://dl.dropbox.com/u/60346665/resimli-benzer-yazilar.js'type='text/javascript'/> 
<!-- remove --></b:if> 
<!--Resimli Benzer Yazılar Eklentisi Stiller Ve Scriptler Bitişi-->

2.Aşama: Şablonunuzdan <div class='post-footer'> kodunu bulun ve hemen altına aşağıdaki kodları ekleyin: 


<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-posts'> 
<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:label.isLast != &quot;true&quot;'> 
</b:if> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> 
<script type='text/javascript'> 
removeRelatedDuplicates_thumbs(); 
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); 
</script> 
</div><div style='clear:both'/> 
<!-- remove --></b:if> 

Resimli benzer yazılar eklentisinin kurulumu bu kadar.Bir sorunla karşılaşırsanız yorum bölümünden sorabilirsiniz. 

İyi bloglar…
  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube