كيفية إضافة مشغل صوت Mp3 مع قائمة تشغيل في بلوجر

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

إضافة كود رمضان كريم

كل عام وأنتم بخير وأدعو الله لي ولكم أن يبلغنا شهر رمضان المبارك ويتقبل منا ومنكم صالح الأعمال، ويرحم أبي وأمواتنا وأموات المسلمين جميعاً اللهم أمين، وبحق تلك الأيام المباركة اللهم برحمتك الواسعة اكفنا شر ما أهمنا وأغمنا وعلى الإيمان الكامل والكتاب والسنة جمعيًا توفنا وأنت راضى عنا.

اللهم بلغنا رمضان وتقبل اللهم صيامنا وقيامنا وارزق المسلمين في كل مكان برحمتك الواسعة. اللهم ارزقنا صيام رمضان ايمانا واحتسابا، اللهم بلغنا رمضان، اللهم بلغنا رمضان، أياما عديدة، واعوامًا مديدة، وصل اللهم على سيدنا النبي محمد وعلى اله وصحبه اجمعين، وسلم تسليمًا كثيرًا.

بمناسبة حلول هذا الشهر المبارك شهر رمضان، أحببت أن أشارك معكم سكريبت رسالة تهنئ بها زوار مدونتك وتدعو لهم بأن يبلغنا وإياكم شهر رمضان ويبارك لنا ويُعنا على صيامه اللهم أمين.

خصائص كود تهنئة شهر رمضان

الكود خفيف ولا يؤثر على تصفح الموقع، تظهر رسالة تهنئة حلول شهر رمضان للزائر مرة وحدة فقط، تظهر الرسالة بنصف الشاشة وبها زر الإغلاق ليستطيع الزائر بعد مشاهدتها الإغلاق بسهولة. ويتميز كود رسالة شهر رمضان المبارك بالاتي.

• الكود خفيف ولا يؤثر على المدونة.
• يمكنك تخصيص الكود بسهولة دون ان يكون لديك خبرة.
• خاصية box-shadow: animation الوان متراكبة تظهر بشكل متوالي حول صندوق الرسالة.
• يمكنك تغير صورة الرسالة والتعديل عليها.
• زر إغلاق بسيط لغلق رسالة التهنئة.

خطوات تركيب كود رمضان كريم

ملحوظة مهمة: قبل البدء في تغير أي شيء في أكواد القالب، قم بعمل نسخة احتياطية حتى يمكنك الرجوع لما سبق أذا قمت بشيء خطأ.

الخطوة الأولى

1. سجل الدخول لمدونتك وانتقل إلى لوحة معلومات المدونة.
2. انقر فوق علامة التبويب "المظهر".
3. سترى الأن خيارات تخصيص السمة. على الجانب الأيسر من زر التخصيص، سترى سهم مثلث منسدل، انقر فوقه. ستحصل على قائمة الخيارات. انقر فوق "تحرير HTML".
4. الآن سترى ملف أكواد القالب. اضغط على "Ctrl + F" في الكيبورد وابحث عن وسم الإغلاق <head/> ثم اضغط Enter.
5. الآن، انسخ الكود الوارد أدناه والصقه فوق علامة الإغلاق <head/>.

الكـــــCODــــود

 /* Alkoptantech */
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
    
<style>
#welcome-message {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: #0000000;
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKHdsWkrT3UQxG3SaSewJm0natRP8Tv2Fm-GVoxskxTiAczZcxlKB2J4S4KOqucTFNYTxdXdiIVqfHqzrOs3y-_6O2iq21496Jfy_DonIdWyyQe6n8rYZAibtrvDNpfBo_wBOFMK5Ae4BmyU1o1lPnkhfFXM_DfkSEkUAMhXUVr2dwp_lvoGKIilGKQ/s1200     /%D8%B5%D9%84%D9%88%D8%A7-%D8%B9%D9%84%D9%89-%D8%B1%D8%B3%D9%88%D9%84-%D8%A7%D9%84%D9%84%D9%87%EF%B7%BA-%20%D8%B1%D9%85%D8%B6%D8%A7%D9%86%20%D9%A1%D9%A4%D9%A4%D9%A4%20-%20%D8%A7%D9%84%D9%82%D8%A8%D8%B7%D8%A7%D9%86%20%D8%AA%D9%83----2010101.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 20px;
  border: 2px solid #000;
  box-shadow: 0 0 10px #5af, 0 0 20px #3251d6, 0 0 25px #f00, 0 0 30px #0f0, 0 0 35px #00f, 0 0 40px #f0f;
  padding: 20px
  height: 100%;
  width: 550px;
  text-align: center;
  font-family: 'Tajawal', Arial, sans-serif;
  color: #fff;
  font-size: 16px;
  transition: background-color .2s ease-in-out;
  animation: flicker 1s infinite;
}

@keyframes flicker {
   0%, 100% {
   box-shadow: 0 0 10px #00FFFF;
   }
   50% {
   box-shadow: 0 0 10px #5af, 0 0 20px #3251d6, 0 0 25px #f00, 0 0 30px #0f0, 0 0 35px #00f, 0 0 40px #f0f;}
}

  #welcome-message h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #4285f4;
    text-shadow: 1px 1px #ddd;
  }

  #welcome-message p {
    margin-bottom: 20px;
  }

  #welcome-message button {
    background-color: #f49a42;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color .2s ease-in-out;
  }

  #welcome-message button:hover {
    background-color: #9d09b8;
  }

  #welcome-message .ramadan-lantern {
    display: inline-block;
    width: 100%;
    height: 100px;
    background-image: url('');
    background-repeat: no-repeat;
    background-size: contain;
    background-Position: center;
    margin-bottom: 10px;
  }

  #welcome-message .mosque-shape {
    text-align: center;
    width: 100%;
    height: 60px;
    background-image: url('');
    background-repeat: no-repeat;
    background-size: contain;

    background-position: center bottom;
    margin-top: 90px;
    padding: 20px;
  }   
</style>    
 /* Alkoptantech */

الخطوة الثانية

أبحث عن <body/> وفي الغالب ستجده في أسفل أكواد القالب، انسخ الكود الوارد أدناه والصقه فوقة مباشرةً.

الكـــــCODــــود

    <b:include name='themeFunctions'/>
    <svg class='hide'>
      <b:include name='themeIcons'/>
    </svg>
    <b:if cond='!data:view.isLayoutMode'><b:include name='customeIcons'/></b:if>
    <b:if cond='!data:view.isLayoutMode'><b:include name='customeAnalytics'/></b:if>

 <b:if cond='data:view.isHomepage'>
  <div id='welcome-message'>
    <div class='ramadan-lantern'/>
    <h2/>
    <p/>
    <div class='mosque-shape'/>
    <button id='close-btn'>إغلاق</button>
  </div>

  <script>
    $(document).ready(function() {
      if (localStorage.getItem('welcome-message') !== 'closed') {
        $('#welcome-message').fadeIn(1000);
      }

      $('#close-btn').click(function() {
        $('#welcome-message').fadeOut(1000);
        localStorage.setItem('welcome-message', 'closed');
      });
    });
  </script>
</b:if>
    

للتعديل على الكود و تغير صورة العرض ابحث في الكود الأول عن "background-image" وقم باستبدال رابط الصورة بصورة أخرى مع مراعاة العرض والارتفاع المناسب.

إيضاً يمكنك حذف الصورة تماماً ووضع نص ترحيبي أبحث في الكود الثاني عن welcome-message وقم بوضع النص المراد ظهوره في العنوان وأيضاً يمكنك وضع أيقونات أو صور صغيرة بالكود الأول أبحث عن background -image: url وضع روابط الصور.

وفي النهاية..... كل عام والأمة الإسلامية بخير وبأفضل حال اللهم أمين.

معاينة رسالة التهنئة

تعديل المقال