السلام عليكم ورحمة الله وبركاته
طريقة مهمة وجميلة كيفية أضافة نمط أو خلفية للأكواد في المواضيع للمدونات البلوجر بحيث يمكن تمييزها وكذلك أضافة الميزة الأحترافية للمدونة
صورة للمعاينة الأضافة
الشرح :-
1- لوحة التحكم
2- تصميم
3- تحريرhtml
4- أعمل توسيع للقالب
لاتنسى أخذ نسخة للقالب كالعاده
أبحث عن الكود التالي
]]></b:skin>
وأضف قبله مباشرة
الكود التالي
.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijQ3fDDZ9visl9uf8c25i-uHuEA0KMumvgncLjqiwk2T3rGIn1j_UbPFh-qqD7x-aPk7TmbXA_siiS8E51uwGQVWeTZu-XRgT94HRLk8DISljtakgzv0VoLtguHCVcO_yG7EfLVnI_IgM/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 10px; padding:10px 30px 10px 20px; font-size: 0.6em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 5px;
}
وأخيرا
أعمل حفظ للقالب و شاهد النتيجة
نظرا للتقدم السريع للشبكات الاجتماعية، والاهتمام المتزايد من الناس في مواقع الشبكات الاجتماعية فهي تعتبر ولادة للكثير من الزوار للمواقع والمدونات مما يساعد موقعك التقدم في المحركات البحث وزيادة عدد الزوار ويعتبر كمية من زوار الشبكات الأجتماعية مدمنين لها وبواسطة هذه الأداة التي سوف أعرضها لكم تساعدك في نشر مواضيعك ومدونتك في الشبكات الأكثر شهرة وطبعا ( الفيسبوك ..تويتر..قوقل بلس)
هذه الأداة تشجع زوار مدونتك في متابعة مواضيعك في هذه الشبكات
وكذلك بشكل جديد
وكذلك بشكل جديد
أين أضيف الأداة الشبكات الأجتماعية؟؟
يمكنك أضافتها في الصفحة الرئيسية للمدونة وذلك بوضعها في القائمة الجانبية أو في رأس الصفحة
بحيث تجعلها مناسبة لمدونتك ويشاهدها زوارك
مثال (صورة للأداة)
كيف يمكنني أضافة الكود؟؟
الشرح
فيما يلي الخطوات لمستخدمي البلوجر
الذهاب إلى Blogger> تخطيط
اختر إضافة أداة
اختر HTML / جافا سكريبت
لصق التعليمات البرمجية التالية في داخله، (أي الكود التالي )
الذهاب إلى Blogger> تخطيط
اختر إضافة أداة
اختر HTML / جافا سكريبت
لصق التعليمات البرمجية التالية في داخله، (أي الكود التالي )
<style>
/*--------أداة تابعني ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:right;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;}
.touchme a.googleplus {
background-position: 0px -58px;}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;}
.touchme a.twitter:hover {
background-position: 0px -232px;}
.touchme a.facebook {
background-position: 0px -406px;}
.touchme a.facebook:hover {
background-position: 0px -348px;}
.touchme a.rss {
background-position: 0px -174px;}
.touchme a.rss:hover {
background-position: 0px -116px;}
</style>
<div class='touchme'><!--RSS-->
<a class='rss' href="ضع رابط rss الخاص بمدونتك" rel='external nofollow' target='_blank'></a><!--Google Plus-->
<a class='googleplus' href="ضع هنا رابط صفحة مدونتك في قوقل بلس" rel='external nofollow' target='_blank'></a><!--Facebook-->
<a class='facebook' href="ضع هنا رابط صفحة مدونتك في الفيسبوك" rel='external nofollow' target='_blank'></a><!-- Twitter -->
<a class='twitter' href="ضع هنا رابط صفحة مدونتك في تويتر" rel='external nofollow' target='_blank' ></a>
</div>
مع أستبدال النصوص المشار لها بلون الأحمر بروابط مدونتك في الشبكات الأجتماعية
طريقة التركيب :-
اضغط على تخطيط ثم اضافة اداة و نختار اداة HTML/JavaScript
انسخ الكود التالى كاملا و ضعه حيث تريد ظهور الشريط
<div width="600"><script src="http://www.alarabiya.net/ara_v_ticker.html"></script></div>
اضافة جديدة تمكنك من تسريع تحميل الصور في مدونتك و بالتالي تسريع التصفح.
إضافة ممتازة لتسريع تصفح المدونة أو أي موقع على حد سواء، مبدأ الإضافة يتلخص في تحميل ما يراه المتصفح أولا ثم تحميل بقية الصور و المحتويات عند الطلب فمثلا عند تصفح صفحة ما ستلاحظ و أنت تنزل إلى أسفل الصفحة أن الصور و المحتويات تظهر تباعا بطريقة سلسة. باختصار الإضافة تتيح تحميل ما يظهر على الشاشة و ليس صفحة الموقع كلها الشيء الذي يزيد في سرعة تحميل و تصفح موقعك.
طريقة تركيب الإضافة
و تكون بإضافة الكود الآتي فوق (قبل) وسم </body> المغلق:هذا الكود لتطبيق الإضافة على كافة صور الموقع أو المدونة.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery('img').lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pFJDUQgvy6x1s-lOLGzWdb1DeucEwQZok8fygJor_W6-LbiQ2COS-EoeERC7kvqKOFs27K7LfHy8M6XeIumBUccfgcX29IbcrV8Z5tgY8J7Ypaa-6172fQ58PMQqSlEi1VGiNr99rqM/"
});
});
</script>
ملاحظة
إذا كنت تستعمل مسبقا مكتبة جي كويري في موقعك أو مدونتك فلا داعي لوضع السطر المشار إليهباللون الأزرق و اكتف بوضع بقية الكود فقط.
تنويه
لتطبيق الإضافة فقط على جسم الموضوع أو التدوينة فقط أضف الكلاس أو ال id المراد التطبيق عليه فقط إلى يسار ما لون بالأحمر كما توضحه الأمثلة الآتية.
فمثلا في بلوجر نطبق الإضافة على .post نستعمل الكود كما يلي:
و في المنتديات على .tborder يصبح الكود كالآتي:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery('.post img').lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pFJDUQgvy6x1s-lOLGzWdb1DeucEwQZok8fygJor_W6-LbiQ2COS-EoeERC7kvqKOFs27K7LfHy8M6XeIumBUccfgcX29IbcrV8Z5tgY8J7Ypaa-6172fQ58PMQqSlEi1VGiNr99rqM/"
});
});
</script>
فقط لا اريد سوا دعواتكم و بالتوفيق للجميع<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery('.tborder img').lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pFJDUQgvy6x1s-lOLGzWdb1DeucEwQZok8fygJor_W6-LbiQ2COS-EoeERC7kvqKOFs27K7LfHy8M6XeIumBUccfgcX29IbcrV8Z5tgY8J7Ypaa-6172fQ58PMQqSlEi1VGiNr99rqM/"
});
});
</script>
من المشاكل التي يواجهها المدون على منصة blogspot- هي عدم وجود اضافة او قالب خاص بمتصفحي المدونة بواسطة الهاتف النقال ، وكما تعلمون فأن عدد مستخدمي الانترنت في ازدياد وتضاعف مستمر
وبسبب التطور الهائل في شبكات الهواتف المحمولة وتقنيات 3G's فعدد المستخدمين قد تضاعف بشكل كبير حيث بلغ عدد من يستخدمون الانترنت بواسطة الجوال عام 2009 ما يقارب 74 مليون شخص بشكل متواصل ، وهذه صورة توضيحية لما هو متوقع في السنوات القادمة فقط داخل الولايات المتحدة من الموقع نفسه .
حتى يتحفنا بلوجر بأحد الحلول لهذه المشكلة ، اقتبست من مدونة bloggertricks كود يعمل على تسريع تصفح المدونة حتى لا تفقد زوارك من الهواتف المحمولة وهم ينتظرون تحميل صفحة مدونتك ، ولتركيب الكود اتبع هذه الخطوات :
1- من لوحة التحكم اضغط على تصميم – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم :
2- ابحث عن :
وبسبب التطور الهائل في شبكات الهواتف المحمولة وتقنيات 3G's فعدد المستخدمين قد تضاعف بشكل كبير حيث بلغ عدد من يستخدمون الانترنت بواسطة الجوال عام 2009 ما يقارب 74 مليون شخص بشكل متواصل ، وهذه صورة توضيحية لما هو متوقع في السنوات القادمة فقط داخل الولايات المتحدة من الموقع نفسه .
حتى يتحفنا بلوجر بأحد الحلول لهذه المشكلة ، اقتبست من مدونة bloggertricks كود يعمل على تسريع تصفح المدونة حتى لا تفقد زوارك من الهواتف المحمولة وهم ينتظرون تحميل صفحة مدونتك ، ولتركيب الكود اتبع هذه الخطوات :
1- من لوحة التحكم اضغط على تصميم – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم :
2- ابحث عن :
<b:include data='blog' name='all-head-content'/>
3- اضف الكود التالي بعدها/تحتها مباشرة
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
5- احفظ قالب مدونتك ، وتمتع بهذه الاضافة المفيدة
في درس سابق طرحت للقراء كيفية اضافة زر اعجبني من فيس بوك لمدونات بلوجر ، ومؤخرا قام عملاق الشبكات الاجتماعية موقع فيس بوك بتطوير ازرار جديدة لهذه الخدمة الرائعة ، لا تبخل على زوارك الكرام باضافة هذا الزر البسيط صاحب الاداء الكبير في نشر مدونتك بين رواد موقع فيس بوك ، بل احرص كل الحرص على توفير هذا الزر المهم كحال ازرار المشاركة لكل من فيس بوك وتويتر ، وتستطيع ان تعاينه في اسفل هذه التدوينة .
لاضافة زر الاعجاب تابع الخطوات التالية
====================
من لوحة التحكم اضغط على التخطيط ثم تحرير html ثم اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط علىتوسيع فوالب عناصر واجهة المستخدم
واضف الكود بعدها
واذا لم تجدها ابحث عن :(قد تجد اثنتين فالثانية المقصودة)
واضف الكود التالي بعدها ليظهر في اخر التدوينة ، او قبلها ليظهر اول التدوينة
اما كود الاضافة فانسخه من هنا " تذكر" اذا كان الزر مضاف فعلا الى مدونتك فعليك تخصيصه فقط "
تخصيص الزر بما يناسبك
1- احذف ما تم تعليمه بالبرتقالي اذا كنت تريد ان يظهر الزر في جسم التدوينة وفي الصفحة الرئيسية لمدونتك
2- اختر الزر الذي تريده واستبدل اسمه بـ button_count :
false : عرض وجه المعجب فقط في الزر الاول ولعرضه استبدلها بـ true
tahoma : نوع الخط وتستطيع تغييره بخطوط اخرى مثل arial
light : يعني خفيف ، ويمكن تغييرها الى معتم dark
450px : العرض الذي ستأخذه الاضافة ويمكن تغييره حسب قالب مدونتك
like : وتعني اعجبني ويمكنك تغييرها بـ recommend
الان احفظ القالب ومبروك عليك الاضافة يا باشا
لاضافة زر الاعجاب تابع الخطوات التالية
====================
الخطوة الاولى :-
الخطوة الثانية:-
ابحث عن :<div class='post-header-line-1'/>
واضف الكود بعدها
واذا لم تجدها ابحث عن :(قد تجد اثنتين فالثانية المقصودة)
<data:post.body/>
واضف الكود التالي بعدها ليظهر في اخر التدوينة ، او قبلها ليظهر اول التدوينة
اما كود الاضافة فانسخه من هنا " تذكر" اذا كان الزر مضاف فعلا الى مدونتك فعليك تخصيصه فقط "
<b:if cond='data:blog.pageType == "item"'><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></b:if>
تخصيص الزر بما يناسبك
1- احذف ما تم تعليمه بالبرتقالي اذا كنت تريد ان يظهر الزر في جسم التدوينة وفي الصفحة الرئيسية لمدونتك
2- اختر الزر الذي تريده واستبدل اسمه بـ button_count :
standard
button_count
box_count
false : عرض وجه المعجب فقط في الزر الاول ولعرضه استبدلها بـ true
tahoma : نوع الخط وتستطيع تغييره بخطوط اخرى مثل arial
light : يعني خفيف ، ويمكن تغييرها الى معتم dark
450px : العرض الذي ستأخذه الاضافة ويمكن تغييره حسب قالب مدونتك
like : وتعني اعجبني ويمكنك تغييرها بـ recommend
الان احفظ القالب ومبروك عليك الاضافة يا باشا
قبل حوالي اكثر من عام اطلق فيسبوك زر الاعجاب الشهير فيس بوك لينتشر بشكل هائل جدا بين المواقع والمدونات والمنتديات ، وبدورنا في ايجى جراند طرحنا لكم موضوع سابق حول ازرار الاعجاب الجديدة من الفيسبوك وهذا احدها - زر اعجبني من فيسبوك - وفي هذه التدوينة نعود مرة اخرى الى خدمات فيسبوك للمواقع والمدونات لنقدم لكم زر الارسال send لتتمكن اخى المدون من اتاحة المجال لزوارك لارسال رسالة خاصة بالموضوع الى احد اصدقائهم مباشرة في فيسبوك - لنبدأ على بركة الله بشرح طريقة الاضافة :
واضف الكود بعدها
واذا لم تجدها ابحث عن :
واضف الكود التالي بعدها ليظهر في اخر التدوينة ، او قبلها ليظهر اول التدوينة
1- كود اضافة زر الارسال فقط
1- احذف ما تم تعليمه بالبرتقالي اذا كنت تريد ان يظهر الزر في جسم التدوينة وفي الصفحة الرئيسية لمدونتك
tahoma : نوع الخط وتستطيع تغييره بخطوط اخرى مثل arial
light : يعني خفيف ، ويمكن تغييرها الى معتم dark
مش محتاج غير دعواتكم
الخطوة الاولى :-
من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط علىتوسيع فوالب عناصرواجهة المستخدمالخطوة الثانية :-
ابحث عن :<div class='post-header-line-1'/>
واضف الكود بعدها
واذا لم تجدها ابحث عن :
(قد تجد اثنتين فالثانية هى المقصودة)<data:post.body/>
واضف الكود التالي بعدها ليظهر في اخر التدوينة ، او قبلها ليظهر اول التدوينة
1- كود اضافة زر الارسال فقط
<b:if cond='data:blog.pageType == "item"'>
<!--Facebook Send button Start egy-grand.blospot.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='tahoma'/>
<!--Facebook Send button End egy-grand.blospot.com --></b:if>
2- كود اضافة زر الاسال + زر الاعجاب
<b:if cond='data:blog.pageType == "item"'> <!-- Facebook Like+Send button Start egy-grand.blogspot.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light' action='like' layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
<!-- Facebook Like+Send button End egy-grand.blogspot.com -->
</b:if>
يمكنك تخصيص الزر بما يناسبك
1- احذف ما تم تعليمه بالبرتقالي اذا كنت تريد ان يظهر الزر في جسم التدوينة وفي الصفحة الرئيسية لمدونتك
tahoma : نوع الخط وتستطيع تغييره بخطوط اخرى مثل arial
light : يعني خفيف ، ويمكن تغييرها الى معتم dark
احفظ القالب و مبروووووووووك عليك الأضافة
أصدر موقع جوجل حديثا الزر 1+ ،حيث يسمح لك بإقتراح أي موقع معين أو أي شيئ أعجبك وذلك عند النقر على الزر 1+ ،فإنك تقوم بإخبار أصدقائك والعالم أن هناك شيئ ما يجب الإطلاع عليه ،وبالتالي فإن مقترحاتك سوف تظهر عندما يقومون بالبحث في جوجل ، فهذه الميزة جديدة حيث تسعى جوجل في تطوير محركها بشكل جديد ، ،لذلك ،إذا رأيت هذا الزر في موقع وتريد من أصدقائك إيجاده بسهولة عند بحثهم فقط إنقر الزر1 +
ولإضافة هذا الزر في تدويناتك وفتح المجال للزائرين بإقتراح مدونتك نقوم بشرح طريقة تركيب الزر +1 على المدونة .
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
ثم قم بلصق الكود التالي بعده ،ليكون الزر أسفل التدوينة ،أو قبله ليكون الزر تحت عنوان التدوينة .
وإذا أردت إظهار الزر 1+ كذلك على الصفحة الرئيسية ما عليك سوى حذف السطر الأول والأخير من الكود السابق
فإذا أعجبك الموضوع وتريد إقتراحه على أصدقائك ما عليك سوى النقر على الزر
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
ثم قم بلصق الكود التالي قبله :</body>
الآن قم بالبحث عن هذا الكود :<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<data:post.body/>
ملاحظة : يتوفر زر1+ على 4 قياسات حيث يمكنك إختيار القياس المناسب لك وذلك بإستبدال الكلمة tall من الكود بأحد القياسات الموجودة في الصورة أسفله .<b:if cond='data:blog.pageType == "item"'>
<g:plusone expr:href='data:post.url' size='tall'/>
</b:if>
فإذا أعجبك الموضوع وتريد إقتراحه على أصدقائك ما عليك سوى النقر على الزر
انهاردة هنشرح برنامج جميل و مفيد لأصحاب المدونات لعمل قائمة في اعلي المدونة نضع بها اقسام المدونة بتقنية CSS3
الآن وجدت برنامج سهل جدا في التعامل وبه قوائم مجانية سوف نستعملها لعمل القوائم كما فى الصورة التاليه ---->
البرنامج اسمة
css3menu
اولا وبعد تثبيت البرنامج وفتحة سوف تظهر الشاشة كالتالي:
هنختار الشكل في اليمين اسمة blue لأنه لا يحتوي علي صور ولا يتعبنا في عمل القوائم
وبعد كتابة القوائم ووضع روابطها كما في مدوناتنا وكما يظهر من الشرح في الصورة..سوف نصدر عملنا
نضغط عليPublish
ونحفظ العمل باي اسم
سوف يظهر عندنا ملفين هما:
1/ ملف ذو الامتدادhtml سوف نفتحة بكليك يمين علية ونفتحة باختيارnotepad
وناخذ مافية Copy ونضعة في اداة
عن طريق الذهاب الي تصميم ثم عناصر الصفحة ثم اضافة اداة بلغةhtml/javascript
ونضعها تحت الهيدر مباشرة او فوقه حسب ما تريد
2/ الملف الثاني سوف يحتوي علي style.css
نفتحة ايضا بالنوت بادnotepad
ونضع الكود كاتالي:
نذهب الي تصميم ثم مصمم النماذج
ثم نختار ((متقدم))
ونذهب لاخر اختيار ونضع كود الcss
ونحفظ القالب
ثم نذهب الي المدونة سوف نجد القائمة قد تمت بالفعل وظهرت
لتحميل البرنامج
اضغك هنا
http://css3menu.com/css3menu-setup.zip
ثم ضع اسمك وايميلك..سوف يبدأ التحميل
حجم البرنامج حوالى 19 ميجا
الى هنا ينتهى شرحنا
اتمني ان اكون قد وفقت في شرحه
لكم مني كل تحية ومحبة و اى استفسار اترك تعليق و شكرااا
السلام عليكم و رحمة الله و بركاته درسنا اليوم هو اضافة اداة اسفل الهيدر فى المدونة
احنا عارفين ان اغلبنا بيعتمد على قوالب جاهزة و معظم هذه القوالب لم تكن بها اداة اسفل الهيدر لذلك
عملت الدرس ده عشان نضع اداة اسفل هيدر المدونة و عمل ذلك نتبع الآتى :- 
اولا :-
نذهب الى تصميم ثم تحرير HTML
نأخذ نسخة احتياطية من القالب( تحسبا لوقوع اى اخطاء)
ثم نضغط علي ctrl+f
ونبحث عن الكود التالي
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/> </b:section> </div>
ثم نضيف الكود التالي تحت هذا الكود
<!-- New widgets container Start --> <b:section class='NewContainer' id='NewContainer'/> <!-- New widgets container End -->
ثم احفظ القالب
سوف تجد (اضافة اداة) ظهرت تحت الهيدر
سوف تجد (اضافة اداة) ظهرت تحت الهيدر
السلام عليكم ورحمة الله وبركاته
مرحباً بكم جميعاً في درس آخر من شروحات بلوجر
سأقوم بشرح كامل لطريقة عمل تبويبات أسفل الهيدر
درس اليوم تابع لخطوات درس تبويبة "تصميم"
وقمت بعمله تلبية لطلب من لم تتضح له تلك الخطوة
وسأقوم بإعادة شرح تلك الخطوات مع الخطوات الجديد حتى يسهل الفهم
الفكرة سهلة للغاية
الآن ، اذهب معي من لوحة التحكم > تحرير الرسائل
هذه هي قائمة مواضيع مدونتي التجريبية
سأقوم الآن بتصنيف المواضيع إلى أقسام
عليك أولاً تحديد الموضوع الذي ترغب بتصنيفه ، بالضغط على المربع المحدد في الخطوة رقم 1
ثم اضغط على " اجراءات التسمية..." واختر منها " تسمية جديدة "
اكتب اسم القسم المراد نسبه لهذا الموضوع .. مثلاً " Photoshop "
ثم اضغط موافق ، وافعل ذلك مع بقية المواضيع
إذا أردتَ نسب موضوع آخر لنفس قسم " Photoshop "
فعند تجديدك للموضوع والضغط على " إجراءات التسمية ..." ستجد أن قسم Photoshop قد أضيف
وتستطيع اختياره مجدداً لموضوع آخر ، بدل من إعادة إنشاء تسمية جديدة
كما في الصورة
الآن اذهب من لوحة التحكم > تصميم > عناصر الصفحة
ثم اضغط على أداة و اختار اداة " التسميات "
ثم اضغط حفظ ........
توجه إلى مدونتك .. وقم بنسخ روابط الأقسام أو التسميات التي أضفتها
نلاحظ هنا التسميات اللى اضفناها
طريقة نسخ الرابط بقى : اضغط بزر الفأرة الأيمن على قسم "Photoshop" مثلاً
واختر Copy link location
وهكذا مع باقى الأقسام ، ثم احتفظ بالروابط في مفكرة Notepad حتى تقوم باستخدامها بعد قليل
الآن توجه إلى لوحة التحكم > تصميم > عناصر الصفحة
قم بإضافة أداة " قائمة الروابط "
1- ضع هنا الرابط الذي قمتَ بنسخه
2- النص الذي تريده أن يظهر عوضاً عن الرابط نفسه
3- عند الأنتهاء اضغط على "إضافة ارتباط"
ستكون النتيجة هكذا فى الصورة التالية
هناك أسهم صغيرة بجانب كل رابط ، قمت بتحديدها في الصورة أعلاه
تستطيع بها تحريك الروابط لتكون بالترتيب التي تريده في التبويبات أسفل الهيدر
الآن اضغط " حفظ "
طبعاً يجب أن تكون أداة " قائمة الروابط التي أضفتها أسفل الهيدر
أي : هنا ---->
الآن توجه إلى مدونتك .. وستكون النتيجة هكذا >
آمل أن اكون وفقت فى الشرح ..
أعلم بأني قد أطلت في الشرح بالرغم من بساطة الطريقة ^^"
إذا كانت لديك أي استفسارات فتستطيع إضافة تعليق أسفل الموضوع
في أمان الله
بسم الله الرحمن الرحيم
اليوم اقدم لكم اضافة جميلة وهى الCSS لتغير لون التظليل الي بيظهر على النصوص او الكتابه الي بتحددها بالماوس بأي لون تحبه حتى تعطي لمسه جميلة لمدونتك.
نشوف صوره توضح الفكره
ملاحظة قبل كل شيء أخذ نسخه احتياطية من القالب
نبدأ الشرح انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
للبحث عن الوسم أو الكود التالي:
]]></b:skin>
بعد ما تجد الوسم ضع الكود التالي قبله:
{p::selection
background: red;
color: white;
}
p::-moz-selection
{
background: red;
color: white;
}
p::-webkit-selection
{
background: red;
color: white;
}
ملاحظة مهمه البعض يسأل هل الالوان اقدر اغيرها الجواب طبعا نعم
الكلمه التي بالون الاحمر تمثل لون التظليل الذي تريده يمكنك استبدال الون
بكود اللون المناسب مثلا 44444#
اما الون الازرق يمثل لون النص او الكتابه بعد التظليل يمكنك
تغيره بالون المناسب ايضا
في الاخير يجب ان يكون بنفس النسق الموجود بالكود
تم التعديل ومبروك الاضافة عليك.. شكرا للمتابعة اي استفسار او مساعده اترك تعليقك
السلام عليكم ورحمة الله وبركاتة ارجو ان تكونوا فى تمام الصحة و العافية... اثناء تجولي في احد المواقع الاجنبيه الخاصه بتطوير المواقع وجدت درس رائع يتناول تطبيق قائمه تعمل بشكل عمودي ومتعدده الالوان وبتقنية ال css3 المبهره
انها تشد انظار قرائك بلا شك.. لتطبيق الدرس قم باتباع ما هو موجود بالاسفل .
الخطوه الاولى. سجل دخول الى لوحة تحكم مدونتك > اذهب الى مصمم النماذج > الوضع المتقدم > اذهب الي هذا الخيار Add Css
كما هو موضح لك في الصوره التي بالاسفل
الخطوه الثانيه. قم بنسخ ولصق الكود الموجود بالاسفل داخل الصندوق المحدد في مصمم النماذج :
الخطوه الثالثه. قم بحفظ التعديلات.
الخطوه الرابعه. قم بالرجوع الي بلوجر ثم قم مجددا بالذهاب الي عناصر تصميم الصفحه وقم باختيار اداه جديده من نوع جافا سكربت Html/Javascript
الخطوه الخامسه. انسخ الكود الموجود بالاسفل وضعه داخل الاداه الجديده ولن تحتاج ان تسميها باسم دعها بدون اسم مع تعديل الروابط والمسميات الموجوده داخل الكود كما هو موضح فيه :
الخطوه الاخيره. قم بحفظ الاداه و شوف الأضافة .......... شكرا للمتابعة
انها تشد انظار قرائك بلا شك.. لتطبيق الدرس قم باتباع ما هو موجود بالاسفل .
الخطوه الاولى. سجل دخول الى لوحة تحكم مدونتك > اذهب الى مصمم النماذج > الوضع المتقدم > اذهب الي هذا الخيار Add Css
كما هو موضح لك في الصوره التي بالاسفل
الخطوه الثانيه. قم بنسخ ولصق الكود الموجود بالاسفل داخل الصندوق المحدد في مصمم النماذج :
/* CSS Style for Horizontal Menu - info @ http://www.spiceupyourblog.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}
#hor li {
float:left;
padding:5px;
}
#hor a {
display:block;
height: 12px;
text-indent:-999em;
}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}
/* CSS Style for Vertical Menu */
#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;
}
#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}
.clear {
clear:both;
}
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6b8SAGhOye59eN3kB9Vf4ZwoSpI0bDMwh0wvZKHBffx06iWo_08FzPysxYLWaVBBhGMjPCSpoCbGNYJTpOH5FmyeJdkOb4_vYn8D5a12Un0P_sYSmu-KVmPlMJYB5slGidkWY25PFWw/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
/*End menu css - info @ http://www.spiceupyourblog.com */
الخطوه الثالثه. قم بحفظ التعديلات.
الخطوه الرابعه. قم بالرجوع الي بلوجر ثم قم مجددا بالذهاب الي عناصر تصميم الصفحه وقم باختيار اداه جديده من نوع جافا سكربت Html/Javascript
الخطوه الخامسه. انسخ الكود الموجود بالاسفل وضعه داخل الاداه الجديده ولن تحتاج ان تسميها باسم دعها بدون اسم مع تعديل الروابط والمسميات الموجوده داخل الكود كما هو موضح فيه :
ملحوظه :- لا تنسى تغيير كلمه القسم الاول والثاني والثالث و جميع الأسماء بالأسماء اللى تحددها انت.. وكلمه الرابط الاول والثاني الخ.. باسم القسم الذي تريده والرابط المؤدي اليه.<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="الرابط الاول">
<span>القسم الاول</span>
</a>
</li>
<li>
<a class="about" href="الرابط الثاني">
<span>القسم الثاني</span>
</a>
</li>
<li>
<a class="services" href="الرابط الثالث">
<span>القسم الثالث</span>
</a>
</li>
<li>
<a class="portfolio" href="الرابط الرابع/">
<span>القسم الرابع</span>
</a>
</li>
<li>
<a class="contact" href="رابط اتصل بنا">
<span>الاتصال بنا</span>
</a>
</li>
</ul>
</div><a href="http://www.egy-grand.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>
الخطوه الاخيره. قم بحفظ الاداه و شوف الأضافة .......... شكرا للمتابعة
 |
الكلمات الدلالية للمواضيع Thread Tagging
من يقوم بإضافة الكلمات الدلالية (tags) ؟يقوم بلوجر بشكل آلي بوضع الكلمات الدلالية من عنوان الموضوع
ما هي الكلمات الدلالية (Tags) ؟
الكلمات الدلالية تسهل عملية البحث عن طريق محرك البحث فأنها تساعد محركات البحث مثل قوقل و ياهو على ارشفة مواضيع المدونة مما سينتج عنها زوار أكثر من محركات البحث …
كيف اضيف الخدمة لمدونتي ؟
اتبع الخطوات التاليه اذهب الي تخطيط ثم الي عناصر الصفحة ثم الي اضافة اداه وبعدها نختار من القائمة التسميات
وبعدها نعمل كما هو معمول بالصورة ادناه 
ثم اضغط حفظ و شوف الأداه
كذلك يمكننا تحديد عدد معين لعرض الوسوم التي نريد من خيار التصنيفات المحددة
ونطلق علي النموذج احدي الاسماء التاليه (Tags سحابة الكلمات الدلالية ) ( الاوسمة ) و شكرااا
نبذة عن الكاتب
0 التعليقات: