هذا الكود هو جزء من قالب (template) يستخدم في منصات التدوين مثل Blogger لإنشاء وتخصيص واجهة عرض "المشاركات الشائعة" أو "المشاركات المميزة" في المدونة. الكود يعتمد على لغة XML مع بعض العناصر الخاصة بمنصة Blogger، مثل <b:widget> و <b:includable>، بالإضافة إلى HTML و CSS و JavaScript. دعنا نشرح كل جزء من الكود وأهميته:
الجزء الأول: تعريف الـ Widget
<b:widget id='PopularPosts1' locked='false' title='مشاركة مميزة' type='PopularPosts' version='1' visible='true'>الوظيفة: هذا الجزء يعرّف الـ Widget (أداة) الذي سيتم استخدامه في المدونة.
المعلمات:
id='PopularPosts1': معرف فريد للـ Widget.title='مشاركة مميزة': العنوان الذي سيظهر أعلى الـ Widget في المدونة.type='PopularPosts': نوع الـ Widget، وهو هنا لعرض المشاركات الشائعة أو المميزة.visible='true': يحدد ما إذا كان الـ Widget مرئيًا في المدونة أم لا.
إعدادات الـ Widget
<b:widget-settings>
<b:widget-setting name='showSnippet'>true</b:widget-setting>
<b:widget-setting name='showPostTitle'>true</b:widget-setting>
<b:widget-setting name='showFirstImage'>true</b:widget-setting>
</b:widget-settings>الوظيفة: هذه الإعدادات تحدد كيفية عرض المحتوى داخل الـ Widget.
المعلمات:
showSnippet: يعرض مقتطفًا من النص الخاص بالمشاركة.showPostTitle: يعرض عنوان المشاركة.showFirstImage: يعرض الصورة الأولى من المشاركة إذا كانت متوفرة.
الجزء الرئيسي (Main)
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content'/>
<b:include name='quickedit'/>
</b:includable>الوظيفة: هذا الجزء يعرض المحتوى الرئيسي للـ Widget.
التفاصيل:
<b:if cond='data:title != ""'>: يتحقق مما إذا كان هناك عنوان للـ Widget، ويعرضه إذا كان موجودًا.<b:include name='content'/>: يستدعي الجزء المسؤول عن عرض المحتوى (سيتم شرحه لاحقًا).<b:include name='quickedit'/>: يضيف زر التحرير السريع للـ Widget في واجهة المدير.
عرض المحتوى (Content)
<b:includable id='content'>
<div class='item-list'>
<div class='item item-1'>
<div class='img'>
<a href='javascript:;'>
<div class='like'><i aria-hidden='true' class='fa fa-heart'/></div>
</a>
<a expr:href='data:post.url'>
<b:if cond='data:showFirstImage and data:post.thumbnail != ""'>
<div class="img-content" style="background-image: url(<data:post.thumbnail/>);"></div>
</b:if>
</a>
</div>
<div class='social'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'>
<div class='fb'><i aria-hidden='true' class='fa fa-facebook'/></div>
</a>
<a expr:href='"whatsapp://send?text=" + data:post.url' target='_blank'>
<div class='ig'><i aria-hidden='true' class='fa fa-whatsapp'/></div>
</a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'>
<div class='tw'><i aria-hidden='true' class='fa fa-twitter'/></div>
</a>
</div>
<div class='text-container'>
<div class='title'>
<b:if cond='data:showPostTitle and data:post.title != ""'>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
</div>
<div class='content'>
<p><data:post.snippet/></p>
</div>
<div class='readmore'>
<h4><a expr:href='data:post.url'>أقراء المزيد</a></h4>
</div>
</div>
</div>
</div>
</b:includable>الوظيفة: هذا الجزء يعرض تفاصيل كل مشاركة، بما في ذلك الصورة والعنوان والمقتطف وروابط المشاركة على وسائل التواصل الاجتماعي.
التفاصيل:
- الصورة: يتم عرض الصورة الأولى من المشاركة إذا كانت متوفرة.
- أزرار المشاركة: توجد أزرار لمشاركة المشاركة على Facebook و WhatsApp و Twitter.
- العنوان والمقتطف: يتم عرض عنوان المشاركة ومقتطف منها.
- زر "اقرأ المزيد": رابط لتوجيه المستخدم إلى المشاركة الكاملة.
التنسيقات (CSS)
<style type='text/css'>
.item {
width: 100%;
background: #fff;
position: relative;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
border-bottom: 3px solid #c9c9c9;
}
...
</style>الوظيفة: هذا الجزء يحتوي على تنسيقات CSS لتحديد شكل وتصميم الـ Widget.
التفاصيل:
- يتم تحديد أنماط مثل الألوان، الظلال، الزوايا المستديرة، وحجم العناصر.
الجافا سكريبت (JavaScript)
<script>
//<![CDATA[
$(".item a .ig").click(function() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var Ismobile = ua.indexOf("mobile") > -1;
var isiPhone = ua.indexOf("iPhone") > -1;
if (!isAndroid && !Ismobile && !isiPhone) {
alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
}
});
//]]>
</script>الوظيفة: هذا الجزء يضيف تفاعلية إلى الـ Widget.
التفاصيل:
- يتم التحقق من نوع الجهاز (هاتف أو حاسوب) عند النقر على زر مشاركة WhatsApp. إذا كان الجهاز حاسوبًا، يتم عرض رسالة تنبيه.
أهمية هذا الكود في المدونة
- عرض المشاركات المميزة: يساعد في عرض المشاركات الشائعة أو المميزة بشكل جذاب، مما يشجع الزوار على التفاعل مع المحتوى.
- تحسين تجربة المستخدم: التصميم الجذاب والتفاعلي يجعل المدونة أكثر احترافية وسهولة في الاستخدام.
- زيادة المشاركة: أزرار المشاركة على وسائل التواصل الاجتماعي تسهل على الزوار مشاركة المحتوى، مما يزيد من وصول المدونة.
- التخصيص: يمكن تعديل الكود بسهولة لإضافة ميزات جديدة أو تغيير التصميم حسب احتياجات المدونة.
باختصار، هذا الكود يعتبر أداة قوية لتحسين واجهة المدونة وزيادة تفاعل الزوار مع المحتوى.
الــكود كامـلا
<b:widget id='PopularPosts1' locked='false' title='مشاركة مميزة' type='PopularPosts' version='1' visible='true'>
<b:widget-settings>
<b:widget-setting name='showSnippet'>true</b:widget-setting>
<b:widget-setting name='showPostTitle'>true</b:widget-setting>
<b:widget-setting name='showFirstImage'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content'/>
<b:include name='quickedit'/>
</b:includable>
<b:includable id='content'>
<div class='item-list'>
<div class='item item-1'>
<div class='img'>
<a href='javascript:;'>
<div class='like'><i aria-hidden='true' class='fa fa-heart'/></div>
</a>
<a expr:href='data:post.url'>
<b:if cond='data:showFirstImage and data:post.thumbnail != ""'>
<div class="img-content" style="background-image: url(<data:post.thumbnail/>);"></div>
</b:if>
</a>
</div>
<div class='social'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'>
<div class='fb'><i aria-hidden='true' class='fa fa-facebook'/></div>
</a>
<a expr:href='"whatsapp://send?text=" + data:post.url' target='_blank'>
<div class='ig'><i aria-hidden='true' class='fa fa-whatsapp'/></div>
</a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'>
<div class='tw'><i aria-hidden='true' class='fa fa-twitter'/></div>
</a>
</div>
<div class='text-container'>
<div class='title'>
<b:if cond='data:showPostTitle and data:post.title != ""'>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
</div>
<div class='content'>
<p><data:post.snippet/></p>
</div>
<div class='readmore'>
<h4><a expr:href='data:post.url'>أقراء المزيد</a></h4>
</div>
</div>
</div>
</div>
</b:includable>
<style type='text/css'>
.item {
width: 100%;
background: #fff;
position: relative;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
border-bottom: 3px solid #c9c9c9;
}
.item .img {
width: 100%;
height: 195px;
background: black;
border-radius: 10px 10px 0 0;
z-index: 5;
overflow: hidden;
display: block;
}
.item .img-content {
width: 100%;
height: 100%;
transition: 0 !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
.item .text-container {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
box-shadow: -3px -6px 8px rgba(0, 0, 0, 0.3);
display: block;
margin: -20px 0 0 0;
text-align: center;
overflow: auto;
}
.item .social {
width: 100%;
height: 33px;
direction: ltr;
position: absolute;
z-index: 15;
top: 39.5%;
display: flex;
justify-content: flex-end;
}
.item .social div {
width: 30px;
height: 30px;
background: green;
margin: 0 2px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.item .social div:hover {
transform: scale(1.1);
}
.item .like {
position: absolute;
width: 20px;
height: 20px;
background: #e82323;
border-radius: 50%;
color: #fff;
right: 8px;
top: 8px;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
}
.item .like:hover {
transform: scale(1.1);
}
.item .readmore h4 {
display: block;
width: 70px;
text-align: center;
padding: 10px 15px;
border-radius: 40px;
border: 1px solid;
cursor: pointer;
font-size: 10px;
margin: 0 auto 5px;
}
.item .readmore h4:hover {
background: #bababa;
color: #fff;
}
.text-container .title {
margin: 11px 9px 0px;
font-size: 17px;
padding: 0 0 3px 0;
border-bottom: 1px solid #e82323;
}
.text-container .content {
padding: 0 9px 8px;
}
</style>
<script>
//<![CDATA[
$(".item a .ig").click(function() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var Ismobile = ua.indexOf("mobile") > -1;
var isiPhone = ua.indexOf("iPhone") > -1;
if (!isAndroid && !Ismobile && !isiPhone) {
alert("لا يمكنك مشاركة التدوينة على الواتساب من الحاسوب !");
}
});
//]]>
</script>
</b:widget>
