مدونة مو للمعلوميات: أفضل مجموعة أكواد براويز ملونة متحركة للعناوين والصور متفاعلة وملفتة للنظر

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

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

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

وقد يسأل البعض

ما هو أفضل كود برواز للعناوين والصور؟

ما هي الإضافة المجانية التي يمكنني من خلالها عمل برواز لعنوان ما أو صورة؟

أين أجد كود مجاني لعمل ألوان وإطارات ملونة متحركة حول العنوان والصورة؟

وستجد بكامل المقالة جميع ما كنت تبحث عنه وتسأل بل وأكثر فقط تابع بقية المقال

وسنقسم المقالة إلى 4 مجموعات كل مجموعة 3 أكواد متتاليين فتجد كل مجموعة بالشكل الأول وهو بخلفية بيضاء وبالشكل الثاني وهو بخلفية ملونة والكود والشكل الثالث بصورة وهكذا بقية المجموعات الأخرى وكل مجموعة هي بالفعل كود خاص بها وفريد من نوعه ويقدم نتيجة وتجربة خاصة به تتغير عن المجموعات الأخرى لتختار ما يناسبك منها وما يناسب موقعك ومقالتك.

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

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

معاينة الكود 1

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

كود رقم 1

	<br/>
	<div class="border-gradienta6b8"><span class="zindex853a6b8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" target="_blank">أفضل المواقع لأداة إرسال تنبيهات للمشتركين بالخدمة بجديد موقعك من مقالات ومنتجات</a></span></div>
	<br/>

    <style>

.border-gradienta6b8 {
    width: auto;
    height: auto;
    background: #d7d7d7;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}

.border-gradienta6b8::after{
    content: '';
    position: absolute;
    background:#fff;
    inset: 1px;
    border-radius: 15px;
}
.border-gradienta6b8::before{
    content: '';
    position: absolute;
    width: 100%;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 101%;
    animation: rotBGimga6b8 3s linear infinite;
    transition: all 0.2s linear;
}
.zindex853a6b8 , .zindex853a6b8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    background:#fff;
    line-height:35px;
}
.zindex853a6b8 a:hover{
    color:darkblue;
    transition:300ms;
}
.zindex853a6b8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.005;
}


@keyframes rotBGimga6b8 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

    </style>

معاينة الكود 2

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

كود رقم 2

	<br/>
	<div class="border-gradientg6h8"><span class="zindex853g6h8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" target="_blank">أفضل المواقع لأداة إرسال تنبيهات للمشتركين بالخدمة بجديد موقعك من مقالات ومنتجات</a></span></div>
	<br/>

    <style>

.border-gradientg6h8 {
    width: auto;
    height: auto;
    background: #d7d7d7;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}

.border-gradientg6h8::after{
    content: '';
    position: absolute;
    background:linear-gradient(40deg,#fffdf5,#f5fbff);
    inset: 1px;
    border-radius: 15px;
}
.border-gradientg6h8:hover::after{
    background:linear-gradient(40deg,#f5fbff,#fffdf5);
    transition:300ms;
}
.border-gradientg6h8::before{
    content: '';
    position: absolute;
    width: 100%;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 101%;
    animation: rotBGimgg6h8 3s linear infinite;
    transition: all 0.2s linear;
}
.zindex853g6h8 , .zindex853g6h8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    line-height:35px;
}
.zindex853g6h8 a:hover{
    color:darkblue;
    transition:300ms;
}
.zindex853g6h8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.005;
}


@keyframes rotBGimgg6h8 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

    </style>

معاينة الكود 3

كود رقم 3

	<br/>
	<div class="border-gradientm6n8"><span class="zindex853m6n8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" alt="MOMethods" title="MOMethods" target="_blank"><img class="picao583m6n8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjIwo9yk-sWqKlCaI9_Ji26nDLg-mVmoJvOv0dk2WAW93i1CgPTQV76c6iDFCjhehv25vAGM99R7cY-gM1n7BYsUChi2aMZ1oihCaJkhJmdCfDIYHacJeMEBlvHD-T09Yy87dCQYpLcOFGkc2rhkHh6tAlvFS5qs3uyKGyMHYry4Y5RvYfunIViVSJbex/s1024/Mo-Methods.webp" alt="MOMethods" /></a></span></div>
	<br/>

    <style>

.border-gradientm6n8 {
    width: auto;
    height: auto;
    background: #d7d7d7;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}

.border-gradientm6n8::after{
    content: '';
    position: absolute;
    background:#fff;
    inset: 3px;
    border-radius: 15px;
}
.border-gradientm6n8::before{
    content: '';
    position: absolute;
    width: 100%;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 101%;
    animation: rotBGimgm6n8 3s linear infinite;
    transition: all 0.2s linear;
}
.zindex853m6n8 , .zindex853m6n8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    background:#fff;
    line-height:35px;
}
.zindex853m6n8 a:hover{
    color:darkblue;
    transition:300ms;
}
.zindex853m6n8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.003;
}
.picao583m6n8{
    width:100%;
    height:auto;
    margin:auto;
    padding:0px;
}


@keyframes rotBGimgm6n8 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

    </style>

معاينة الكود 4

كود إضافة الأسئلة المتكررة بأكثر من شكل وطريقة خفيف جداً متجاوب مع الموبايل

كود رقم 4

	<br/>
	<div class="border-gradientc6d8"><span class="zindex853c6d8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" target="_blank">أفضل المواقع لأداة إرسال تنبيهات للمشتركين بالخدمة بجديد موقعك من مقالات ومنتجات</a></span></div>
	<br/>

    <style>

.border-gradientc6d8 {
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  border-image: linear-gradient(var(--anglec6d8), #743ad5, #d53a9d) 1;
  animation: 2s rotatec6d8 linear infinite;
    width: auto;
    height: auto;
    background: #fff;
    color:#000;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}

.zindex853c6d8 , .zindex853c6d8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    background:#fff;
    line-height:35px;
}

.zindex853c6d8 a:hover{
    color:darkblue;
    transition:300ms;
}
.border-gradientc6d8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.002;
}

@keyframes rotatec6d8 {
  to {
    --anglec6d8: 360deg;
  }
}

@property --anglec6d8 {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

    </style>

معاينة الكود 5

كود جدول المواصفات للموبايل بالصورة متجاوب مع الموبايل متفاعل مع الزائر

كود رقم 5

	<br/>
	<div class="border-gradienti6j8"><span class="zindex853i6j8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" target="_blank">أفضل المواقع لأداة إرسال تنبيهات للمشتركين بالخدمة بجديد موقعك من مقالات ومنتجات</a></span></div>
	<br/>

    <style>

.border-gradienti6j8 {
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  border-image: linear-gradient(var(--anglei6j8), #743ad5, #d53a9d) 1;
  animation: 2s rotatei6j8 linear infinite;
    width: auto;
    height: auto;
    background:linear-gradient(40deg,#fffdf5,#f5fbff);
    color:#000;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}
.border-gradienti6j8:hover {
    background:linear-gradient(40deg,#f5fbff,#fffdf5);
    transition:300ms;
}

.zindex853i6j8 , .zindex853i6j8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    line-height:35px;
}

.zindex853i6j8 a:hover{
    color:darkblue;
    transition:300ms;
}
.border-gradienti6j8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.002;
}

@keyframes rotatei6j8 {
  to {
    --anglei6j8: 360deg;
  }
}

@property --anglei6j8 {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

    </style>

معاينة الكود 6

كود رقم 6

	<br/>
	<div class="border-gradiento6p8"><span class="zindex853o6p8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" alt="MOMethods" title="MOMethods" target="_blank"><img class="picao583o6p8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjIwo9yk-sWqKlCaI9_Ji26nDLg-mVmoJvOv0dk2WAW93i1CgPTQV76c6iDFCjhehv25vAGM99R7cY-gM1n7BYsUChi2aMZ1oihCaJkhJmdCfDIYHacJeMEBlvHD-T09Yy87dCQYpLcOFGkc2rhkHh6tAlvFS5qs3uyKGyMHYry4Y5RvYfunIViVSJbex/s1024/Mo-Methods.webp" alt="MOMethods" /></a></span></div>
	<br/>

    <style>

.border-gradiento6p8 {
  border: 3px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  border-image: linear-gradient(var(--angleo6p8), #743ad5, #d53a9d) 1;
  animation: 2s rotateo6p8 linear infinite;
    width: auto;
    height: auto;
    background: #fff;
    color:#000;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}

.zindex853o6p8 , .zindex853o6p8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    background:#fff;
    line-height:35px;
}

.zindex853o6p8 a:hover{
    color:darkblue;
    transition:300ms;
}
.border-gradiento6p8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.003;
}
.picao583o6p8{
    width:100%;
    height:auto;
    margin:auto;
    padding:0px;
}

@keyframes rotateo6p8 {
  to {
    --angleo6p8: 360deg;
  }
}

@property --angleo6p8 {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

    </style>

معاينة الكود 7

كود أقسام الموقع حديث متجاوب مع الموبايل وبأكثر من شكل

كود رقم 7

	<br/>
	<div class="gradient-bordere6f8" id="boxe6f8"><span class="zindex853e6f8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" target="_blank">أفضل المواقع لأداة إرسال تنبيهات للمشتركين بالخدمة بجديد موقعك من مقالات ومنتجات</a></span></div>
	<br/>

    <style>

.zindex853e6f8 , .zindex853e6f8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    background:#fff;
    line-height:35px;
}

.zindex853e6f8 a:hover{
    color:darkblue;
    transition:300ms;
}

#boxe6f8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.gradient-bordere6f8 {
  --borderWidthe6f8: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidthe6f8);
  width: auto;
  height: auto;
  background: #fff;
  color:#6a6acd;
  text-align:center;
  margin:auto;
  padding:10px;
  box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}
.zindex853e6f8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.002;
}
.gradient-bordere6f8:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidthe6f8));
  left: calc(-1 * var(--borderWidthe6f8));
  height: calc(100% + var(--borderWidthe6f8) * 2);
  width: calc(100% + var(--borderWidthe6f8) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidthe6f8));
  z-index: -1;
  animation: animatedgradiente6f8 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradiente6f8 {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

    </style>

معاينة الكود 8

إضافة وضع البريد الإلكتروني والإسم لتجرب حظك بالعجلة الدوارة وربح الجوائز والهدايا

كود رقم 8

	<br/>
	<div class="gradient-borderk6l8" id="boxk6l8"><span class="zindex853k6l8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" target="_blank">أفضل المواقع لأداة إرسال تنبيهات للمشتركين بالخدمة بجديد موقعك من مقالات ومنتجات</a></span></div>
	<br/>

    <style>

.zindex853k6l8 , .zindex853k6l8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    line-height:35px;
}

.zindex853k6l8 a:hover{
    color:darkblue;
    transition:300ms;
}

#boxk6l8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.gradient-borderk6l8 {
  --borderWidthk6l8: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidthk6l8);
  width: auto;
  height: auto;
  background:linear-gradient(40deg,#fffdf5,#f5fbff);
  color:#6a6acd;
  text-align:center;
  margin:auto;
  padding:10px;
  box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}
.gradient-borderk6l8:hover {
  background:linear-gradient(40deg,#f5fbff,#fffdf5);
  transition:300ms;
}
.zindex853k6l8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.002;
}
.gradient-borderk6l8:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidthk6l8));
  left: calc(-1 * var(--borderWidthk6l8));
  height: calc(100% + var(--borderWidthk6l8) * 2);
  width: calc(100% + var(--borderWidthk6l8) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidthk6l8));
  z-index: -1;
  animation: animatedgradientk6l8 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes animatedgradientk6l8 {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

    </style>

معاينة الكود 9

كود رقم 9

	<br/>
	<div class="gradient-borderq6r8" id="boxq6r8"><span class="zindex853q6r8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" alt="MOMethods" title="MOMethods" target="_blank"><img class="picao583q6r8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjIwo9yk-sWqKlCaI9_Ji26nDLg-mVmoJvOv0dk2WAW93i1CgPTQV76c6iDFCjhehv25vAGM99R7cY-gM1n7BYsUChi2aMZ1oihCaJkhJmdCfDIYHacJeMEBlvHD-T09Yy87dCQYpLcOFGkc2rhkHh6tAlvFS5qs3uyKGyMHYry4Y5RvYfunIViVSJbex/s1024/Mo-Methods.webp" alt="MOMethods" /></a></span></div>
	<br/>

    <style>

.zindex853q6r8 , .zindex853q6r8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    background:#fff;
    line-height:35px;
}

.zindex853q6r8 a:hover{
    color:darkblue;
    transition:300ms;
}

#boxq6r8 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.gradient-borderq6r8 {
  --borderWidthq6r8: 4px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidthq6r8);
  width: auto;
  height: auto;
  background: #fff;
  color:#6a6acd;
  text-align:center;
  margin:auto;
  padding:10px;
  box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
}
.zindex853q6r8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.003;
}
.gradient-borderq6r8:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidthq6r8));
  left: calc(-1 * var(--borderWidthq6r8));
  height: calc(100% + var(--borderWidthq6r8) * 2);
  width: calc(100% + var(--borderWidthq6r8) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidthq6r8));
  z-index: -1;
  animation: animatedgradientq6r8 3s ease alternate infinite;
  background-size: 300% 300%;
}
.picao583q6r8{
    width:100%;
    height:auto;
    margin:auto;
    padding:0px;
}


@keyframes animatedgradientq6r8 {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

    </style>

معاينة الكود 10

أفضل مجموعة أكواد إعلانية نصية بكافة المقاسات الشائعة حديثة ومتجاوبة مع الموبايل

كود رقم 10

	<br/>
	<div class="border-gradients6t8"><span class="zindex853s6t8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" target="_blank">أفضل المواقع لأداة إرسال تنبيهات للمشتركين بالخدمة بجديد موقعك من مقالات ومنتجات</a></span></div>
	<br/>

    <style>

.border-gradients6t8 {
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  border-image: linear-gradient(var(--angles6t8), #743ad5, #d53a9d) 1;
  animation: 2s rotates6t8 linear infinite;
    width: auto;
    height: auto;
    background: #fff;
    color:#000;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
    --angles6t8: 0deg;
    /* … */
    border-image: linear-gradient(var(--angles6t8), green, yellow) 1;
    animation: 10s rotates6t8 linear infinite;
}

.zindex853s6t8 , .zindex853s6t8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    background:#fff;
    line-height:35px;
}

.zindex853s6t8 a:hover{
    color:darkblue;
    transition:300ms;
}
.border-gradients6t8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.002;
}

@keyframes rotates6t8 {
  to {
    --angles6t8: 360deg;
  }
}

@property --angles6t8 {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

    </style>

معاينة الكود 11

أفضل مجموعة أكواد أزرار حديثة وأنيقة بمؤثرات رائعة لموقعك ومقالاتك

كود رقم 11

	<br/>
	<div class="border-gradientu6v8"><span class="zindex853u6v8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" target="_blank">أفضل المواقع لأداة إرسال تنبيهات للمشتركين بالخدمة بجديد موقعك من مقالات ومنتجات</a></span></div>
	<br/>

    <style>

.border-gradientu6v8 {
  border: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  border-image: linear-gradient(var(--angleu6v8), #743ad5, #d53a9d) 1;
  animation: 2s rotateu6v8 linear infinite;
    width: auto;
    height: auto;
    background:linear-gradient(40deg,#fffdf5,#f5fbff);
    color:#000;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
    --angleu6v8: 0deg;
    /* … */
    border-image: linear-gradient(var(--angleu6v8), green, yellow) 1;
    animation: 10s rotateu6v8 linear infinite;
}
.border-gradientu6v8:hover {
    background:linear-gradient(40deg,#f5fbff,#fffdf5);
    transition:300ms;
}

.zindex853u6v8 , .zindex853u6v8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    line-height:35px;
}

.zindex853u6v8 a:hover{
    color:darkblue;
    transition:300ms;
}
.border-gradientu6v8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.002;
}

@keyframes rotateu6v8 {
  to {
    --angleu6v8: 360deg;
  }
}

@property --angleu6v8 {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

    </style>

معاينة الكود 12

كود رقم 12

	<br/>
	<div class="border-gradientw6x8"><span class="zindex853w6x8"><a href="https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html" alt="MOMethods" title="MOMethods" target="_blank"><img class="picao583w6x8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjIwo9yk-sWqKlCaI9_Ji26nDLg-mVmoJvOv0dk2WAW93i1CgPTQV76c6iDFCjhehv25vAGM99R7cY-gM1n7BYsUChi2aMZ1oihCaJkhJmdCfDIYHacJeMEBlvHD-T09Yy87dCQYpLcOFGkc2rhkHh6tAlvFS5qs3uyKGyMHYry4Y5RvYfunIViVSJbex/s1024/Mo-Methods.webp" alt="MOMethods" /></a></span></div>
	<br/>

    <style>

.border-gradientw6x8 {
  border: 3px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
  border-image: linear-gradient(var(--anglew6x8), #743ad5, #d53a9d) 1;
  animation: 2s rotatew6x8 linear infinite;
    width: auto;
    height: auto;
    background: #fff;
    color:#000;
    text-align:center;
    margin:auto;
    padding:10px;
    box-shadow: 3px 3px 8px #d7d7d7, 3px -3px 8px #d7d7d7;
    --anglew6x8: 0deg;
    /* … */
    border-image: linear-gradient(var(--anglew6x8), green, yellow) 1;
    animation: 10s rotatew6x8 linear infinite;
}

.zindex853w6x8 , .zindex853w6x8 a{
    transition: all 0.3s ease-in-out;
    font-family: tahoma;
    z-index: 5;
    color:#6a6acd;
    text-decoration:none;
    font-weight:bold;
    font-size:20px;
    background:#fff;
    line-height:35px;
}

.zindex853w6x8 a:hover{
    color:darkblue;
    transition:300ms;
}
.border-gradientw6x8:hover{
    color:darkblue;
    transition:300ms;
    scale: 1.003;
}
.picao583w6x8{
    width:100%;
    height:auto;
    margin:auto;
    padding:0px;
}

@keyframes rotatew6x8 {
  to {
    --anglew6x8: 360deg;
  }
}

@property --anglew6x8 {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

    </style>

وللتعديل على الأكواد الأمر بسيط جداً بالبداية عليك أن تقوم بتغيير العنوان بالكود للعنوان الذي تريد بالبحث عن الجملة

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

ثم تقوم بإستبدالها بالعنوان أو حتى الفقرة التي تريد

وأما عن الكود الذي به صورة فالأمر بسيط ستقوم بالبحث بالكود عن رابط الصورة

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjIwo9yk-sWqKlCaI9_Ji26nDLg-mVmoJvOv0dk2WAW93i1CgPTQV76c6iDFCjhehv25vAGM99R7cY-gM1n7BYsUChi2aMZ1oihCaJkhJmdCfDIYHacJeMEBlvHD-T09Yy87dCQYpLcOFGkc2rhkHh6tAlvFS5qs3uyKGyMHYry4Y5RvYfunIViVSJbex/s1024/Mo-Methods.webp

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

الأن لوضع رابط بدلاً من الرابط الموجود بالكود فقط نقوم بالبحث عن الجملة

https://momethods.blogspot.com/2023/08/best-tool-to-bring-visitors-to-your-site.html

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

target="_blank"

وتقوم بحذفها من الكود

ولتغيير حجم الخط الأمر بسيط للغاية فقط عليك البحث بالكود عن الجملة

font-size:20px;

وتغيير الرقم " 20 " بالزيادة قليلاً لتكبير الحجم أو بالنقصان قليلاً لتصغير الحجم للخط

الأمر الأخر الكود يعمل على خط التاهوما وإن أردت تغيير نوع الخط بالإضافة لنوع أخر فقط عليك البحث عن الجملة

font-family: tahoma;

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

الأن لم يبقى إلا التعديل على الألوان ولنبدأ بلون العنوان فقط علينا البحث عن الجملة

#6a6acd

وإستبدالها بأي كود ألوان أخر تريد وذلك بالبحث بجوجل عن العبارة " html color picker " وإختيار أي لون تريد من نوع " HEX " وأنصح جداً بأن يكون لون داكن ومناسب ليظهر جيداً وبشكل واضح.

وأما عن تغيير لون العنوان بعد وضع الماوس عليه أو التظليل عليه فقط علينا البحث عن الجملة

darkblue

وستجد الجملة مرتين قم بإستبدالها مرتين أيضاً بأي كود ألوان بالبحث بجوجل عن العبارة " html color picker " وإختيار اللون الذي تريد وأنصح بأن يكون لون داكن أكثر من لون العنوان قبل حالة وضع الماوس عليه.

وبالتعديل هذا سنقوم بتغيير لون الخلفية للعنوان وهي الخلفية الملونة بتدرج وسيكون هذا التغيير فقط بالأكواد رقم 2 و 5 و 8 و 11 فقط نقوم بالبحث عن الجملة

#fffdf5

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

كذلك وبنفس الشكل عليك البحث عن الجملة

#f5fbff

وستجدها مرتين بالكود إستبدالها مرتين كذلك بكود الألوان الذي تريد وأنصح بأن يكون لون فاتح جداً.

الأن نتجه لتعديل ألوان البرواز المتحركة وعن نفسي أنصح بألا تغيرها إلا لو كنت بالفعل تعرف مجموعات ألوان جيدة ومناسبة وستظهر بشكل مناسب لموقعك.

وأول تعديل لألوان البرواز ستكون على المجموعة الأولى للأكواد رقم 1 و 2 و 3 وهي بأن تبحث بالكود عن الجملة

rgb(0, 183, 255)

وتقوم بإستبدالها باللون المناسب وذلك بالبحث بجوجل عن العبارة " html color picker "  وإختيار اللون الذي تريد ولكن في تلك المرة يجب عليك أن تختار اللون من نوع " RGB " الأمر بسيط فقط عليك تغيير الأرقام الموجودة بالخانات بأرقام اللون الجديد فلكل لون 3 خانات وبكل خانة رقم ويجب أن تكون بنفس الترتيب.

وبنفس الطريقة تقوم بالبحث بالكود عن الجملة

rgb(255, 48, 255)

وإستبدال كود الألوان باللون الذي تريد بنفس الطريقة التي تم شرحها من قبل.

الأن سنتجه لتغيير ألوان البرواز بالمجموعة الثانية بالأكواد رقم 4 و 5 و 6 فقط قم بالبحث بالكود عن الجملة

#743ad5

ثم قم بإستبدالها بأي لون تريد بالطريقة المشروحة سابقاً وستجد الكود موجود مرتين لذلك قم بتغيير الكود مرتين كذلك.

وأيضاً بعدها قم بالبحث عن الجملة

#d53a9d

وقم بتغييرها لكود اللون الذي تريد ستجد الكود مرتين وعليك إستبداله مرتين.

وأما عن المجموعة الثالثة من الأكواد وهي أكواد رقم 7 و 8 و 9 فقط إبحث عن الجمل

#f79533

#f37055

#ef4e7b

#a166ab

#5073b8

#1098ad

#07b39b

#6fba82

ثم وبالترتيب تقوم بإستبدال تلك الأكواد للألوان بمجموعة أكواد الألوان التي تناسبك.

ولم يتبقى إلا المجموعة الأخيرة من الأكواد وهي أكواد رقم 10 و 11 و 12 فقط قم بالبحث بالكود عن الجملة

green

وإستبدالها بكود اللون الذي تريد

وبنفس الطريقة تماماً قم مرة أخرى بالبحث عن الجملة

yellow

وبعد ذلك عليك إستبدالها بكود اللون الذي تود.

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

الخلاصة

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