Önerilen Blog Yayınları Slayt Kutusu - Bu yazımızda Blogger Widget tasarımlarından önerilen / tavsiye edilen blog yayınları kutusu blog'a nasıl eklendiği ile ilgili bilgiler paylaşacağız.
Önerilen blog yaınları kutusu, blog'un sağ tarafında bulunan öneri dayalı etiket duyarlı, Widget içersinde görüntülenen yayınların otomatik olarak değişen ve blog temaları için kurulumu çok kolay Widget tasarımıdır. Slayt olarak ziyaretçilere içerik ile alakalı benzer blog yayınları seçeneği sunar.
Bknz: Slayt Görünümlü Demo ve Download Butonları Yapma
Blog sitelerinde bulunan benzer yayınlar yada ilgili yayınlar Widget'i ile aynı özelliğe sahip. Sadece blog yayınlarının altında slayt olarak yüklenen tavsiye/öneri tarzında seçenek sunar.
Önerilen Blog Yayınları Slayt Kutusu Nasıl Eklenir?
Önerilen blog yayınları slayt kutusunu eklemek için, aşağıdaki adımları takip edin.
1- Blogger hesabınıza giriş yapın ve eklemek istediğiniz blog'u seçin. Blog'unuzun kumanda panelinin sol tarafında bulunan menüden Tema > HTML'yi Düzenle yolunu tatkip ederek blog'unuzun şablon editör sayfasını açın. Açılan sayfada aranan kodlara daha hızlı erişmek için, klavyenizin CTRL+F tuşlarını kullanın.
Blog'unuzun şablon editör sayfasında bulunan ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.
#sliding_box{background:#fff;max-width:355px;width:100%;height:185px;overflow:hidden;border:none;position:fixed;right:-360px;text-align:left;z-index:99;box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);transition:all .4s ease-out}
.sliding_box-title{background:#e74c4c;display:block;height:45px;color:#fff;line-height:45px;text-transform:capitalize;width:100%;font-size:14px;font-weight:500;letter-spacing:.5px}
.sliding_box-title span a{text-align:center;color:#fff;font-family:initial;float:right;height:40px;margin:0 0 0 15px;font-size:20px}
a#sliding_box-close,a#sliding_box-close{margin-right:15px}
.sliding_box-title >span >h2{font-weight:normal!important;font-size:20px!important;}
.sliding_box-container{width:100%;height:auto;border:none;float:left;margin:3px}
.sliding_box-container >div{padding:10px 0;border:none;margin:3px 0;}
.sliding_box-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{;list-style:none;margin-top:-20px;padding-top:15px}
.related-post-style-2 li{overflow:hidden;padding:0 10px 10px 10px;}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{float:left;margin:2px 10px 0 0;max-width:none;max-height:none;height:45px;border:0;padding:0;width:45px;border-radius:3px;}
.related-post-style-2 .related-post-item-title{font-size:130%;line-height:normal;font-weight:500;}
a.related-post-item-title{transition:all .4s ease-out;color:#95a5a6;}
a:hover.related-post-item-title{text-decoration:none;color:#e74c4c;}
.related-post-style-2 .related-post-item-summary{overflow:hidden;display:block;}2- Aşağıdaki javaScript kodunu blog'unuzun </body> kodunun bir satır üzerine ekleyin.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#sliding_box").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#sliding_box"),s=$("#sliding_box-close"),o=$("#sliding_box-min"),l=$("#sliding_box-max");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- Blogunuzun şablon editör sayfasında <data:post.body/> kodunu bulun ve örnek kodda gösterildiği gibi aşağıdaki kodları </b:includable> kapanış kodunun bir satır üzerine ekleyin.
<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='sliding_box'>
<div class='sliding_box-title sliding_box-row'>
<span style='float:left;margin:0 15px;'>Önerilen Yayınlar</span>
<span><a href='javascript:void(0);' id='sliding_box-close' title='close'>×</a></span>
<span><a href='javascript:void(0);' id='sliding_box-min' title='min'>−</a></span>
<span><a href='javascript:void(0);' id='sliding_box-max' title='max'>+</a></span>
</div>
<div class='sliding_box-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'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: "<data:blog.homepageUrl/>",widgetTitle: "<h4></h4>",numPosts: 2,summaryLength: 0,
titleLength: "auto",thumbnailSize: 45,noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",containerId: "sliding-tab",newTabLink: true,moreText: "",widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://rawgit.com/jquerycods/jquery/master/slider.js'></script>
</div>
</div>
</b:if>Önerilen yayın kutusu içerisinde gösterilen yayın sayısını değiştirmek için, yukarıdaki javaScript kodu içerisinde belirtilen numPosts: 2 yayın sayısı kodu ile değiştirebilirsiniz.Örnek Kod
<b:includable id='post' var='post'>
...
...
<data:post.body/>
...
...
<-- SLAYT KUTUSU -->
</b:includable>Yukarıdaki kodları ekledikten sonra kontrol edin ve şablonu kaydedin. Önerilen blog yayınları Widget kutusunu incelemek için, aşağıdaki örnek sayfa butonuna tıklayın.
Önerilen blog yayınları Widget kutusu ile ilgili daha fazla bilgi almak için yorum bırakabilirsiniz.
0 komentar: