9 فبراير 2019

إضافة قائمة أفقية متجاوبة وربطها بالتقسيمات على بلوجر

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


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

قائمة أفقية جاهزة html css



وعلى الجوال تبدو بهذا الشكل:

يظهر زر لاظهار وإخفاء القائمة بشكل سلس.

قائمة أفقية منسدلة بلوجر

إضافة أكواد القائمة للمدونة

كود HTML

هذا الكود سيتم إضافته تحت رأس الصفحة حيث يوجد إسم المدونة أو عنوانها الرئيسي.


<div id='cssmenu'>
<ul>
<li><a href='/'>الرئيسية</a></li>
<li class='active'><a href='#'>قائمة منسدلة</a>
<ul>
<li><a href='#'>قائمة 1</a></li>
<li><a href='#'>قائمة 2</a></li>
<li><a href='#'>قائمة 3</a></li>
<li><a href='#'>قائمة 4</a></li>
</ul>
</li>
<li><a href='#'>من نكون</a></li>
<li><a href='#'>للإتصال بنا</a></li>
</ul>
</div>

كود CSS

قم بإضافة الكود التالي فوق وسم الاغلاق </head>

<style>

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: right;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: right;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 17px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
left: 7px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
left: 10px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
z-index: 100000;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
text-align: right;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 23px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 90px;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '+';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}

}
</style>

كود Javqscript

هذا الكود، قم بإضافته فوق وسم </body> في الأسفل:


<script type='text/javascript'>
//<![CDATA[
(function($) {
$.fn.menumaker = function(options) {

var cssmenu = $(this), settings = $.extend({
title: "",
format: "dropdown",
sticky: false
}, options);

return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});

cssmenu.find('li ul').parent().addClass('has-sub');

multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};

if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');

if (settings.sticky === true) cssmenu.css('position', 'fixed');

resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}

if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);

});
};
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
title: "",
format: "multitoggle"
});

});
})(jQuery);
//]]>
</script>

تأكد من وجود هذا الكود على مدونتك، وإلا أضفه فوق   كذلك:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

شاهد الفيديو التالي لمعرفة طريقة التركيب:
سيتم اضافة فيدو لاحقا

8 فبراير 2019

كيفية شراء دومين مدفوع وربطه بمدونة بلوجر

في موضوع سابق قمنا بالتحدث حول تجنب شراء اسم النطاق من جودادي وقارناها بشركة نايمشيب. ويمكن مشاهدة الفيديو.


جودادي لديها مشكلين:

شراء وتركيب اسم نطاق دومين مدفوع على مدونات بلوجر مع شرح اعدادات DNS

  •  أثمنها مرتفعة جدا 
  • ولا توفر حماية المعطيات الشخصية.








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

طريقة شراء دومين مدفوع وربطه بمدونة بلوجر

لحصول على إسم دومين لتركيبه على مدونتك اتبع الخطوات التالية:

1. قم بالدخول للصفحة الرئيسية ل Namecheap لانشاء حساب جديد:

انقر على SIGN UP لعمل حساب جديد

عمل حساب جديد

أدخل المعلومات التالية:

  1. اسم المستخدم حروف وارقام مثل user69899 
  2. كلمة المرور تحتوي على حرف كبير ورمز على الأقل مثل #Domain689
  3. أعد ادخال نفس كلمة المرور
  4. الأسم الشخصي
  5. الإسم العائلي
  6. البريد الالكتروني (ستتوصل فيه برسالة للتفعيل)
  7. التسجيل

تسجيل معلومات الحساب


انقر على اسم الشركة للعودة للصفحة الرئيسية:

الصفحة الرئيسية

قم بالبحث عن إسم النطاق الذي تريده:


  1. الدومين مع الصيغة .com أو .net ....
  2. بدء البحث إذا كان الاسم متوفر أم أن شخصا ما قد حجزه قبلك.




2. بعد انشاء الحساب، اتبع بقية الخطوات كما في الفيديو للتركيب وفهم كيفية التعامل مع إعدادات DNS:


إعدادات DNS

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

7 فبراير 2019

لماذا لا يجب عليك شراء إسم النطاق Domain name من جودادي؟

قمت بشراء إسم النطاق الخاص ب مدونة فولفولي من شركة مغربية تعاملت معها لمدة تتجاز الخمس سنوات. وهذه التجربة يمكن تلخيصها كما يلي:



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


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


في النهاية قررت تحويل نطاق folfoly.com لشركة نيمشيب Namecheap والتي توفر إسم النطاق ب 8 دولارات + الحماية مجانا (فرق 12 دولارا مع جودادي).

لماذا قمت بتحويل إسم النطاق ل Namecheap



17 يناير 2019

شرح كود اضافات أو أدوات بلوجر

من الأمور التي يتعامل معها مدون يستعمل منصة بلوجر، الأدوات. وهي إضافات يتم تشغيلها لعدة أهداف مثل:


  1. إظهار قائمة من الروابط.
  2. أداة للاتصال بنا.
  3. صندوق المتابعة عبر البريد.

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


شرح كود اضافات بلوجر

أي أداة بلوجر تحتوي على كود بهذا الشكل:



<b:widget id='Text1' locked='false' title='عنوان' type='Text' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>محتوى الأداة</b:widget-setting>
</b:widget-settings>
<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:includable>
</b:widget>





شرح أجزاء عناصر الكود

عند فتح كود قالب بلوجر والبحث عن أداة، ستجد فيها الأجزاء التالية:

1. وسم الفتح

<b:widget id='Text1' locked='false' title='عنوان' type='Text' version='1'>

يبدأ دائما بهذا العنصر <b:widget وهو الرئيسي. ويمكن أن يحتوي على عناصر أخرى مثلا في النموذج أعلاه لدينا:

  • id: كل أداى لديها أي دي خاص به باسم مختلف.
  • locked: القفل، يحتمل خيارين true أي أنه لا يمكن حذف الاضافة من التخطيط. وfalse وهو العكس أي يمكن حذف الأداة.
  • title: عنوان الإضافة.
  • type: نوع الإضافة، في المثال أعلاه الإضافة هي من نوع نصي.
  • version: النسخة والرقم يتم تحديده من مصمم الإضافة.

2. وسم الغلق

</b:widget>
يحدد نهاية الأداة.

3. كود المحتوى

<b:widget-setting name='content'>
هنا يوضع كود محتوى الأداة مثل html.
</b:widget-setting>

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


4. عنوان ومحتوى الأداة


<b:includable id='main'>
</b:includable>

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

مثلا، لدينا عنوان الأداة:

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>


لدينا شرط هنا، وهذا الشرط يقول: إذا كان العنوان ليس فارغا أظهره.

كود الشرط <b:if cond='data:title != ""'></b:if> للتحكم في العنوان <h2 class='title'><data:title/></h2>


وهذا الكود يظهر محتوى الأداة: data تعني المعطيات ومقابها content أي ما تحتويه الإضافة.

<div class='widget-content'>
<data:content/>
</div>


14 يناير 2019

شرح أجزاء كود قوالب بلوجر وطريقة تعديلها

كمدون وبعد تركيب قالب بلوجر جديد، قد تكون بحاجة أحيانا للقيام بتعديلات على قالب مدونتك من قبيل:



  • إضافة قسم جديد.
  • تغيير الشكل من الألوان والحجم.
  • حذف جزء غير مهم.
  • تنظيف القالب.

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

من المهم جدا أن تكون ملما بتقنيات الويب وتصميم المواقع للقيام بهذه الأمور. لكن، لا تقلق يمكنك البدء بتعلم html و CSS اليوم. قدمنا سابقا دروسا بالفيديو ويمكنك أن تتعلم ما يكفي من أساسيات في ظرف يوم واحد فقط.



مكونات قوالب بلوجر

أي قالب بلوجر لابد أن يتوفر على هذه الأجزاء كما في الكود التالي:


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

<head>

<b:skin><![CDATA[/*
]]></b:skin>

</head>

<body>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
</b:section>

<b:section-contents id='sidebar'>
</b:section>

<b:section class='main' id='main' name='Main' showaddelement='no'>
</b:section>


<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
</b:section>

</body>

</html>

شرح الأجزاء:

1. نسخة xml


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

هذا الكود يتعلق بنسخة xml المستخدمة في القالب، وهو غير مهم.

2. ال html


<!DOCTYPE html>
محتوى صفحة الويب هنا
</html>
بين هذين الكودين يتم وضع محتوى صفحة الويب كاملة.

3. قسم head


<head>
أكواد أخرى هنا
</head>

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


<b:skin><![CDATA[/*
هنا يتم وضع أكواد css
]]></b:skin>

4. body


هنا يتم وضع محتوى صفحة الويب الذي يظهر على المتصفح مثل العناوين والفقرات..


<body>
محتوى صفحة الويب الذي يظهر على المتصفح
</body>

وتحتوي على أجزاء أخرى قد تختلف أسماءها من قالب لآخر، لأن المصمم يمكنه وضع الأسماء التي يريدها. في الفيديو سنرى كيف يمكنك ايجاد كل قسم باستعمال inspect على المتصفح.

الأقسام الثانية داخل body:

أ. header


 هو القسم الأول الذي يظهر في الأعلى، غالبا يكون فيه شعار الموقع أو المدونة.

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
</b:section>

ب. sidebar أو aside


 هو الشريط الجانبي.

<b:section-contents id='sidebar'>
</b:section>

ت. main

 هو مكان إظهار المواضيع أو المشاركات مع التعليقات، وهو أهم جزء لأنه يحتوي على المحتوى الذي يتم نشره.

<b:section class='main' id='main' name='Main' showaddelement='no'>
</b:section>

ث. foot أو footer


 هو الجزء الأخير ويتم وضعه في الأسفل.

<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>
</b:section>


تعديل قوالب بلوجر لإضافة أقسام جديدة للأدوات

بعد التعرف على الأجزاء المكونة لقالب بلوجر، لنجرب الآن إضافة أقسام جديدة للأدوات عبر الخطوات التالية:

تعديل كود قالب قوالب بلوجر


1. لا تنسى حفظ نسخة من قالب مدونتك قبل القيام بأية تغييرات. أو قم بالتجارب على القالب في مدونة أخرى حتى تنتهي لتجنب المشاكل والأخطاء.
2. قم بفتح أداة تعديل القالب بالنقر على مظهر ثم تحرير HTML.
3. قم بالنقر وسط كود القالب على Ctrl+F للبحث عن ]]></b:skin> وفوقها مباشرة أضف كود الCSS التالي:



.addedcontainer{
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 0 10px;
}
.addedcontainertwo{
width: 50%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 10px;
}
.addedcontainerthree{
width: 33%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 5px;
}

.addedcontainerfour{
width: 25%;
float: right;
box-sizing: border-box;
text-align: center;
padding: 0 5px;
}


4. بعد إضافة كود CSS، لديك مجموعى من الخيارات هنا لإضافتها:

بعد أضافة أي جزء، عد للتخطيط وستلاحظ الفرق.

أ. مربع واحد

<div class="addedcontainer">
<b:section class='addedcontainer' id='addedcontainer' maxwidgets='no' name='one addedcontainer' showaddelement='yes'>
</b:section>
</div>

ب. مربعين

<div class="addedcontainertwo">
<b:section class='addedcontainertworight' id='addedcontainertwof' maxwidgets='no' name='two containers' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainertwo">
<b:section class='addedcontainertwoleft' id='addedcontainertwoleft' maxwidgets='no' name='two containers' showaddelement='yes'>
</b:section>
</div>

ث. ثلاثة مربعات

<div class="addedcontainerthree">
<b:section class='addedcontainerthreefirst' id='addedcontainerthreefirst' maxwidgets='no' name='three containers first' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerthree">
<b:section class='addedcontainerthreesecond' id='addedcontainerthreesecond' maxwidgets='no' name='three containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerthree">
<b:section class='addedcontainerthreethird' id='addedcontainerthreethird' maxwidgets='no' name='three containers third' showaddelement='yes'>
</b:section>
</div>

ج. أربعة مربعات

<div class="addedcontainerfour">
<b:section class='addedcontainerfourfirst' id='addedcontainerfourfirst' maxwidgets='no' name='four containers first' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfoursecond' id='addedcontainerfoursecond' maxwidgets='no' name='four containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfourthird' id='addedcontainerfourthird' maxwidgets='no' name='four containers second' showaddelement='yes'>
</b:section>
</div>
<div class="addedcontainerfour">
<b:section class='addedcontainerfourfourth' id='addedcontainerfourfourth' maxwidgets='no' name='four containers fourth' showaddelement='yes'>
</b:section>
</div>


يمكنك الآن تعديل قالب مدونتك متى شئت، قد يأتي اليوم الذي تصمم فيه قوالب بلوجر، من يدري.

شرح ما هو فيدبرنر Feedburner وطريقة تفعيل المتابعة عبر البريد لمدونات بلوجر

إذا كنت تتساءل ما هو فيدبرنر Feedburner؟ فهو خدمة خلاصات RSS feeds وتتيح لأي مدون اضافة المتابعة عبر البريد لمدونته.


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


في الفيديو أسفله قمنا بشرح:

  • الحصول على رابط خاص لخلاصات فيدبرنر.
  • تعريب رسالة التفعيل التي يتوصل بها المتابع بعد التسجيل.


13 يناير 2019

شرح اضافة أهم الميتا تاج Meta Tags التي تحتاجها كل مدونة بلوجر

الميتا تاج Meta Tags هي مجموعة من الأكواد التي يتم إضافتها بين وسمي head لتحسين سيو مدونات بلوجر ولأغراض أخرى مثل:



  • توصيات لآليات البحث.
  • وصف المدونة.
  • الكلمات المفتاحية.
  • الملكية.


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

إضافة الميتا تاج SEO META TAGS  على بلوجر


قم بنسخ الكود التالي وشاهد الفيديو في الأسفل لمعرفة كيفية تعديله:

أدوات ستحتاجها:





<!-- [ 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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<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 != "error_page"'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='الكلمات المفتاحية' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<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='كود أدوات مشرفي المواقع' name='google-site-verification'/>
<meta content='كود أدوات مشرفي المواقع لبينج' name='msvalidate.01'/>
<meta content='Morocco' name='geo.placename'/>
<meta content='إسم المدون' name='Author'/>
<meta content='general' name='rating'/>
<meta content='Ma' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == "item"'>
<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='"Silakan kunjungi " + data:blog.pageTitle + " Untuk membaca postingan menarik."' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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='لوجو المدونة' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/ملف_شخصي' property='article:author'/>
<meta content='https://www.facebook.com/صفحة' property='article:publisher'/>
<meta content='كود تطبيق فيسبوك' property='fb:app_id'/>
<meta content='كود مدير فيسبوك' property='fb:admins'/>
<meta content='ar_AR' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='مستخدم تويتر' name='twitter:site'/>
<meta content='مستخدم تويتر' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>



 العناصر التي تحتاج للتعديل:
  1.  الكلمات المفتاحية
  2. الملف الشخصي لجوجل بلاس Google Plus
  3. كود أدوات مشرفي المواقع
  4. كود بينج
  5. لوجو أو شعار المدونة.
  6. الملف الشخصي فيسبوك.
  7. صفحة فيسبوك.
  8. تطبيق فيس بوك.
  9. مدير أو أدمين الفيسبوك.
  10. مستخدم تويتر.

بعد تعديل الأكواد بما يناسب، أدخل للمظهر من واجهة المدونة، تحرير HTML، ومن لوحة المفاتيح انقر على Ctrl+F للبحث عن وسم <head> وتحته مباشرة أضف الكود.

بالنسبة لتطبيق فيس بوك، فهو مهم كذاك لاضافة صندوق الاعجاب على المدونة.

12 يناير 2019

سيو بلوجر وشرح اعدادات تفضيلات البحث كاملة

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


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

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

سيو بلوجر: شرح اعدادات تفضيلات البحث على بلوجر


سيو بلوجر وتفضيلات البحث

الآن حان الوقت للاهتمام بالإعدادات الداخلية للمدونة الخاصة بالسيو، والتي تهم:



1. العلامات الوصفية

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

2.  الأخطاء وعمليات إعادة التوجيه

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

عمليات إعادة التوجيه المخصصة، لتوجيه الزائر من صفحة لصفحة أخرى اتوماتيكا.

3. برامج الزحف والفهرسة

 القيام بربط المدونة بأدوات مشرفي المواقع Google Search Console وبعد ذلك، تعديل الخيارات التالية:

‏ملف robots.txt مخصص

ملف يتحكم فيما يتم الزحف اليه من طرف اليات البحث. هذا نموذج لملف روبوتس يمكنك استخدامه:

User-agent: Mediapartners-Google
Allow: /
Disallow:

User-agent: *
Disallow: /search
Allow: /
Sitemap: https://www.xxxxxx.com/feeds/posts/default?orderby=UPDATED


أ. قم بتعويض https://www.xxxxxx.com برابط مدونتك مثل nnnn.com أو mmm.blogspot.com

ب. لمنع جوجل من تصنيف صفحة محددة قم بنسخ  الجزء الملون بالأحمر في الرابط بهذه الشكل:
https://www.folfoly.com/p/blog-page_2.html

وأضفه كما يلي:
Disallow: /p/blog-page_2.html
هذه الصفحة لن تظهر على جوجل لأنك منعك اليات جوجل من الدخول اليها.

علامات رؤوس مخصصة لبرامج الروبوت

تلعب نفس دور robots.txt للتحكم في:

  • الصفحة الرئيسية
  • صفحات الأرشيف.
  • المشاركات.

‏ads.txt مخصّص

ملف يهم التحكم في الإعلانات، ليس ضروريا.