شرح طريقة وضع نص داخل صورة بإستعمال كود خفيف

السلام عليكم ورحمة الله وبركاته 
اهلا بكم اعضاء وزوار ومتابعي الموقع 
اليوم اقدم لكم درس تحت عنوان 
شرح طريقة وضع نص داخل صورة بإستعمال كود خفيف

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

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

مثال للمعاينة

و الآن طريقة التركيب :

الطريقة هناك طريقتان بإمكانك وضع الكود التالي كإضافة أداة هتمل/جافا سكربت من تصميم أو وضع الكود في الموضوع بالدخول إلي تحرير html

و كل ما عليك فعله هو وضع النص ورابط الصورة

<div dir="rtl" style="text-align: right;" trbidi="on">
<div style="text-align: center;">

</div>
<div style="color: red; text-align: center;">
<style type="text/css">
div.background
  {
  width:500px;
  height:250px;
  background:url(هنا نضع رابط الصورة) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style></div>
<div style="color: red; text-align: center;">

</div>

<div class="background" style="color: red; text-align: center;">
<div class="transbox">
النص هنا</div>
</div>
</div>

فلا تبخل علينا ب تعليق وشكرا على المشاهدة الطيبة 

Posted in: بلوجر