‏إظهار الرسائل ذات التسميات متغيرات القالب. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات متغيرات القالب. إظهار كافة الرسائل
الخميس، 5 يناير 2017

فتح الروابط الخارجية في نافذة جديدة Open External Links In New Window

فتح الروابط الخارجية في نافذة جديدة Open External Links In New Window هذا هو عنوان هذه التدوينة فهذه الخاصية لها فوائد عديدة اهمها ابقاء الزائر فى مدونتك لمدة اطول بمعنى عند فتح رابط خارجى متواجد فى مدونتك لا ينقلة الى هذا الموقع مباشرة مع اغلاق مدونتك بل ينقلة الى الموقع فى نافذه جديدة وابقاء مدونتك مفتوحة امام الزار حتى تكسب مدة اطول فيجب ان تعلم بأن ابقاء الزائر فى مدونتك لمدة طويلة يعزز من تقدمك فى موقع اليكسا ولقد تحدثت عن هذا الامر الذى يجعل مدونتك فى مكانة سيئة للغاية وهو ظهور الزائر فى مدونتك لمدة قصيرة مثل مواقع تبادل الزيارات وبالتالى يؤدى الى ارتفاع معدل الارتداد ولمن لا يعرف هذه المعلومة علية بزيارة هذه التدوينة ويقرائها جيدا حتى يبتعد عن هذه الامور من خلال هذا الرابط : ماذا تعنى كلمة معدل الارتداد BOUNCE RATE المتواجدة بالأحصائيات واهميتها .
هذه الطريقة تمت تجربتها على مدونة كينج نت حتى يتم التاكد من صحة الكود وبالفعل الكود يعمل بدون اى مشاكل كما تلاحظون فى التعليقات روابط التعليقات تفتح فى نافذه جديدة وايضا الروابط المتواجدة فى التدوينات تفتح فى صفحات جديدة وهذا ما نتمناه جميعا ابقا مدونتك متصلة مباشرة مع الزوار .

فتح الروابط الخارجية في نافذة جديدة :

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالبالأن اضغط على تحرير HTML
الأن قم بالبحث عن هذا الكود :
<head>
ضع بأسفلة مباشرة هذا الكود :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>
$(document).ready(function() {
  $("a[href^='http://']").each(
    function(){
     if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
$("a[href^='https://']").each( function(){ if(this.href.indexOf(location.hostname) == -1) { $(this).attr('target', '_blank'); } } ); 
});
</script>
بالأخير اضغط على حفظ 
الأن بأمكانك ان تذهب الى مدونتك لكى تجرب بنفسك بفتح الروابط الخارجية لكى تشاهد النتيجة .
اتمنى بأن هذه التدوينة المتواجدة فى قسم اضافات بلوجر اعجبتكم .
(( لا خير فى كاتم العلم ))
الثلاثاء، 31 مايو 2016

اضافة ادوات تقييم مواضيع مدونة بلوجر بأشكال مختلفة Rating widget

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

شرح اضافة ادوات تقييم الموضوع :
فى البداية قم بالذهاب الى موقع الأضافة من خلال هذا الرابط :
عند الدخول الى الموقع ستجد خاصية الاضافة لعدة منتجات فقط قم بأختيار منتج بلوجر بالضغط على Blogger كما واضح لنا بالصورة التالية :
بعد اختيار منتج Blogger ستجد فى القائمة اليسرى التحكم فى خاصية الأضافة عن طريق اختيار الشكل المطلوب والذى يناسبك بوضع علامة لكى يتم توليد الكود وهذه الصورة توضح لنا ما اقصدة :
بعد الختيار الشكل الذى يناسبك ستجد الكود بالجهة اليمنة وهذا هو المطلوب 
صورة موضحة :
الأن تم الأنتهاء من توليد الكود الذى تريدة 
ماذا نفعل الان ؟
فقط قم بأتباع طريقة التركيب وكما تعودنا عند اضافة اى اكواد يجب اخذ نسخة احتياطية اولا وهذا درس بسيط لمن لا يعرف طريقة اخذ نسخة احتياطية للقالب من خلال هذا العنوان : درس للمبتدئين اخذ نسخة احتياطية لقالب المدونة
اليك خياريين اذا كنت تريد وضع الأضافة بأعلى او اسفل المواضيع اتبع هذه الطرق :
طريقة وضع الأضافة فى اعلى الموضوع :
قم بالبحث عن هذا الكود :
<b:includable id='post' var='post'>
ضع الكود الذى جلبتة اسفل الكود الذى بحثت عنة
ثم قم بالبحث عن هذا الكود :
</head>
ضع فى اعلامة هذا الكود :
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
الأن قم بحفظ متغيرات القالب وانتهى التركيب 

طريقة وضع الاضافة فى اسفل الموضوع :
قم بالبحث عن هذا الكود :
<div class='post-footer-line post-footer-line-1'>
ضع فى اسفلة الكود الذى جلبتة من الموقع
قم بالبحث عن هذا الكود :
</head>
ضع فى العلاة هذا الكود :
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>
بالأخير اضغط على حفظ وانتهى التركيب .

اتمنى بأن تدوينة اضافة ادوات تقييم مواضيع مدونة بلوجر بأشكال مختلفة Rating widget اعجبتكم وانتظرونى بتدوينة اخرى جديدة ومفيدة فى مدونة كينج نت .
(( لا خير فى كاتم العلم ))
الأحد، 29 مايو 2016

اضافة ايقونة لينكد إن الى مدونة بلوجر add LinkedIn Share button

اضافة ايقونات مواقع التواصل الأجتماعى الى مدونة بلوجر امر مهم للغاية امثال الفيس بوك وتويتر وجوجل بلس وغيرها من المواقع الهامة الذى تساعد المدونة بنشر المشاركات لديهم وايضا تساعد المدونة على اشهارها وزيادة عملية الارشيف فى محركات البحث فأعتقد بدون هذه الايقونات ستجد المدونة ضعيفة المستوى لأن نجاح اى موقع يعتمد على الزوار فلكى تجذب الزوار الى مدونتك عليك باضافة ايقونات التواصل الاجتماعى الى مدونتك ونحن جميعا نعلم بأن الايقونات الافتراضية المتواجدة فى مدونة بلوجر تتكون من :
+Google
 twitter
 facebook
pinterest
هذه هى الايقونات الأفتراضية المتواجدة فى مدونات بلوجر ونجد ايضا بأن بعض المدونات لايوجد بها ايقونة pinterest ولقد وضعت لكم درس بسيط من قسم دروس بلوجر لكيفية اضافة هذه الايقونة المفقودة من خلال هذا الدرس : اضافة ايقونة PINTEREST فى مدونة بلوجر مع ايقونات عرض أزرار المشاركة  فهذه الايقونة مهمة ولابد من تواجدها فى المدونة .
اليوم سأضع لكم درس بسيط من قسم متغيرات القالب يتحدث عن اضافة ايقونة LinkedIn الى مدونة بلوجر بجانب الايقونات الأخرى لزيادة نشر المواضيع فى مختلف مواقع التواصل الأجتماعى لكسب باك لينك خارجى يساعدك فى رفع الدومين اثورتى Domain Authority وهذه ما نتمناه كأصحاب مواقع لرفع قيمة وسعر دومينك .
شرح اضافة ايقونة لينكد إن الى مدونة بلوجر
هذه الاضافة نفس فكرة اضافة ايقونة pinterest الذى قمت بشرحها لكم 
فى البداية وكما تعودنا عند اضافة اى اكواد يجب اخذ نسخة احتياطية اولا وهذا درس بسيط لمن لا يعرف طريقة اخذ نسخة احتياطية للقالب من خلال هذا العنوان :  درس للمبتدئين اخذ نسخة احتياطية لقالب المدونة .
قم بالبحث عن هذا الكود :
<b:if cond='data:top.showFacebookButton'>
                          <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
                            <span class='share-button-link-text'>
                              <data:top.shareToFacebookMsg/>
                            </span>
                          </a>
                        </b:if>
حيث ان هذا الكود الخاص بايقونة الفيس بوك فقط ضع الكود الذى تريده اسفل رمز </b:if> المحدد باللون الأحمر 

ايقونة Vertical count عداد رأسى :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='IN/Share' expr:data-url='data:post.url' data-counter='top'></script>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>
</b:if>
ايقونة Horizontal count عداد افقى :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='IN/Share' expr:data-url='data:post.url' data-counter='right'></script>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
 lang: en_US
</script>
</b:if>
ايقونة No count بدون عداد :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='IN/Share' expr:data-url='data:post.url'></script>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
 lang: en_US
</script>
</b:if>

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

الخميس، 21 أبريل 2016

جعل جميع الروابط الخارجية فى مدونة بلوجر Nofollow تلقائيا

خاصية Nofollow من اهم الخصائص الذى يجب على صاحب مدونة بلوجر ان يفعلها لمنع عناكب جوجل من فحص وتتبع هذه الروابط فعند تفعيل هذه الخاصية ستجعل العناكب  تشعر وكانها كلمات مثل كلمات محتوى مدونتك بمعنى لا تحتسب باك لينك للموقع المضاف وهذه نقطة مهمة للغاية يجب الأنتباه اليها لأن جميع روابط مدونتك عبارة عن Dofollow بمعنى ان يتم ارشفة هذه الروابط فى محركات البحث ومن الممكن تجد هذه الروابط تقدم خدمات مواقع غير مفيدة وتخضع لسياسات جوجل وتنتهك الحقوق وهذا امر مرفوض لسياسة جوجل فمع كثرتها وانتشارها فى مدونتك سيضع مدونتك تحت بند سبام  بسبب الروابط المتواجدة فى مدونتك ونحن لا نريد ذلك لان مدونتك ستجدها ضمن المدونات الضعيفة الذى ليس لها اى قيمة بسبب تجاهل جوجل مدونتك وعدم زحف العناكب الى مدونتك مرة اخرى فابتالى يجب ان تحول نظام مدونتك من Dofollow الى نظام Nofollow للحفاظ على الارشيف ومكانة مدونتك وهذا راى الخبراء فى مجال السيو .
فعند بحثى فى محرك بحث جوجل وبالأخص فى المدونات الأجنبية تم ايجاد كود يقوم جعل جميع الروابط الخارجية فى مدونة بلوجر Nofollow تلقائيا ولكن قبل ان اضع لكم الكود يجب عليك ان تعرف ما هى سياسة جوجل فى استخدام خاصية Nofollow :
ما سياسات Google في استخدام "nofollow"، مع ذكر بعض الأمثلة المحددة للاستخدام؟
في ما يلي بعض الحالات التي ربما يمكنك فيها تجربة استخدام nofollow:
  • المحتوى غير الموثوق فيه: إذا كنت لا تضمن أو لا تريد أن تضمن محتوى بعض الصفحات التي تنشئ روابط مؤدية إليها على موقعك — مثل تعليقات المستخدمين أو إدخالات سجل الزوار غير الموثوقة — فيجب أن تضيف nofollow إلى هذه الروابط. فهذا قد يعمل على تثبيط أصحاب الروابط المزعجة عن استهداف موقعك، كما يساعد في الحفاظ على نظام ترتيب الصفحات لموقعك وعدم رفع هذا الترتيب عن طريق الخطأ لمواقع أخرى سيئة على الويب. وتحديدًا، قد يقرر بعض مرسلي التعليقات غير المرغوب فيها عدم استهداف نظام إدارة محتوى معين أو خدمة مدونات معينة إذا لاحظوا أنه تتم إضافة السمة nofollow إلى الروابط غير الموثوق بها في هذه الخدمة. فإذا كنت تريد التعرف على المساهمين الجديرين بالثقة ومكافأتهم، فيمكنك أن تقرر إزالة السمة nofollow تلقائيًا أو يدويًا من الروابط التي ينشرها أعضاء أو مستخدمون قدموا بشكل منتظم مساهمات عالية الجودة بمرور الوقت.
  • الروابط المدفوعة:ويعتمد ترتيب الموقع في نتائج بحث Google جزئيًا على تحليل المواقع التي تعرض روابط مؤدية إليه. ولمنع الروابط المدفوعة من التأثير في نتائج البحث وبالتالي التأثير سلبًا في المستخدمين، نشجع مشرفي المواقع على استخدام السمة nofollow في هذه الروابط. تتطلب إرشادات محركات البحث تقديم إفشاء مقروء للآلات عن الروابط المدفوعة، تمامًا كما يقدِّر المستخدمون عبر الإنترنت أو في وضع عدم الاتصال الإفشاء عن العلاقات المدفوعة (على سبيل المثال، يمكن استخدام الكلمة "إعلان" كعنوان لإعلان على صفحة كاملة من الصحيفة). مزيد من المعلومات حول موقف Google من الروابط المدفوعة.
  • تحديد أولوية الزحف: يتعذر على برامج الروبوت لمحركات البحث تسجيل الدخول أو التسجيل كعضو في المنتدى، ومن ثَم فلا داعي لدعوة Googlebot لتتبع رابط "سجّل من هنا" أو رابط "تسجيل الدخول". ويؤدي استخدام nofollow في هذه الروابط إلى تمكين Googlebot من الزحف إلى الصفحات الأخرى التي تفضل أن تراها في فهرس Google. ومع ذلك، فإن البنية القوية للمعلومات — مثل التصفح السهل وعناوين URL المتوافقة مع المستخدمين ومع محركات البحث وما إلى ذلك — ربما تمثل استخدامًا للمصادر أعلى إنتاجية بكثير من مجرد التركيز على تحديد أولوية الزحف من خلال استخدام "nofollow" مع الروابط.
    ومن هنا رابط الصفحة الاصلية : 

استخدام rel="nofollow" لروابط محددة

الأن لكى تجعل جميع روابط مدونتك Nofollow قم بأتباع هذه الطريقة :
قبل ان تضع اى اكواد قم باخذ نسخة احتياطية لتفادى حدوث اى مشاكل وهذا الدرس البسيط يعلمك طريقة اخذ نسخة احتياطية للقالب من خلال هذا العنوان : درس للمبتدئين اخذ نسخة احتياطية لقالب المدونة .
قم بالبحث عن هذا الكود :
</head>
ضع قبلة مباشرة هذا الكود :

<!--Remove this if you are already using any jQuery.js file-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
<!--End-->
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a[href*="http://"]:not([href*="http://www.kingnt.com"])').attr('rel', 'nofollow');
jQuery('a[href*="https://"]:not([href*="https://www.kingnt.com"])').attr("target", "_blank");
    });
</script>
قبل حفظ التغيرات عليك بوضع رابط مدونتك بدل رابط مدونة كينج نت المحددة باللون الاحمر .
هذه الطريقة قمت بنقلها من هذه المدونة الاجنبية لكى تعم الفائدة على الجميع : http://www.mybloggerlab.com/
انتهى الدرس واتمنى بان هذا الدرس افاد الجميع 
(( لا خير فى كاتم العلم ))
الأحد، 10 أبريل 2016

اخفاء السيدبار sidebar فى صفحة محددة من الصفحات الثابتة Hide pages

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

كيفية اخفاء sidebar من صفحة محددة فى الصفحات الثابتة تابع الطريقة:

وقبل ان تضع اى اكواد عليك بأخذ نسخة احتياطية لتفادى حدوث اى مشكلة ولمن لا يعرف طريقة اخذ نسخة احتياطية علية بالدخول لهذا الرابط : درس للمبتدئين اخذ نسخة احتياطية لقالب المدونة
من خلال لوحة التحكم اضغط على قالب ومن بعدها على تعديل 
قم بالبحث عن هذا الكود :
</b:skin>
ضع باسفلة مباشرة هذا الكود :

<b:if cond='data:blog.url == "ضع رابط الصفحة هنا"'>
 <style>
#sidebar-wrapper {display:none;}
#main-wrapper{width: 70%;float:none; margin: 0 auto;}
</style>
</b:if>

  ملاحظة هامة :  

قبل حفظ التغييرات عليك بوضع رابط الصفحة الذى تريدها مكان كلمة ضع رابط الصفحة هنا المحددة باللون الاخضر ولاتنسى بأن الكلمة المحددة باللون الاحمر هى تجعل اضافة الصفحة فى المنتصف اذا كنت تريد الصفحة مثلا على الجهة االيمنة ضع كلمة right بدل كلمة none واذا كنت تريد ظهور شكل الاضافة فى الجهة اليسرى فقم بوضع كلمة left بدل كلمة none ولا تنسى ايضا بأن الرقم المحدد باللون الازرق خاص بمساحة الصفحة بمعنى مساحة الاضافة المتواجدة فى الصفحة (( عرض الصفحة )) .
بالاخير اتمنى بأن هذا الدرس البسيط افاد الجميع وبالأخص بمن الذى يريد هذه الطريقة 
(( لا خير فى كاتم العلم ))
الخميس، 7 أبريل 2016

وضع وصف المشاركات فى محركات البحث لزيادة عملية الارشيف Description Search

من اهم الاشياء الهامة فى عالم السيو وضع وصف المشاركات فى محركات البحث لزيادة عملية الارشيف وايضا لتنسيق شكل المشاركة فى محرك البحث بمعنى ان يكون اسم الموضوع فى الاول والوصف اسفلة ولقد تحدثت فى احدى التدوينات السابقة من قسم متغيرات القالب طريقة وضع وصف المدونة تحت اسم المدونة فى محركات البحث من خلال هذا العنوان : شرح اضافة وصف المدونة الاليكترونية بطريقة احترافية للظهور ببحث جوجل meta Tags Description فهذه الطريقة يجب ان يتم تفعيلها لتجد وصف مدونتك كما تريدة انت لان بدون هذه العملية السابقة ستجد محركات البحث تضع لك بعض المحتويات ليس لها اى علاقة بوصف المدونة مثل وجود محتويات بعض الكلمات من اى مشاركة اسفل اسم المدونة وهذا ليس وصف المدونة فيجب ان تجعل وصف المدونة واضح وظاهر بشكل دقيق حتى يتم التعارف عليك بكل سهولة من خلال محركات البحث وايضا ستجد المواضيع منتشرة بغزارة فى محركات البحث .

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

كيفية تفعيل وصف المشاركات لتظهر فى محركات البحث ؟

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

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

   ملحوظة هامة :    

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

إخفاء الشريط الجانبي على جميع صفحات مدونة بلوجر Hide Sidebar

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

        ملحوظة هامة :          لكى تفعل هذه الطريقة بشكل جميل من الافضل ان تلغى محتوى المشاركة بالصفحة الرئيسية بمعنى ان تجعل المشاركات بالصفحة الرئيسية عبارة عن عناوين فقط مثل المنتديات ولقد وضعت لكم هذه الطريقة بأحدى الدروس السابقة فى قسم متغيرات القالب من خلال هذا العنوان : درس جعل عناوين المدونة تظهر فقط بالصفحة الرئيسية مثل المنتديات بعد ان فعلت هذه الطريقة فعليك بأتباع طريقة اخفاء الشريط الجانبى .
كيفية تركيب كود اخفاء الشريط الجانبى على جميع صفحات المدونة :
قبل ان تضع اى اكواد قم باخذ نسخة احتياطية لتفادى حدوث اى مشاكل وهذا الدرس البسيط يعلمك طريقة اخذ نسخة احتياطية للقالب من خلال هذا العنوان : درس للمبتدئين اخذ نسخة احتياطية لقالب المدونة .
قم بالبحث عن هذا الكود :
</b:skin>
اضف بعدة مباشرة هذا الكود :
<b:if cond='data:blog.pageType'>
                      <style>
                      #sidebar-wrapper {display:none;}
                      #main-wrapper{width: 70%;float:none; margin: 0 auto;}
                      </style>
                      </b:if>
بالأخير اضغط على حفظ والان اذهب الى صفحتك الريسية بالمدونة لتشاهد النتيجة ستجد جميع الادوات تم اخفاها والابقاء على مشاركات المدونة فقط .
      ملحوظة :       
لكى تقوم بتوسيع عرض المشاركات قم بتغيير رقم 70 المحدد باللون الاحمر الى الرقم الذى تريدة 
(( لا خير فى كاتم العلم ))
الثلاثاء، 29 مارس 2016

حل مشكلة عدم اخفاء الشريط الجانبى sidebar فى الصفحات الثابتة static page

فى احدى الدروس السابقة بقسم دروس بلوجر وضعت لكم طريقة اخفاء الشريط الجانبى فى الصفحات الثابتة من خلال هذه التدوينة : كيفية اخفاء الشريط الجانبى من الصفحات الثابتة لتظهر بعرض الشاشة .
فكانت الطريقة ناجحة على بعض القوالب وكانت هذه هى المشكلة فبعد فحص الكود تبين لنا بأن الكود السابق يعمل على القوالب الافتراضية بدون اى مشاكل وايضا تعمل على بعض القوالب المعدلة والبعض الاخر من القوالب المصممة من قبل المصممين لا يعمل معة هذا الكود .
لماذا لا يعمل الكود على القوالب المصممة ؟
اذا نظرنا للكود السابق سنجد المسميات على النحو التالى :
.column-right-outer
.fauxcolumn-center-outer
.fauxcolumn-left-outer
.column-left-outer
كما تلاحظون بالمسميات المحددة باللون الاحمر لا تتواجد فى القوالب المصممة فهذه الاسماء مجرد تعريف فلذلك عند اضافة الكود لا يتم اخفاء السيدبار sidebar الشريط الجانبى من الصفحات الثابتة فلذلك ستجد بأن القوالب الافتراضية يوجد بها هذه المسميات اقصد التعريف فلذلك يتم الاخفاء بدون اى مشاكل بالصفحات الثابتة هذا هو احدى الاسباب فى عدم نجاح او فشل الطريقة مع بعض الاشخاص الذيين يمتلكون قوالب لا يوجد بها هذه الاسماء فالاسماء الخاصة بالسيدبار تختلف من قالب الى اخر .
فمن خلال هذه التدوينة ان شاء الله يكون حل نهائى لمن يواجهة مشكلة فى عدم اخفاء السيدبار فى الصفحات الثابتة فقط تابع طريقة التركيب فهى لا تختلف عن الدرس السابق .
طريقة تركيب الكود  :
وقبل ان تضع اى اكواد عليك بأخذ نسخة احتياطية لتفادى حدوث اى مشكلة ولمن لا يعرف طريقة اخذ نسخة احتياطية علية بالدخول لهذا الرابط : درس للمبتدئين اخذ نسخة احتياطية لقالب المدونة
من خلال لوحة التحكم اضغط على قالب ومن بعدها على تعديل 
قم بالبحث عن هذا الكود :
</b:skin>
ضع بأسفة مباشرة هذا الكود :
 <b:if cond='data:blog.pageType == "static_page"'>
 <style>
#sidebar-wrapper {display:none;}
#main-wrapper{width: 70%;float:none; margin: 0 auto;}
</style>
</b:if>
بالاخير اضغط على حفظ اذهب الى صفحات المدونة لتشاهد النتيجة . 
  ملحوظة هامة :  
1- لمن يريد جعل شكل ومحتوى الصفحة على الجهة اليمنة فعلية بأضافة كلمة right بدلا من كلمة none المحددة باللون الاصفر ولمن يريد شكل ومحتوى الصفحة الثابتة بالجهة اليسرى فعلية بوضع كلمة left بدلا من كلمة none المحددة باللون الاصفر ولمن يريد ان يجعل شكل ومحتوى الصفحة فى المنتصف فعلية بعدم تغيير اى شيى .
2- وايضا لمن يريد توسيع شكل ومحتوى الصفحة علية بتغيير رقم 70 المحدد باللون الاخضر الى الرقم الذى تريدة ولكن من الافضل ان تجعلة 70 لان بعد التجربة اتضح ان هذا الرقم مناسب جدا .
اتمنى بأن هذه الطريقة مناسبة لمن يواجهة هذه المشكلة 
(( لا خير فى كاتم العلم ))
الخميس، 18 فبراير 2016

كيفية تغيير وتخصيص لون محتوى السيدبار لجعلة مميز sidebar background

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


صورة للتوضيح :

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

صورة للتوضيح :

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

بعد اخذ النسخة قم بالبحث عن هذا الكود :
]]></b:skin>
ضع قبلة مباشرة هذا الكود :
.sidebar {
background:#E9EAED  no-repeat scroll 5px 10px;
margin:0px 0px 5px 0px;
padding:10px 10px 10px 10px !important;
border: 1px solid #d5d5d5;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}  
بالاخير اضغط على حفظ وتوجهة الى المدونة لتشاهد النتيجة .
        ملحوظة هامة :        
الكود المحدد باللون الاحمر هو المسؤل عن لون محتوى السيدبار اضف الكود الذى يناسبك
الكود المحدد باللون الازرق هو المسؤل عن تحديد السيدبار اضف ما يناسبك 
ولمن يريد الحصول على اكواد الالوان فاليك هذه الخدمة :

بالاخير لن اقول غير (( لا خير فى كاتم العلم ))
الأربعاء، 10 فبراير 2016

طريقة اخفاء الأضافات السيدبار لظهور صفحات المواضيع بعرض الشاشة

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


طريقة تركيب الاضافة  :

قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالبالأن اضغط على تحرير HTML
الان قم بالبحث عن هذا الكود :
<head>
ضع فوقة مباشرة هذا الكود :
<style>
.sidebar,.footer {display:none;}
#main-wrapper{width: 99%; float: none; margin: 0px auto;}
html {overflow-x: hidden;}
.post {width: 145%; margin: 15px auto;} .post h3 a { text-align: center; padding:5px;}
</style>
بالاخير اضغط على حفظ وتوجهة الى اى موضوع لتشاهد النتيجة .
            ملحوظة هامة :             
الكود المحدد باللون الاصفر هو المسؤل عن تمدد عرض الموضوع بأمكانك اختيار التمدد الذى تريدة انا جعلتة 145وهو مناسب لمدونتى فلك الحرية والخيار .
اتمنى بأن هذه التدوينة افادات الجميع واى استفسار بخصوص تركيب الاضافة او اى مشكلة تصادفك فقط قم بوضع تعليق .
الخميس، 4 فبراير 2016

اضافة اربع اعمدة اسفل مدونة بلوجر بشكل منسق وجذاب Add 4 Column Footer

فى احدى الدروس السابقة من قسم متغيرات بلوجر وضعت لكم درس بعنوان شرح اضافة اربع اعمدة بأسفل مدونات بلوجر ADD 4 COLUMNS ولكنة بطريقة بسيطة .
فى هذا الدرس ساضع لكم اضافة جميلة ومنسقة بخاصية Css اتمنى ان تنال اعجباكم ولن اطيل عليكم اكثر ونأتى الى طريقة تركيب هذه الاضافة الرائعة .




شرح تركيب الاضافة :

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

الان قم باللضغط على ازرر Ctrl + F لأضهار خانة البحث 
قم بالبحث غن هذا الكود :
]]></b:skin>
اضف قبلة مباشرة هذا الكود :
#footer-wrapper {clear: both;width: 100%; height:4px; background: #CC0000;}
#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
background:#333333; 
} 
#lower-wrapper { 
background:#333333; 
margin:auto; 
padding: 20px 0px 20px 0px; 
width: 960px;
border:0; 
} 
#lowerbar-wrapper { 
background:#333333; 
float: left; 
margin: 0px 5px auto; 
padding-bottom: 20px; 
width: 23%;
text-align: justify; 
color:#ddd; 
font: bold 12px Arial, Tahoma, Verdana; 
line-height: 1.6em; 
word-wrap: break-word; 
overflow: hidden; 
} 
.lowerbar {margin: 0; padding: 0;} 
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} 
.lowerbar h2 { 
margin: 0px 0px 10px 0px; 
padding: 3px 0px 3px 0px; 
text-align: left; 
border:0; 
color:#ddd; 
text-transform:uppercase; 
font: bold 14px Arial, Tahoma, Verdana; 
} 
.lowerbar ul { 
color:#fff; 
margin: 0 auto; 
padding: 0; 
list-style-type: none; 
} 
.lowerbar li { 
display:block; 
color:#fff; 
line-height: 1.6em; 
margin-left: 0 !important; 
padding: 6px; 
border-bottom: 1px solid #222; 
border-top: 1px solid #444; 
list-style-type: none; 
} 
.lowerbar li a { 
text-decoration:none; color: #DBDBDB; 
} 
.lowerbar li a:hover { 
text-decoration:underline; 
} 
.lowerbar li:hover { 
display:block; 
background: #222; 
}
ثم قم بالبحث عن هذا الكود :
</body>
ضع فوقة مباشرة هذا الكود :
    <div id='lower'>
      <div id='lower-wrapper'>
        <div id='lowerbar-wrapper'>
          <b:section class='lowerbar' id='Column 1' preferred='yes'/>
        </div>
        <div id='lowerbar-wrapper'>
          <b:section class='lowerbar' id='Column 2' preferred='yes'/>
        </div>
        <div id='lowerbar-wrapper'>
          <b:section class='lowerbar' id='Column 3' preferred='yes'/>
        </div>
        <div id='lowerbar-wrapper'>
          <b:section class='lowerbar' id='Column 4' preferred='yes'/>
        </div>
        <div style='clear: both;'/>
      </div>
    </div>

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

تغيير لون خلفية المدونة الى عدة الوان متحركة Animated Color Changing Background

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


كيفية تركيب الاضافة الى المدونة :

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

الان قم بالبحث عن هذا الكود :
]]></b:skin>
اضف قبلة هذا الكود :
body {
animation: colorBackground 22s infinite; 
-webkit-animation: colorBackground 22s infinite; 
-moz-animation: colorBackground 22s infinite; 
-o-animation: colorBackground 22s infinite; 
}
@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
20% { background-color: #74E588; color: #74E588; }
40% { background-color: #F98585; color: #F98585; }
60% { background-color: #50BFE1; color: #50BFE1; }
80% { background-color: #4256EF; color: #4256EF; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
بالاخير اضغط على حفظ وانتهى التركيب 
الان اذهب الى الصفحة الرئيسية للمدونة لتشاهد النتيجة 
ارجو بأن هذه الاضافة تستحق النقل لكم .
مصدر التدوينة من موقع : bloggerspice.com

الجمعة، 15 مايو 2015

جعل خلفية رأس المدونة Header تتغير تلقائيا اثناء التصفح CHANGE AUTOMATICALLY

من قسم دروس بلوجر وضعت لكم درس خاص لتغير خلفيات المدونة تلقائيا من خلال هذا الموضوع : جعل خلفية المدونة تتغير تلقائيا اثناء التصفح BACKGROUND CHANGER AUTOMATICALLY .
فاليوم ساضع لكم درس بنفس الفكرة ولكن فى هذا الدرس سنجعل خلفية هيدر المدونة رأس المدونة تتغير تلقائيا الى عدة صور اثناء تصفح المدونة .




كيفية تغيير الصور تلقائيا  :

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















الان قم بالبحث عن هذا الكود :
<body>
اضف بعدة مباشرة هذا الكود :
<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]=&quot;اضف رابط الصورة هنا&quot;
HeaderImage[1]=&quot;اضف رابط الصورة هنا&quot;
HeaderImage[2]=&quot;اضف رابط الصورة هنا&quot;
HeaderImage[3]=&quot;اضف رابط الصورة هنا&quot;
HeaderImage[4]=&quot;اضف رابط الصورة هنا&quot;
var random=Math.round(4*Math.random());
document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>

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

جعل خلفية المدونة تتغير تلقائيا اثناء التصفح Background Changer Automatically

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




كيفية تغيير الخفيات تلقائيا :

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















الان قم بالبحث عن هذا الكود :
</head>
ضع قبلة مباشرة هذا الكود :
<script type='text/javascript'>
var images= new Array()
images[0]=&quot;اضف رابط الصورة هنا&quot;
images[1]=&quot;اضف رابط الصورة هنا&quot;
images[2]=&quot;اضف رابط الصورة هنا&quot;
images[3]=&quot;اضف رابط الصورة هنا&quot;
images[4]=&quot;اضف رابط الصورة هنا&quot;
var random=Math.floor(3*Math.random());
document.write(&quot;<style>&quot;);
document.write(&quot;body {&quot;);
document.write(&#39; background:url(&quot;&#39; + images[random] + &#39;&quot;) repeat;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>
ملحوظة هامة :
لاتنسى بوضع رابط صور الخلفيات مكان كلمة اضف رابط الصورة هنا المحددة باللون الاخضر .
اذا كنت تريد زيادة عدد الخلفيات فعليك بتكرار هذا الكود images[4]=&quot;اضف رابط الصورة هنا&quot; ويتم وضعة اسفلة مباشرة وهكذا ولا تنسى بوضع الرقم التسلسلى المحدد باللون الاصفر فهذا الرقم يعنى لنا الترتيب اى الصورة رقم 1 تظهر فى الاول والصورة رقم 2 تظهر بعدها تلقائيا اثناء التصفح وهكذا .

الخميس، 7 مايو 2015

جعل صور المدونة تظهر بشكل مائل مع خاصية الظل والتأثيرعند وضع مؤشر الماوس

وايضا تم اضافة درس كيفية اضافة تأثيرات تحريك جميع صور المدونة بشكل مائل اكثر من رائع بدون الظل فمن خلال هذه التدوينة جعلت لكم الاضافة بشكل مائل مع الظل والتاثيرات تظهر عند مرور مؤشر الماوس عليها .
واذا كنت تريد ظهور الصور بالظل فقط دون تمايل فعليك بزيارة هذه التدوينة : كيفية اضافة تأثيرات الظل على صور مشاركات المدونة POST-BODY-IMG-HOVER .

كيفية تركيب الاضافة بالمدونة :

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















الان قم بالبحث عن هذا الكود :
]]></b:skin>
ضع قبلة مباشرة هذا الكود :
-moz-transform: rotate(+2deg); } .post img:hover { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg);
box-shadow:0 0 10px 4px #FF0000
 }
ملحوظة هامة :
اذا كنت تريد تغيير لون الظل عليك بتغير الكود المحدد باللون الأحمر 
بالاخير اضغط حفظ واذاهب الى الصفحة الرئيسية لتشاهد شكل الصور .
اتمنى بأن هذه الاضافة اعجبتكم 
الخميس، 30 أبريل 2015

كيفية اضافة صورة الكاتب بجانب عناوين الموضوع بشكل دائرى avatar-author

اضافتنا اليوم اضافة جميلة وهى عرض صورة الكاتب بجانب عناوين المواضيع بشكل دائرى جميل مع التحكم بالاضافة . فى احدى الدروس السابقة من قسم دروس بلوجروضعت لكم درس بعنوان : وضع صورة او ايقونة قبل عناوين المشاركات بمدونات بلوجر . فاليوم ساضع لكم كيفية اضافة صورتك الشخصية بجانب عناوين الموضوع .





كيفية تركيب الاضافة :

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















الان قم بالبحث عن هذا الكود :
]]></b:skin>
ضع فوقة مباشرة هذا الكود
.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}
قم بالبحث مرة اخرى عن هذا الكود :
</ head>
ضع قبلة مباشرة هذا الكود :
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
ابحث مرة اخرى عن هذا الكود :
<b:if cond='data:post.title'>
ستجدة مكرر غالبا يكون الثانى
الان ضع فوقة مباشرة هذا الكود :
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
بالاخير اضغط حفظ
اذاهب الى الصفحة الرئيسية لتشاهد شكل الاضافة

ملحوظة هامة :

اذا كنت تريد صورة الكاتب متواجدة بالجهة اليمنة قم بوضع كلمة right بدل الكلمة المحددة باللون الاصفر وهذه صورة موضحة لشكل الصورة من الجهة اليمنة :







واذا كنت تريد الصورة تظهر بالجانب الايسر فالا تقم بتغيير اى شيى وهذه صورة موضحة لشكل صورة الكاتب من الجهة اليسرى :







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


عربي باي