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


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

اللَّهُ لا إِلَهَ إِلا هُوَ الْحَيُّ الْقَيُّومُ لا تَأْخُذُهُ سِنَةٌ وَلا نَوْمٌ لَهُ مَا فِي السَّمَأوَاتِ وَمَا فِي الأَرْضِ مَنْ ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلا بِإِذْنِهِ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ وَلا يُحِيطُونَ بِشَيْءٍ مِنْ عِلْمِهِ إِلا بِمَا شَاءَ وَسِعَ كُرْسِيُّهُ السَّمَأوَاتِ وَالأَرْضَ وَلا يَؤودُهُ حِفْظُهُمَا وَهُوَ الْعَلِيُّ الْعَظِيمُ


و الآن طريقة التركيب :
الطريقة هناك طريقتان بإمكانك وضع الكود التالي كإضافة أداة هتمل/جافا سكربت من تصميم أو وضع الكود في الموضوع بالدخول إلي تحرير 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>

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

اللَّهُ لا إِلَهَ إِلا هُوَ الْحَيُّ الْقَيُّومُ لا تَأْخُذُهُ سِنَةٌ وَلا نَوْمٌ لَهُ مَا فِي السَّمَأوَاتِ وَمَا فِي الأَرْضِ مَنْ ذَا الَّذِي يَشْفَعُ عِنْدَهُ إِلا بِإِذْنِهِ يَعْلَمُ مَا بَيْنَ أَيْدِيهِمْ وَمَا خَلْفَهُمْ وَلا يُحِيطُونَ بِشَيْءٍ مِنْ عِلْمِهِ إِلا بِمَا شَاءَ وَسِعَ كُرْسِيُّهُ السَّمَأوَاتِ وَالأَرْضَ وَلا يَؤودُهُ حِفْظُهُمَا وَهُوَ الْعَلِيُّ الْعَظِيمُ


و الآن طريقة التركيب :
الطريقة هناك طريقتان بإمكانك وضع الكود التالي كإضافة أداة هتمل/جافا سكربت من تصميم أو وضع الكود في الموضوع بالدخول إلي تحرير 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>
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
salah eddine