404
الصفحة او الكلمة التي تبحث (ي) عنها لا يوجد ما يطابقها

السبت، 4 فبراير، 2017

إضافة صندوق للأوسام داخل المواضيع لمدونات بلوجر

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



شرح التركيب للإضافة


  • الإضافه بسيطه وتتمثل فى ثلاث أكواد أولأ كود CSS
  • والذى سوف تقوم بوضعه فوق هذه الوسم]]></b:skin>فى مدونتك


kbd {
  position: relative;
  color: #FFFFFF;
  background-color: #7986CB;
  margin: 0 5px 0 5px;
  padding: 0 5px 4px 5px;
  border-radius: 2px;
  line-height: 14px;
}
kbd:before {
  position: absolute;
  content: 'اضغط مرتين لتحديد';
  display: table;
  bottom: 40px;
  left: 0;
  background: #7986CB;
  color: #fff;
  padding: 4px;
  border-radius: 2px;
  font-size: 75%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  z-index: 2;
  transition: all .3s;
  height: 25px;
  line-height: 11px;
}


  • الأن مع الكود الثانى هو كود الـ js
  • والذى سوف تقوم بوضعه فوق الوسم</body>فى مدونتك
  • وبعد ذلك تقوم بحفظ القالب ونمر للكود الثالث


<script type='text/javascript'>
//<![CDATA[
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("kbd"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
//]]>
</script>


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


<kbd>ضع الوسم هنا</kbd>


  • وهذه الصورة توضح وكيفية وضع الكود فى الموضوع




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


وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله 

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


مواضيع أخر من المدونة

شارك الموضوع ليستفيد الجميع

هناك 14 تعليقًا:

ياريت لو رابط للمعاينة

سلام اخي انا املك مدونة عندم اتوجه الى اتسميات تبدء مملوءت بل اخطا شهد اخي مل حل
didi1993full2.blogspot.com

أخي اصلح الخطأ في الاقسام :
دروش و شروحات

مرحبا بعودتك وقالب حجميييل وموضوع قوي وجهود تشكر عاليها

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

أنا افضل أخى الكريم أن تكون لإضافات بلوجر
ولكن تم وضع قسم دروش و شروحات ايضا

هذه القالب أخى به الكثير من المشاكل
وعليك تغيير أفضل لك

شكرا لك أخى الكريم
تشرفة بمرورك

افضل قالب حاليا على الانترنت واشكرك على الشروحات المفيدة جدا ولكن هل يمكن صنع قوالب جديدة لا مدونتى لها قالب سئ وانا لا اطمئن اللا لقوالب الجميله شاهد القالبhttps://dragon90000.blogspot.com.eg/

يمكنك أستخدام قالب نسيم سوف يكون جيدا جدا لمدونتك

عندي مشكلة و محتاجك ضروري

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

إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم
جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر