2019/02/02

إضافة كود الميتا تاج Meta Tag لمدونة بلوجر


الكثير منا يملكون مدونة على منصة بلوجر، لكن يشتكون من عدم ظهورها على محركات البحث لجوجل. أو عدم تصدرها لقمة نتائج البحث، ذلك راجع بالدرجة الأولى إلى سوء استعمال أكواد الميتا تاج ( Meta Tag ) و التي هي عبارة عن تعريفات برمجية بسيطة في مدونة بلوجر تلعب دور هام في تحسين SEO  ( و التي تعني Search Engine Optimization ) لمدونتك لمحركات البحث لاكتشاف صفحات موقعك بسهولة. 

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

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

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

مميزات الميتا تاج META TAG:   

1- تعريف مدونتك لمحركات البحث.
2- التعريف بصاحب المدونة. 
3- حفظ حقوق الملكية لصاحب الموقع.
4- التعرف على محتوى موقعك من مواضيع و أقسام صفحات مدونتك.
5- تسريع أرشفة مواضيع مدونة بلوجر.
6- نشر روابطك بشكل صحيح على موقع الفيسبوك وتويتر. 

كيفية إضافة الكود لقالب مدونة بلوجر. 

لإضافة الكود... اتبع ما يلي:
1- الذهاب إلى قالب بلوجر لمدونتك.
2- و كما ننصح دائما، يجب أخذ نسخة احتياطية لقالب مدونتك لتفادي الوقوع في أية مشاكل.
3- تحرير قالب الــ HTML.
4- ابحث عن الكود التالي: <head> تم ألصق الكود أسفله مباشرة مكان الكود القديم المتواجد على مدونتك. 
<!-- [ Meta Tag SEO ] -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
<meta content='GOOGLE-WEBMASTER-CODE-VALIDATION' name='google-site-verification'/>
<meta content='CODE-VALIDATION-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='ADMIN-COUNTRY' name='geo.placename'/>
<meta content='NAME-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='ma' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='DESCRIPTION-OF-YOUR-BLOG' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https:img/BLogo.png' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
<meta content='FACEBOOK-APPLICATION-CODE' property='fb:app_id'/>
<meta content='ADMIN-FACEBOOK-CODE' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>
<!-- [ End of Meta Tag SEO ] -->
كل ما عليكم فعله للتعديل على الكود هو تغيير كل ما هو باللون الأحمر بمعطياتكم الخاصة. ثم حفظ.
في النهاية انصحكم بالمحتوي فهو العامل الاساسي فى تحسين موقعك في نتائج البحث .


تتمة الموضوع

2019/01/27

إضافة أداة آخر التعليقات لمدونات بلوجر بشكل متقدم و احترافي.

أداة التعليقات لمدونات بلوجر، هي أداة تمكننا من إظهار آخر و أحدث التعليقات للمدونة بشكل احترافي و متقدم. 

زوار مدونتنا الكرام، نقدم لكم اليوم أداة " أحدث التعليقات " لمدونات بلوجر و التي تقوم بعرض أحدث و آخر التعليقات المنشورة في مواضيع و مشاركات مدوناتكم و ذلك بترتيب تنازلي، أي من الأحدث إلى الأقدم. بحيث أن هذه الاداة مَبْنية من الصفر و بشكل متقدم جدا للغاية. كما أنها تتسم بتحميل سريع و تُظهِر التعليقات بطريقة فريدة من نوعها. و هي تعمل مع كل قوالب بلوجر الرسمية و المخصصة، كما أنها تستجيب بشكل كامل للهواتف المحمولة. 
أداة آخر التعليقات لمدونات بلوجر بشكل متقدم و احترافي

مميزات أداة أحدث التعليقات لبلوجر: 

أهم ما يجب أن يتوفر في هذه الأداة هو سرعة التحميل و ملائمتها مع كل واجهات الإستخدام لكي  تبدو أفضل، و هذا ما تم وضعه في الإعتبار من أجل تطوير الأداة، بحيث تقوم بجلب التعليقات الأخيرة و الأحدث من خلاصة مدونتك بطريقة غير متزامنة دون أن تؤثر كثيرا على سرعة تحميل المدونة، و فيما يلي أهم المميزات: 

تم ترميزها باستخدام جافا سكريبت و باستخدام Blogger JSON Feed API.
عرض الصورة الشخصية للمؤلف صورة - الكاتب الصورة الرمزية.
رابط المؤلف، لصورة ملفه الشخصي في + Google.
صورة متحركة:  preloader.
يظهر عنوان الموضوع التي نُشِر به التعليق.
يظهر تاريخ التعليق.
يعرض مقتطفات التعليقات (مقتطف على شكل وصف قصير).
رابط قراءة المزيد، أي الذهاب للموضوع الذي نُشِر به التعليق. (  »  )
خفيف و سريع التحميل.
استجابة لكل قوالب بلوجر.
استخدام التلميحات  (EN= tooltips - FR= infobulles) لعرض المعلومات. 

يعرض أداة التحميل المسبق GIF التالية و التي تدور و تنبض عندما يتم تحميل عنصر واجهة المستخدم أو عندما يطلب المتصفّح البيانات من خلاصة JSON.
صورة أداة التحميل المسبق
بمجرد تحميل الاداة بالكامل، يتم عرض التعليقات بترتيب تنازلي (الأحدث في الأعلى). 
عندما تمرر الماوس على اسم المستخدم المعلِّق، سيعرض تلميح الاداة معلومات حول تاريخ و وقت التعليق. 
عرض تلميح الاداة معلومات حول تاريخ و وقت التعليق
كما يتم إظهار تلميح آخر باسم الموضوع عندما يتم تمرير الماوس على رمز المجلد (أو الملف). 
إظهار تلميح باسم الموضوع

عرض أحدث التعليقات مع إظهار صورة مصغرة للمعلق: 

لإضافة الأداة، التي تمكن من إظهار آخر التعليقات التي يُدلي بها زوار مدونتك... اتبع ما يلي: 
     1- الذهاب إلى قالب بلوجر لمدونتك. 
     2- و كما ننصح ددائما، يجب أخذ نسخة احتياطية لقالب مدونتك لتفادي الوقوع في أية مشاكل. 
     3- تحرير قالب الــ HTML. 
     4- ابحث عن الكود التالي: </head> تم ألصق الأكواد أسفله قبله. 

ملاحظة: إذا كان قالب مدونتك يحتوي على رابط مصدر الــ jQuery، أو أحد الأكواد أسفله يُرجى عدم إضافتها. 
<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
     5- قم بإضافة الكود التالي قبل ]]></b:skin>. 
/*############Recent Comments Widget##################*/
.mbtcmts{list-style-type:none; overflow:hidden; }
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;}
.mbtcmts i{color:#999; padding-left:4px;font: normal normal 10px 'Droid Arabic Kufi', serif;}
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: right;padding:3px; margin:0 40px 0px 0}
.mbtcmts .icontent{ display:block; font: normal normal 10px 'Droid Arabic Kufi', serif; color:#999; line-height:1.5em;}
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;}
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;}
.mbtcmts span { margin:5px 0px 0px; padding-left:5px;}
.mbtcmts img {border-radius:100%; float:right; margin:0px 0px 20px 20px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; }
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;}
.mbtcmts .ititle {color: #0075a3;text-decoration: none;font: normal bold 12px 'Droid Arabic Kufi', serif;}
.mbtcmts .ititle:hover {color:#4d90fe;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-left:5px;}
.mbtcmts .idate:before {content:'\f017'; color:#999}
.mbtcmts .ipostTitle a {text-decoration:none; color:#999}
.mbtcmts .ipostTitle a:before {content:'\f07c'; }
#mbtloading{
  margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat right center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;right:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-right;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-right;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:left;width:110px;margin:0 10px 30px 0;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-right:-50px}.tooltip span b{width:15px;height:15px;right:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:#0075a3;border:1px solid #ffffff}.tooltip span b{background:#0075a3;border-top:1px solid #ffffff;border-left:1px solid #ffffff}
.mbtcmts .itotal {color:#333; padding:3px 10px 3px 3px; border:1px solid #eee; font-family: 'Droid Arabic Kufi', serif;font-size: 12px;}
.mbtcmts .itotal i {font-style:normal;float: right;}
.mbtcmts .itotal span{font-family:oswald;  font-weight:normal; color:#333; text-decoration:none}
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }
ملاحظة: يمكنكم تغيير اللون (#0075a3) في الكود باللون الذي يوافق مدونتكم.

     6- الآن قم بحفظ القالب، فنحن قد أوشكنا من الانتهاء.

     7- أخيرا ننتقل إلى قسم التخطيط، و نقوم بالنقر على إضافة الأداة في السايدبار.
     8- نختار اداة الــ HTML / JavaScript و نلصق الكود أسفله داخلها، تم حفظ.
<div id="mbtloading" ></div>
<script type="text/javascript">
function mbtcmts(json) {
document.write('<ul class="mbtcmts">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m =  "";
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
if(json.feed.entry[i].link[2] != null)
{
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
}
else
{ListUrl = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null)
{
var mbt_slit = json.feed.entry[i].link[j].href;
        var M_slit = mbt_slit.split("#");
        M_slit = M_slit [0];
        var K_slit = M_slit.split("?");
        K_slit = K_slit[0];   
        var B_slit = K_slit.split("/");
        B_slit = B_slit[5];
        B_slit = B_slit.split(".html");
        B_slit = B_slit [0];
        var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50);
        var Link_slit= T_slit.link(K_slit);
}
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
ListAuthor= json.feed.entry[i].author[0].name.$t;
var ListAuth = ListAuthor.split(" ");
var ListAuth = ListAuth.slice(0, 1).join(" ");
ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0, 10);
                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m - 1)];                     
//################### Thumbnail Check
if (json.feed.entry[i].author)
{
thumbUrl = json.feed.entry[i].author[0].gd$image.src;
sk= thumbUrl.replace("/s72-c/","/s60-c/");
ListImage= "'" + sk + "'";
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uVa0sKwIOKZyMPjK_PqBGAwVzuofypxkntgjEjXp1txYMPVhPH_Uef3vAsg_70Y5qJhEAQNV5ZDqiW4neVg44apq6KqOcZVNvoJ1YaxL3kmnu80D2Nrg88QuRT1BwVNYmgi8bgZVWls/s200/Icon.png'";
}
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="
+ListProfile+
  "><img src="
+ListImage+
"/></a><a class='ititle tooltip' href="
+ListUrl +
"target='_blank'><span><b></b>"
+ListAuth+
" Commented on » "
+ M +
" "
+ D +
", "
+ Y +
"</span>"
+ ListAuthor+
"</a> <i>نُشِر في: </i>  <span class='ipostTitle'><a class='tooltip'  href='"
+K_slit+
"'><span><b></b>"
+T_slit+
"</span></a></span><span class='icontent'>" + ListContent+" ...   <a href="+ListUrl+">  » </a></span><div></div></li>";
document.write(listing);
}
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>عدد التعليقات المنشورة حتى الآن: </i></div></ul>');
}
</script>
<script>
var ListCount = 5;
var ChrCount = 90;
</script>
<script src="https://URL-YOUR-BLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>
     9- يمكنكم إجراء التعديلات التالية على الكود الأخير حسب ما يلائمكم:
- يُرجى استبدال URL-YOUR-BLOG بعنوان مدونتكم.
-  لزيادة أو تقليل عدد التعليقات التي تريدون إظهارها في الأداة، يرجى تغيير الرقم 5 في ( ListCount = 5 ).
- لتحديد عدد الأحرف التي يستم عرضها كملخص تعليق (أي مقتطف)، يرجى تغيير العدد 90 بما يناسبكم في ( ChrCount = 90 ). 

     9- احفظ عملك و استمتع بسحر أداة أحدث التعليقات لمدونات بلوجر.
إن كانت هناك أية مشاكل أو ملاحظات، فنحن دائما رهن إشارتكم ضمن تعليقاتكم في الموضوع.


تتمة الموضوع

2017/04/30

كيفية إزالة أداة تدعمه بلوجر

تحتوي قوالب بلوجر على أداة تسمى " تدعمه بلوجر" "Powered by Blogger"  في تخطيط النموذج الافتراضي.
ولا يمكن إزالة الأداة ببساطة لأنها مقفلة افتراضيا. 
و لإزالتها، يتوجب علينا فتح هذه الأداة و هذا شيء في غاية السهولة. 
في هذا الدرس التعليمي القصير سوف نتعلم كيفية إزالة أداة " تدعمه بلوجر" من قوالبنا إن شاء الله.
كيفية إزالة أداة "Powered by Blogger".

سوف نقترح عليكم طريقتين لإزالة هذه الأداة و هما:

الطريقة الأولى: 

و تعتبر هذه الطريقة من أسهل الطرق التي يمكن لأي كان تنفيذها، بحيث تسمح لك بإخفاء هذه الأداة التي تظهر على مدونتك. 
و إليكم الخطوات التي يجب تنفيذها من أجل ذلك. 
إذهب إلى لوحة تحكم مدونتك.  
     1- المظهر. 
     2- تحرير الـــHTML. 
     3- ثم نبحث عن </head>... يمكنكم استعمال (Ctrl +F) من أجل البحث في القالب.  

     4- ثم نضيف الكود التالي أسفل الـــ </head>
<style>
#Attribution1 {
display: none;
}
</style>
     5- ثم قم بحفظ القالب.

الطريقة الثانية: 

فيما يلي نقترح عليكم الطريقة الثانية، و هذه الطريقة تسمح لنا بحذف نهائيا هذه الأداة من قالب بلوجر.
و إليكم الخطوات التي يجب تنفيذها من أجل ذلك. 
إذهب إلى لوحة تحكم مدونتك.  
     1- المظهر. 
     2- تحرير الـــHTML. 
     3- ثم نبحث عن الكود أسفله... يمكنكم استعمال (Ctrl +F) من أجل البحث في القالب.  
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
     4- الأن نقوم باستبدال كلمة 'true' بكلمة 'false' 
     5- ثم قم بحفظ القالب.

و هكذا نكون قد قمنا بإخفاء أو حذف الأداة من قوالب بلوجر بطريقة صحيحة.

نحن في انتظار تعليقاتكم و إن واجهتكم أي مشكلة فنحن رهن الإشارة دائما.

تتمة الموضوع

2017/04/01

تثبيت أداة في مكان خاص على بلوجر


نقدم لكم في درسنا هذا إن شاء الله كيفية تثبيت أداة من أدوات بلوجر في مكان ثابت.
لأننا بمجرد إضافة أداة، فإنها سوف تظهر على جميع صفحات المدونة بما في ذلك الرئيسية، أو صفحات الرسائل...
و إذا أردنا إظهار إحدى الأدوات مثلا فقط على الصفحة الرئيسية أو على صفحات رسائل المدونة...
فإن الطريقة جد سهلة إن شاء الله.
من أجل ذلك، يجب أن تحمل هذه الأداة إسم خاص بها و مميز لها من إجل تسهيل عملية البحث عن هذه الأداة في كود الــHTML.
و بعد تنفيذ هذه العملية، يمكنكم بعد ذلك حذف أو تغيير إسم الأداة.
و حتى لا نطيل عليكم، إليكم الطريقة:
نذهب إلى المظهر (القالب) "تحرير قالب بلوجر" ثم Ctrl+F و نبحث عن
<b:widjet id
هكذا سوف تتمكنون من تحديد مكان كل الأدوات التي تمت إضافتها إلى بلوجر.
و هنا يجب عليكم تحديد الأداة المراد تثبيتها في مكان خاص على المدونة... (مثلا:أداة إعلانات أدسنس، أو أداة التسميات...).
بحيث سيكون كود الأداة على الشكل الآتي:
<b:widget id='HTML3' locked='false' title='هنا ستجد إسم الأداة' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> 
الآن بمجرد تحديد الأداة المعنية بالأمر
من أجل إظهار هذه الأداة على الرئيسية فقط، نقوم بإضافة السطرين بالأحمر كما هو موضح في الكود أسفله:
<b:widget id='HTML3' locked='false' title='هنا إسم الأداة' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 
من أجل إظهار الأداة على جميع الصفحات باستثناء الصفحة الرئيسية،
<b:widget id='HTML3' locked='false' title='هنا إسم الأداة' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 
من أجل إظهار هذه الأداة فقط على صفحة معينة من المدونة نستعمل الكود:
<b:widget id='HTML3' locked='false' title='هنا إسم الأداة' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "أضف هنا رابط من روابط مدونتك_http://..."'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 
يجب إضافة الأكواد باللون الأحمر فقط.

تتمة الموضوع

2017/03/27

تعليقات بلوجر بشكل احترافي رائع

نقدم لكم اليوم إن شاء الله درس حول تغيير شكل تعليقات بلوجر، بحيث سوف نجعله بشكل رائع و جميل كما توضح الصورة أسفله. 
و بطبيعة الحال، لِمن لديه دراية جيدة بخصوص الـــ CSS و الــHTML، يمكنه تغيير نوع الخط و ألوان الخطوط كما يشاء. 
المرحلة الأولى : ضبط إعدادت التعليقات المترابطة من لوحة التحكم.
قم بتسجيل الدخول إلى لوحة التحكم الخاص بمدونتك بلوجر.
ثم توجه إلى إعدادت.
بعد الدخول إلى إعدادات في القائمة الجانبية أنقر على أخرى. 
في السماح بخلاصات المدونة إجعلها كامل (كما في الصورة أسفله)، بعدها قم بحفظ.
بعد حفظ الإعدادت توجه إلى المشاركات و التعليقات و المشاركة . 
الآن موقع التعليقات إجعلها مضمن. (كما في الصورة أسفله)

أولا و قبل كل شيء، قم بحفظ نسخة احتياطية من قالب مدونتك.

المرحلة الثانية: إضافة الكود إلى القالب
في لوحة التحكم الخاصة بمدونتك توجه إلى قالب بعدها تحرير الـــــ HTML ثم أنقر على متابعة.
ثم إعمل علامة على توسيع قوالب عناصر واجهة المستخدم.

الآن قم بالبحث عن رمز الكــــــــــــود:
<b:include data='post' name='comments'/>
ثم نقوم باستبداله بهذا الكــــــــــــود:
<b:if cond='data:post.showThreadedComments'><b:include data='post'
name='threaded_comments'/><b:else/><b:include data='post' name='comments'/></b:if>

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

المرحلة الثالثة: إضافة خصائص الـــCSS: 
الآن قم بالبحث مرة أخرى عن الكــــــــــــود:
]]></b:skin>
و قم بإضافة الكــــــــــــود قبله:
.comments {clear: both;margin-top: 10px;margin-bottom: 0px;line-height: 1em;}.comments .comments-content {font-size: 14px;margin-bottom: 16px;font-family: Verdana;font-weight: normal;text-align:right;line-height: 1.4em;}.comments .continue a, .comments .comment .comment-actions a {display:inline;font-family:Arial, Helvetica, sans-serif;font-size:13px;padding: 2px 5px;text-decoration: none;text-shadow:0 1px
1px rgba(0,0,0,.3);color:#FFF;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px
rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);-webkit-border-radius: 3px;-moz-border-radius:
3px;border-radius: 3px;margin-right: 10px;border: 1px solid #3079ED;background: #0066FF;background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));background: -moz-linear-gradient(top, #0099FF, #009999);filter: progid:DXImageTransform.Microsoft.gradient(startCo
lorstr='#0099FF', endColorstr='#009999');}.comments .continue a:hover, .comments .comment .comment-actions a:hover {text-decoration: none;background:#0099FF;background: -webkit-gradient(linear, left top, left
bottom, from(#009999), to(#0099FF));background: -moz-linear-gradient(top, #009999, #0099FF);filter:
progid:DXImageTransform.Microsoft.gradient(startCo lorstr='#009999', endColorstr='#0099FF');}.comments .continue a:active, .comments .comment .comment-actions a:active {position: relative;top:1px;background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));background: -moz-linear-gradient(top, #0066FF, #0099CC);filter: progid:DXImageTransform.Microsoft.gradient(startCo
lorstr='#0066FF', endColorstr='#0099CC');}.comments .comments-content .comment-thread ol {list-style-type:
none;padding: 0;text-align: none;}.comments .comments-content .inline-thread {padding: 0.5em 1em 0
1em;}.comments .comments-content .comment-thread {margin: 8px 0px 0px 0px;}.comments .comments-content .comment-thread:empty {display: none;}.comments .comments-content .comment-replies {margin-top: 1em;margin-left: 40px; font-size:12px;}.comments .comments-content .comment {padding-bottom:8px;margin-bottom: 0px}.comments .comments-content .comment:first-child {padding-top:16px;}.comments .comments-content .comment:last-child {border-bottom:0;padding-bottom:0;}.comments .comments-content .comment-body {position:relative;}.comments .comments-content
 .user {font-style:normal;font-weight:bold;}.comments .comments-content .user a {color: #444;}.comments
.comments-content .user a:hover {text-decoration: none;color: #555;}.comments .comments-content
.icon.blog-author {width: 18px;height: 18px;display: inline-block;margin: 0 0 6px -4px;}.comments .comments-content .datetime {margin-left:6px;color: #999;font-style: italic;font-size: 12px;float: left;}.comments
.comments-content .comment-content {font-family: Arial, sans-serif;font-size: 15px;line-height:
19px;}.comments .comments-content .comment-content {font-family: Arial, sans-serif;font-size: 15px;line-height: 19px;text-align:none;margin: 15px 0 15px;}.comments .comments-content .owner-actions
{position:absolute;right:0;top:0;}.comments .comments-replybox {border: none;height: 250px;width:
100%;}.comments .comment-replybox-single {margin-top: 5px;margin-left: 48px;}.comments .comment-replybox-thread {margin-top: 5px;}.comments .comments-content .loadmore a {display: block;padding: 10px
16px;text-align: center;}.comments .thread-toggle {cursor: pointer;display: inline-block;}.comments
.comments-content .loadmore {cursor: pointer;max-height: 3em;margin-top: 3em;}.comments .comments-content .loadmore.loaded {max-height: 0px;opacity: 0;overflow: hidden;}.comments .thread-chrome.thread-collapsed {display: none;}.comments .thread-toggle {display: inline-block;}.comments .thread-toggle .thread-arrow {display: inline-block;height: 6px;width: 7px;overflow: visible;margin: 0.3em;padding-right:
4px;}.comments .thread-expanded .thread-arrow {background:
url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc
AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;)  no-repeat scroll 0 0 transparent;}.comments .thread-collapsed .thread-arrow {background:
url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA
AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB  JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;}.comments .avatar-image-container {float:
right;overflow: hidden;}.comments .avatar-image-container img {width: 36px;}.comments .comment-block
{margin-right: 48px;position: relative;padding: 20px 15px 20px 15px;background: #F7F7F7;border: 1px solid
#E4E4E4;overflow: hidden;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-image: initial;}

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

تتمة الموضوع

2016/09/18

قالب ExpressNews معرب

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

معاينة الصفحة الرئيسية: 



معانية صفحة التدوينات: 



تحميل القالب: 
اضغط هنا.

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

اتصل بنا بشكل مبسط و جميل

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

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

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

الخطوة الثانية: إنشاء صفحة "اتصل بنا".
الآن نصغط على [ الصفحات ]، تم صفحة جديدة (كما توضح الصورة أسفله).
و يمكنكم تسميتها "contact us" ، "contact" أو "page de contact" أو كما تحبون....

نضغط على HTML (كما تبين الصورة الآتية).

ثم نلصق هذا الكود أسفله كما تبين الصورة السابقة.
<div id="contact_wrap"><h3>Formulaire de contact</h3><form name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Nom" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Envoyer" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form></div><style type="text/css">/* Menyembunyikan elemen dalam postingan */#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style></div>
ثم نضغط على " نشر " في أعلى الصفحة على يسارك.

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

الآن نذهب [ قالب ] ثم [ تحرير HTML] 
و باستعمال المفتاحين Ctl+F نبحث على الوسم ]]></b:skin> ثم نلصق قبله مباشرة أكواد CSS الموافقة للنموذج الذي تريدونه. 
ملحوظة للتوضيح أكثر:
يتم إضافة أكواد النموذج قبل وسم إغلاق أكواد CSS في قالب المدونة.

أكواد CSS الخاصة بالــ [نموذج بألوان خفيفة]
#ContactForm1{display:none;}#contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#cccccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);box-shadow: 1px 1px 5px #ccc;}#contact_wrap h3{color: #e8f3f9;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #333 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #333;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghth1GyWIiQnNVX_15n8Y98HQeRC3q9MjAGJU3WmxK_goLc9-uqDP2CqZXtdQZ-YR-N_XRH3J4lKkcVRbqPlpwr0pNVljjLHOp-mWdroppW6_hMmU8mUlav0J750Aee9_tOuvrPOSicYc/s1600/user.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ta9wvluJuKVumxd4gz8JmJI-ukFnmpdp92-RUlFqnmo_KXEIUikQTjG0mAwse5ytnYHdUhEiVf3tD2MzQ-iKp7iKzEFD91oyrTN7qIkpZsm1QOEt46Kfp1meKcDABCwvKtVC8N8AsUA/s1600/pen.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd8j8T02NHuLuvZgahTIWwM26EflUbNtnaO2ZWk_FC3QvTKztjwq12UfbFo1zNh6RqpvgYNJ-exZsIFY2SbQEC7plhBsmpSFOLbuhA-Gv8Ddfswg3dwp2Lv2yp-13inn1T7szoDsFoLjQ/s1600/msg2.png)no-repeat 10px 10px; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;border:1px solid #194f6d;}#ContactForm1_contact-form-submit:hover {background:#4c9bc9;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}

أكواد CSS الخاصة بالــ [نموذج بألوان غامقة]
#ContactForm1{display:none;} #contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border: #600 solid 1px;border-bottom: #420000 solid 1px;background-color:#983738;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);}#contact_wrap h3{color: #fff;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #3b5931;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;background-color: #659156;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #000 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #000;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghth1GyWIiQnNVX_15n8Y98HQeRC3q9MjAGJU3WmxK_goLc9-uqDP2CqZXtdQZ-YR-N_XRH3J4lKkcVRbqPlpwr0pNVljjLHOp-mWdroppW6_hMmU8mUlav0J750Aee9_tOuvrPOSicYc/s1600/user.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ta9wvluJuKVumxd4gz8JmJI-ukFnmpdp92-RUlFqnmo_KXEIUikQTjG0mAwse5ytnYHdUhEiVf3tD2MzQ-iKp7iKzEFD91oyrTN7qIkpZsm1QOEt46Kfp1meKcDABCwvKtVC8N8AsUA/s1600/pen.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRAMppS8URJ7fv9JRud9xYVtmok7LKk0gpwR4OrPUx33j9HG4FmpyL503N5dxOPCNldM7qlmvXRzD0PoIIjhrTQ64n-2wxPr5oicf2xSEfsKt862xI-KfNvNc7VvspVQJL0zHPp15hh58/s1600/msg.png)no-repeat 10px 10px; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #659156;border:1px solid #333;}#ContactForm1_contact-form-submit:hover {background:#5d894d;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}
ثم حفظ النموذج.
و هكذا نكون قد انتهينا من درسنا هذا و ارجو أن تعجبكم طريقة إضافة هذه الإضافة.
و بطبيعة الحال، من لديه دراية في أكواد CSS، يمكنه التعديل عليها كما يشاء.
و إذا واجهتم أية مشاكل، فلا تترددوا في طرحها ضمن تعليقاتكم.
تتمة الموضوع

نموذج قالب بلوجر، أقل ما يجب أن يكون



تريدون إنشاء نموذج بلوجر انطلاقا من صفحة بيضاء.
لديكم معرفة مسبقة باللغتين HTML و CSS ؟ هذا جيد إذا.
لديكم أيضا إلمام بلغة XML بلوجر. و هذا أيضا جيد.
إذن أنتم جاهزون لبدء هذا التحدي الجديد.





الأكواد المطلوبة في قالب بلوجر:
الكود أسفله هو الحد الأدنى المطلوب لبدء كتابة نموذج جديد لقالب بلوجر.
نوع المستند "doctype" و الوسوم المعتادة <head> و <html> و <body> هي كلها أشياء مطلوبة بالنسبة لهيكلة قالب بلوجر.
أما بالنسبة لوسوم XML بلوجر، و وسوم تخطيط الصفحات فهي ضرورية:

<b:skin>: 
  • و هو وسم إغلاق خصائص المتغيرات أو ملفات CSS.
  • و يجب أن يكون داخل وسم <head>.
  • الوسم <style> لا يجب أن يتم الإشارة إليه.
<b:section>: 
  • و هي المنطقة التي يتم فيها تحديد مجموعة من الأدوات. 
  • و يجب دائما أن يتوفر قالب بلوجر على الأقل على "<b:section>" واحدة و التي ستسمح لنا بإضافة الأدوات باستعمال الخاصية: showaddelement='yes'
  • كما يجب دائما أن تكون "<b:section>" داخل <body>.
<b:widget>
  • و هو الوسم الخاص بالأدوات. 
  • أداة واحدة، و من الأفضل أن تكون الأداة التي تحتوي على التدوينات: Blog1
  • الوسوم <b:widget/> يجب أن تكون داخل <b:section/>
ملف XML:
Le fichier XML
CODE XML MINIMUM
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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>
    <!-- DÉBUT DE L'ENTÊTE -->

    <!-- EMPLACEMENT 1 : BALISES META, LINKS, FICHIERS JS, ETC -->

    <b:skin><![CDATA[

      /* EMPLACEMENT CSS */

    ]]></b:skin>

    <!-- EMPLACEMENT 2 : BALISES META, LINKS, FICHIERS JS, ETC -->

    <!-- FIN DE L'ENTÊTE -->
  </head>
  <body>
    <!-- DÉBUT STRUCTURE HTML -->

    <!-- AU MOINS 1 B:SECTION & 1 B:WIDGET REQUIS -->
    <b:section class='main' id='main' showaddelement='yes'>
      <b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>
    </b:section>

    <!-- FIN STRUCTURE HTML -->
  </body>
</html>

تتمة الموضوع