• Posted by : Unknown 12 Nisan 2012 Perşembe


    Blogger Renkli Popüler Yayınlar Eklentisi

    Bu eklentimizde , blogunuzda bulunan popüler yayınlarınız renkleniyor , Popüler yayınlarınıza renk katmak isterseniz bu eklenti tam size göre..

    Görsel açıdan oldukça şık olan Blogger Renkli Popüler Yayınlar Eklentisini tavsiye ediyoruz..

    Anlatıma geçelim hemen..

    Şablona girerek , Widget Şablonlarını Genişlet diyoruz ve Aşağıdaki kodumuzu buluyoruz
    /* Variable definitions
    ====================
    Bu kodumuzun hemen altına aşağıdaki kodlarımızı ekliyoruz..
    <Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
    <Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
    <Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
    <Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
    <Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
    <Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
    <Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
    <Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
    </Group>
    Şimdi ise bu kodu bulalım.
    ]]></b:skin>
    Hemen üstüne aşağıdaki kodlarımızı ekliyoruz..
    #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:$(PopularPosts.background.color1);width:90%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
    #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:$(PopularPosts.background.color7);width:60%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #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{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:40px;height:40px}
    #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
    Yukarıdaki işlemleri yaptıysanız eklentimiz şuan için çalışacaktır , ama popüler yayınlarda resim kullanıyorsanız aşağıdaki anlatımıda yapmanızı öneririz , yoksa resimler düzgün görüntülenmeyebilir , resim kullanmıyorsanız üstte anlatılanlar yeterli..

    Öncelikle popüler yayınları blogunuza eklediğinizden emin olun , standart olarak popüler yayınlar başlığınız , "Popüler Yayınlar" şeklindedir..Bu yüzden biz popüler yayınlar kelimesini arayacağız , farklı bir isim kullandıysanız siz o ismi aratın..
    <b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>
    x
    X
    X
    X
    X
    X
    X
    X
    X
    X
    X
    X
    X
    X
    X
    X
    X

    </b:widget>
    Yukarıdaki kodlar , popüler yayınların bulunduğu kodlar , burada yapmamız gereken ilk kod ile son kod arasını silip , aşağıdaki kodlarımızı sildiğiniz yere eklemek , yukarda silmeniz gereken yerleri kırmızı x ile gösterdim( sizde x yerine kodlar olacak) diğer ilk ve son koda dokunmayın...aralarını silip aşağıdaki kodlarımı ekleyin..
    <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;'>
    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
    <b:else/>
    <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
    </b:if>
    <b:else/>
    <b:if cond='data:showSnippets == &quot;false&quot;'>
    <b:if cond='data:post.thumbnail'>
    <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
    <b:else/>
    <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Jdfx4oD3XMhc8am9HtN9uun1tqnAlYhcCDponBB1dy6wTvawpMAzBlcd1kAuAyT62dJtqWapjJVlpjI6-YPnbiqy-kZmmlNjSIOaGcSexULaa6ZkJF9wg-XqPnN6TaA5-jY6oZnO_48/s1600/defaultimage.jpg'/>
    </b:if>
    <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
    <div class='clear'/>
    <b:else/>
    <b:if cond='data:post.thumbnail'>
    <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
    <b:else/>
    <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Jdfx4oD3XMhc8am9HtN9uun1tqnAlYhcCDponBB1dy6wTvawpMAzBlcd1kAuAyT62dJtqWapjJVlpjI6-YPnbiqy-kZmmlNjSIOaGcSexULaa6ZkJF9wg-XqPnN6TaA5-jY6oZnO_48/s1600/defaultimage.jpg'/>
    </b:if>
    <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
    <div class='clear'/>
    </b:if>
    </b:if>
    </li>
    </b:loop>
    </ul>
    </div>
    </b:includable>
    Yukarıdaki kodlarıda eklediyseniz , Blogger Renkli Popüler Yayınlar Eklentisine artık sahipsiniz, güle güle kullanın..DEMO


    <<< Bu Yazı için Arama Sonuçları  >>>

    Blogger Renkli Popüler Yayınlar Eklentisi , Blogger Renkli Popüler Yayınlar Gösterme , Renkli Popüler Yayınlar eklentisi , Popüler Yayınlar , Popüler Yayınlar eklentisi , Blogger Popüler Yayınlar Eklentisi


    Leave a Reply

    Subscribe to Posts | Subscribe to Comments

  • Copyright © 2013 - Hyperdimension Neptunia

    Blogger Ve Wordpress Tema Arşivi - Powered by Blogger - Designed by Johanes Djogan