Hayata bakışınızı değiştirir...

  • Gündem Notları:

    15 Nis 2014

    Sade ve Şık Blogger Popüler Yayınlar Eklentisi

    Blogger güzeldir hoştur ama şu widget sıkıntısı benim gibi eminim pek çok Blogger kullanıcısını canından bezdiriyor. Hani şöyle bol seçenekli adam gibi her temaya cuk oturacak bir widgetler seçeneği sunsa da biz de widgete doysak diye düşünen sayısı eminim fazladır. O sıkıntılı widgetlerden "Popüler Yayınlar" isimli olanı az önce de bahsettiğim gibi oldukça sıkıntı yaşatabilenlerden biri . Özellikle temanızı değiştirdiğiniz zaman şekil kaymaları, yerli yersiz yazı taşmaları, font büyüklük ve küçüklük ayarsızlıkları gibi sorunlar yaşatan bu widgeti bu makalemizde adam gibi şekle sokacağız inşallah.

    Benim en çok sevdiğim tema özellikleri sade ve şık duranlardır. Haliyle temayı güzel kılan widgetlerinin de bu uyuma ayak uydurmasını isterim. Şayet siz de bunu düşünenlerdenseniz çok sade ama bir o kadar da şık görünen yeni "Popüler Yayınlar" eklentisini mutlaka denemenizi tavsiye ederim. Bu eklenti sayesinde hem yayınları numaralı bir şekilde sıralayabilecek, hem de göze hoş görünen sade bir görüntüye kavuşturabileceksiniz. Hemen anlatıma geçelim:

    Html Şablonunuzun kodları arasından şu kodu bulun:

    ]]>
    Hemen üstüne aşağıdaki Css kodlarını yapıştırın:
    #PopularPosts1 h2{ position:relative; padding:8px 10px 6px 10px; width:100%; margin-bottom: 5px; font-size:17px; color:#757575; /* Color of the widget's title */ text-align:left; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 1px 12px; padding:4px 5px; } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; left: -30px; top: 50%; margin-top: -13px; background: #8E8E8E; /* background color of the numbers */ height: 1.9em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; color: #fff; font-size: 14px; } #PopularPosts1 ul li:after{ position: absolute; content: ''; left: -2px; margin-top: -.7em; top: 50%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left:10px solid #8E8E8E; /* background color of the right arrow*/ } #PopularPosts1 ul li a{ color: #444; text-decoration: none; font-size:15px; } #PopularPosts1 ul li { position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 0.4em; background: #ddd; transition: all .3s ease-out; text-decoration:none; transition: all .1s ease-in-out; } #PopularPosts1 ul li:hover{ background: #eee; /* Background color on mouseover */ } #PopularPosts1 ul li a:hover{ color:#444; /* Link color on mouseover */ margin-left:3px; }

    Eklenti kullanıma hazır :)

    Hiç yorum yok:

    Yorum Gönder