إضافة التهنئة برمضان مبارك بلوجر

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

مميزات إضافة التهنئة ب رمضان مبارك بلوجر

1. سريعة
2.  خالية من أكواد جافا سكريبت
3.  أنيقة
4.  شفافة بحيت لا تأتر على محتوى
5.  متجاوب مع أجهزة حاسوب و الهواتف

معاينة

محتوي إضافة التهنئة ب رمضان مبارك بلوجر

ملف css 

  <style>.najiri-rmdn {
    position: fixed;
    width: auto;
    height: auto;
    z-index: 9999;
    top: 10%;
    right: 10px;
    background: linear-gradient(135deg,#e91e634d 0,#ffbf0082 100%);
    padding: 5px 0;
    border-radius: 8px;
    box-shadow: 5px 5px 5px -5px #000;
}
.najiri-svg-rmdn svg{
  width:50px;
  height:50px;
  float:right;
}
.najiri-rmdn-c {
  z-index: 99999;
  position: relative;
  margin: 0 5px;
}

.najiri-rmdn-c h3 {
    margin: 0;
    padding: 5px 0 5px 0;
    line-height: 16px;
    color: #000;
    text-align: right;
}


.najiri-rmdn-c p {
    color: #FFF;
    margin: 0;
    padding: 0;
    text-align: right;
}


@media (min-width: 320px) and (max-width: 480px) {
  
  .najiri-rmdn {width: 95% !important;
  }
 
  
}
</style>

ملف html

<div class="najiri-rmdn">
  <div class="najiri-rmdn-c">
    <div class="najiri-svg-rmdn"><svg id="Layer_3" enable-background="new 0 0 64 64" height="512" viewbox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m49.23 32.398c7.525-12.928-1.092-29.613-16.092-30.369-.377-.019-.756-.029-1.138-.029s-.761.01-1.138.029c-15 .756-23.617 17.441-16.092 30.369l17.23 29.602z" fill="#a0a8b2"/><circle cx="32" cy="22" fill="#c7e2fb" r="16"/><path d="m20.38 32.977c11.938-.44 21.699-9.763 23.365-21.816-2.923-3.166-7.096-5.161-11.745-5.161-8.837 0-16 7.163-16 16 0 4.255 1.672 8.111 4.38 10.977z" fill="#ebf7fe"/><path d="m35.16 25.888c-3.918 0-7.093-3.433-7.093-7.668 0-1.151.241-2.239.662-3.219-3.317 1.025-5.729 4.137-5.729 7.819 0 4.518 3.63 8.18 8.107 8.18 3.849 0 7.065-2.709 7.893-6.339-1.107.773-2.423 1.227-3.84 1.227z" fill="#f2c351"/><path d="m37.5 13 1.082 2.304 2.418.37-1.75 1.793.413 2.533-2.163-1.196-2.163 1.196.413-2.533-1.75-1.793 2.418-.37z" fill="#f2c351"/><g><path d="m50.383 11.934c-3.502-6.461-9.93-10.537-17.195-10.904-.787-.039-1.586-.039-2.377 0-7.264.367-13.691 4.443-17.193 10.904-3.598 6.637-3.49 14.476.287 20.966l16.356 28.1h-14.261v2h32v-2h-14.261l16.356-28.1c3.777-6.49 3.885-14.329.288-20.966zm-18.383 48.078-16.366-28.117c-3.424-5.883-3.521-12.988-.258-19.008 3.166-5.843 8.974-9.528 15.534-9.859.362-.018.725-.028 1.09-.028s.728.01 1.088.027c6.562.331 12.37 4.017 15.536 9.859 3.263 6.02 3.166 13.125-.258 19.008z"/><path d="m32 5c-9.374 0-17 7.626-17 17s7.626 17 17 17 17-7.626 17-17-7.626-17-17-17zm0 32c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.729 15-15 15z"/><path d="m39.559 23.832c-.342-.231-.791-.229-1.131.009-.981.685-2.111 1.047-3.268 1.047-3.36 0-6.094-2.991-6.094-6.668 0-.976.195-1.926.581-2.826.153-.357.085-.772-.176-1.062s-.668-.401-1.038-.286c-3.848 1.188-6.433 4.715-6.433 8.774 0 5.062 4.085 9.18 9.106 9.18 4.266 0 7.912-2.927 8.868-7.116.092-.404-.073-.822-.415-1.052zm-8.453 6.168c-3.919 0-7.106-3.221-7.106-7.18 0-2.468 1.219-4.684 3.171-5.985-.069.456-.104.918-.104 1.385 0 4.779 3.631 8.668 8.094 8.668.671 0 1.334-.089 1.977-.263-1.266 2.062-3.51 3.375-6.032 3.375z"/><path d="m41.151 14.686-1.891-.289-.855-1.821c-.165-.352-.517-.576-.905-.576s-.74.224-.905.575l-.855 1.821-1.891.289c-.37.057-.678.315-.797.671s-.029.747.232 1.016l1.397 1.433-.332 2.034c-.062.378.099.758.411.979s.727.244 1.06.058l1.68-.928 1.68.928c.15.083.317.124.483.124.202 0 .404-.062.576-.183.312-.221.473-.601.411-.979l-.332-2.034 1.397-1.433c.262-.269.352-.66.232-1.016s-.426-.613-.796-.669zm-2.617 2.084c-.222.228-.322.546-.271.859l.082.5-.361-.199c-.15-.083-.316-.125-.483-.125s-.333.042-.483.125l-.361.199.082-.5c.051-.313-.05-.632-.271-.859l-.391-.4.494-.076c.329-.05.612-.262.754-.563l.177-.376.177.376c.142.302.425.514.754.563l.494.076z"/></path></path></path></path></g></path></path></path></circle></path></g></svg></div>
    <h3>رمضان كريم</h3>
    <p>رمضان كريم وكل عام وانتم بالف خير وصحة وسلامة يارب العالمين شكرا لكم </p>
  </div>
</div>

طريقة إضافة التهنئة ب رمضان مبارك بلوجر

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

<div class="najiri-rmdn">
  <div class="najiri-rmdn-c">
    <div class="najiri-svg-rmdn"><svg id="Layer_3" enable-background="new 0 0 64 64" height="512" viewbox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m49.23 32.398c7.525-12.928-1.092-29.613-16.092-30.369-.377-.019-.756-.029-1.138-.029s-.761.01-1.138.029c-15 .756-23.617 17.441-16.092 30.369l17.23 29.602z" fill="#a0a8b2"/><circle cx="32" cy="22" fill="#c7e2fb" r="16"/><path d="m20.38 32.977c11.938-.44 21.699-9.763 23.365-21.816-2.923-3.166-7.096-5.161-11.745-5.161-8.837 0-16 7.163-16 16 0 4.255 1.672 8.111 4.38 10.977z" fill="#ebf7fe"/><path d="m35.16 25.888c-3.918 0-7.093-3.433-7.093-7.668 0-1.151.241-2.239.662-3.219-3.317 1.025-5.729 4.137-5.729 7.819 0 4.518 3.63 8.18 8.107 8.18 3.849 0 7.065-2.709 7.893-6.339-1.107.773-2.423 1.227-3.84 1.227z" fill="#f2c351"/><path d="m37.5 13 1.082 2.304 2.418.37-1.75 1.793.413 2.533-2.163-1.196-2.163 1.196.413-2.533-1.75-1.793 2.418-.37z" fill="#f2c351"/><g><path d="m50.383 11.934c-3.502-6.461-9.93-10.537-17.195-10.904-.787-.039-1.586-.039-2.377 0-7.264.367-13.691 4.443-17.193 10.904-3.598 6.637-3.49 14.476.287 20.966l16.356 28.1h-14.261v2h32v-2h-14.261l16.356-28.1c3.777-6.49 3.885-14.329.288-20.966zm-18.383 48.078-16.366-28.117c-3.424-5.883-3.521-12.988-.258-19.008 3.166-5.843 8.974-9.528 15.534-9.859.362-.018.725-.028 1.09-.028s.728.01 1.088.027c6.562.331 12.37 4.017 15.536 9.859 3.263 6.02 3.166 13.125-.258 19.008z"/><path d="m32 5c-9.374 0-17 7.626-17 17s7.626 17 17 17 17-7.626 17-17-7.626-17-17-17zm0 32c-8.271 0-15-6.729-15-15s6.729-15 15-15 15 6.729 15 15-6.729 15-15 15z"/><path d="m39.559 23.832c-.342-.231-.791-.229-1.131.009-.981.685-2.111 1.047-3.268 1.047-3.36 0-6.094-2.991-6.094-6.668 0-.976.195-1.926.581-2.826.153-.357.085-.772-.176-1.062s-.668-.401-1.038-.286c-3.848 1.188-6.433 4.715-6.433 8.774 0 5.062 4.085 9.18 9.106 9.18 4.266 0 7.912-2.927 8.868-7.116.092-.404-.073-.822-.415-1.052zm-8.453 6.168c-3.919 0-7.106-3.221-7.106-7.18 0-2.468 1.219-4.684 3.171-5.985-.069.456-.104.918-.104 1.385 0 4.779 3.631 8.668 8.094 8.668.671 0 1.334-.089 1.977-.263-1.266 2.062-3.51 3.375-6.032 3.375z"/><path d="m41.151 14.686-1.891-.289-.855-1.821c-.165-.352-.517-.576-.905-.576s-.74.224-.905.575l-.855 1.821-1.891.289c-.37.057-.678.315-.797.671s-.029.747.232 1.016l1.397 1.433-.332 2.034c-.062.378.099.758.411.979s.727.244 1.06.058l1.68-.928 1.68.928c.15.083.317.124.483.124.202 0 .404-.062.576-.183.312-.221.473-.601.411-.979l-.332-2.034 1.397-1.433c.262-.269.352-.66.232-1.016s-.426-.613-.796-.669zm-2.617 2.084c-.222.228-.322.546-.271.859l.082.5-.361-.199c-.15-.083-.316-.125-.483-.125s-.333.042-.483.125l-.361.199.082-.5c.051-.313-.05-.632-.271-.859l-.391-.4.494-.076c.329-.05.612-.262.754-.563l.177-.376.177.376c.142.302.425.514.754.563l.494.076z"/></path></path></path></path></g></path></path></path></circle></path></g></svg></div>
    <h3>رمضان كريم</h3>
    <p>رمضان كريم وكل عام وانتم بالف خير وصحة وسلامة يارب العالمين شكرا لكم </p>
  </div>
</div>
  <style>.najiri-rmdn {
    position: fixed;
    width: auto;
    height: auto;
    z-index: 9999;
    top: 10%;
    right: 10px;
    background: linear-gradient(135deg,#e91e634d 0,#ffbf0082 100%);
    padding: 5px 0;
    border-radius: 8px;
    box-shadow: 5px 5px 5px -5px #000;
}
.najiri-svg-rmdn svg{
  width:50px;
  height:50px;
  float:right;
}
.najiri-rmdn-c {
  z-index: 99999;
  position: relative;
  margin: 0 5px;
}

.najiri-rmdn-c h3 {
    margin: 0;
    padding: 5px 0 5px 0;
    line-height: 16px;
    color: #000;
    text-align: right;
}


.najiri-rmdn-c p {
    color: #FFF;
    margin: 0;
    padding: 0;
    text-align: right;
}


@media (min-width: 320px) and (max-width: 480px) {
  
  .najiri-rmdn {width: 95% !important;
  }
 
  
}
</style>

وأخير ضع لنا تعليق تشجعنا على إستمرار و رمضان كريم و سلام عليكم ورحمة الله وبركاته

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام