اضافة مشاهدة من زار المقال

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته .

اضافة عدد المشاهدات في مدونة بلوجر

اضافة عدد المشاهدات في مدونة بلوجر , الاضافة في الحقيقية مفيدة في عدت امور من قد تستطيع اضافتها لمشاهدات التدوينة  ,او لمشاهدات رابط او صفحة خارجيه , او لمجمل الزيارات داخل المدونة الخ..
اي شيء تريد احتساب زياراته فهذا الموضوع سيفيدك جداَ , وهو ليس فقط مقتصر على بلوجر بل تستطيع اضافته في جميع السكربتات التي تدمع html و js .

طبعاَ لتنفيذ الطريقة فأنت قطعياَ تحتاج الى استضافة , وبما انك على استضافة بلوجر فلن تستطيع تركيب السكربت مباشرة وانشاء قاعدة بيانات لتسجيل عدد الزوار .. اذا ما الحل ؟ الحل اننا سنقوم بالتسجيل في موقع متخصص في هذا المجال ويتيح لنا هذه الميزه مجانا .

اضافة عدد المشاهدات بلوجر :

• قم بالتسجيل في هذا الموقع Firebase
• ثم قم بأنشاء تطبيق جديد وقم بتسميته بأسم موقعك , كما في الصورة التاليه 

انشاء تطبيق في موقع Firebase

• لا تنسى نسخ الاسم لاننا سنحتاجه لاحقاَ blog.7lolblogger 
• بعد ذالك اذهب الى قالبك وابحث عن 

<data:post.body/>
او
<h2 class='post-title entry-title'>

وضع هذا الكود اسفله

<div class="views-7lolblogger">
<div id='views-container'><span class='views-icon'/>
<i class="fa fa-eye takeitall-0"></i><div class='views-text'></div>
<div class='DrROloading viewscount' id='postviews'/>
</div></div>

ثم ابحث عن </head> وضع هذا الكود قبله

<script async="" src="http://code.jquery.com/jquery-1.7.0.min.js" type="text/javascript"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

الخطوة الاخيرة ابحث عن </body> واضف فوقه

<style>
.views-7lolblogger {
    font-size: 13px;
    float: right;
    color: #666;
    margin: 1px 3px;
    padding: 0 3px;
    clear: both;
    width: 100%;
}
.takeitall-0 {
    padding-left: 3px;
    border-left: 1px solid #ccc;
    margin-left: 3px;
    width: 18px;
    float: right;
}
div#postviews {
    float: right;
}
</style>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
 </script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script> $.each($(&#39;a[name]&#39;), function(i, e) { var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;DrROloading&#39;); var blogStats = new Firebase(&quot;https://blog.7lolblogger.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); blogStats.once(&#39;value&#39;, function(snapshot) { var data = snapshot.val(); var isnew = false; if(data == null) { data= {}; data.value = 0; data.url = window.location.href; data.id = $(e).attr(&#39;name&#39;); isnew = true; } elem.removeClass(&#39;DrROloading&#39;).text(data.value); data.value++; if(window.location.pathname!=&#39;/&#39;) { if(isnew) blogStats.set(data); else blogStats.child(&#39;value&#39;).set(data.value);
}
 });
 });
 </script>

الاصفر : اسم التطبيق الذي انشأناه في البداية.

تستطيع تعديل الشكل والتصميم اذا كان لديك القليل من المعلومات عن css 

شارك الموضوع !

• فيسبوك
• تويتر
• جوجل بلس
• Tumblr
• Pinterest