Blogger Önerilen Slayt Kutusu Ekleme

Blogger Önerilen Slayt Kutusu Ekleme blogger sitenizin sağında etiket bazlı gösterime dayalı önerilen yazılar eklentisi ekleme haber, magazin, yemek tarifi veya kişisel bloglar için oldukça elverişli bir eklentidir.

Bloğunuzu ziyaret edenlere diğer makalelerinizi tanıtma imkanı sağlar. Site içi gezinme ve seo açısından da artılar sağlayabilir. Ziyaretçilerin sitenizde kalma sürelerini artırabilirsiniz.

Blogger Önerilen Slayt Kutusu Nasıl Eklenir

1. Adım Blogger Önerilen Slayt Kutusunu eklemek istediğiniz bloggerı açın Tema bölümüne girin ve HTML'yi düzenle bölümünde ]]> </ b: skin> veya  </style> alanının üstüne kodları ekleyin.

#chslidingbox{background:#fff;width:100%;max-width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
.chslidingbox-title{background:#3d3d3e;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
.show{bottom:84px}
.hide{bottom:-145px}
.related-post{font-size:70%}
.related-post h4{font-size:150%;margin:0 0 .5em}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}
.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

2. Adım </body> alanını bulun ve </body> alanının üstüne kodu ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>

3. Adımda <data:post.body/> Alanını bulun <data:post.body/> kodun hemen altına kodları ekleyin. Eğer uygun alanı bulamadıysanız 4. adımı uygulayın. numPosts: 2 Alanı gösterilen içerik sayısını değiştirebilirsiniz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:left;margin:0 15px;'>Sizin için öneriler</span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#x00D7;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#x2212;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>&#x2b;</a></span>
    </div>
    <div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 2,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sliderekomendasi.js' type='text/javascript'/>         
</div>
</div>
</b:if>

4. Adım 3. Adımda sorun yaşayanlar uygulayabilir 3. adımı sorunsuz yapanlar bu adımı uygulamasına gerek yoktur. <b:includable id='post' var='post'> alanını bulun ve aşağıdaki gibi gösterilen alana ekleyiniz.

<b:includable id='post' var='post'>
...
...
...
<-- Kodu Bu alana Ekleyiniz -->
</b:includable>

Temanızı kaydedin ve sonucu görün Blogger Önerilen Slayt Kutusu örnek görüntüsü.