ازرار CSS لمدونتك ومن تصميمك

create css buttons
ازرار Css Buttons أصبحت رائجه ومستخدمه من قبل كثير من المدونين نظراً لأنها تضيف لمسة جمالية للمواضيع وأيضا هي مميزة ولافتة للإنتباه فيراها القارئ بسهولة وهناك الكثير من الإضافات الجاهزة لصنع تلك الأزرار لكن هناك حكمة شهيرة تقول " لا تعطني سمكة ولكن علمني كيف أصطاد "
وهذا ما سنتعلمه وهو طريقة صنع تلك الأزرار بحيث تصنع الزر الذي يتناسب مع الوان مدونتك ويتطابق معها 100% وسنستخدم لعمل الأزار موقع متخصص في صنعها , هناك مواقع كثيرة لصنع الأزرار لكن الموقع الذي سنستخدمه هو أسرعها واسهلها في التعامل لدخول الموقع اضغط على الزر التالي وهذا الزر مثال للمعانية 


وهذا شرح لقائمة تنسيق الأزرار الخاصة بالموقع

CSS Button Maker
والفديو التالي هو توضيح عملي لطريقة صناعة الأزرار واستخدام الموقع

وهذا هو الكود الناتج من عملية تصميم الزر

.button {
   border-top: 1px solid #de8200;
   background: #f78000;
   background: -webkit-gradient(linear, left top, left bottom, from(#fcc565), to(#f78000));
   background: -webkit-linear-gradient(top, #fcc565, #f78000);
   background: -moz-linear-gradient(top, #fcc565, #f78000);
   background: -ms-linear-gradient(top, #fcc565, #f78000);
   background: -o-linear-gradient(top, #fcc565, #f78000);
   padding: 7px 14px;
   -webkit-border-radius: 29px;
   -moz-border-radius: 29px;
   border-radius: 29px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #000000;
   font-size: 19px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #fa0519;
   background: #fa0519;
   color: #ffffff;
   }
.button:active {
   border-top-color: #2faafc;
   background: #2faafc;
   }

هذا الكود يضاف فوق الوسم ]]> ولكن طبعا تحتاج لضغط سهم توسيع عناصرا لستايل

أهم الملاحظات حول الكود

هذه الكلمة button  والمتكررة ثلاث مرات هي معرف الزر ولهذا يفضل تغييرها بكلمة من عندك تميز الزر
مثلا نكتب buttonred أو أي كلمة المهم ان لا تكون بها مسافات
وإن أردت ان تضيف أكثر من زر كل ما عليك ان تقوم بتنسيق الزر باللون الذي يعجبك ثم تغير المعرف الخاص به وتضيف الكود الخاص كما فعلت بالزر الأول وهكذا
الرقم 19 هو حجم الخط يمكنك تغييره كنوع أكبر من التحكم
أما هذا الكود    font-family: Georgia, serif; هو وسم الخط وان كنت تستخدم خط مخصص في مدونتك استبدل الوسم بوسم الخط الخاص بك

طريقة استخدام الأزرار في المواضيع

قم بتحويل صندوق المواضيع من وضع التأليف الى وضع HTML
ثم أضف الكود التالي في المكان الذي تريد

button" href="#" rel="nofollow" target="_blank">Word

نستبدل Word بأى كلمة نريد مثل تحميل معاينة أى شئ
ونستبدل هذا الرمز # بالرابط الذي نريد الزر أن يفتحه عند الضغط عليه
ونستبدل button بمعرف الزر الذي سنستخدمه
هذا الكود target="_blank"  معناه أن الرابط سيفتح في صفحة جديدة ان اردته أن يفتح في نفس الصفحة قم بإزالته


 الى هنا انتهى موضوعنا وبالتوفيق للجميع 
دمتم في أمان الله

قالب Horcrux نسخة إحترافية

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


مميزات القالب 

القالب مساحته مضبوطة وبحجم مناسب جدا 

القالب خفيف جداً وأنيق ومنظم 

القالب صديق لمحركات البحث 

يحتوي القالب على هيدر مميز ومساحة إعلانية بمقاس 468x60

يحتوي على صندوق اشتراك عبر البريد مدمج بالنسخة 

فقط ابحث عن هذه الكلمة feedid واستبدلها بمعرف فيدبرنر الخاص بك ستجدها مكررة مرتين

يحتوي اكواد الميتا تاج مضافة في بداية القالب ابحث عن كلمة تعديل وقم بتبديل المعلومات بها

تم تركيب نموذج التعليقات التفاعلية بتنسيق يناسب القالب

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

يحتوي على ازرار المتابعة عبر المواقع الإجتماعية مصصمه من قبلي 

ويمكن تعديل الروابط على النحو التالي


هذه
شروط الإستخدام يرجى المحافظة عليها ولا أسامح أحد يحذف حقوق القالب
وبالتوفيق للجميع

نظام تعليقات جوجل بلس على بلوجر

Google Plus comments to blogger
قامت جوجل بعمل تحديث على منصة بلوجر وموقعها الإجتماعي جوجل بلس وزيادة قوة الربط بينهما عن طريق إتاحة إستخدام نظام تعليقات جوجل بلس على منصة بلوجر وهي خطوة قوية جداً في تطوير النظامين معاً والحقيقة نظام التعليقات ممتاز جداً ومريح في الإستخدام لكن يعيبه نفس الشئ الذي يعيب تعليقات فيس بوك وهي محدودية الإستخدام انه لا يستطيع إستخدامه والتعليق به إلا أصحاب حسابات جوجل بلس وهو ما سيكون جيد للمدونات التي تتحدث عن جوجل بلس وتطويره أو المدونات التي تطور بلوجر نظراً لان متابعيها يملكون حسابات جوجل لكن سيكون مقيد لغيرها من المدونات ولكن نعتبرها خطوة ممتازة وقد تكون في المستقبل عامل أكبر للتطوير لكن ما لفت نظري هو سهولة التركيب القوية جداً بدون أكواد بدون أي إضافات فقط ضغطة زر ويعمل النظام , لكن يجب أن يتم دمج الملف الشخصي لبلوجر مع ملف جوجل بلس حتى يمكن تركيبه وهو ما لا يحبه كثير من مستخدمي بلوجر لكن من يريد أن يطلق العنان لإمكانيات جوجل بلس في مدونته يتبع شرح تركيب نظام التعليقات

شرح التركيب

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

الخطوة الثانية ستظهر هذه الصفحة قم بتطبيق التالي
ثم ستنتقل لهذه الصفحة طبق ما في الصورة التالية

الخطوة الأخيرة إنتقل مرة أخرى للوحة التحكم وإختار +Google وطبق التالي

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

Google plus comments preview

ملاحظة هامة : هذا النظام يلغي نظام تعليقات بلوجر لذا سيلاحظ من فعله أو تم تفعيله تلقائيا في مدونته
أن خانة التعليقات لا تظهر في لوحة التحكم ومن يرغب في العودة للنظام الاصلي يلغي التاشير من على خيار إستخدام تعليقات +Google
ومن يريد إعادة حسابه الى حساب بلوجر يتبع التالي

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

أفضل الطرق لإضافة القرآن الكريم إلى مدونتك

Add Quran to your website
القرآن الكريم نور القلوب وحياة النفوس ووجوده في أى مكان رحمه وثواب واجر عظيم ولن تجد مكان يجلب لك حسنات مثل المواقع والمدونات عندما تضيف بها القرآن الكريم فكل زائر سيستمع للقرآن عن طريقك لك به أجر , تخيل كم الحسنات التي تاتيك وبإذن الله في هذا الموضوع سنضيف مجموعة طرق لوضع القرآن الكريم في مدونتك بطريقة صحيحة تجتذب المستمع , لان طرق إضافة القرآن الكريم بفضل الله متعددة لكن يجب ان تفكر أيهم يتناسب مع مدونتك وكيفية الإضافة لان هناك أخطاء ترتكب تسبب نتيجه عكسية ونفور مثال : نجد شخص يضيف إضافة قوية جداً بها كل القراء ولكنها ثقيلة ويجد الزائر معاناه في تحميلها او قد يكون الزائر يحتاج شئ بسيط ولا يستطيع البقاء طويلا ويضطر للإنتظار حتى يتم تحميل المدونة بسبب ثقل الأدوات وطبعا أدوات الميديا عموما ويدخل بها إضافات القرآن تاخذ وقت في التحميل بالإضافة أن بعض الإضافات تعمل تلقائيا وهذا ليس جيدا  حتى وإن كانت النية أن تسمعه خير الكلام لكن لا يجب ان ندفع الناس او نجبرهم على الطاعة ولكن اجعل دائما زائر مدونتك يحدد ما يريد فلو إستمع مكرها قد يغلق مدونتك وهو لا يرغب او لان الثقل أرهقه في التحميل لذا حاول ان تيسر على زائرك كل شئ وعليك أن تحدد هل ترغب بوضع الإضافة في آداة أم في صفحة مستقلة لماذا ؟ لانه لو قرارك أن تضعها في آداة يجب ان تنتقي إضافة خفيفة جداً بحيث لا تسبب مشكلة للزائر ولا تبدأ تلقائيا أبدا , أما لو كنت تهدف الى  إضافتها الى صفحة مستقله فحينها يمكن ان تستخدم  إضافة قوية لأن الزائر هو من دخل طائعا ويجب ان توفر له إضافة قوية تشمل عدد كبير من القراء بحيث ينتقي من يحب ان يستمع له


إضافات تضاف الى آداة HTML/JavaScript 

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

Get the Flash Player حمل مشغل الفلاش

كود الإضافة 

 


Get the Flash Player حمل مشغل الفلاش




ويمكنك تعديل مساحة عرض المشغل بزيادة الرقم 160

اما إن أردت إضافة تحكم أكبر في إختيار القارئ فهذه إضافة أخرى خفيفة وتتيح ذلك


كود الإضافة 

 

220px; border:4px solid #7F8080; border-radius:15px;-webkit-border-radius:15px;-moz-border-radius:15px;">



ويمكن تعديل هذا اللون #7F8080  فهو لون الإطار الخارجي
أما لزيادة العرض فغير الرقم 220  ولزيادة الطول غير الرقم زد الرقم 160
الإضافة الثالثة وهي الأقوى إضافة مميزة تحتوي على حوالي 300 قارئ


كود الإضافة



هذا #ddd هو لون الخلفية
هذا #BBBBBB هو لون الإطار
أو يمكنك إزالة السطرين إن اردت الإضافة بدون الخلفية والإطار
background:#ddd;
border: 1px solid #BBBBBB;
 نسأل الله أن يكون هذا العمل خالصاً لوجهه وان يوفق الجميع الى ما يحب ويرضى 
دمتم في امان الله






سلايدر كن مدون التلقائي بتنسيقك الخاص

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



طريقة التركيب

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




وأضف الكود التالي تحت هذا الكود




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

ثم أضف الكود التالي فوق الوسم

الرقم 200 هو عدد حروف الملخص
الرقم 18 هو عدد المواضيع التي تظهر في السلايد قم بالزيادة او النقصان بحسب عرض مدونتك
القسم إستبدله بإسم القسم الذي تريد أن يظهر السلايد مواضيع منه
ملاحظة :  " قد يرغب احد أن يصنع قسم او تسمية جديدة للسلايد بحيث يضع به مواضيع مختلفة من الأقسام ولا يريده ان يكون ظاهر للزائر بشكل كبير يمكن عمل التالي بإستبدال القسم برمز مثلا وليكن النجمة * ثم وضع المواضيع التي ترغب في تسمية جديدة وأيضا أعطها رمز النجمة ويمكن إخفائها من آداة التسميات بالطريقة التالية "


إتمام التركيب مع شرح التنسيق

 الكود التالي هو المتمم لعملية التركيب وهو الخاص بتنسيق السلايدر

قم بإضافته فوق الوسم ]]>
#featured{
margin-bottom:10px;
}
.sliderwrapper{
position: relative;
border-bottom-width: 6px;
height: 124px;
}
.sliderwrapper .contentdiv{
background: #fff;background: -moz-linear-gradient(top,#fff,#EAEAEA);background: -webkit-linear-gradient(top,#fff,#EAEAEA);
border:3px solid #7C7B7B;
height:180px;
border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
box-shadow: 0 1px 2px #999;-moz-box-shadow: 0 1px 2px #999;-webkit-box-shadow: 0 1px 2px #999;
margin-top: 10px;
opacity: 1;
padding: 15px 15px 15px 0;
position: absolute;
visibility: hidden;
width: 623px;
}

.pagination{
text-align: right;
margin-top: 110px;
padding:5px;
margin-left:5px;
}
.pagination a{
background: #F0EFEF;background: -moz-linear-gradient(top,#fff,#F0EFEF);background: -webkit-linear-gradient(top,#fff,#F0EFEF);
font:13px Arial;
font-weight:bold;
color:#a3a3a3;
padding:4px 8px;
border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;
box-shadow: 0 1px 2px #000;-moz-box-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 1px 2px #000;
margin-right:4px;
}
.pagination a.selected{
color:#fff;
background:#000;
}
.pagination .prev,.pagination .next { color:#EAEAEA;
font-size:0px; background:none; padding:0px; }
.featuredPost{
width:380px;
padding:0px 10px 10px 10px !important;
bottom:0;
float:left !important;
}
.pagination .prev, .pagination .next{float:right;}
.featuredPost a{
color:#000;
font: 18px "Microsoft Sans Serif";
margin:0;
padding:0;
}
.featuredPost h2{margin:0 0 8px 0;}
.featuredPost span{font-size:11px; margin:0; color:#C94545;}
.featuredPost p{font-size:13px; margin:4px 0 0 0; color:#797979;}
.sliderPostPhoto a img{float: right !important;width:220px; height:180px;border:2px solid #000;}
.sliderPostPhoto{float: right !important; width:100px !important;}
لتعديل عرض السلايدر قم بتعديل الأكواد الحمراء بنفس النسبة إذا قمت بزيادة 10px يجب أن تزيدها جميعا بنفس النسبة ونفس الشئ إن أنقصت العرض
أما لتعديل الإرتفاع تعدل النسب الزرقاء بنفس الطريقة مع مراعاة أن الرقمين المتجاورين 220 و 180 هما عرض وإرتفاع الصورة
هذا اللون  #7C7B7B هو لون الإطار الخارجي للسلايدر

وهذا التدرج اللوني هو خلفية السلايدر

background: #fff;background: -moz-linear-gradient(top,#fff,#EAEAEA);background: -webkit-linear-gradient(top,#fff,#EAEAEA);

وهذا التدرج هو لون الأزرار

background: #F0EFEF;background: -moz-linear-gradient(top,#fff,#F0EFEF);background: -webkit-linear-gradient(top,#fff,#F0EFEF);

وهذا لون background:#000; الزر الخاص بالموضوع المختار في السلايدر
هذه هي أهم الأكواد التي ستتيح لك التحكم في السلايدر وجعله مناسب لمدونتك ويمكنك الإستعانة بخدمة أكواد الألوان التابعة لنا 
وبالتوفيق بإذن الله

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

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

مرحلة الإعداد


blogger comments settings
قم بالدخول الى إعدادات مدونتك ثم إختار مشاركات وتعليقات

أول جزء وهو موقع التعليقات : سنجعله مضمن 

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

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

ثالث جزء وهو الخاص بالإشراف على التعليقات 

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

رابع جزء يهمنا في إعداد التعليقات هو رسالة التعليقات 

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

ننتقل لمرحلة التركيب 

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





ملاحظة : ستجد الكود متكرر أكثر من مرة قم بتعديلها كلها 

مرحلة التنسيق 

بإنتهاء التركيب ستصبح التعليقات التفاعلية تعمل في قالبك لكن ستكون بمظهر بسيط جداً إن كان يعجبك فلا تقوم بعمل تعديل أما إن لم يكن يعجبك فيمكنك تنسيقه وإخترت لكم نموذج خفيف وبسيط ويمكن ان تنسقه بما يتناسب مع مدونتك بسهولة 
ابحث عن هذا الكود ]]>
وأضف فوقه الكود التالي
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:right}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 5px 10px 5px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#E0DFDF;border:1px solid #A3A1A1;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-right:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.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:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:left;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;left:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-right:48px}
.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:0}
.comments .comments-content .loadmore.loaded{max-height:0;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-left:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-1FOOK-wkThg/U4rEEaJBlLI/AAAAAAAAEMA/vAhBcNCkp_4/s51/arrow.png) top left no-repeat;float:right;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-right:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
هذا النموذج هو نفس الشكل الموجود في صورة الموضوع ولقد إستخدمته في عدة قوالب لانه ممتاز بحق وهذه نماذج للمعاينة


تنسيق النموذج 

هذا اللون  #f1f1f1 هو لون رأس التعليق الذي يظهر به الإسم والتاريخ
هذا اللون  #e3e3e3 هو لون الإطار الخارجي وهو متكرر مرتين قم بتغيره فيهما
هذا اللون #E0DFDF هو لون أزرار الرد والحذف
وهذا لون #A3A1A1  الإطار الخارجي للأزرار
وهذا اللون #0E6284 هو لون إسم الكاتب والتاريخ وهو متكرر مرتين
فقط عدل الألون وسيصبح النموذج متوافق مع مدونتك تماماً أكواد الألوان

مرحلة الضبط 

مرحلة الضبط ستأخذنا الى نقطتين

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

والسببب يرجع الى أن بعض القوالب تكون بها أكواد لتنسيق التعليقات القديمة وتؤثر على التموذج الجديد فما الحل ؟
الحل أن نبحث عن الاكواد القديمة ونحذفها وستكون الأكواد تحمل نفس المعرف .comments
وسنجد كل كود منها يبدأ بقوس فتح { وينتهي بقوس إغلاق } لذا يجب تحديد الأكواد جيدا وطبعا لا تنسى نسختك الإحتياطية لتجنب أى مشكلة ملاحظة قد نجد كود ولكنه يبدأ بهذا الرمز #comments هذا لا نحذفه نبقي على هذا بالكامل من أول قوس الفتح الى قوس الإغلاق اما باقي  الاكواد نحذفها وهذا كله في حالة ظهور مشكلة في شكل التعليقات

النقطة الثانية رسالة التعليقات 

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

بعده بسطور سنجد هذا الكود  نضيف بجواره الكود التالي


ثم بعده بسطور قليلة اخرى نجد الوسم
نضيف قبله

وهذه صورة للتوضيح


قد تجد الكودين مضافين بالفعل وحينها نتجاوز هذا الجزء
ثم نبحث عن هذا الكود 

document.getElementById(domId).insertBefore(replybox, null);
ونستبدله بهذا

document.getElementById (domId). insertBefore (document.getElementById ('threaded-comment-form'), null);

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

فواتح المواضيع والعبارات الترحيبية بشكل تلقائي

كل مدون لديه طريقته الخاصة في إفتتاح مواضيعه بالإضافة أن محتوى وتصميم  المدونة يفرض أيضا طريقة لفتح المواضيع لكن في الغالب لا تخلوا مدونة إلا وتحتوي عبارات ترحيبية وأيضا تكون عادة نفس العبارات في كل موضوع لكن مسألة العبارات الترحيبية بالرغم من جذبها للقارئ وإشعاره بمودة  عند قراءة الموضوع بالإضافة الى الفواتح التي لها بعد شرعي وثواب عظيم كعبارة السلام ( السلام عليكم ورحمة الله وبركاته ) او الثناء على رب العالمين والصلاة على الحبيب ( الحمد لله رب العالمين والصلاة والسلام على المبعوث رحمة للعالمين سيدنا محمد وعلى آل وصحبه أجمعين ) , لحظة هل صليت على النبي ام قرأت فقط ؟ صلي على الحبيب ولا تكن بخيل , طبعا كل هذا جميل ورائع لكن نتكلم عن امر عملى قليلا العبارات الترحيبية تظهر في ملخص الموضوع ولو وضعتها كصورة ستظهر في مصغرات الموضوع لأنها تكون أول صورة وهذا سيجعلها تؤدي دور وتؤثر على دور آخر وهو جذب الزائر للقراءة فنحن نهدف الى جذب الزائر الى القراءة ثم بعد أن يقرر بالفعل انه سيقرأ الموضوع تظهر العبارة الترحيبية لكن ظهورها في الملخصات تضيع مسألة الجذب عبر الملخص , إذاً ما اللحل ؟ الحل وببساطة هو أننا سنحصد كل المزايا ونلغي كل العيوب سنقوم بعمل تركيب تلقائي للعبارات التحيبية وجعلها تظهر في المواضيع تلقائيا وهذا سيوفر وقت الكتابة وفي نفس الوقت وضعها بهذا الشكل لا يجعلها تظهر في الملخصات

الترحيب كصورة

لمن يرغب في إضافة رسائل الترحيب على هيئة صورة يتبع التالي
لكن أولا هذه معاينة لرؤية الناتج


طريقة التركيب : إبحث عن احد هذه الأكواد

أو
وأضف تحته الكود التالي


   

   

وإستبدل url برابط الصورة التي تعجبك ويمكنك البحث في صور جوجل ستجد آلاف الصور الترحيبية
وهذا رابط الصورة الظاهرة في المعاينة لمن أراد إستخدامها

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGlluMvwmREDOWLgkbotRDaaILUeRA_Vy8URYKiJNOpL6tlC5YuD4Bp9pXzJw6U33YcjH4ahudNTxGhmcwjmgIiikIRUKVgqWfTo-6n0Wo5ZdWnULXMYZNPAS3MwpVBrXpKlgmUlAYppp/s355/bsmlh.png

الترحيب كنص

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


 

     السلام عليكم ورحمة الله وبركاته


الحمد لله والصلاة والسلام على رسول الله
    


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


ملاحظات عامة 

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

شرح تعديلات واجهة تحرير قوالب بلوجر الجديدة

blogger new template Editing page
تفاجأ من دخل اليوم لواجهة تحرير القالب في بلوجر بتغيير الواجهة ووجود خيارات جديدة وخيارات مفقودة وكثيرين قد يواجهون مشكلة في التعامل بسبب الشكل الجديد للواجهه ولذا أسرعت بهذا الموضوع بعد الوصول للفكرة الاساسية من عمل الواجهه بحيث لا يتعطل من يعدل على القوالب ويفهم ما الذي يحدث بالضبط طبعا وكالعادة تسعى جوجل لتطوير منصة بلوجر والتي أصبحت في العاميين السابقين محل إهتمام كثير من مستخدمي الإنترنت ولكن دائما ما تكون التعديلات صادمة في البداية ثم بعد الإعتياد ينتهي الأمر لكن طبعا هناك من يحب البقاء على المظهر الأساسي الذي يتعود عليه كالمثل القائل" اللى تعرفه أحسن من اللى ما تعرفوش" فالشئ المعروف بالنسبة للمستخدم أفضل من الشئ المبهم ولو كان افضل وعموما حتى الآن لم تظهر هل بالفعل الواجهه الجديدة ستكون أفضل أم لا ولكن اهم ماجاء في الواجهة الجديدة هو أنه أصبح الوصول لاكواد الأدوات اسهل بكثير بضغطة زر دون بحث او أى شئ أيضا أصبحت الألوان أكثر تميزاً للأكواد ويمكن تحديد الأكواد بسهولة أكبر ودون أخطاْ بالإضافة الى إمكانية المعاينة في نفس الصفحة بدلا من التنقل بين صفحة وأخرى لكن أهم تعديل هو عدم وجود زر توسيع عناصر الواجهة والذي إرتبك الكثييرين من عدم وجوده والبعض لم  يعلم كيف يعدل وماذا يفعل وهذا هو محور الموضوع توضيح الجزء الخاص بزر توسيع عناصر الصفحة ولم أرد ان أكتب كثيراً لان الكتابة قد لا توضح بالضبط لذا فضلت الشرح بالفديو سيكون أسهل واسرع وأكثر وضوحاً


بالنسبة للبحث عن الأكواد داخل القالب يجب ان تضغط داخل إطار التحرير ضغطة بحيث يتم تنشيطة ثم تضغط زري Ctrl+F لكي يظهر شريط البحث المخصص للنموذج الجديد تكتب ما تريد البحث عنه ثم تضغط Enter
أيضا بالنسبة لاكواد الستايل وهي الاكواد التي تقع بين الوسمين و
يجب أن يتم توسيع العناصر الخاصة بها إن اردنا أن نضيف كود مثلا فوق

إمكانية الإستبدال

ومن المميزات الإضافية أيضا في الواجهة الجديدة إمكانية الإستبدال ويمكنك إستبدال أى جزء بالضغط على أزرار 
Ctrl+Shift+F شاهد الصورة التالية للتوضيح 

أيضا إمكانية إستبدال الكل إن أردت أن تستبدل كلمة او كود متكررة في القالب يمكنك إستبدالها مرة واحده بنفس الطريقة السابقة لكن بالضغط على أزرار Ctrl+Shift+R ولن تظهر Yes , No بل سيتم الإستبدال مباشرة

أزرار إضافية

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

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

تعرف على بيكاسا وبعض أسراره

Picasa Web Albums
مركز رفع الصور العملاق بيكاسا Picasa Web Albums ربما تكون سمعت عنه وربما لم تسمع به وربما سمعت عنه ولم تستخدمه لذا هذا الموضوع سيكون دليلك في التعرف عليه أو تطوير معرفتك به موقع الرفع بيكاسا هو أحد خدمات العملاق جوجل Google وهو المركز المدمج ببلوجر لذا هو أفضل ما يمكن أن تستعين به في تخزين صورك وإذا قمت بإضافة صورة في موضوع ستجد في خيارات صندوق الإضافة من البومات ويب بيكاسا حتى الصور التي ترفعها عبر مدونتك ستجدها محفوظة عليه إذا كل مستخدم لبلوجر يحمل المفتاح السحري لخدمات جوجل وهو بريد Gmail فانت لا تحتاج فتح حساب على بيكاسا فأنت بالفعل تملك واحداً ويمكنك الدخول له عبر الرابط التالي
وأكيد لاحظ المستخدمون لخدمة بيكاسا في الفترة الأخيرة انهم يتم تحويلهم لجوجل بلس Google plus لإدارة الحساب وهذا أزعج الكثيرين وانا منهم فما الحل لذلك ؟هناك حلين الأول أن تحذف ميزات جوجل بلس وهو حل لا أنصح به لانه قد يسبب مشكلة وقد يكون خطا بسيط يحذف حساب جوجل بالكامل الحل الثاني هو الرابط الذي وضعته فهذا الرابط لا يسمح بالتحويل لجوجل بلس لاحظ كلمة noredirect لذا قم بحفظ الرابط بهذه الصيغة في مفضلتك وأدخل منه لحسابك في بيكاسا لن يتم تحويلك لجوجل بلس
قد يقول البعض بيكاسا رائع لكنه محدود ولكن هو خطأ شائع جداً نظراً لأنه من يريد رفع الصورة يجد أن المساحة محدودة مثل الصورة التالية


Picasa Storage
ها هو أحد يهلل قائلا هل رأيت مساحته محدودة بـ 5 جيجا , ارد قائلا هذا أحد الأشياء التي تغيب عن كثير من المستخدمين مساحات بيكاسا مفتوحة الدليل أنت ستجد في Storage used المساحة المستخدمة الرقم بجوارها 0 بالرغم من أنك قد تكون رفعت على الأقل 10 ميجا صور وأنا شخصيا رفعت حتى الآن حوالي 200 ميجا وما تزال المساحة المستخدمة 0 إذن ما الأمر ؟
ببساطة بيكاسا لا يحتسب مساحة أي صورة لا يزيد طولها أو عرضها عن 2048px فأى صورة أقل من هذا الرقم لا تحسب حتى لو رفعت آلاف الصور أقل من تلك المساحة لن تحتسب وطبيعي لا احد يرفع بتلك المساحات الكبيرة إلا فقط من يصمم خلفيات أو تصاميم يحتاج بها تلك الجودة الكبيرة وهو أيضا لديه 5 جيجا مخصصة لذلك وهي مساحة ممتازة إذا أنت مع بيكاسا تنطلق بحرية كاملة
ايضا بيكاسا يتيح رفع الفديو وايضا لا يحتسب الفديو الذي أقل من 15 دقيقة

بعض خصائص الألبوم

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

picasa albums
نبدأ مع او نقطة وهي كلمة Edit بجوار الألبوم هذه الكلمة عند الضغط عليها تظهر النافذة التالية

Picasa Album Edit
هذه النافذة تقدم خيارات ثلاث هي ما يهمنا بالفعل الخيار الأول
Public on web ويعني ان هذا الألبوم أى شخص يمكن ان يشاهد الصور التي بداخله ويصل له عن طريق البحث في الإنترنت أو أى طريقة
الخيار الثاني وهو Limited , anyone with the link
وهو يعني ان هذا الألبوم لا يجده أحد إلا إن كان لديه لديه الرابط الخاص به
الخيار الثالث Only you وهو ليكون الألبوم خاص لا يمكن لاحد أن يشاهده إلا أنت لكن طبعا إن نشرت صورة منه يشاهدها الآخرين لكن الألبوم كله لا يجده احد غيرك طبعاً بعدما تختار الخيار المناسب إضغط Save changes

نأتي للخيارين المؤشر عليهما بـ 1 و 2


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

Picasa slideshow
ملحوظة بخصوص الكود يمكنك التحكم في حجمه بشكل أكبر عبر تعديله يدويا هذه أرقام للعرض والطول
 width="288" height="192" قم بتعديلها بما يناسبك وطبعا بعد نسخ الكود من الألبوم الذي ترغب بعمله سلايدر يمكن أن تضيفة في المدونة في آداة HTML/JavaScript أو أن تضيفه في موضوع بان تحول الموضوع من وضع التأليف الى وضع HTML وتضيف الكود
آخر جزء وهو رمز RSS هذا عند الضغط عليه يفتح لك رابط خلاصات الصور إن كنت تهدف الى إستخدامه بأى طريقة

معلومة بسيطة عن روابط الصور

من مميزات روابط الصور في بيكاسا تصغير الصور عبر الرابط نفسه
مثال
هذا رابط صورة الموضوع بحجمها الطبيعي

وهذا الرابط مصغر 


الفرق في رقم s1600 و s300 الرقم الأول 1600 هو رقم كبير فيظهر الصورة بحجمها الطبيعي لان الصورة أقل من 1600 أم الرقم الثاني 300 وهو أصغر من الصورة فتم التصغير الى أن هذا الحجم فهو مفيد في عرض الصور بشكل أفضل 

معلومة أخيرة عن أرشفة الصور

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

Image indexing
في نص خانة العنوان أكتب أى كلمة أو جملة تدل على الصورة وفي النص البديل يمكنك أيضا كتابة شئ يدل عليها او أن تكتب كلمة إنجليزية مثلا تدل على الصورة وذلك حتى يجدها من يبحث بالإنجليزية وطبعا كله  يعود بالنفع على مدونتك 
تحديث بتاريخ 23 مايو 2013
لمن واجه مشكلة ظهور خلفية سوداء للصور الشفافة يدخل إلى إعدادات جوجل بلس من هنا
ثم يزيل التاشير من على خيار تحسين الصور الجديدة تلقائياً

Fix Picasa Transparency

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


سلايدر خفيف وأنيق وسهل التنسيق

image slider blogger Widget
السلايد شو أو السلايدر Slider هي إضافة تمكنك من عرض صور بشكل متعاقب وأنيق وطبعا يمكن إستخدمها في عرض مواضيعك المميزة أو أى شئ ترغب بعرضه يكون واضح ولافت للأنظار هناك عشرات الإضافات التي تستخدم نفس الخاصية ولكن إخترت لكم هذه بالتحديد وهي من تصميمات  menucool.com لأنها تحتوي عدة مميزات أول شئ هي خفيفة جداً وهو ما تفتقر اليه أغلب السلايد الأخرى ميزة أخرى وهي ان تصميمها بسيط وليس مبالغ فيه فلا تسبب شذوذ عن الإطار العام لمدونتك أيضا هي سهلة التنسيق وستتوائم مع مدونتك ومظهرها بسهولة بإذن الله أيضا هي سهلة التركيب فالكود الخاص بها ستضيفة الى آداة HTML/JavaScript ثم إسحب الآداة فوق صندوق المواضيع ولا شئ آخر وهو من النادر إيجاده في كثير من السلايد أيضا بها ميزة أخرى وهي عدم الخروج عن الإطار الأساسي كثير من الإضافات الخاصة بالسلايد عند بداية التحميل نجد الصور ظاهرة بشكل عمودي ومشوه ثم بعد إكتمال التحميل تبدأ بالظهور بالشكل العادي أما هذه الإضافة لا توجد بها تلك المشكلة فهي ستظل بشكل متناسب حتى قبل التحميل أيضا بعض السلايد يعطيك عدد محدد من الروابط لا تستطيع تجاوزه اما هذه فالعدد مناسب وانت من يتحكم به ربما الشئ الوحيد الذي ينقص هذه الإضافة هو أن الصور يجب ان تكون بالحجم المناسب يصعب تعديل الحجم عبر الأكواد مع إني افضل ذلك حتى لا تكون الصور مشوهه ويمكنك معاينة شكل السلايدر عبر المثال التالي


كود السلايدر






               

عنوان الموضوع
عنوان الموضوع

طريقة تنسيق السلايد


بالنسبة للرقم 600 هذا هو عرض السلايدر وهو متكرر لذا إن أردت ان تعدل عرض السلايد يجب ان تغير الرقم في كل المرات المتكرر فيها
الرقم 218 هو إرتفاع السلايد يمكنك تعديله لكن بنفس القدر الذي ستعدله به يجب ان تعدل به هذا الرقم أيضا 225 فإن قمت بالزيادة مثلا بنسبة 20 يجب أن تزيد الآخر 20 وإن قمت بالإنقاص نفس الشئ تنقص الآخر بنفس النسبة
أما هذا الكود #000 وهو متكرر مرتين هذا لون السلايد قم بتعديله باللون الذي يعجبك أكواد الألوان
أما هذا الكود عنوان الموضوع
هو كود الصور او الموضوعات قم بتكراره بحسب العدد الذي ستضيفه
ملاحظة حجم الصور يجب ان يكون بحجم العرض والإرتفاع الذي ستحدده
 فمثلا في الكود العرض محدد بـ 600 والإرتفاع 218
إذا الصورة ستكون بحجم 600x218
إن اردت أن تظهر الإضافة في صفحات محددة كالصفحة الرئيسية فقط مثلا أو صفحات المواضيع راجع الموضوع التالي من هنـــا

تقديم خريطة مدونتك لجوجل وملف Robots

Submit  SiteMap To Google WebMaster
خرائط المواقع هي تعتبر دليل يستخدم من قبل محركات البحث لتقوم بفهرسة موقعك لكن طبعا هناك من سيقاطع قائلاً أصبحت هذه الأمور ليست ذات أهمية كبيرة واصبحت محركات البحث أقوى ولا تنتظر تلك الملفات لتقوم بالفهرسة , هذه المرة لن أعارض وسأوافقه وأنها بالفعل لم تعد ذات أهمية كبيرة ولكن سنفترض انها ذات أهمية بنسبة 00,1 % وهي لن تكلفنا شئ ولن تضر بشئ اليس من الحكمة أن نستفيد بتلك النسبة من الفائدة ولو قليلة وأعلم أيها المدون أن الإستهانة باقل نسبة من الفائدة يؤثر على تقدم مدونتك فتعدد الفوائد الصغيرة ينتج فائدة كبيرة كما يقول المثل المصري أبو بلاش كتر منه ^_^ أى الشئ المجاني خذ منه ما تستطيع طبعا هو جشع لكن التدوين الجشع فيه لا يضر بأحد , طبعا أهم ميزة في مدونات بلوجر Blogger أنها تأتي برعاية العملاق جوجل لذا يتم توفير الكثير من الأشياء التي يستهلكها من يعلق في منصات تدوين أخرى أو مواقع عادية وأهم ميزة هي ان مدوناتك بمجرد إنشائها تضاف تلقائياً لمحرك بحث جوجل والذي يعد محرك البحث الاول في العالم والاكثر إستخداماً في العالم العربي لكن تقديم الخريطة يجب ان يتم بشكل يدوي وهذا ما سنفعله سنقدم الخريطة لأدوات مشرفي المواقع في جوجل  Submit SiteMap To Google WebMaster
أول شئ ندخل الى صفحة مشرفي المواقع من هنــا   
بعد الدخول سنجد قائمة بكل المدونات التي فتحناها على بلوجر وإن كانت لديك مدونة واحده ستجد واحده المهم أنت ستحدد المدونة التي تريد بإختيارها كالمثال التالي أنا إخترت مدونتي كن مدون 

cnmu.blogspot.com
 بعد الدخول الى الصفحة الخاص بمدونتك على أدوات مشرفي المواقع اتبع المسار التالي في الإختيارات الجانبية
الزحف ----> ملفات Sitemap
ستجد زر بإسم بإسم إضافة / إختبار ملف Sitemap سنضغط عليه 
ستظهر قائمة في خانة فارغة نكتب في تلك الخانة sitemap.xml  ثم نضغط على زر تقديم ملف  Sitemap
ملحوظة لمستخدمي الدومينات المدفوعة قد لا تقبل معكم Sitemap.xml
فإستخدم بدلا منها
feeds/posts/default?orderby=updated
بعد ذلك ستظهر رسالة تخبرك أنه تم  إرسال ملف الخريطة Sitemap ويمكنك ضغط تحديث الصفحة لترى الناتج أو تغلق الصفحة فقد إنتهت مهمتنا 

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

 وأضف الكود التالي في المساحة المخصصة كالصورة السابقة ثم إضغط حفظ التغييرات 


User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /search
Disallow: /search?updated-min=
Disallow: /search?updated-max=

Sitemap: http://cnmu.blogspot.com/feeds/posts/default?orderby=updated

ولا تنسى تغيير cnmu في الكود بمدونتك
كيف تعرف الصفحات التي تم أرشفها في جوجل ؟
قم بكتابة الكود التالي في محرك بحث جوجل site:cnmu.blogspot.com
وإستبدل رابط مدونتي برابط مدونتك ويجب ان يكون الرابط بهذا الشكل بدون http
أحيانا يلجأ البعض لرؤية آخر ساعة أو آخر 24 ساعة ليرى صفحات مواضيعه الأخيرة وهل تأرشفت ام لا لكن لا يجدها 
أحيانا تتأرشف الصفحات لكنها لا تظهر عند الضغط على أحداث آخر ساعة أو آخر 24 ساعة يمكنك التأكد أكثر هل الصفحة تارشفت أم لا بكتابة جزء من عنوان الموضوع بعد الرابط مثال 
site:cnmu.blogspot.com Robots
وهي كلمة من عنوان هذا الموضوع ونفس الشئ معك أكتب اى كلمة من عنوان موضوعك الأخيرة وستظهر لك النتائج بشكل أفضل وإعلم أيضا ان تفاعل الزوار وكثرة التردد على المواضيع يحسن سرعة أرشفتها فإحرص على المواضيع الجيدة والمفيدة والجذابة للزوار والغير منقولة  فجودة محتواك وحصريته على مدونتك هو المحرك الرئيسي لأرشفة صفحاتك