Bumerang - Yazarkafe

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,
kısa bir not ve bu yazıya ait en baştaki resim, (slayt alanınızda resimler otomatik olarak slayt alanınzın boyutuna uygun hale getirilip) yayınlanacaktır.
Blogger için Otomatik Son Yazılar Slayt Alnını Blogunuza Eklemek için;
1.Adım CSS Kodunu Ekleme:
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 */
2.Adım Script Kodlarını Ekliyoruz:
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 -->

Script kodumuzu ekledikten sonra şablonumuzu kaydedip çıkıyoruz.
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>
Eklediğimiz Gadget kodu içerisinde:
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.
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

8 yorum:

  1. Dedikleriniz hepsini yaptım lakin sayfada kayma oldu sağda olan kategoriler ve reklamlar aşağı indi yardım lütfn

    YanıtlaSil
  2. resimler çok büyük bi düzenleme yapılırsa güzel olur

    YanıtlaSil
  3. merhaba slayt hep çıkıyor mesala ben baska bi kategoride slatların çıkmasını istemiyorum lütfn yardm :(

    YanıtlaSil
  4. slayt hep çıkıyor dediğiniz, bir yazı tıklandığında da görünüyor diyorsunuz heralde? eğer doğru anladıysam sorunuzun cevabını burdan bulabilirsiniz.

    YanıtlaSil
  5. :d evet dediğimi anlamısınız teşekkürler

    YanıtlaSil
  6. uyguladım slayt yeri çıktı ama hiçbirşey görünmüyor :/ yardım lütfen

    YanıtlaSil
  7. hocam Muhtesem oLmus :) SaqLam Bir SekiLde EkLedim YaLnız söyLe Bir Sorum oLacak Ben diqer Popüler yazıLar sLideri eKLediqimde ResimLerin pixeLLeriyLe OynayabiLiyorduk Buradada oynayabilirmiyiz Bazı ResimLer Kötü Cıkıyor Bu Konuda Yardımcı oLursanız Sevinirim TşkLer.. KoLay qeLsin..

    YanıtlaSil
  8. Hocam Birde Yeni farkettim Saat qecenin 3 Gayet NormaL Bu SlideR'in sag Ve soL Yön TusLarı farkLı yerLerde Cıkmıs durumda NasıL CözebiLirim??

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...