مواضيع ذات صلة (مصورة) نسخة احدث

هل تذكر بوست مواضيع ذات صلة 1

و بوست مواضيع ذات صلة 2

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

الخطوات :
1- اذهب الى صندوق الاكواد

المسار : لوحة التحكم - تصميم - تحرير هتمل

2- اضغط على المربع الصغير توسيع قوالب عناصر واجهة المستخدم

3- ابحث على

</head>


واستبدلها بالاتى :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJndbDTowmlqmAscG1n6afjo_3rcKK2FqCul2JZEymWRg3Tp3JJVXagqOK0lBk2NiiYg26XKUZvLSTVcECs9jxbVL_v5u7vvp1SxlMJMWQIhoPbCUxAA6vuZbm0UW7E7BcQ6Pq5R5Y9o0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

ملاحظة : يمكنك التعديل على عدد الروابط المصورة للمواضيع ذات الصلة , بتغيير رقم 5 الملون باللون الاحمر بالكود السابق .
ويمكنك ايضا تغيير العنوان بتغيير كلمة " مواضيع ذات صلة " الملونة باللون الازرق .
ويمكنك تغيير اللون الفاصل بين الروابط بتغيير الكود الملون باللون البنفسجى #d4eaf2


4 - ابحث عن اى من القطعتين التاليتين , اذا لم تجد الاولى ابحث عن الثانية

<div class='post-footer-line post-footer-line-1'>

او

<p class='post-footer-line post-footer-line-1'>

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

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

بعد الانتهاء احفظ , وشاهد النتيجة

اكتب ايميلك هنا

استخدم خطوط جوجل

المستخدم للبلوجر - او اى مدونة مجانية اخرى - يكون غالبا مقيدا بتصميمات معدة من قبل , فى البلوجر يمكنك الان وبكل سهولة اختيار قالب او تصميم معين من بين الاف التصميمات على الانترنت او حتى انشاؤه من البداية , لكن تظل بعض الامكانيات غير متاحة , ومن اهم تلك الامكانيات هى اضافة خط للمدونة بدلا من الخطوط الرسميةالمتاحة فى البلوجر .

لم يعد الجرافيك وحده هو القاعدة التى يبنى عليها تصميم المدونة , خطوط المدونة واشكالها المختلفة ومدى تناسقها اصبح عاملا بالغ الاهمية فى التصميم , بل اصبح علما يطلق عليه typography

ماهو الـ Google's Font API ؟
طرحت جوجل مؤخرا خدمة مفتوحة المصدر تمكن المستخدم من اضافة الخطوط المختلفة لاى موقع او صفحة على الانترنت , واسمت تلك الخدمة Google's Font API

ماهى الخطوط المتاحة حتى الان ؟

توجد النماذج المتاحة حتى الان فى تلك الصفحة

الخدمة لا تزال تجريبية ويوجد بها بعض الخطوط الانجليزية فقط , ويتوقع ان شاء الله ضم المزيد من الخطوط قريبا

ماهى طريقة الاضافة ؟

اولا اضغط على خط معين ( انا ضغطت على Cantarell كمثال ) من تلك النماذج
فى الصفحة التالية اضغط على get code

ستحصل على كود بهذا الشكل :

<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

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

<link href=' http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/>

ثم اذهب الى صندوق الاكواد بمدونتك
لوحة التحكم , تصميم , تحرير هتمل

وابحث عن <head>

والصق الكود السابق بعدها مباشرة

ثم احفظ
-----

الان انت اضفت الخط Cantarell الى القالب , تحتاج الان

تحتاج الان اضافته الى اجزاء المدونة
مثلا انت تريد ان تكون العناوين الفرعية h2 بهذا الخط
ستضيف هذا الكود :

h2.post-title {font-family: Cantarell, Sans=Serif;}

وهكذا , يمكنك اضافة تلك الخاصية الى اى قطعة تريدها
مثلا , تبحث عن الـ post او الـ main
وتطيف الى خصائصه الموجوده خاصية الخط , او تعدلها اذا كانت موجودة بالفعل

main {

font-family: Cantarell, Sans=Serif;

}

------------------

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

اكتب ايميلك هنا

اختصارات تهمك , اه وربنا

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

الاختصار	الوظيفة	الدعم بكل المتصفحات ؟
CTRL+B	خط عريض	Yes
CTRL+I	خط مائل	Yes
CTRL+U	نص تحته خط	Yes
CTRL+L	اقتباس	No
CTRL+Z	Undo التراجع عن اخر خطوة	Yes
CTRL+Y	Redo خطوة للامام	Yes
CTRL+SHIFT+A	اضافة لينك , رابط	No
CTRL+SHIFT+P	عرض التدوينة	No
CTRL+D	حفظ كمسودة	No
CTRL+P	نشر التدوينة	Yes
CTRL+S	حفظ آلى للتدوينة	Yes
CTRL+G	ترجمة للتدوينة	No

سلامى للجميع

اكتب ايميلك هنا

لعشاق الفيس بووك

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

الطريقة :

سجل دخولك فى الفيس بووك اولا

ثانيا ادخل عبر هذا الرابط

ستظهر لك الصفحة الاتية از مايقابلها باللغة العربية, اختر كما هو موضح حسب ترتيب الاسهم




فى الصفحة التالية ستجد الاتى



اختر edit page كما بالصورة



فى الصفحة التالية اختر edit الموجودة تحت note




فى الصفحة التالية اختر import blog كما بالصورة



فى الصفحة التالية ستضع بياناتك بدلا من بياناتى الموجودة فى الصورة كى يتم لستيراد تدويناتك اوتوماتيكيا
ثم اضغط start importing



فى الصفحة الاخيرة التالية ستلاحظ انه بالفعل تم استيراد التدوينات اوتوماتيكيا لعرضها لاصدقائك فى الفيس بوك اولا بأول , اختر confirm hmport للتاكيد

اكتب ايميلك هنا

اظهار التاريخ فى شريط المتصفح

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



الطريقة :

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

<Script Language="JavaScript" Type="Text/JavaScript">

var mytime1=24;
function mytime2() {
mytime3=mytime1+6;
mytime4=mytime1+mytime3;
timexx=mytime1+mytime3+mytime4;
timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;
timexxxx=mytime1+mytime3/timexxx-16*timexx;
timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;
timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;
mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;
mytime6=Math.floor(mytime5);
mytime8=mytime6*mytime3/2+100;
mytime7 = window.setTimeout("mytime2()", mytime8);
var mytime9 = new Date();
var mytime10= mytime9.toLocaleString();
document.title = mytime10;}
function op(){mytime2()}
window.onload=op;

</script>

اكتب ايميلك هنا

التحرر من البلوجر

الحقيقة تقول ان اجمل اشياء فى الدنيا هى الاشياء المجانية
ولكى تكتمل تلك المجانية فى بلوجر , يلزمك بعض التعديلات والاعدادات كى تتخلص وللأبد من التبعية للبلوجر وتتحول من صاحب مدونة الى صاحب موقع بأقل التكاليف , او ربما مجانا أيضا :)

أولا : شريط البلوجر
الكثير ينزعج من وجود هذا الشريط بأعلى المدونة , اما حذفه فسهل جدا من هنا
ثانيا : الدومين
البعض ايضا ينزعج من وجود .blogspot فى رابط مدونته , والكثير جدا من المدونات الشهيرة تنتقل من مجرد كونها مدونات الى مواقع , لذلك وجدنا البلوجر تدعم اضافة دومين للمدونة والاستغناء به عن الرابط الاساسى للمدونة .
فمثلا , لو كانت مدونتك whatever.blogspotc.com واحببت انت ان تجعلها watever.com كل ما عليك الا انك تشترى الدومين ( اذا كان متاح ) من مواقع بيع الدومينات او حتى من مواقع الدومينات المجانية , ثم اضافته الى البلوجر بكل سهولة .
بهذه الطريقة انت مازلت تملك مميزات مساحة البلوجر والتدوينات والصور والفيديو وخلافه , بينما رابط موقعك الجديد لا يوجد به blogspot على الاطلاق .

اعدادات تغيير الدومين :

اذهب الى لوحة التحكم - الاعدادات


اختر : نشر > مجال متخصص



تابع اذا كنت تريد شراء الدومين الان من بلوجر , او اختر الاعدادات المتقدمة اذا كنت تملك دومين بالفعل



ضع الدومين الذى تملكه , ثم احفظ .



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

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

خامسا : أشياء اخرى

هناك الكثير من الاشياء الاخرى التى تجعل الشكل النهائى للمدونة اقرب الى موقع منه الى مدونة , مثلا التاريخ , البعض يحب ازالة عنصر " التاريخ " الذى يظهر فوق او تحت كل تدوينة , شئ اخر مهم جدا هو ضم حزم الجافاسكريبت المختلفة الى البلوج سبوت مثل الـ JQuery يمكنك البدء من هنا , ثم هنا

اكتب ايميلك هنا

تكبير وتصغير الخط

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

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

<div>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='0.8em'"><span style="font-size: x-small;">+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.1em'"><span >+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.4em'"><span style="font-size: large;">+</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.7em'"><span >+</span></a>
</div>

فى الكود السابق :
- الخط الذى سيتم التحكم به هو الخط الموجود فى كل الصفحة body
يمكن تحديد الخط الموجود فى منطقة بعينها عن طريق استبدال كلمة body بالـ id الخاص بالقطعة المراد تكبير وتصغير الخط بها , مثلا post او main-wrapper او side-wrapper وهكذا

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

- يتراوح الحجم الادنى والاقصى من 0.5 الى 1.7 , يمكنك تغيير القيم بالطبع .

اكتب ايميلك هنا

تعلم JQuery اليوم الثانى

بعد الدرس السابق " تعلم الـ jquery " اليوم الاول , اتمنى ان يكون استفاد منه البعض , اكمل هنا


اولا : خلاصة سريعة لما سبق

انظر الصورة التالية " اضغط للتكبير "



كيف تختار اى شئ بواسطة الجى كويرى ؟

هناك العديد من الروابط فى المدونة , كلهم يرمز له بالكود a اليس كذلك ؟ كيف تستطيع ان تختار واحد منهم فقط لتخصه بعمل تاثير ما او تخصه هو نفسه بتطبيق التاثير عليه ؟
كما ذكر فى الموضوع السابق ان الرابط يمكنك ان تنشأ له id خاص تستطيع من خلاله ان تختار هذا الرابط دون غيره .
هناك ايضا العديد من الاقسام div تستطيع ان تنشأ لايها class مخصوص لتتحكم فيه دون غيره , وهكذا , ينطبق هذا الاسلوب مع كل شئ فى المدونة حتى تتحكم فى كل شئ بعينه دون غيره . اوكى

$("#box")

هنا انت تختار اى شئ فى المدونه له آى دى = box

$(".class")

هنا انت تختار اى شئ فى المدونه له كلاس = box

$("a")

هنا انت تختار اى رابط فى المدونة بدون تحديد

$("#hello")

انت تختار الرابط ( الروابط ) التى لها اى دى = hello فقط

$("p a")

هنا انت تختار الروابط الموجودة داخل أى paragraph

$("#sidebar a")

فى حالة المدونات التى بها اطار جانبى اسمه sidebar , انت هنا تختار كل الروابط الموجودة داخل اى شئ له آى دى = sidebar

$("ul il")

انت هنا تختار فقط الـ list items (li) الموجودة داخل اى Unordered list (ul) داخل المدونة , لاحظ ان الادوات من نوع link list (او قائمة روابط ) ستندرج تحت هذا الاختيار لكونها قائمة غير مرتبة . ايضا سيندرج تحتها الجداول

$("ul li:first")

مثل السابق , لكنت انت هنا تختار فقط العنصر او الرابط الأول من القائمة

$("h2")

انت تختار كل عنوان header من النوع الثانى

$("div#content .photo")

انت هنا تختار الاشياء التى لها class = photo ألتى تتواجد فقط داخل القسم div الذى له id = content .

$(this)

لنفرض ان لديك فى المدونة رابط ما له id اسمه hello مثلا
انت تريد عندما تضغط على الرابط ان ينزلق جزء التدوينات main-wrapper لاعلى
علما بان بالفعل يوجد لديك فى المدونة هذا الـ main-wrapper , وايضا لهذا الـ main-wrapper كلاس اسمخ down كى يعبر عن ان حالة هذا الـ Main-wrapper الان هى انها منزلقة لاسفل .
انت تريد عندما تضغط على الرابط ان تنزلق تلك القطعة اولا وايضا يتغير الكلاس من down الى UP كى يعبر عن ان الحالة تغيرت بالفعل

الكود سيصبح بالشكل الاتى :

$(document).ready(function(){

$("a#hello").click(function(){
$("#main-wrapper").slideUp("slow");
$(this).toggleClass("UP");
});

});

الشرح : الرابط a ألذى به id اسمه hello عند الضغط عليه .click ستنشأ وظيفة function مفادها ان : القسم div ألذى له id اسمه main-wrapper سينزلق لأعلى slideUp هذا اولا , لاحظ ان الوظيفة لم تنتهى , ثانيا سيحدث أن this ومعناها ان الـ main-wrapper نفسها هى التى سيحدث عليها التاثير , فبدلا من كتابة main-wrapper مرة ثانية , لا انت تكتب فقط this لتعنى ان نفس الشئ المذكور مباشرة من قبل هو نفسه الذى سينطبق عليه التاثير التالى , الا وهو toggleClass اى غير الكلاس من اسمه السابق الى الاسم الجديد UP . لاحظ ان toogle معناها التغيير بالتبادل , بمعنى انك عندما تضغط للامرة الاول ستبدل من down الى up والمرة الثانية ستبدل لوضعها الاصلى down والمرة الثالثة up وهكذا .

الخلاصة : ان this تعنى القطعة المذكورة مباشرة من قبل , بدلا من التكرار .

--------------------------

التطبيق الأول :

عندما تضغط على الرابط سيتحول قسم ما من كلاس لآخر , وبالتالى سيتحول من مواصفات الكلاس الأول لمواصفات الكلاس الثانى

اولا : يجب وضع مواصفات الكلاس الاول وليكن down وهو الافتراضى , وايضا وضع مواصفات الكلاس الثانى وليكن up . نضع تلك المواصفات ( الاكواد ) داخل جزء الـ head بصندوق الاكواد :

.down{
height:10px;
width:200px;
background:eeeeee;
}

.up{
height:300px;
overflow:auto;
background:e0e0e0;
}

بينما فى جزء الـ body يجب عليك اولا ان تنشا الرابط ولنضع له id مثلا اسمه slide وايضا ان تنشأ هذا القسم الذى سيطبق عليه هذا التاثير , ولنضع لهذا القسم id مثلا اسمه panel ونضع بداخله صورة وتعليق

(ضع هذه الاكواد فى منطقة الـ body ) وليكن مثلا مباشرة بعد كلمة <body>

لاحظ ان الكلاس down الافتراضى ارتفاعه 10 بيكسل , اى تقريبا مختفى , عند الضغط على الرابط سيتغير الكلاس الى up ويتغير بالتالى الارتفاع الى 300 بيكسل

<a id='slide' href='javascript:void(0);'>اضغط هنا</a>

<div id='panel' class='down'>

<img class="pic" src="http://www.barnardos.org.uk/microsite_smile.gif" />

</div>

للاستفسار او الاسئلة : اترك تعليق

اكتب ايميلك هنا