كيفية اضافة صندوق للوسم داخل المواضيع بلوجر - كوليكا ويب | هدفنا تطوير الويب العربي

صفحات المدونة

    Social Items

كوليكا ويب | هدفنا تطوير الويب العربي

و تقديم كل ماهو جديد و كل ما يخص بلوجر.


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

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

الإضافه بسيطه ثلاث أكواد أولأ كود 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>


والكود سوف تجده داخل الجمله وهكذا سوف تقوم بوضعه فى موضوعك.
مبروك عليك الاضافة



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


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

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

الإضافه بسيطه ثلاث أكواد أولأ كود 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>


والكود سوف تجده داخل الجمله وهكذا سوف تقوم بوضعه فى موضوعك.
مبروك عليك الاضافة



تحميل التعليقات

تابعنا عبر البريد الالكتروني

الاشعارات

Disqus Logo