‏إظهار الرسائل ذات التسميات مظهر المدونة. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات مظهر المدونة. إظهار كافة الرسائل

السبت، 29 سبتمبر 2012

اضاف روابط و أزرار موقعك بشكل جميل وحديث Web 2

http://img03.arabsh.com/uploads/image/2012/09/29/0d36434363f302.png
 السلام عليكم
في الآونة الأخيرة اشتهر صيت الويب 2.0  وتطبيقاته و تصاميمه بشكل رهيب كل

يوم يظهر موقع جديد غاية في البساطة وله سمعة كبيرة

وملئ بالاشياء المثيرة لذا فهو يحتل مرتبة قائمة المواقع ويتصدر الترتيبات

والحمدلله  بدأت  أرى مواقع عربية في ساحة المنافسة و التميز .

مبدئياً لا يوجد معايير في إنشاء أي من عناصر الويب 2.0 في التصميم ولكن يوجد

لدينا العديد من المظاهر التقليدية على سبيل المثال

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

سوف أريكم كيفية  تصميم   زر    ويب  2.0 احترافي

http://img04.arabsh.com/uploads/image/2012/09/29/0d36434362fa00.png


هته التقنية سوف تزيد من جمالية المدونة و دالك كمثال تغييير ايقونة اقرأ المزيد الى احد هته الازرار

او استخدامها لوضع روابط او غيرها..المهم اتركم مع المشاهدة و الشرح


http://img04.arabsh.com/uploads/image/2012/09/29/0d36434362f605.png             http://img04.arabsh.com/uploads/image/2012/09/29/0d36434362f302.png

اتمنى لك الاستفادة..  و السلام خير ختام

الجمعة، 28 سبتمبر 2012

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

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

سوف اضع بعض الصورة اذا اعجبتك اى اشعار اضف فى تعليقاتك مع الصورة المناسبه واسم مدونتك وسوف يتم العمل فى اقرب وقت هذا مدونتنا تشمل على اضافه صورة فى التعليق اضف ربط الصورة بين الوسيم التالى  [im]اضف ربط الصورهنا[/im]
 
 ثم اسم مدونتك 


اتبع شكل الصور


http://www13.0zz0.com/2012/09/28/19/674145391.gif
http://www13.0zz0.com/2012/09/28/19/674145391.gif


http://www13.0zz0.com/2012/09/28/19/491442380.gif
http://www13.0zz0.com/2012/09/28/19/491442380.gif

http://www13.0zz0.com/2012/09/28/19/275571416.gif
http://www13.0zz0.com/2012/09/28/19/275571416.gif


http://www13.0zz0.com/2012/09/28/19/159476888.gif
http://www13.0zz0.com/2012/09/28/19/159476888.gif


http://www13.0zz0.com/2012/09/28/19/962062036.gif
http://www13.0zz0.com/2012/09/28/19/962062036.gif


http://www13.0zz0.com/2012/09/28/19/450638424.gif
http://www13.0zz0.com/2012/09/28/19/450638424.gif


http://www13.0zz0.com/2012/09/28/19/971048709.gif
http://www13.0zz0.com/2012/09/28/19/971048709.gif


http://www13.0zz0.com/2012/09/28/19/677779462.gif
http://www13.0zz0.com/2012/09/28/19/677779462.gif


http://www13.0zz0.com/2012/09/28/19/883582826.gif
http://www13.0zz0.com/2012/09/28/19/883582826.gif


http://www13.0zz0.com/2012/09/28/19/710249640.png
http://www13.0zz0.com/2012/09/28/19/710249640.png


http://www13.0zz0.com/2012/09/28/19/718847298.png
http://www13.0zz0.com/2012/09/28/19/718847298.png


http://www13.0zz0.com/2012/09/28/19/421960710.png
http://www13.0zz0.com/2012/09/28/19/421960710.png


http://www13.0zz0.com/2012/09/28/19/620382753.png
http://www13.0zz0.com/2012/09/28/19/620382753.png


http://www13.0zz0.com/2012/09/28/19/798499655.png
http://www13.0zz0.com/2012/09/28/19/798499655.png


http://www13.0zz0.com/2012/09/28/19/843372170.png
http://www13.0zz0.com/2012/09/28/19/843372170.png


http://www13.0zz0.com/2012/09/28/19/792814767.png
http://www13.0zz0.com/2012/09/28/19/792814767.png

يوجد اشكل كثر لا تنسه اضف ربط الصورة المخطارة لمدونتك بين الوسيم التالى[im]ربط الصورة[/im]
 
ولا تنسه اضافه اسم مدونتك 
 

:: خاتمة ::
إذا أعجبتكم الإضافة لا تبخلوا علينا من الضغط على زر لايك الفايسبوك و شكرا
 
 

الأربعاء، 5 سبتمبر 2012

تنسيق كود html داخل موضيع المدونة بدون مشاكل 2012 calendar

السلام عليكم ورحمه الله وبركاته
http://tammyhartdesigns.com/wp-content/uploads/2010/10/iStock_000003045800XSmall.jpg
درس النهرضة هو تنسيق كود html فى المدونة بشكل جميل بعد ان تعبت جداا فى عمل هذا المجال وسوف ان ابحث عن هذا  الاضافة فى بعض المنتديات والمدونات ولا اوجد حل  تم بحمد لله تطوير فى القالب وجد هذا المشاكة ان بعض القالوب لا يوجد فيه كود تنسيق فى الموضوع بعد  وتم اكتشاف هذا الكود الزى لا يضع فى مدونتى بعد ان وضعت الكود وعدلت على الكود الحمد لله اشتغل تمام انا حبيت اعمل موضوع علشان بعض الاخوة اضحاب المدونات لا تعرف ان تنسيق الكود فى المدونة بشكل جميل ورئع للعمل فى بعض الزوار 

هذا بعد التنسيق شكل الكود دخل المدونة
undefined


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


قبل بداء العمل ارجو منكم التقضير فى العمل بعد ان تجد الكود مناسب اليك 

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

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

بلنسبة للواجهة الجديدة  :                                               -   بالنسبة للواجهة القديمة :

لاتنسى اخد نسخة احتياطية للقالب                                 لاتنسى اخد نسخة احتياطية للقالب

1.لوحة التحكم                                                         1 -.لوحة التحكم
2.القالب                                                                2  - .تخطيط أوتصميم
3. ثم تحريرhtml;.                                                               ثم 3 - تحريرhtml.  
 4.متابعة                                                               4-.توسيع القالب
5.توسيع القالب                                                         
 ثم ابحث عن الكود التالي :بالضغط على       alt+f

undefined


undefined

بعد المتابعه على هذا الصورة 

ابحث عن الكود التالى دخل مدونتك

post blockquote

أذا لم تجده أبحث عن هذا 


.post-body blockquote

واذا تم اعثور على اى كود منهم 


سوف يكون بهذا الشكل 


.post blockquote p{
margin:.5em 0
}
 المهم انك سوف تجد الكود و بعده قوسين بينهم لغة css الصق مكانه الكود الذى سوف تختاره4-انسخ الكود الذى الذى تريده من الاشكال الـ5 الموجودة فى الاسفل والصقه مكان الكود الذى وجدته 

  • الشكل رقم 1
undefined

الكود الخاص به

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }


الشكل رقم 2

undefined

الكود الخاص به

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

 الشكل رقم 3

undefined
الكود الخاص به

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

الشكل رقم 4

undefined

الكود الخاص به

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF ; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }


 الشكل رقم 5

 undefined


 الكود الخاص به

 .post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTemoDkCNa3BFSPQ_nTY-_7cnuwDB5XuvaYA8y9xsPyE6Qep_Jnu0q-INkqik0rpcIJ_BgVTq8KgZt7DsvaqShkFHc4FoUB7hEneTtFW3OTvgFrgEGIsnVZ59jdrrAdNEi2xyAEfirfVk/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHM0tn1Ii1eesJ-3kyJfjdf7iByo0nAw09DsNzIKi589kohGCfci9JUNq767zICrCr8A5ctVzu6qygeVhNV1ZlR2RplIS6EhiATDrQBGF6T1sPKG0m5006dQaAjyVtc8s_-WJgfrlGvjI/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }


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


 .post-body blockquote

 اذا لا يوجد اى كود ابحث عن الكود التالى

]]>

وضع الكود التالى فوقه مباشر

 .post blockquote {
border: 1px solid #CCC;
padding: 10px;
height: 100px;
overflow-y: scroll;
background: #F2F2F2;
border-radius: 5px;
box-shadow: inset 0 1px 10px #CCC;

}


اذا حبيت تغيير شكل خفيه الكود ابحث عن الكود الا بالون الاحمر  #F2F2F2

ثم غير بالون المناسب الى مدونتك

ثم حفظ القالب وان شاء الله سوف يتم تنسيق الكود دخل الموضوع


لا تنسو تعليقاتكم

اولا احب ان اشكر الاستاذ عبد الغفور صاحب مدونة كنبيوتر 
واشكر الاستاذ عثمان صاحب معهد خبراء بلوجر 

للمساعدة على عمل التنسيق 

وبفضل الله تعاله تم عمل الموضوع 

بشكل جميع

مبروك الاضافة.

 و اى مشكلة يرجى ابلاغى بها عن طريق التعليق على الموضوع. 

الثلاثاء، 4 سبتمبر 2012

اضافة سلج فى مدونتك بشكل متحرك وجميل فى بلوجر 2013

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

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



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

.1 اذهب للوحة التحكم
2. تخطيط
3.عناصر الصفحة
4. اضف اداة
6.اختار  Html/Javascript

 هذا هو الكود

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


 الكود الاول

اللون الاحمر




الكود الثانى  اللون الازرق


الكود الثالث  اللون الاخضر

الكود الرابع  اللون الاسمر وهذا اخر الكود اذا حبيت لون معين اضف تعليقاتك وسوف احضرلك الكود المناسب لمدونتك



اختار الشكل المناسب لمدونتك 

ربما ان الممكن ان تضح كل الالون ما فى مانع 

ارجو قد استفدو من هذا الموضوع


والسلام عليكم ورحمه الله












Copyright @ 2013 الـــــــمــدونـــــــة الاســـــــــلامــــــــيـــــــة .