لسلام عليكم ورحمته الله وبركاته اهلا وسهلا بكم فى التدوينة الثانية فى هذا اليوم سنتطرق الى تركيب إضافة مهمة جداٌ لكل شخص يملك مدونة على بلوجر سواء كان مجالها وهو صندوق إقتباس بشكل جديد وإحترافى BlockQuote وقد تصميمه من قبل زياد مصراوى ووظيفة هذا الصندوق يتم وضع فيه الملاحظات او بعض الأكواد سنأخد مثال حى لكى تصل المعلومة انت كاتب المقال الخاص بك والزائر يعمل على قراءة المقال فأنت تريد ان تلفت أنظار الزائر فتعمل على فعلياٌ على وضعه فى صندوق او اى طريقة او ملحوظة لكى يراها قبل فعل اى شئ لذلك يلزم خصيصاٌ ان يوجد فى مدونتك هذا الصندوق لكى وأيضا يعمل على تنسيق محتوى المقال الخاص بك .
شرح تركيب صندوق الإقتباس
يلزم عليك ان يوجد فى قليك مكتبة الأيقونات وهيا Fontawesome وسنتطرق اليها فى مقال اخر إن شاء الله ماعلينا
إذهب لوسم <head/> يجب عليك وضع رابط مكتبة الأيقونات بالقالب لكى تسمح إستخدام الأيقونات فى قالبك وضع الرابط فوق الوسم
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
ثم بعد ذلك نأتى لتركيب إستايل صندوق الإقتباس أولا إذهب لقالب ثم تحرير Html ثم إضغط Crtl+f من لوحة المفاتيح لفتح مربع البحث ثم ابحث عن
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;
}
ثم اذهب وافعل مشاركة جديدة واضغط على علامة الإقتباس على اى جملة وستظهر معاك الى هنا نكون قد انتهينا من التدوينة ارجو منكم مشاركة التدوينة مع أصدقائكم حتى تعم الفائدة ونفعنا الله بنا وبكم بالثواب والجنة وأكتب تعليق تشجيعى لكى نقدم لكم العديد من المقالات والتدوينات الحصرية على موقعكم مصراوى ويب وسلام الله عليكم أجمعين.
ليست هناك تعليقات:
إرسال تعليق