شرح كيفية عمل أكواد الـData في قوالب بلوجر

لدينا في عالم التدوين أنواع كثيرة من الأشخاص الذين هم عبارة عن 

مدونين ومبرمجين والذين يريدون التكويد والذين يريدون التصميم

وكل هؤلاء الأشخاص الذين يملكون المدونات يجب أن يعرفو ماهو الـ Data

تعريف الـData:

بدايتاً الـData عمله هو استدعاء الأشياء التي تريدها بدون تحديد مصدرها

أي أن تستدعي العنوان بدون لاتضع رابط العنوان ، فهو يستدعي العنوان ويظهر العنوان بدون لايظهر الـData في المدونة
شرح أكثر :

فعلى سبيل المثال نريد أن نقوم بتكويد قالب ويجب أن نضع الأكواد ليكتمل القالب

لكن هنا نريد أن نضع أكواد الـData الخاص  بعناوين المواضيع بدون لانضع روابطها 

مالفرق بين الأكواد والروابط ؟

الأكواد: عندماً تضع الأكواد الـData الخاصه بالمواضيع فأنت حددت جميع المواضيع بدون أستثناء أي عندما تضيف مواضيع جديدة فأنت غير مجبر بإضافة أكواد جديدة للمواضيع الجديدة فأكواد الـData هي متخصصة بجميع المواضيع

الروابط: عندماً تضع الروابط الخاصة بالمواضيع فأنت حددت مواضيع مُعينة فقط لاغير وهنا لن تظهر أي مواضيع أنت لم تضع روابطها وهذا تأثير سلبي للموقع أو للمدونة في أكواد الروابط غير متخصصة بجميع المواضيع فقط في مواضيع مُعينة

كيفية عمل الـData:

الـData يعمل داخل أكواد الـincludable فقط

ولـData أيضاً Tags فهي تحدد نوعية الشئ الذي تريدة

فعلى سبيل المثال نريد أن نحدد عناوين المواضيع فسنضع Tag:

<data:post.title/>

يجب أن تلاحظ بأن كتبناً أولا الـData وبعدهاً كتبنا الـTag الذي نريدة وهو عناوين الموضيع

قائمة الـTags: 

الوصف	Tags
إظهار أسم كاتب الموضوع	'data:top.showAuthor
إظهار عبارة " أرسلت من قبل "	data:top.authorLabel
إظهار تاريخ الموضوع من إنشائة	'data:top.showTimestamp
إظهار عبارة " في " قبل تاريخ الموضوع	data:top.timestampLabel
أظهار كلمة " تعليق " قبل عدد التعليقات	data:top.commentLabel
أظهار كلمة " تعليقات " قبل عدد التعليقات	data:top.commentLabelPlural
نوع الصفحة اذا كانت أرشيف او صفحة ثابتة يحدد نوعها	data:blog.pageType
تحديد الموضوع ( الأي دي للموضوع )	data:post.id
أظهار عنوان الموضوع	data:post.title
إظهار رابط الموضوع	data:post.link
رابط الموضوع	data:post.url
الأشياء في الموضوع ( كالعنوان والتسمية والتعليقات )	data:post.body
تاريخ الموضوع	data:post.timestamp
السماح بالتعليقات	data:post.allowComments
رابط التعليق أو التعليقات	data:post.addCommentUrl
الذهاب للتعليقات عبر الضغط عليها	data:post.addCommentOnclick
أظهار عدد التعليقات	data:post.numComments
نموذج البريد الأكتروني	data:post.emailPostUrl
عبارة لنموذج البريد الأكتروني (كرسالة للزائر تلمح له ان هذا هو النموذج البريد الأكتروني )	data:post.emailPostMsg
التسميات في الموضوع	data:post.labels
أظهار عبارة " التسميات " قبل نوع التسميات	data:postLabelsLabel
الذهاب للمواضيع التي توجد بها تسمية مُعينة	data:label.url
أظهار أسم التسمية	data:label.name
أاضافة هذا الكود اذا كانت التسمية هي أخر تسمية في الصفحة	data:label.isLast

كيفية أستعمال الـTags في الأكواد:

تستخدم الـTags في ثلاث وسوم مُعينة وهي كالأتي 

وسم b:if> و وسم b:loop> و وسم a>

كيفية أستعمال الـTags في وسم الـb:if> :

   <b:if cond='data:Data Tag'>

<!--محتوى الأكواد داخل الوسم -->
</b:if>

وعندما تريد أن تضيف Tag في وسم الـb:if>

فقط نُغير الـ Tag Data الى أي Tag نريدة من قائمة الـ Tags

كيفية أستعمال الـTags في وسم الـb:loop> :

      <b:loop values='Data Tag' var='Tag'> 

< <!-- محتوى الأكواد داخل الوسم -->
      </b:loop>

وعندما تريد أن تضيف Tag في وسم الـb:loop>

فقط نُغير الـ Data Tag  الى أي Tag نريدة من قائمة الـ Tags

كيفية أستعمال الـTags في وسم الـa> :

         <a expr:href='Data Tag url rel='Tag'><data Tag/></a>

ملاحظة: هذا الوسم  يشير الى رابط (عندما تضع تاج التسمية في داتا تاج فيذهب لرابط التسمية) فقط

وعندما تريد أن تضيف Tag في وسم الـa>

فقط نُغير الـ Data Tag  الى أي Tag نريدة من قائمة الـ Tags 
بالنسبة لـData Tag url قم بأختيار Tag يوجد فيه كلمة Url من قائمة الـTag فقط!

{ حلول المشاكل } مشكلة طول المواضيع في بلوجر Codes | 2015

حل لمشكلة طول عرض المواضيع
أي تكون المواضيع ذات طول طويل جداً في المدونة بدون سبب وتظهر فجأة في المدونة

الكثير من واجهة هذه المشكلة قام بالبحث عن المشكلة في تحرير القالب 

أو بعض الأحيان القالب لم يتم التعديل علية لتظهر هذه المشكلة 

الان سنتعلم كيفية حل هذه المشكلة بدون أدنى تعديل للقالب !

فقط نقوم بإضافة كود يساعدنا في :

1. تعديل عرض المواضيع وطولها

 وهذا هو المطلوب لحل هذه المشكلة التي تجعل المدونة بشكل غير لائق أي تزيد من طولها 

وهذا يجعل الزائر يمل من المدونة ويظن أنها غير صالحة 

وهناك عوائق تواجة الزوار من هذه المشكلة 

1. البطئ في تحميل المدونة بسبب طول المواضيع وتحميل الصور وأكواد المواضيع
2. جعل المدونة غير صالحة بنظر الزائر ويخرج منها

والان نأتي للأهم وهو حل المشكلة :
أذهب للقالب > تحرير HTML

أبحث عن 

</head>

وأضف فوقة 

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var width         = 200;
    var height        = 170;    var placeholder    = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7rRinwCNFvuosG-S1F6lD2OzeCmCrBOvnIHQHl3w76R9gzhqhG-KCXWQ9em4DkdMCzNZSI51WDlCdESKCoI36kN0t1ys6ktXMsTb0Ggb7k3H-vOyAsy67q5TV-qvbF6Dgbu50cMQ6WU/s1600/no-thumb.png';
    var margins     = "0px 0px 10px 10px";
    var fitThumb                 = 1;
    var titleTopPadding            = 5;
    var titleBottomPadding        = 8;
    var titlerightleftPadding    = 5;
    var titlePadding = titleTopPadding + 'px ' + titlerightleftPadding + 'px ' + titleBottomPadding + 'px ' + titlerightleftPadding + 'px';
    $('.post-body').each(function(n, wrapper){
        var wrapper         = $(wrapper);
        var image         = $(wrapper).find('img').first();
        var link         = wrapper.parent().find('h3 a');
        var linkURL         = link.attr('href');
        var linkTitle        = link.text();
        $(link).remove();
        wrapper.empty();
        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');
            var thumbParent = $(image).parent();
            wrapper.append(thumbParent);
            if (fitThumb) {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                image.attr('width',width).attr('height',height);
            } else {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                image.attr('width',width);
                var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);
                image.attr('height',changeHeight);
            }
         
        } else {
            var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }
        thumbParent.attr('href',linkURL).css('clear','none').css('margin-right','0').css('margin-left','0').addClass('postThumbnail');
     
        var thumbTitle = $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent);
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top','-'+summary+'px');            wrapper.css('float','right').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
    });
    $('#blog-pager').css('clear','both');
});
function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
        images[i].onmouseover=function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}
if (window.addEventListener) {
    window.addEventListener('load',hideLightbox,undefined);
} else {
    window.attachEvent('onload',hideLightbox);
}
//]]></script>
<style>
.post {
border-bottom: 0 dotted #E6E6E6;
margin-bottom: 0;
padding-bottom: 0;
}
h2,.post-footer {
display:none;
}
a.postThumbnail div {
text-decoration: none; color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: capitalize;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
a.postThumbnail:hover div {
display: block;
}
.post-body img {
background-color: transparent;
border: 1px solid transparent;
padding: 0px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
-ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
</style>
</b:if>

</* Codes posts saudi-7reeef */ >

تعديلات الكود :

var height        = 170;   = طول الموضوع وهذا الأهم 

     var width         = 200; = عرض الموضوع

للمزيد من الحلول قم بالأنضمام للمدونة

أضغط للأنضمام

بلوجر Blogger Mobile نصائح هامة للمحافظة على ترتيب مدونتك في 2015

من الجميل أن نجد بإن بلوجر قد تطورت في خدماتها وتوسعها وتطور تفكير المدون ومايقدمة من أفكار 

لكن بالفعل بلوجر تود مساعدة كل شخص مدون في إعطائة الحرية المناسبة لإدارة مدونتة والتوسع بها 

والان في عام 2015 بلوجر أطلقت Blogger Mobile وهي أن تقوم بالتدوين من أي مكان على هاتفك في مدونتك 

وتظهر مدونتك على شاشات الهاتف المحمول من إي جهاز بشكل أسرع 

لكن كيف بإن تجعل مدونتك من الأوائل بسبب الهاتف المحمول ؟

الأرشفة لها وقت معين في مدونتك وأن كانت مدونتك بطيئة فلن تتأرشف مواضيعك كاملة وهذا مايسبب بإن تكون المدونة 

من أؤاخر المدونات في بلوجر لكن ، الكثير منا يريد معرفة سرعة المدونة وتوافقها 

مع الهاتف المحمول لتكون مدونتة من الأوائل 

وهنا تأتي وظيفة mobile friendly من جوجل وهي أختبار التناسب مدونتك مع الهاتف المحمول

بديهياً جوجل يختبر سرعة مدونتك وهي من التناسب مع الهاتف المحمول؟

السؤال هنا ، كيف يتم إنجاز الإختبار كاملاً ومدونتك بطيئة لاتظهر مواردها بسرعة في الهاتف المحمول؟

هذا لن يحدث الا بعد أن تخفي الإشياء الغير مهمة من مدونتك في أكواد الـ Mobile في قالبك 

لماذا ؟

الجميع قد يسئل هذا السؤال ، لكن انت تريد أن تكون مدونتك سريعة لتتناسب مع الهاتف المحمول صحيح ؟

حسنا اذا في مدونتك اضافات كثيرة جدا فكيف تريد ان تكون مدونتك سريعة ؟

علماً بأن أكواد HTML , CSS , JAVA تأخذ ضغطاً كبيرا كلما زادت 

والمسافات الكبيرة في أكواد CSS تأخذ حجماً 

على سبيل المثال : مدونتك يوجد بها مسافات كبيرة في CSS وهذا يزيد في حجم مدونتك 

وحينها ستكون مدونتك ذو حجم كبير ولن تكون سريعة 

هذه مجرد توضيحات والان هذه بعض الطرق لإخفاء الأدوات الغير مهمة من المدونة لتكون سريعة في الهاتف المحمول

<b:widget id='BlogArchive1' mobile='yes' title='أسم الأداة' type='BlogArchive'>

'mobile='Yes اذا وجدتها هكذا فهذه الأداة ظاهرة في الهاتف المحمول فعليك تحويل Yes الى No

<b:widget id='Attribution1' mobile='no' title='أسم الأداة' type='Attribution'>

'mobile='Noاذا وجدتها هكذا فهذه الأداة ليست ظاهرة ولاتحتاج للتعديل

<b:widget id='Attribution1' mobile='Only' title='أسم الأداة' type='Attribution'>

'mobile='Only اذا وجدتها هكذا فهذه الأداة ظاهرة في الهاتف المحمول فعليك تحويل Only الى No

وهكذا قد قمناً بإخفاء الأدوات من الهاتف المحمول ولن يظهر سوى المواضيع اذا كان كل شئ إفتراضياً

كيف نتأكد من اذا كان كل شئ إفتراضياً بدون لانخفي الأدوات ؟ 

( إفتراضياً: تعني لايوجد أي اضافة أو أداة في الهاتف المحمول ستشاهد فقط المواضيع وهذا يجعل مدونتك سريعة جداً)

لجعل المدونة إفتراضية على الهاتف المحمول:

يجب أن تعلم أخي أن مدونتك كلما زاد حجمها وزادت الأكواد داخلها فهي تزيد نسبة البطئ بها وهذا يجعل مدونتك متأخرة 

فالذي عليك فعلة الأكتفاء بإضافات الأدوات داخل المدونة والتأكد من الأكواد 

فقد يكون كود واحد قد اضفتة وهذا الكود ضرره أكبر من منفعتة لهذا يجب ان تكون متأكداً من أي كود تضعه

فقط اذا بحثنا عن الإضافات هناك مدونات تخبرنا بأن يجب أن تحذف كود مُعين لتضف هذا الكود أو تستبدل!
وهذا قد يكون خطير! ، لأن الكود الذي قد تحذفة قد يكون كود افتراضي من القالب أي كود أصلي وتستبدلة بكود لايدعمه القالب

وهذا يشكل خطر على بقية الأكواد فقد يكون بضع الأكواد تعمل على هذا الكود الذي حذفتة لتركب إضافة ليست مهمة!

فمحركات البحث تستقبل المدونات السريعة ذات الأكواد الخفيفة ومدونتك قد تواجهة مشاكل في زيادة الحجم والبطئ وهذا مايسبب التأخر في الترتيب