عرب حصرى

كيفية تركيب اضافة اسم الكاتب وعداد المشاهدات وتاريخ النشر وتاريخ اخر تحديث للمقالات تلقائياً بشكل احترافي مثل المواقع الكبيرة على مدونة بلوجر

جدول محتوى المقال

 

شرح كيفية تركيب اضافة اسم المؤلف و تاريخ الانشاء و تاريخ اخر تحديث و عدد مشاهدات المقالات تلقائيا على بلوجر او موقعك الإلكتروني

مقدمة

نوضح لكم فى هذا الفيديو شرح كيفية تركيب اضافة اسم الكاتب و عداد المشاهدات و تاريخ النشر و تاريخ اخر تحديث للمقالات تلقائياً بشكل احترافي مثل المواقع الكبيرة على مدونة بلوجر،

تعد اضافة عدد المشاهدات وتاريخ اخر تحديث للمقالات بشكل تلقائي امراً هاما للغاية على المواقع الالكترونية ومدونات بلوجر المجانية، و عادةً ما يتم استخدام هذه الاضافة على مواقع و استضافات مدفوعة وليست استضافات مجانية مثل منصة بلوجر،

بعد البحث الطويل نقدم لكم فى هذا الشرح بالفيديو كيفية تركيب اضافة اسم الكاتب و عداد المشاهدات و تاريخ النشر و تاريخ اخر تحديث للمقالات تلقائياً بشكل احترافي مثل المواقع الكبيرة على مدونة بلوجر، حصريا ولاول مره فى الشرق الاوسط فى هذا الشرح الفيديو الفريد من نوعه، فتابعونا.

الشرح بالفيديو

الأكواد

اولاُ إضافة كود الـ HTML

اذهب الى القالب ثم اضغط فى مكان فارغ داخل الكود

CTRL + F

كنترول مع حرف إف

ثم الصق الكود

<b:includable id='post' var='post'>

فى مربع البحث ثم اضغط انتر للبحث

عندما يظهر لك الكود

<b:includable id='post' var='post'>

ابحث بداخله عن آخر كود مثل التالى

<data:post.body/>

يجب ان تكون متأكد أن الكود داتا بوست بودى هو الكود المطلوب

والذي داخل كود الحاوية بي إينكوليدبول فقط وليس فى مكان آخر

عندما تتاكد من هذا

اذا اردت ان يظهر الكود اعلى المقالات او اولها فضع الاكواد فوق

<data:post.body/>

اذا اردت ان يظهر الكود اسفل المقالات او آخرها فضع الأكواد اسفل

<data:post.body/>

الآن هذا هو الكود الذي سيتم وضعه:

<!-- الكاتب + الإنشاء + آخر تحديث + المشاهدات داخل المقالات -->
<div class='post-information'> 

<!-- الكاتب -->
<div class='name-author-post'>
	<p id='regulatory'>الكاتب</p>
		<p class='regulatory-2' title='إسم الكاتب'><data:post.author/></p>
</div>

<!-- الإنشاء -->
<div class='date-post-created'>
	<p id='regulatory'>الإنشاء</p>
		<p class='regulatory-2' title='تاريخ النشر'><data:post.date/></p>
</div>
  
<!-- آخر تحديث -->
<div class='posts-last-update'>
	<p id='regulatory'>آخر تحديث</p>
		<p class='regulatory-2' title='تاريخ آخر تحديث'>
			<span id='updatedateinfo'><data:post.lastupdatedISO8601/></span>
		</p>
<script>
    var dates = &quot;<data:post.lastUpdatedISO8601/>&quot;
    var dateu = new Date(dates);
	const months = Array.from({length: 12}, (e, i) =&gt; {
   return new Date(null, i + 1, null).toLocaleDateString(&quot;ar&quot;, {month: &quot;short&quot;});
})
    document.getElementById(&quot;updatedateinfo&quot;).innerHTML = dateu.getDate() + &quot; &quot; + months[dateu.getMonth()] + &quot; &quot; + dateu.getFullYear();
</script>
</div>
  
<!-- المشاهدات -->
<div class='post-view-counter'>
	<p id='regulatory'>المشاهدات</p>
			<p class='regulatory-2' title='عدد المشاهدات'>
				<span class='post-view' expr:data-id='data:post.id'>
                  <!-- <i class='fa fa-eye-slash'/> -->
					<span class='view-load' id='postviews'>
						<i class='fas fa-spinner fa-pulse faa-fast'/>
					</span>
				</span>
</p>
<script>
//<![CDATA[
jQuery.getScript('//cdn.firebase.com/js/client/2.3.2/firebase.js').done(function() {
$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://lesson4kh-e36d1.firebaseio.com//pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var h=e.val(),g=!1;null==h&&(h={},h.value=0,h.url=window.location.href,h.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(h.value),h.value++,"/"!=window.location.pathname&&(g?d.set(h):d.child("value").set(h.value))})});
});
//]]>
</script>
</div>

</div>
 

ثانياُ إضافة كود الستايل الـ CSS

اذهب الى القالب ثم اضغط فى مكان فارغ داخل الكود

CTRL + F

كنترول مع حرف إف

ثم الصق الكود

]]></b:skin>

ثم اضغط انتر للبحث

عندما يظهر لك الكود ضع فوقه كود الستايل التالي:

/*------------------ الكاتب + الإنشاء + آخر تحديث + المشاهدات داخل المقالات ------------------*/
.post-information {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: space-evenly;
    /*background: #bbbbbb4f;*/
    padding: 0;
    margin: 0;
    margin-top: 17px;
    margin-bottom: 17px;
   /* border: 1px solid #6868684a;*/
    border-radius: 4px;
}
#regulatory {
    background: #3560ab;
    color: #fff;
    padding: 10px;
    text-align: center;
    width: 160px;
    border-radius: 4px;
    font-family: Calibre, Helvetica Neue, Segoe UI, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 17px;
    font-weight: 500;
}
.regulatory-2 {
    background: #f8f6f6;
    color: #333;
    padding: 15px;
    text-align: center;
    width: 160px;
    border-radius: 4px;
    font-family: Calibre, Helvetica Neue, Segoe UI, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 17px;
    font-weight: 500;
    border: 1px solid #d2d2d2;
}
.name-author-post {
}
.date-post-created {
}
.posts-last-update {
}
.post-view-counter {
}
.post-view {
}
.post-view>i {
}
#updatedateinfo {
}
@media screen and (max-width: 1170px) {

	.post-information,
    .name-author-post,
	.date-post-created,
	.posts-last-update,
 	.post-view-counter
    #regulatory,
    .regulatory-2, {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: stretch;
        justify-content: space-evenly;
    }
}
/*------------------ الكاتب + الإنشاء + آخر تحديث + المشاهدات داخل المقالات ------------------*/

التحميل

لتحميل الأكواد المذكورة فى الشرح أعلاه.

إضغط للتحميل

الكاتب

Mohsen Abdo

الإنشاء

11 يونيو 2022

آخر تحديث

المشاهدات