مرحبا بكم متابعين و زوار كوليكا ويب اليوم موضوع جديد سوف يفيد كثيرا من لديه مدونات بلوجر وهو إضافة صندوق للأوسام داخل المواضيع لمدونات بلوجر وهذه الإضافة سوف تستخدمها كما أستخدمها أنا فى مدونتى الأن بعد التحديث لكى تضع به وسم أو كود قصير حتى يستطيع متابعيك مشاهد الكود بشكل أفضل وايضا أذا كنت تستخدم كود مانع النسخ فى مدونتك فهذا الكود سوف يفيدك كثيرا ♥.
تركيب اللإضافة
الإضافه بسيطه ثلاث أكواد أولأ كود 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>
والكود سوف تجده داخل الجمله وهكذا سوف تقوم بوضعه فى موضوعك.
مبروك عليك الاضافة ♥
