--> شرح كامل لأكواد HTML الخاصة بقوالب مدونات بلوجر(Blogger) | ألوان التقنية

شرح كامل لأكواد HTML الخاصة بقوالب مدونات بلوجر(Blogger)

قالب بلوجر هو بالأساس عباره عن ملف بامتداد XML وهو نوع من الملفات التي تحتوي على أكواد HTML وCSS بطريقه مدمجة،


قالب بلوجر هو بالأساس عباره عن ملف بامتداد XML وهو نوع من الملفات التي تحتوي على أكواد HTML وCSS بطريقه مدمجة، فيكون اسم القالب مثلا SIMPLE.XML وهو الملف الذي يتم تحميله ورفعه على مدونتك كي يكسبها شكلا جميلا ومميزا.

عند رفع ملف القالب على مدونتك وفتح تحرير HTML سنجد أن القالب عباره عن أكواد مصفوفه بشكل منظم ومرتب، هذه الأكواد لها معنى وكل منها له وظيفة، سنتناول الآن الأكود كل جزء على حدا ولكن عليك أن تفتح قالب مدونتك كي تتابع معنا هذه الأكواد وشكلها في الواقع.

<?xml version="1.0" encoding="UTF-8" ?>

هو الترميز الذي يميز هذا الملف بأنه على لغة XML والذي يخبر المتصفح أن يتعامل مع هذا الملف على هذا النحو.

<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

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

<head>

وهو وسم رأس المدونة وهو الوسم الذى يحتوى على أوامر هامه جدا مثل الميتا تاج .

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>

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

<b:skin><![CDATA[

هو وسم بداية وفتح الكود الذي يضم بداخله أوامر لغة CSS وهي اللغة التي تحدد شكل المدونة وتعطيه المظهر المطلوب.

<Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

هو كود المتغيرات ويوجد عادة في القوالب التي تقدمها لنا بلوجر رسميا، ونجد هذا الكود موجود بكثرة ولكل واحد فيهم وظيفة محدده، فمثلا في هذا الكود فهو يحدد لنا خط محتوى المدونة ويقدم لنا الخط الأساسي والمعتاد ثم يقدم لنا الخط الذي قمت أنت باختياره وتغييره من خلال مصمم نماذج بلوجر.

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

هو كود CSS ويلي أكواد ووسوم المتغيرات مباشرة، وهذا الكود الذي كتبته كنموذج يحدد لنا محتوى أو جسد المدونة من حيث الخط ولون النص والخلفية والحواشي، ونلاحظ استخدام المتغيرات في هذه الأكواد.

]]></b:skin>

هو وسم نهاية وإغلاق الكود الذي ضم بداخله لغة CSS, وبهذا يحدد أوامر هذه اللغة بين وسميه بداية ونهاية.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

وهو كود مكتبة جي كويرى الذي يجعل مدونتك قابله للاستعانة بتأثيرات جي كويرى الجذابة جدا، وإن لم تكن موجودة بمدونتك فعليك إضافتها.

</head>

وهو وسم إغلاق رأس المدونة، وهو الذي يضم كل ما ذكرناه سابقا فيما بعد وسم فتح رأس المدونة.

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

وهو وسم بداية وفتح جسد المدونة أو محتوى المدونة.

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget 
id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>

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

<div class='main-outer'>
    <div class='main-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    
</div>

وهو كود التقسيم والذي يحدد قسم معين في المدونة ويحتوي على ما يحتوي عليه هذا القسم، ويبدأ بكود البداية وينتهي بوسم الإغلاق.

<b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

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

<script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>

وهو نموذج لكود جافا سكريبت JAVASCRIPT وهي لغة تقوم بعمل عدة مهام والقيام بعدة وظائف وإعطاء أوامر كثيره تفيد في استخدام القوالب في بلوجر.

</body>
وهو وسم نهاية وإغلاق جسد أو محتوى القالب, وهو الوسم الذى ضم كل ما سبق ذكره منذ ذكر كود أو وسم فتح جسد الصفحة أو محتوى المدونة.

</html>

وسم الإغلاق للكود كاملا.

 



 


تعليقات

الاسم

أخبار التقنية,79,التحويل,5,الهواتف الذكية,18,أنترنت الأشياء,32,برامج,34,حماية,6,شروحات,13,مبيعات ألوان,9,Adobe,11,
rtl
item
ألوان التقنية: شرح كامل لأكواد HTML الخاصة بقوالب مدونات بلوجر(Blogger)
شرح كامل لأكواد HTML الخاصة بقوالب مدونات بلوجر(Blogger)
قالب بلوجر هو بالأساس عباره عن ملف بامتداد XML وهو نوع من الملفات التي تحتوي على أكواد HTML وCSS بطريقه مدمجة،
https://1.bp.blogspot.com/-cqFjQVYn5G4/YDVRUb-vLxI/AAAAAAAAB_o/RjtL2ImDegw5VODMgcMQBPTBLN9roFcZgCLcBGAsYHQ/w640-h320/89-6-580x405.jpg
https://1.bp.blogspot.com/-cqFjQVYn5G4/YDVRUb-vLxI/AAAAAAAAB_o/RjtL2ImDegw5VODMgcMQBPTBLN9roFcZgCLcBGAsYHQ/s72-w640-c-h320/89-6-580x405.jpg
ألوان التقنية
https://www.colorstechs.com/2021/02/html-blogger.html
https://www.colorstechs.com/
https://www.colorstechs.com/
https://www.colorstechs.com/2021/02/html-blogger.html
true
4520618202692960814
UTF-8
تحميل جميع المشاركات لايوجد اي مشاركة عرض الكل اقراء المزيد أعادة الغاء حذف بواسطة الرئيسية صفحات المشاركات أعرض المزيد نقترح عليك قسم الفهري البحث جميع المشاركات لا يوجد اي مشاركة العودة الاحد الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت الاحد الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت يناير فبراير مارش ابريل مايو يونيو يولية اغسطس سبتمبر أكتور نوفمبر ديسمبر يناير فبراير مارش ابريل مايو يونيو يولية أغسطس سبتمبر أكتوبر نوفمبر ديسمبر الان دقيقة مضت $$1$$ minutes ago الساعة الماضية $$1$$ hours ago الامس $$1$$ days ago $$1$$ weeks ago أكثر من 5 اسابيع ماضية تابعاَ متابعاَ تم أغلاق المحتوى الخطوة الاولى: شارك في احد مواقع التواصل الاجتماعي الخطوة الثانية: اضغط على رابط موقع التواصل الاجتماعي أنسخ الكود اختر جميع الكود تم نسخ الكود تستطيع نسخ الكود او النص بالضغط على CTRL + C او CMD + C WTTH MAC قائمة المحتويات