Bir çoğumuz sitelerimize ya da bloglarımıza görsel güçlendirme yapmak için birçok çalışma yapıyoruz. İnternet üzerinden biraz araştırma yaparak benim beğendiğim, JQuery ile oluşturulmuş 5 adet slider ve resim galerisi örneği buldum. Sliderlar hakkında bilgi, demo ve indirme linkleri aşağıda bulunmaktadır. Güle güle kullanın. 

1-SLIDEVIEWER

WordPress blogunuzda kullanabileceğiniz, sade ve kullanışlı bir slider. Aşağıda linkini verdiğim sitede sliderin demosu ve indirme linki bulunuyor. Kullanımı hakkında bilgiler de verilmiş. Anlatım İngilizce olsa da bu sefer de Google Translate imdadınıza yetişiyor. 

Siteye gitmek için tıklayın

2-SPACEGALLERY

Farklı bir resim galerisi, göze de çok hoş görünüyor. Sliderin demosu, indirme linki ve kurulumuyla ilgili detaylar site linkinde.

Siteye gitmek için tıklayın

3-TN3 GALLERY

Çok şık ve sade görünümüyle kullanıcıları mest ediyor. Tüm modern masaüstü ve mobil tarayıcılar için uyumlu olması da cabası. Tam olarak çözemedim, indirme linki yok sanırım fakat kaynak kodlarından alabilirsiniz. 

Siteye gitmek için tıklayın

4-S3 SLIDER

Motion efekti verilen bir slider türüdür. Güzel ve basit bana kalırsa. Sitede sliderin kullanımı hakkında bilgi verilmekte, indirme linki ve demosu bulunmaktadır. 

Siteye gitmek için tıklayın

5-IMAGEFLOW

Bu slider çalışması Apple’ın resim galerisinden esinlenerek yapılmış. İndirmek biraz uğraştıracaktır, sabırlı olmanızı tavsiye ediyorum. Çok şık ve sade. 

Siteye gitmek için tıklayın

Bugun SizLere Yazı Altı Sosyal Paylaş Butonu PayLaşcam.  Bu Güzel Sosyal Paylaş Ekletisi Blogunuzu Trafiğini, Artırmakda Sizlere Yardımcı oLcak Blogunuzun Sosyal Meida Duyulmasına Yardımcı Olcakdır.
Cok KoLay Bir Şekilde Uygulaya Bilceginiz Bu Eklenti. Aşagıda Gösterdim Yöntemi Yapdınız Takdirde
Calışacakdır. Simdi Uygulamamıza Başlayalım. 

1. Adım Bloger Şablon Diyoruz. 
2. Adım Şablonun Yedeğini Alıyoruz. 
3. Adım Html Düzenle Diyoruz. 
4. Ctrl F Yardımı İle Size Aşagıda Verdiğim Kodu BuLuyorsunuz. 

<div class='post-footer-line post-footer-line-1'/>

Yukarda Ki Kodu Bulamazsanız, Bu Şekilde Aratın.  post-footer-line-1  Buldugunuz Kodu Hemen Altına Gelcek Şekilde Size Aşağıda, Verdigim Kodu Ekleyiniz Ve Kaydet Diyip Cıkınız. 

<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYCdNK5rBZUH0T5Wllny_ws_L0uIK-cll9538abo1cxOAfc7-usaAJe8_idSPt6IMVIcIxiBaxOX7QeeJWQC2OyenCNoRGtWMQR7H-ITNYBCPGi7j_EUiJ_fYH4lCler9TMPFPaG8YEo/s1600/helperblogger.com-sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}
 
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}
 
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}
 
.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='BloggerYazari' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            </script>
        </div>
        <div class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='promote_google'>
            <g:plusone annotation="none" size='medium'></g:plusone>
            <script type='text/javascript'>
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
            </script>
        </div>
    </div>
</b:if>

Yukarda Kırmızı İle Belirlediğim, Yere Kendi Tweet id Yazınız. İşlemimiz Bitmişdir, Güle Güle Kulanın.

Bugün Sizlere Sosyal PayLaş  Eklentisi Paylaşcam. Güzel Görünüşün Olan Bu Eklenti Blogunuza Şık Bir Görünüm Katcak, Sosyal Medai Sitemiz Hem Tanıtım Acısından Hem Trafik Kazanmamız Acısından, Yararlı Olacakdır Sosyal Media Ne Kadar, Cok Takipciniz Olursa.
Sitenizin Ziyaretci Oranı Daha, Cok Olacakdır. Bu Güzel Eklentiyi Sitenize, KoLay  Bir Şekilde Yükleyebilirsiniz. Aşagıda Sizlere Anlatcagım, Uygulamayla Kolay Bir Şekilde Sitenize Yükleye Bilirsiniz.




Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra 
Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.

<!--Blogger-yazari Metro Spinning Sosyal Takip Eklentisi-->
<div class="subscribe"> 
<ul> <li class="rss"><a href="http://feeds.feedburner.com/omerkrgl" target='_blank'><span></span>RSS</a></li> 
<li class="twitter"><a href="https://twitter.com/omrkrglu" target='_blank'><span></span>Twitter</a></li> 
<li class="gplus"><a href="https://plus.google.com/u/0/103310477518705734104" target='_blank'><span></span>Google Plus</a></li> 
<li class="facebook"><a href="https://www.facebook.com/omerkrgl" target='_blank'><span></span>Facebook</a></li> </ul> 
</div> 
<style> 
.subscribe li { 
display: block !important; 
margin-right: 0 !important; 
width: auto !important; 
} 
.subscribe li a span { 
display: block; 
height: 32px; 
left: 0; 
position: absolute; 
top: 2px; 
transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg); 
transition-duration: 0.8s; 
transition-property: all; 
width: 32px; 
} 
.subscribe .twitter span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8e6BsEzIQUwdOLlm3QGPdriALMM6EIwnYwjKskSRUeovgu1MClJClmDlYQFNEDkhCbOEZ5BMdZpdjdxIeOcryQM_E8r8iPr6QT5_llCHluQrmJqoatz1J1sLRSlhbAgyK1Y4_BHUweF0/s1600/twitter_icon.png) no-repeat; 
} 
.subscribe .twitter a { 
background: #91C661; 
} 
.subscribe li a:hover span { 
transform:rotate(340deg); 
-webkit-transform:rotate(340deg);    
}    
ol, ul { 
list-style: none outside none; 
} 
.subscribe li { 
display: block !important; 
margin-right: 0 !important; 
width: auto !important; 
} 
.subscribe li { 
display: inline-block; 
margin: 0 20px 10px 0; 
position: relative; 
width: 200px; 
} 
.subscribe .rss span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlff1srXl5E_mN-krLIFyBxNULeyccpYRq3YjzGsZl5uc3WQYYHX1wl-Nl6i9Xups8NtGq7qxKG9IBhLI3RZKymA4TtF3rtgRiaYDwi3R5JeDi2kaxDC4QOqOeC1wrA0vuRr68qJZMlMg/s1600/rss-icon.png) no-repeat; 
} 
.subscribe .rss a { 
background: #F67F00; 
} 
.subscribe li a { 
color: #FFFFFF; 
display: block; 
font-family: verdana; 
font-size: 12px; 
padding: 10px 10px 10px 40px; 
text-decoration: none; 
font-weight: bold; 
} 
.subscribe li a span { 
display: block; 
height: 32px; 
left: 0; 
position: absolute; 
top: 2px; 
transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg); 
transition-duration: 0.8s; 
-webkit-transition-duration: 0.8s; 
transition-property: all; 
width: 32px; 
} 
.subscribe li a:hover span { 
transform:rotate(340deg); 
-webkit-transform:rotate(340deg); 
}  
.subscribe .twitter span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8e6BsEzIQUwdOLlm3QGPdriALMM6EIwnYwjKskSRUeovgu1MClJClmDlYQFNEDkhCbOEZ5BMdZpdjdxIeOcryQM_E8r8iPr6QT5_llCHluQrmJqoatz1J1sLRSlhbAgyK1Y4_BHUweF0/s1600/twitter_icon.png) no-repeat; 
} 
.subscribe .twitter a { 
background: #91C661; 
} 
.subscribe .gplus span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJ-ODe_1AsDNuVEEG7UNKMV2XhaQUMtNLRiQKWkWwFi5scCoJZfPITSLM48mUSWirQlKh2uYiFjgme9LG-Haha0sI2uretW0WZrWQxKFPBCdL7st4yfi6Xe-ENZRKNESo1biZ7cmmSNI/s1600/googleplus.png) no-repeat; 
} 
.subscribe .gplus a { 
background: #D74D2F; 
} 
.subscribe .facebook span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv7QeOT1KXtknCKt1hiLdDMQnWtcpFlyCcZyTuExQdxtzP9f77LK8Kzv0VxFmRuUWtc2PVOQ__PPX4lm8EMrf-zkC7qUT2oMH2udPGrGQfHNeURHp82lJiShz14IE5VEaXOiRgxMRMn-Q/s1600/facebook-icon.png) no-repeat; 
} 
.subscribe .facebook a { 
background: #3B5998; 
} 
</style>
<!--http://blogger-yazari.blogspot.com/  Sosyal Takip Eklentisi-->

Kırmızı renkle gösterdiğim Blogger-Yazarı’a ait hesap adreslerinin yerine kendi adreslerinizi yazmayı unutmayın!  işlemimiz Bitmişdir .

]]></b:skin>

Ve Bu Kodu Bulduktan Sonra Bu Kodun Üstüne Hemen Şu Kodu Ekliyoruz.

]]>.post img {-webkit-transition:  -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform:  rotate(+2deg);-moz-transform: rotate(+2deg);}

.post img:hover {-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform:  rotate(-2deg);-moz-transform: rotate(-2deg);}  

Kaydedip Çıkıyoruz

Video:

KAYNAK: http://www.cyberadam.net/2013/12/blogger-arkaplan-seffeflastma.html

Sidebar Kısmına Derken?

Nerede neden kullanmalıyım?

<link rel="stylesheet"
type="text/css"
href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>


<div id="slider-rotator"
class="slider-rotator loading"></div>


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript"
src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>


<script type="text/javascript">


makeSlider({


    url:
"http://siteadresi.blogspot.com" // Site adresinizi sol tarafa yazınız.


});


</script>

Sidebar Kısmına Derken?

Nerede neden kullanmalıyım?

<link rel="stylesheet"
type="text/css"
href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>


<div id="slider-rotator"
class="slider-rotator loading"></div>


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script type="text/javascript"
src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>


<script type="text/javascript">


makeSlider({


    url:
"http://siteadresi.blogspot.com" // Site adresinizi sol tarafa yazınız.


});


</script>

Düzenlemeniz Gereken Yerler: Mavi renkte : http://siteadresi.blogspot.com kısıma kendi site adresinizi yazınız. Kırmızı renkteki alanlarda bulunan linkleri tarayıcınızdan url kısmına yazıp kodları kopyalayarak sahip olduğunuz google drive hesabınıza yüklerseniz kodların silinme sorunu olmaz ve kendi güvencenizde kullanabilirsiniz. Kodları nasıl drive'a yükleyebilrim? Bu konuyu yazmaya gerek duymadım, bloghocam bu konuda bilgi vermiş ben sizi o konuya yönlendirmem yeterlidir. Gitmek için Tıklayın. Bir sonraki yazımızda görüşmek üzere. İlgili Aramalar: blogger sidebar slider, Blogger, automatic slider, blogger auto slider, Blogger Eklenti, eklenti,

</head>

Bu kodun hemen üzerine aşağıdaki kodları ekliyoruz.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play);
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>

Daha sonra aşağıdaki kodu buluyoruz

]]></b:skin>

Bu kodun hemen üzerine de aşağıdaki kodları ekliyoruz.

#galeria{
margin: 0 auto;
padding: 0px 0px;
width: 810px;
z-index:999;
}
.main_view {
float:left;
position: relative;
z-index:999;
}
.window {
height:289px;
width: 800px;
border:1px solid #fff;
overflow: hidden;
position: relative;
-moz-box-shadow:0px 0px 4px #fff;
-webkit-box-shadow:0px 0px 4px #fff;
box-shadow:0px 0px 4px #fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;z-index:999;
}
.image_reel {
position: absolute;
top: 0; left: 0;
z-index:1000;
}
.image_reel img {
float: left;
z-index:1001;
}
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypVB5zwRKco3R9dPgMEXQQ-vadKeHHIxkcjiWEEBHUIjN6a0ujBcoatLDxWhSDKIrQxYKvrKbiyIPhgGvUt4f_l1Gkk5JTIrCWDWJ2jMx9tOzL9TSsjmbZ16dlU3zAmbefI1BRxRuOCrC/s0/slider.png);
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
border:1px solid #fff;
border-right: 0px solid;
display: none;
-moz-box-shadow:inset 0px 0px 2px #d6d6d6;
-webkit-box-shadow: inset 0px 0px 2px #d6d6d6;
box-shadow:inset 0px 0px 2px #d6d6d6;
z-index:1002;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhypVB5zwRKco3R9dPgMEXQQ-vadKeHHIxkcjiWEEBHUIjN6a0ujBcoatLDxWhSDKIrQxYKvrKbiyIPhgGvUt4f_l1Gkk5JTIrCWDWJ2jMx9tOzL9TSsjmbZ16dlU3zAmbefI1BRxRuOCrC/s0/slider.png) center;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
-moz-box-shadow: inset 0px 0px 1px #d6d6d6;
-webkit-box-shadow:inset 0px 0px 1px #d6d6d6;
box-shadow:inset 0px 0px 1px #d6d6d6;
border:1px solid #fff;z-index:1002;
}
.paging a.active {
font-weight: bold;
border: 1px solid #fff;
color: #17add8;
background: #f1f1f1;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
-moz-box-shadow: inset 0px 0px 2px #d6d6d6;
-webkit-box-shadow:inset 0px 0px 2px #d6d6d6;
box-shadow:inset 0px 0px 2px #d6d6d6;
z-index:1002;
}
.paging a:hover {
font-weight: bold;
z-index:1002;
}

Son olarak ise slaytımızın yer almasını istediğimiz şablon bölümüne aşağıdaki kodları ekliyoruz.

<div id='galeria'>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='#' rel='1'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0nFwNDj1uGzmwAf26vrpWXacBDMJawJGxhnQcrDWR7kgzgU5dVMqr2AW2NRGclUmtuJpCUsTM0JjJPq6BqKJQu2p7L4vG3z7K8N5uVRsq4Wcb469_nUhoV9CAke4w3QRxAvYrrRzn1bwS/s0/wallpapersafull_4110..jpg'/></a>
<a href='#' rel='2'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMqp1krBZ0n3ZvWPICmPt_2gP4oZMfENMZ1Q1IP6ydHz6ZrLASUowFisuMh6K4Y33ANk_Oo8lOkSl3zNmTT4B3HisL9Qesp-x6BZDEWLpV9JApl9N5Ao0wkOzBhJeWhWDnMPzjBOJR3umy/s0/wallpapersafull_3986..jpg'/></a>
<a href='#' rel='3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0URI-AWOI5dFnMDSsCKIurdAXcuEzfMtEfRrZBr0uMBzvSretKtpc7fKfUXHNzz24tMPthgJeo0q_JviphN5_Oc_wilP-bLutZNTKQf-pji7jeMDjQnieA6AFNAah6hTgml_UnAumL2ez/s0/wallpapersafull_4106..jpgg'/></a></div></div>
<div class='paging'><a href='' rel='1'>1</a><a href='' rel='2'>2</a><a href='' rel='3'>3</a>
</div></div>
</div>

Böylece slaytımızı blog sayfamıza eklemiş olduk.

 Önemli notlar: Script kodları içerisinde kırmızıyla belirttiğim rakamı küçülterek slayttaki resimlerin daha kısa aralıklarla değişmesini sağlayabilirsiniz. Slaytta yer alan ve kırmızıyla belirttiğim resimlerin yerine yine 800 px × 289 px boyutlarında farklı resimler koyabilirsiniz. Slayttaki resimlere tıklandığında istediğiniz bir adrese yönlendirmesini isterseniz de yine kırmızıyla belirttiğim # kısmını silerek adresi yazabilirsiniz.
 Örnek resim: Blogger için alternatif slayt eklentisi

</a><a class="addthis_button_tweet" tw:count="vertical"></a><a class="addthis_button_google_plusone" g:plusone:size="tall"></a><a class="addthis_counter"></a><a href="http://blogger-yazari.blogspot.com/2013/11/blogger-sayfayla-kayan-sosyal-paylasim.html"></a></div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script><!-- http://blogger-yazari.blogspot.com/ --> 

Blogger Yayın içine Benzer Yazılar Eklentisi Kullanımı

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz.
2 ) Ctrl + F yardımı ile </head>  kodunu buluyoruz. 
3 )</head>  kodunun öncesine aşağıdaki Blogger Yayın içine Benzer Yazılar Eklentisi kod dizinini ekliyoruz.


<style> #related-posts { float: left; width: 650px; border-bottom: 1px solid #ddd; height: 290px; } #related-posts h2 { margin-top: 50px; border-bottom: 0px; border-top: 1px solid #ddd; padding-top: 20px; margin-bottom: 10px; margin-left: 3px; color: #666; font-size: 16px; } </style> <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DQ30hSuDvSoriM1E9CuoIEiUAIrQ_uAWWNhMlcLLzvAERP_BsNrnnnrGWfHFRICT_4uz2fhwJtWuje1uZViCDBrAEXlei6_gHW3AtvK_cjAwKgXukTvG-7aK6M-eDZMlN3ACiaiosABI/s1600/no_image.jpg"; var maxresults=3; var splittercolor="#fff"; var relatedpoststitle="Related Articles:"; </script> <script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DQ30hSuDvSoriM1E9CuoIEiUAIrQ_uAWWNhMlcLLzvAERP_BsNrnnnrGWfHFRICT_4uz2fhwJtWuje1uZViCDBrAEXlei6_gHW3AtvK_cjAwKgXukTvG-7aK6M-eDZMlN3ACiaiosABI/s1600/no_image.jpg";} } if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { var splitbarcolor; if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD"; for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<a style="text-decoration:none;padding:5px;float:left;'); if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"'); else document.write('"'); document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>'); i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } document.write('</div>'); relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } //]]> </script> </b:if> Read more: http://www.bloggerdersleri.com/2013/09/blogger-yayin-icine-resimli-benzer.html#ixzz2l7gIfPWk

Ardından kod satırları arasında <data:post.body/> kodunu bularak hemen altına aşağıdaki kodu ekleyin. Eğer <data:post.body/> kodunu bulamıyorsanız  <div class='post-footer-line post-footer-line-1'></div> , kodunun altına eklemeyi deneyin.
<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> <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:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div></b:if>

Kodları eklemeniz ardından Blogger Yayın içine Benzer Yazılar Eklentisi sorunsuz olarak çalışmaya başlayacaktır.