Bumerang - Yazarkafe

Blogger Slider- Popüler Yazıları Slayt Olarak Görüntüleme

Popüler yazılarınızı slayt alanı ve 3D dönen küp şeklinde yayınlama imkanını veren kodları daha önce sizlerle paylaşmıştık.Şimdi ise farklı bir görünüme sahip, şık tasarımı olan, blogunuzun başında popüler içeriklerinizden  slayt halinde gösterim yapan eklentiyi sizlere sunuyoruz.
Popüler Yazıları Slayt olarak kullanmanızın avantajları;
Blogunuza şık ve dikkat çekici bir görünüm kazandırır.Ziyaretçilerinizi  yazılarınızı tıklamaya teşvik eder.Sliderlerde resim boyutlarını slayt alnınıza göre ayarlamak, resim linkini elle girip açıklamaları manuel yazmak zorundasınız.Blogunda slayt alanı kullanmak isteyen arkadaşları Popüler Yazılar Slayt Alanında Görüntüleme eklentisi ile bu uğraştan kurtarıyoruz.Eklenti sayesinde en çok tıklanan yazılarınız hangisi ise otomatik olarak slayt alanında görünecektir.Herhangi bir boyutlandırma yapmanıza,link vermenize açıklama yapmanıza gerek yok  Popüler Yazılar Slayt Alanı  eklentisi herşeyi otomatik olarak yapıyor.

Eklentiyi blogunuza kurmak için;
Blogger hesabınızla giriş yaptıktan sonraTasarım>Gadget Ekle>Popüler Yayınlar yolunu takip edip Popüler Yayınlar eklentisini blogunuza kurmanız gerekiyor, popüler yazılar eklentisini blogunuza kurduktan sonra ufak bir kod eklentisi ile popüler yazılarınız şekildeki gibi şık tasarımlı,animasyonlu,slayt olarak görüntülecek,bu sayede popüler yazılarınız dahada poüler olacak.
Popüler Yazılar eklentisini kurduktan sonra,
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript  yolunu takip edip aşağıdaki kodu kopyalayıp açılan gadgetimizin içine yapıştırıp kaydediyoruz.
<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {
    color:#FFF;
}
.lof-slidecontent a.readmore{
    color:#58B1EA;
    font-size:95%;

}
.lof-slidecontent{
    position:relative;
    overflow:hidden;
    border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:100000;
    text-align:center;
    background:#FFF
}
.lof-slidecontent .preload div{
    height:100%;
    width:100%;
    background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
    position:relative;
    height:100%;
    width:800px;
    z-index:3px;
    overflow:hidden;
}

/*******************************************************/
.lof-main-item-desc{
    z-index:100px;
    position:absolute;
    bottom:50px;
    left:0px;
    width:350px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png);
    height:100px;
    /* filter:0.7(opacity:60) */
    padding:10px;
}
.lof-main-item-desc p{
    margin:0 8px;
    padding:8px 0
}
.lof-main-item-desc h3{
    padding:0;
    margin:0
}
.lof-main-item-desc h2{
    padding:0;
    margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{
    margin:0;
    background:#C01F25;
    font-size:75%;
    padding:2px 3px;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
    text-transform:uppercase;
    text-decoration:none
}
.lof-main-item-desc h3 a:hover{

    text-decoration:underline;
}
.lof-main-item-desc h3 i {
    font-size:70%;
}

/* main flash */
ul.lof-main-wapper{
    /* margin-right:auto; */
    overflow:hidden;
    background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
    padding:0px;
    margin:0   !important;
    position:absolute;
    overflow:hidden;
}

ul.lof-main-wapper li{
    overflow:hidden;
    padding:0px   !important;
    margin:0px;
    float:left;
    position:relative;
}
.lof-opacity  li{
    position:absolute;
    top:0;
    left:0;
    float:inherit;
}
ul.lof-main-wapper li img{
    padding:0px  !important;
}

/* item navigator */
.lof-navigator-wapper {
    position:absolute;
    bottom:10px;
    right:10px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat;
    padding:5px 0px;
}
.lof-navigator-outer{
    position:relative;
    z-index:100;
    height:180px;
    width:310px;
    overflow:hidden;
    color:#FFF;
    float:left
}
ul.lof-navigator{
    top:0;
    padding:0;
    margin:0;
    position:absolute;
    width:100%;
    background:none !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
ul.lof-navigator li{
    cursor:hand !important;
    cursor:pointer !important;
    list-style:none !important;
    padding:0 !important;
    margin-left:0px !important;
    overflow:hidden !important;
    float:left !important;
    display:block !important;

    text-align:center !important;

}
ul.lof-navigator li img{
    border:#666 solid 3px;
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
    border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
    display:block;
    width:22px;
    height:30px;
    color:#FFF;
    cursor:pointer;

}
.lof-navigator-wapper .lof-next {
    float:left;
    text-indent:-999px;
    margin-right:5px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
    float:left;
    text-indent:-999px;
    margin-left:5px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center;
}
#lofslidecontent45 {width:600px;height:300px;}
.lof-main-outer {width:600px; height:300px;}

.lof-main-wapper img {height:300px !important; width:600px !important}
.lof-navigator-wapper img {height:32px !important; width:80px !important}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
        var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
                        next:$('#lofslidecontent45 .lof-next') };

        $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
                                                direction        : 'opacitys',
                                                 easing            : 'easeOutBounce',
                                                duration        : 1200,
                                                auto             : true,
                                                maxItemDisplay  : 4,
                                                navPosition     : 'horizontal', // horizontal
                                                navigatorHeight : 32,
                                                navigatorWidth  : 80,
                                                mainWidth:600,
                                                buttons            : buttons} );
    });
</script>
Kod içerisinde renkli olarak belirttiğimiz  bütün width ve height değerlerini değiştirerek slayt alanını isteğinize göre boyutlandırabilirsiniz.
Son olarak yapmanız gereken basit bir işlem daha var.Popüler Yayınlar Gadgetinizi Blog Kayıtları nın üzerine sürükleyip bırakıyoruz ve kaydediyoruz.Animasyonlu Popüler Yayınlar eklentisi 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ı

7 yorum:

  1. ekledim ama çalışmıyor blogumda salyt alanıda var acaba ondan olabilir mi?

    YanıtlaSil
  2. aliermanakyuz13 Nisan 2012 19:52

    evet, çakışma yapabiliyor kodlar, benimde başıma gelmişti daha önce. birini kaldırınca çalıştı..

    YanıtlaSil
  3. merhaba bu eklentı için günlerdir uğrasıyorum 
    eklemek için yardım edemezmisiniz?  o ekledım eklntı calısıyor ama ıstedıgım yerde oynatamıyorum bıryerde hata var ama bulamıyorum yardım edersenı sevınırım.. 

    YanıtlaSil
  4. hocam tek kelimeyle muhteşem.blog şablonuyla uğraşmaya gerek kalmadı.şablonla uğraşırdım bunun için en sonunda blogum bozuldu epey yavaşladı geri alamadımda.möecburi yeni blog kurdum.acaba bu widgeti son yayınlar içinde kullanabilirmiyiz.hemen deneyeyim

    YanıtlaSil
  5.  isteğiniz üzerine, son yazılar için slayt alanı ekleme konulu bir yazı yayınladık.Gösterdiğiniz ilgiden dolayı teşekkürler.

    YanıtlaSil
  6. Hocam Ben Bu Uygulamayı Yüklemistim sonrada son yazılar slider ile değistirdim hocam bunu yan menüde yukarıdan asağı şekilde kayan bir silider yapmamız mümkünmü acaba bu konuda yardımcı olursanız cok sevinirim

    YanıtlaSil
  7. hocam demo uzerinde acilan acilir menu slaytin uzerinde aciliyor fakat benim acilir munu slaytin altinda kaliyor bunu sebebi nedir acaba ya cok ugrastim yapamadim yardim lutfen

    YanıtlaSil

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