اضافة رسائل التنبيه في الموقعك
نعلم جميعًا أن المشاركة أو المحتوى هو ملك أي مدونة. إذا كان لديك محتوى أكثر جودة ، فهناك فرصة للحفاظ على تفاعل القراء مع مدونتك. لكن معظمنا نكتب محتوى أكبر بتصميم رتيب. لإنشاء محتوى مثالي ، يجب عليك استخدام الرسومات والاقتباسات واختبار التمييز وأهم من ذلك تقسيم المقالة الكبيرة إلى فقرة صغيرة. هذا يعطي مقالتك مظهرًا جديدًا ولا يشعر القراء بإزعاج لقراءة مقالة كبيرة.
أثناء كتابة تدوينات المدونة ، غالبًا ما نستخدم رسائل مختلفة مثل التحديثات والتنبيه والإشعار والمعلومات والتحذير والخطأ وما إلى ذلك. لكننا لا نستخدم أي أداة تمييز للرسائل ؛ نتيجة لذلك ، لا يلاحظ القراء أو يوليون أي اهتمام خاص لرسائلك. لذلك نحن بحاجة إلى إيلاء اهتمام خاص لتطوير تلك الرسائل المميزة.
من خلال إضافة لون ونص منفصلين ، يمكننا جعله أكثر جذبًا لقراء المدونة. وسيحبون قراءة المحتوى الخاص بك بطاقة كاملة. لهذا السبب ، سأشارك مجموعات من رسائل التنبيه الخاصة برسالة الإشعار لإضفاء اللمسات الأخيرة على المحتوى الخاص بك ، وستتمكن من زيادة المشاركة بعد النشر بنسبة 30٪ أكثر. صدقني!
فيديو شرح
طريقة التركيب
- اولان نتوجة الي المظهر ثم احرير او تعديل HTML ثم تقوم بالبحث عن /head وتقوم بوضع الكود فوقة اي قبلة .
<link href = '// netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel = 'stylesheet' />- توجة الي المظهر ثم تعديل HTML ثم قم بالبحث عن /b:skinوقم بوض الكود فوقة.
.bstext{color:#FFF;margin-bottom:15px;border-radius:3px;padding:10px}
.bssuccess{background-color:#AA5CB8}
.bsalert{background-color:#5BA5DE}
.bswarning{background-color:#C619CC}
.bsupdate{background-color:#1D89E5}
.bsinfo{background-color:#18A8AA}
.bserror{background-color:#d9534f}
.headertext{font-size:16px;background-color:rgba(0,0,0,0.30);padding:8px 10px;margin:-10px;margin-bottom:10px}
.headertext > .fa{margin-right:5px}
.bloggerspice {overflow: hidden;}
الان اختار الشكل التالي وضع الكود فى المكان الذي تريدة.
<div class="bloggerspice bsupdate bstext" icon="info-circle" title="Update message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-bullhorn"></i>Update message</div>
This is a Sample Message for Update Box.</div>
</div><div class="bloggerspice bsalert bstext" icon="info-circle" title="Alert message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-cut"></i>Alert message</div>
This is a Sample Message for Alert Box. </div>
</div><div class="bloggerspice bssuccess bstext" icon="check-circle" title="Success message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-check-circle"></i>Success message</div>
This is a Sample Message for Success Box. </div>
</div><div class="bloggerspice bswarning bstext" icon="exclamation-triangle" title="Warning message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-exclamation-triangle"></i>Warning message</div>
This is a Sample Message for Warning Box. </div>
</div><div class="bloggerspice bsinfo bstext" icon="info-circle" title="Info message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-info-circle"></i>Info message</div>
This is a Sample Message for Info Box. </div>
</div><div class="bloggerspice bserror bstext" icon="exclamation-circle" title="Error message">
<div class="message-wrapper">
<div class="headertext">
<i class="fa bloggerspice-icon fa-exclamation-circle"></i>Error message</div>
This is a Sample Message for Error Box. </div>
</div>تحذيرلا يسمح باخذ المحتوي والا سوف يتم التبليغ عنك وسيتم حذف المقالة من طرف بلوجر بدون اخبارك
تعليقات
إرسال تعليق