Blogger'da Toplam Görüntülenme ve Toplam Gönderi Sayısını Gösterme CSS Kodu
Blogger CSS İstatistik Kodu
Blogger alt yapılı sitelerinizde kullanabileceğiniz harika CSS istatistik widget alanı kodu.
Ziyaretçilerine çok hoş bir görüntü sağlayacak olan bu CSS Toplam Görüntülenme ve Toplam Gönderi sayısını görüntüleyeceğiniz widget alanı kodlarına geçelim;
İlk olarak Blogger şablon ayarlarına gelip sitenin kodlarına gidin.
<b:widget id='Stats1' locked='false' ile başlayan Widget alanı kodunu aşağıdaki HTML kod ile değiştirin;
<b:widget id='Stats1' locked='false' title='statistics' type='Stats'> <b:includable id='main'> <b:if cond='data:title'><h2><span><data:title/></span></h2></b:if> <div class='widget-content'> <!-- Content is going to be visible when data will be fetched from server. --> <div expr:id='data:widget.instanceId + "_content"' style='display: none;'> <!-- Counter and image will be injected later via AJAX call. --> <b:if cond='data:showSparkline'> <img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/> </b:if> <b:if cond='data:showGraphicalCounter'> <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/> </b:if> <script type='text/javascript'> function postCount(json){ document.write("<span class='counts postx'> Total Post "); var count = json.feed.openSearch$totalResults.$t; document.write("<span class='count'>" + count + "</span>"); document.write("</span>") } </script> <script src='http://arlinadesign.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/> </div> </div> </b:includable> </b:widget> Yukarıdaki kodları değiştirdikten sonra ]]></b:skin> kodunun hemen üstüne aşağıdaki CSS Kodlarını yapıştırın;
/* CSS Custom Stats */ #sidebar .Stats img { display: none!important; background-image: none; } #sidebar .Stats .counter-wrapper { width: 92%; text-align: right; margin: 10px; line-height: 35px; color: #71737f; font-family: 'Open Sans',sans-serif; font-weight: 700; font-size: 16px; } #sidebar .Stats .counter-wrapper:after { content: 'Page Views'; font-family: 'Open Sans',Arial, sans-serif; float: left; text-align: left; font-size: 13px; font-weight: 700; color: #71737f; } #sidebar .counts { display: inline-block; width: 92%; margin: 10px; font-size: 13px; line-height: 35px; color: #71737f; font-weight: 700; } #sidebar .counts .count { display: inline-block; font-size: 16px; height: 30px; vertical-align: top; direction: ltr; float: right; color: #71737f; font-family: 'Open Sans', sans-serif; font-weight: 700!important; } #sidebar .counts:hover .titles:before { color: #71737f!important; border-radius: 2px; border-color: rgba(255,255,255,0.1); } #sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .counts:before { display: inline-block; font-size: 13px; font-family: FontAwesome; font-style: normal; font-weight: normal; margin: 0 10px 0 10px; float: left; width: 10px; text-align: center; } #sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .counts:before { display: block; background-color: #a5a7b2; color: #fff; width: 35px; height: 35px; font-size: 18px; line-height: 37px; border-radius: 2px; margin: 0px 8px 0 0; } .counter-wrapper.text-counter-wrapper:before { content: '\f201'; color: #fff; } #sidebar .counts.postx:before { content: '\f03e'; background-color: #f0b26f; } #Stats1_content { width: auto; height: auto; background-color: #fff; } #Stats1 h2 { display: none; } Sonra sitenize Görüntülenme Sayısı Widget alanını ekleyin. İşlem tamamdır. Blogger CSS İstatistik Kodu önizlemesi sitenin sağındadır.
Yorumlar
Yorum Gönder