Blogger icin JQuery ile Son Yazilar Slayt Alani Ekle
| Blog Okulu Blogger çin tasralanmış farklı slayt alanlarını (Slider) sizlerle paylaşmaya devam ediyor.Popüler yazılarınızı slayt olarak göstermek için daha önce 3 farklı Popüler Yazılar Slayt alanını ( 1. 2. 3. ) sizlerle paylaşmıştık, yoğun istek üzerine son yazılarınızı da slayt alanı olarak gösteren eklentiyi sizlerle paylaşmaya karar verdik.Son Yazıları Slayt Olarak Görüntüleme eklentisini kurduğunuzda en son yazdığınız yazıdan, |
Blogger için Otomatik Son Yazılar Slayt Alnını Blogunuza Eklemek için;
Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.Kodlar içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.
/* START EasySlider By blogokulu.blogspot.com */
#slide-container {
height: 360px;
position: relative;
width: 480px;
}
#slider {
height: 360px;
left: 25px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 480px;
font-family: calibri;
}
.slide-desc {
background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0px;
text-align: left;
top: 0;
width: 200px;
z-index: 99999;
}
.slide-desc h2 {
display: block;
}
.crosscol .widget-content {
position: relative;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li {
margin: 0;
padding: 0;
list-style: none;
}
#slider2 {
margin-top: 1em;
}
#slider li, #slider2 li {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width: 480px;
height: 360px;
overflow: hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev {
display: block;
width: 30px;
height: 77px;
position: absolute;
left: -30px;
text-indent: -9999px;
top: 71px;
z-index: 1000;
}
#nextBtn, #slider1next {
left: 520px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display: block;
height: 77px;
left: 0;
position: absolute;
top: 132px;
width: 30px;
z-index: 1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {
display: block;
position: relative;
width: 30px;
height: 77px;
background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls {
margin: 1em 0;
padding: 0;
height: 28px;
}
ol#controls li {
margin: 0 10px 0 0;
padding: 0;
float: left;
list-style: none;
height: 28px;
line-height: 28px;
}
ol#controls li a {
float: left;
height: 28px;
line-height: 28px;
border: 1px solid #ccc;
background: #DAF3F8;
color: #555;
padding: 0 10px;
text-decoration: none;
}
ol#controls li.current a {
background: #5DC9E1;
color: #fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
outline: none;
}
/* END EasySlider By blogokulu.blogspot.com */
Html kodları içersinde yine Ctrl+F yardımı ile </body> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz </body> kodundan sonraki kısma yapıştırıyoruz.
<!-- Start easy content slider by blogokulu.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<!-- End easy content slider by blogokulu.blogspot.com -->
3.Adım Gadget Ekleme:
işlemimizin son basamağıda gadget ekleme işlemi.
Kumanda Paneli >Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıyoruz.
<div id="slider">
<script style="text/javascript" src="http://helperblogger.webs.com/files/easySlider.min.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://blogadresiniz.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
blogadresiniz yazan yere kendi blog adresinizi yazıyorsunuz.
var numpost_gal=6 değeri görüntülenecek son yazı sayısını,
var numchars_gal=150 değeri yazınızdan slayt alanında görüntülenecek kelime sayısını (Kısa Not) göstermektedir.
Gadgetimizi kaydedip çıkıyoruz.Son olarakta, Blogger Son Yazılar Slayt Alanı için eklediğimiz gadgeti blog kayıtlarının üzerine sürükleyip bırakıyoruz.Şablonumuzu kaydedip çıkıyoruz.Blogger için JQuery ile yapılmış Son Yazılar Slayt Alanı kullanıma hazır.
