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

السلام عليكم ورحمته الله وبركاته اهلاٌ وسهلاٌ بكم أعضاء موقعنا الكرام تدوينة جديدة سوف نشرح كيفية استخدام مكتبة الأيقونات الخطية Fontawesome ما معنى كلمة خطية بمعنى أدق هى تعتبر ايقونات ولكن لا تكن هيئة صور الذى نراها بل هى عبارة عن ايقونات فى هيئة خطوط يتم تطبيق على نفس خصائص الخطوط الذى توجد فى الويب فى حالة عمل Zoom على المتصفح لم تتأثر جودة الصورة على عكس كبير فى حالة عمل تكبير فى الصور التقليدية يتم تشويه  شكل الصورة وتغيرها الى مربعات (pixels)
وهذا هو الذى يميز هذة المكتبة Fontawesome فى هذا المقال سنشرح هذة المكتبة بالكامل مع المميزات التى توجد بها أولاٌ يجب عليك الدخول الى موقعهم الرئيسى FontAwesome.io إذا أردت تركيب هذة المكتبة فى موقعك يجب عليك الإشتراك فى المكتبة عن طريق إدخال البريد الإلكترونى الخاص بك فى موقعهم.

سوف يرسلو لك على حسابك الذى تم ادخاله من قبلك انت وهو عبارة عن سكربت يتم تركيبه فى أكواد موقعك فوق وسم <head/>
بمجرد تركيبك للسكربت ستصبح  المكتبة كاملاٌ بجميع الأيقونات والمميزات التى تمتلكها المكتبة سوف تكون متاحة لك كاملاٌ
قبل ان نعرف كيف يتم اضافة الأيقونات يجب عليك انت تعرف ان مطورى المكتبة قد صمموا 675 أيقونة فى شتى المجالات يجب إذا اردت تركيب ايقونة فى موقعك فتصفح هذة الصفحة واختر الأيقونة التى تعجبك وإضغط عليها .






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



فستضع كود الhtml الذى تم نسخه قبل العنصر المراد ظهور الأيقونة قبله وستجد الأيقونة قد ظهرت بنجاح هذا كان توضيع للطريقة الأولى عن طريق Html يوجد طريقة اخرى عن طريق Before,After تعتبر من العناصر المزيفة بإمكانك إستخدامها فى طريقة الcss وسنشرح بالتفصيل كيفية عملها, كما سترى فى الصورة اسفل كود صغير هذا يسمى Uniqe Code تعنى كود فريد من نوعه يستخدم فى الbefore,After.

ثم يجب عليك تعديل المعرف الذى تم أخذه كما شرحنا فى الصورة من قبل ثم بدل كلمة Example  بالمعرف الخاص بك ثم ضع Uniqe Code الخاص بالأيقونة هنا من ضمن الأكواد

.Example:before{
content:"/f14a";
color:#FFF;
display:inline-block;
font-family:'fontAwesome'
}

ملحوظة : لا تقم بحذف علامة باك سلاش (/)  

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

تركيب أداة إشترك فى القائمة البريدية بشكل إحترافى وجميل v2 | الإصدار الثانى

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

شرح أداة اشترك فى القائمة البريدية 

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

ثانياٌ: بعد ضغط الزائر على كلمة إشترك سينبثق له واجهة أمامه سيقوم  بكتابة كود التأكيد الألى ReCaptha حتى يتحقق منه وبعد ذلك يضغط على Complete Subscription Request وسيتم توضيع ذلك من خلال الصورة التوضحية .

ثالثاٌ: وبعد ذلك سيتم اشتراك الزائر فى الخلاصة البريدية الخاصة بموقعك وسيتم ارسال له إشعار كامل + اللينك الخاص بالتدوينة فى صندوق الرسائل الإلكترونية ومبروك لك وللزائر وتكون انت اكتسبت المتابعين .

شرح تركيب أداة إشترك فى القائمة البريدية

يجب عليك اولاٌ وضع كود الأستايل الخاص بالأداة Css ويتم وضعه فوق وسم 

]]></b:skin>

.follow-by-email-inner input{width:100%;border:1px solid #365899;font-size:16px ;text-align:center;padding:10px;font-family:Mahdi-font;border-radius: 3.5px;font-weight: 500;font-size: 17.9px;}
input.follow-by-email-address {line-height: 23px;font-family: Mahdi-Font;width: 313px;}
.follow-by-email-inner:before {content: "أدخل بريدك الإلكترونى الأن للحصول على جميع المقالات الحصرية فى التقنية ولاتنسى التأكيد بعد الإشتراك";text-align: center;margin-bottom: 10px;display: -webkit-inline-box;font-weight: 500;font-size: 16px;color: #365899;}.follow-by-email-inner td{width:100%;display:block}.follow-by-email-submit{color:#fff;margin-top:5px;border:0!important;background: #365899;border-radius:2px;cursor:pointer}
.follow-by-email-submit:hover{background:#365899}
#FollowByEmail1 .widget-title h2 {color: #365899;}
#FollowByEmail1 .widget-title h2:after{content:"\f003";font-family:FontAwesome;background-color: #CF000F;}
#FollowByEmail1 .widget-title h2::before {background-color: #CF000F;}
#ContactForm1 {display: none;}

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

يجب عليك البحث عن وسم </body>

<div id='subscribe-css'>
<p class='subscribe-note'><span>إشترك</span> <span class='itatu'> فى </span>النشرة البريدية</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=masrawy-web' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=masrawy-web&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='masrawy-web'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='ضع بريدك الأكلترونى هنا'/><input class='subscribe-css-email-button' title='' type='submit' value='إشترك'/></form>
</div>
</div>
</div>

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

كيفية تركيب صندوق إقتباس بشكل جذاب وإحترافى 2017

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

شرح تركيب صندوق الإقتباس

يلزم عليك ان يوجد فى قليك مكتبة الأيقونات وهيا Fontawesome وسنتطرق اليها فى مقال اخر إن شاء الله ماعلينا

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

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

ثم بعد ذلك نأتى لتركيب إستايل صندوق الإقتباس أولا إذهب لقالب ثم تحرير Html ثم إضغط Crtl+f من لوحة المفاتيح لفتح مربع البحث ثم ابحث عن

/b:skin

وضع الأكواد الخاصة بالتنسق فوقه

blockquote{
  background:#45405D;
  color:#fff;
  width:80%;
  padding:20px 60px;
  border-radius:5px;
  font-size:15px;
  max-width:290px;
  border:5px solid #2d9961;
  text-align:left;
  white-space: pre-line;
  overflow:auto;
  font-family: 'Kurale', serif;
}
blockquote:before{
  content: "\f1cb";
  padding: 4px 60px;
  position: relative;
  top: -17px;
  left: 70px;
  font-family: fontawesome;
  font-size: 35px;
  background: #2D9961;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 13px;
 
}

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

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

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

مميزات قالب تقنى v3 

1. متوافق مع جميع الأجهزة اللوحية (إختبار)
2. صديق لمحركات البحث 
3. الوان ذات مريحة للعين
4. ذات تصميم أنيق وعصرى 
5. سلايدر شو إحترافى ومتجاوب
6. سلايدر شو جانبى جميل
7. خطوط عربية حديثة
8. يوجد به أفضل الإضافات
9. مبنى على HTML5&CSS3
10. خاصية إقرء المزيد بشكل احترافى
11. قائمة منسدلة 
12. أماكن فارغة لإعلانات ادسنس
13. ترقيم الصفحات بشكل احترافى 
14. فوتر مكون من ثلاث اعمدة
15. اضافة اشترك فى القائمة البريدية
16. اضافة متابعتنا على الشبكات الإجتماعية
17. تنسيق الخطوط والعناوين بداخل المقال بشكل احترافى
18. ازرار التواصل الإجتماعى
19. أرشيف المدونة الإلكترونية
20. أيقونات بجانب أقسام السيدبار
21. والمزيد

تحميل القالب

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

لتحميل القالب كاملا Top4top

تحميل الملف اضغط للتحميل

لتحميل القالب كاملا File Upload

تحميل الملف اضغط للتحميل