Blogger için Şık Popüler Yayınlar Görünümü

Merhaba WeBlogizm Takipçileri,

Bugün sizler için blogger eklentileri arşivimizden bir eklenti tanıtacağız ve sitenize uygulamayı göstereceğiz. Sizlerin o güzel blogger sitelerinin biraz daha hoş görünmesini sağlamak isteriz. Tanıtacağımız eklenti yani widget aslında yerleştirme değil dizayn olacaktır. Popüler Yayınlar çok mu kötü veya çok mu sade? O zaman bu widget tam size göre. Haydi inceleyelim.

Widget Görünümü:

Bu Şık Popüler Yayınlar Widgetini Sitene Ekle / Uyarla

CSS ekleme

Blogger → Şablon → HTML Düzenle'ye gidiniz. Ardından Ctrl + F tuşlarının yardımı ile  ]]> </ b: skin> kodunu arayın. Kodu bulduktan sonra aşağıdaki kodu onun üstüne yapıştırın. (Altında yapıştırırsanız widget çalışmaz ve temanızı bozar.)

/ * Popüler Yayınlar Widget * / AllBloggerTricks.com tarafından özelleştirilir
.. blok;: PopularPosts madde-küçük resim {display height: 190px; margin: 0; taşma: gizli; position: relative; width: 100%; }
PopularPosts madde-title {position:.. relative; }
. img {display PopularPosts: block; height: auto; position: absolute; width: auto; Geçiş: Tüm 1s 0s kolaylığı; }
öğe-title a {background:. rgba (0, 0, 0, 0.35); color: # FFFFFF; font-family: Etki; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; Doğru: 0; text-align: center; top: 30px; width: 100%; }
madde-pasajı {background:. rgba (0, 0, 0, 0.35); color: # FFFFFF; font-weight: 900; Sol:% 12; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
. Madde içeriği: hover img {dönüşümü : rotate (10deg) ölçek (1.2) ; }
. Madde içeriği {position: relative; }

Şimdide JS kodumuzu ekleyeceğiz.

JS Ekleme

Öncelikle CTRL + F tuşlarının yardımı ile </ body> kodunu aratıp buluyor ve üstüne alttaki kodları yapıştırıyoruz.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
 $ (document). (function (hazır ) {$ ('). img PopularPosts'. attr ('src', function (i, src) {return src.replace ('S72-c' 's400');});});
</ script>
    <script type='text/javascript'>
    ! / / <[CDATA [
    AllBloggerTricks.com tarafından / / Popüler Yayınlar özelleştirme
    / / Trim Kanunu MS-potilas 2012
    . $ ('.. popüler-mesaj ul li madde pasajı') her (function () {
     .. var txt = $ (this) text () substr (0120);
      var j = txt.lastIndexOf ('');
      if (j> 10)
         .. $ (this) metin (txt.substr (0, j) replace (/ [\ -:;?!.] * $ /, '...') );
    });
    / /]]>
    </ script>

Kodunu ekledikten sonra şablonu kaydedin. Artık sizin ve ziyaretçilerin bu zarif Popüler Yayınlar widgetini Blogger blogunuza görebilirsiniz. Ayrıca kodlarda oynmaya yapmayın aksi halde widget blogunuzda görülmeyecektir.