Blogger Toplam Yayın ve Yorum Sayısı Eklentisi

8.5.17
Blogger Toplam Yayın ve Yorum Sayısı Eklentisi

Blogger Toplam Yayın ve Yorum Sayısı Eklentisi - Bu yazımızda blogspot toplam yayın ve yorumları görüntülemek için CSS3 modal ile tasarlamış olduğumuz eklenti ile ilgili bilgileri paylaşacağım. Böylece Blogger blogunuzun toplam yayın ve yorum sayısı bilgilerini ziyaretçileriniz ile paylaşabilirsiniz.

Blogger Toplam Yayın ve Yorum Sayısı Eklentisi


Aşağıdaki kodları blogunuza eklemek için Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodları sayfasını açın. Blogunuzun şablon kodları sayfasında aşağıdaki adımları uygulayın. Blogunuzdaki kodları CTRL+F yardımı ile bulabilirsiniz.

1- Aşağıdaki CSS ve javaScript kodlarını blogunuzda bulunan </head> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<style type="text/css">
.divide {
    float: left;
    line-height: 0;
    margin: 0 0 -4px;
    width: 100%;
}
.divide:before,
.divide:after {
    content: '';
    float: left;
    height: 4px;
    width: 100%;
}
.divide:before {
    background: linear-gradient(90deg, #1abc9c 15%, #2ecc71 15%, #2ecc71 12%, #3498db 12%, #3498db 32%, #9b59b6 32%, #9b59b6 35%, #34495e 35%, #34495e 55%, #f1c40f 55%, #f1c40f 59%, #e67e22 59%, #e67e22 63%, #e74c3c 63%, #e74c3c 82%, #ecf0f1 82%, #ecf0f1 92%, #95a5a6 92%);
}
input ~ .modal-info,
input:checked ~ .modal-info {
    position: absolute;
    left: 50%;
    right: 50%;
    margin: 65px -200px 0;
    width: 380px;
    height: auto;
    border: 10px solid #fff;
    background: #f5f5f5;
    transition: all .4s ease-in-out;
    -webkit-backface-visibility: hidden;
    border-radius: 2px;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.btn-info {
    font-family: 'Fira Sans Condensed', sans-serif;
    margin: 10px;
    float: left;
    border-radius: 3px;
    font-size: 15px;
    padding: 5px 15px;
    background-color: #03a9f4;
    color: rgba(255, 255, 255, 0.84);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.btn-info:hover {
    display: inline-block;
    background: #ffa700;
}
label {
    cursor: pointer;
}
.textlogo {
    font-size: 150%;
    line-height: 50px;
    text-align: center;
    height: 50px;
    color: #F2594B;
    width: 100%;
    position: static;
}
input[type="checkbox"] {
    display: none;
}
input ~ .modal-info {
    top: -75%;
}
input:checked ~ .modal-info {
    top: 25%;
    z-index: 100;
}
input:checked ~ .modal-info:hover {
    -webkit-transform: scale(1.05);
    transition: all .3s ease-out;
}
input ~ .modal-info-bg {
    background: transparent;
    transition: background .5s ease-in-out;
}
input:checked ~ .modal-info-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: background .5s ease-in-out;
}
.modal-info p {
    font-size: 15px;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    padding: 0 20px
}
p.info-ps {
    font-size: 15px;
    opacity: .5;
}
</style>
<script style="text/javascript">
//<![CDATA[
function numberOfPosts(json) {
    document.write('<p>Sitemizde toplam <span>' + json.feed.openSearch$totalResults.$t + '</span> yayın bulunmaktadır.</p>');
}

function numberOfComments(json) {
    document.write('<p class="info-ps">Sitemizde bulunan tüm yayınlara toplam <span>' + json.feed.openSearch$totalResults.$t + '</span> yorum yapılmıştır.</p>');
}
//]]>
</script>
</b:if>

2- Aşağıdaki HTML kodları blogunuzda bulunan </footer> kapanış kodunun bir satır altına ekleyin.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<input id="modal-info-toggle" type="checkbox" />
<div class="modal-info-bg"></div>
<div class="modal-info">
    <div class="textlogo"><b>Blogger Eklentileri</b>
    </div>
    <div color="info-total">
        <script src="http://bloggereklentileri.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=numberOfPosts"></script>
        <script src="http://bloggereklentileri.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments"></script>
    </div>
    <div class="divide"></div>
</div>
</b:if>

3- Aşağıdaki HTML buton kodunu header veya görünmesini istediğiniz bir bölüme ekleyin.

<label class="btn-info" for="modal-info-toggle" onclick="">Bilgi</label>

4- Aşağıdaki CSS kodunu ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

@media screen and (max-width:640px){.btn-info {display:none}}


Kısa Bilgiler

Bu eklenti mobil cihazlarda görünmeyecektir. Eğer mobil ekranlarda da görünmesini istiyorsanız, CSS ve HTML kodlarda bulunan aşağıdaki kodları kaldırın ve bir aşağıdaki CSS kodunu eklemeyin.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
.............
.............
</b:if>
@media screen and (max-width:640px){.btn-info {display:none}}

HTML kod içerisinde belirtilmiş olan yerlere blogunuzun URL'sini ekleyin. Eklenti CSS renk kodlarını değiştirerek blogunuzun renklerine uygun hale getirebilirsiniz.

Blog toplam yayın ve yorum sayısı eklentisi blogunuzda rahatça kullanabilirsiniz. Bu eklenti CSS3 modal kodları ile tasarlandığı için ayrıca bir javaScript kodu eklemenize gerek yoktur.

Yorum Gönder