Blogger popüler yayınlar eklentisini görünüm olarak daha estetik bir hale getirmeye ne dersiniz?
Bildiğiniz gibi bloggerde eklenti olarak hali hazırda popüler yayınlar eklentisi zaten mevcut, biz ekliyeceğimiz birkaç satırlık kod ile mevcut popüler yazılar eklentisini renkli ve maus ile üzerine geldiğimizde resimleri dönen animasyonlu bir popüler yazılar eklentisi haline getireceğiz.Buyrun,demo görünüme bir göz atalım.Eğer beğenirseniz yazının devamını okuyup renkli animasyonlu blogger popüler yazılar eklentisini blogunuza nasıl ekliyebileceğinizi anlatalım.
DEMO GÖRÜNÜM1-Blogger hesabımızla giriş yapıyoruz.

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}

Kodu ekledikten sonra şablonumuzu kaydedip çıkıyoruz.
Bu kodu ekledikten sonra blogger popüler yayınlar eklentisi blogunuzda varsa, zaten otomatikmen şeklinin değiştiğini göreceksiniz.Eğer yoksa Blogger Kumanda Paneli>Tasarım>Gadget Ekle>Popüler Yayınlar gadgetini blogumuza eklediğimizde görünüm olarak demo görünümde verdiğimiz animasyonlu,renkli, dönerli,blogger popüler yazılar eklentisine sahip olacaksınız güle güle kullanın.

Bloggerin kendi kullanıcı panelinde popüler yayınlar gadgeti zaten mevcut.Normal görünüme sahip bu popüler yayınlar gadgetini iki tıklamayla herkes ekliyebilir.Eklediğimiz bu popüler yayınlar gadgetine bir iki kod ekliyerek görünüm ve tasarım farklılığı yaratacağız.Yaptığımız değişiklik sonrasında Popüler yayınlar artık resimdeki gibi yan yana küçük resim ve altında başlık şeklinde görünecek.
Poüler Yayınlarınızı bu görünüme kavuşturmak için:
1-Popüler Yayınlar Gadgetinin blogumuzda bulunması gerekir.Eğer Yoksa;Kumanda Paneli>Tasarım>Gadget Ekle>Popüler Yayınlar yolunu takip edip Popüler Yayınlar Gadgetini blogumuza ekliyoruz.
2-Eklediğimiz Popüler Yayınlar Gadgetinin Ayarlarını  resimdeki gibi yapıp kaydediyoruz.
3-Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip HTML kodları içierisinde ]]></b:skin>kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz]]></b:skin>
 kodundan önceki kısma yapıştırıyoruz.

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

kod içerisnde kırmızı renkle belirttiğimiz değerleri değiştirerek resim boyutlandırmasını kendinize göre yapabilirsiniz.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Popüler Yazılara ait Widget kodu normalde aynen yukarıdaki gibidir.Biz bu widget kodunu aşağıdaki kodla değiştireceğiz.Popüler yazılara ait widget kodumuzun son hali aşağıdaki gibi olacak.

<b:widget id='PopularPosts1' locked='false' title='Blog Okulu Popüler Yayınlar' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Popüler Yazılar widgetine ait kodu değiştirdikten sonra şablonumuzu kaydedip çıkıyoruz.Popüler yazılara ait yeni görünümümüz kullanıma hazır.

Popüler Yazılarınızı şekildeki gibi 3D olarak dönen küp üzerinde gösterip ziyaretçilerinizin ilgisini çekip,blogunuzun farklı olduğunu hissettirmeye hazırmısınız? Eklediğimiz eklentiyi blogumuzun kenar çubuğunda kullanarak,alan kullanımını ergonomik bir seviyeye düşürebilirsiniz.3D dönen küplü Popüler Yazılar Eklentisini blogunuza eklemek için;Blogger hesabınızla giriş yaptıktan sonra Tasarı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, 3D dönen küp slaytı olarak görüntülecek,bu sayede popüler yazılarınız dahada poüler olacak.Demo Görünüm için Tıklayın.
Popüler Yayınlar Eklentisini kurduktan sonra;
Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetimizin içine yapıştırıp kaydediyoruz.

<!-- blogokulu.blogspot.com Kodu Baslat -->
<style type="text/css">
.cube { width: 200px; height: 200px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});

</script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script><!-- blogokulu.blogspot.com Kodu Bitir -->

Son olarak yapmanız gereken basit bir işlem daha var.Eklediğimiz Html/Javascript Gadgetini Blog Kayıtları nın üzerine sürükleyip bırakıyoruz ve kaydediyoruz.3D dönen küp Animasyonlu Popüler Yayınlar eklentisi kullanıma hazır.

Popüler Yazılarınızı şekildeki gibi sola doğru kayan şık tasarımlı, animasyonlu slaytta göstermek istermisiniz? Öncelikle blogger hesabınızla giriş yaptıktan sonra Tasarı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 Yayınlar Eklentisini kurduktan sonra;
Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetimizin içine yapıştırıp kaydediyoruz.

<!-- blogokulu.blogspot.com Kodu Baslat -->
<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
    position:relative;
    overflow:hidden;
    border:#F4F4F4 solid 1px;
    width:892px;
    height:300px;
}
.lof-slidecontent .preload{
    height:100%;
    width:100%;
    background:#FFF;
    position:absolute;
    top:0;
    left:0;
    z-index:100000;
    color:#FFF;
    text-align:center
}
.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:600px;
    z-index:3px;
    overflow:hidden;
    float:right;
}

/*******************************************************/
.lof-main-item-desc{
    z-index:100px;
    position:absolute;
    top:150px;
    left:50px;
    width:400px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

    /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
    color:#FFF;
    margin:0 8px;
    padding:8px 0
}
.lof-main-item-desc h3 a{
    color:#FFF  !important;
    margin:0 !important;
    font-size:140% !important;
    padding:20px 8px 2px !important;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif !important;
}
.lof-main-item-desc h3 a:hover{
    color:#FF6;
    text-decoration:underline;
}

/* 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;
    height:300px;
    width:600px;
    position:absolute;
    overflow:hidden;
}

ul.lof-main-wapper li{
    overflow:hidden;
    padding:0px  !important;
    margin:0px;
    height:100%;
    width:600px;
    float:left;
}
.lof-opacity  li{
    position:absolute;
    top:0;
    left:0;
    float:inherit;
}
ul.lof-main-wapper li img{
    padding:0px !important;
    width:600px  !important;
    height:300px  !important;
}

.lof-main-wapper{
        margin-left:auto;
        margin-right:inherit;
        clear:both;
        height:300px;
    }

li-desc{
    z-index:100px;
    position:absolute;
    top:150px;
    left:50px;
    width:400px;
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

    /* filter:0.7(opacity:60) */
}
li-desc p{
    color:#FFF;
    margin:0 8px;
    padding:8px 0
}
li-desc h3 a{
    color:#FFF;
    margin:0;
    font-size:140%;
    padding:20px 8px 2px;
    font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
    color:#FF6;
    text-decoration:underline;
}

/* item navigator */
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 ;
    cursor:pointer ;
    list-style:none ;
    width:100%  !important;
    padding:0  !important;
    margin:0 !important;
    overflow:hidden !important;
}
.lof-navigator-outer{
    position:absolute !important;
    z-index:100 !important;
    height:300px !important;
    width:310px  !important;
    overflow:hidden  !important;
    color:#FFF !important;
    left:0 !important
    top:0 !important;
    right:inherit !important;
}
.lof-navigator li.active{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg2.gif) center right no-repeat;
    color:#FFF
}
.lof-navigator li:hover{

}

.lof-navigator li h3{
    color:#FFF;
    font-size:120%;
    padding:15px 0 0 !important;
    margin:0;

}
.lof-navigator li div{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);
    color:#FFF;
    height:100%;
    position:relative;

    padding-left:15px;
    border-top:1px solid #E1E1E1;
    margin-left:inherit;
    margin-right:18px;
}

.lof-navigator li.active div{
    background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg2.gif);
    color:#FFF;

    margin-left:inherit;
    margin-right:18px;

}
.lof-navigator li img{
    height:60px;
    width:60px;
    margin:15px 15px 10px 0px;
    float:left;
    padding:3px;
    border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
    border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
    color:#FFF;

.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}

    ul.lof-main-wapper li {
        position:relative;
    }

</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/scriptlofslider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
        $('#lofslidecontent45').lofJSidernews( { interval:2000,
                                                 easing:'easeOutBounce',
                                                duration:1200,
                                                auto:true } );
    });

</script>
<!-- blogokulu.blogspot.com Kodu Bitir -->

Kod içerisinde, sonda kırmızı renkle belirttiğim interval değerini değiştirerek slaytın geçiş hızını ayarlayabilirsiniz.
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.