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

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

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

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

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

ما هي أفضل إضافة هيرو للصفحة بخلفية فيديو؟

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

ما هي أفضل إضافة واجهة للمقالة أو صفحة هبوط هيرو بخلفية فيديو؟

وسنقوم بشرح كل ذلك وأكثر في كامل المقالة بإزن الله

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

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

كود رقم 1

    <div id="mvidheropg964" dir="ltr">
      <div id="tmlogo472"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjIwo9yk-sWqKlCaI9_Ji26nDLg-mVmoJvOv0dk2WAW93i1CgPTQV76c6iDFCjhehv25vAGM99R7cY-gM1n7BYsUChi2aMZ1oihCaJkhJmdCfDIYHacJeMEBlvHD-T09Yy87dCQYpLcOFGkc2rhkHh6tAlvFS5qs3uyKGyMHYry4Y5RvYfunIViVSJbex/s1024/Mo-Methods.webp" /></div>
      <video autoplay="" id="hdvidfiv493" loop="" muted="muted" preload="auto">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
            Your browser does not support HTML5 video.
      </video>
      <div id="undbotvid597"></div>
      <div id="btnssbk496">
        <a href="#"><button class="bt901bz">تواصل معنا</button></a>
	<a href="#"><button class="bt901am">تعرف على أهم منتجاتنا</button></a>
      </div>     
      <a class="anchchclr742" href="#" target="_blank"> 
        <div id="vidicnpl">
          <svg class="svg372pl" height="50" viewbox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg>
          <h3 id="vidicttl">شاهد بقية الفيديو</h3>
        </div>
      </a>	
    </div>

<style>

#hdvidfiv493 { 
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    min-width: 100%;
    z-index: -100;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#vidicnpl {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 45px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    text-align: center;
    transition:300ms;
}
#vidicttl {
	font-size: 35px;
	font-weight: 300;
	text-shadow:3px 3px 5px #999 , 3px -3px 5px #999 ;
	animation: fdn951a1  4s 1 ease;
        transition:300ms;
}
#vidicttl:hover {
	transform:scale(1.05);
	text-shadow:3px 3px 5px #fff , 3px -3px 5px #fff ;
}
#vidicnpl:hover {
	color: #0e95ff;
}
#tmlogo472 {
    position: absolute;
    top: 20px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 150px;
    animation: fdn951a1  4s 1 ease;
    transition:300ms;
}
.svg372pl{
    fill:white;
    animation: fdn951a1  4s 1 ease;
    transition:300ms;
    stroke:red;
    stroke-opacity:0.1;
}
.svg372pl:hover{
    fill:#0e95ff;
    transform:scale(1.05);
    stroke:white;
    stroke-opacity:0.5;
}
.svg372pl:hover + #vidicttl{
    text-shadow:3px 3px 5px #fff , 3px -3px 5px #fff ;
}
#mvidheropg964 {
    width: 100%;
    height: 700px;
    position: relative;
    overflow: hidden;
    margin:0;
    padding:0;
    padding-bottom:10px;
}
#undbotvid597 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7%;
	z-index: -99;
	background: transparent;
	background: -webkit-linear-gradient(transparent, #030104);
	background: -moz-linear-gradient(transparent, #030104);
	background: -ms-linear-gradient(transparent, #030104);
	background: -o-linear-gradient(transparent, #030104);
	background: linear-gradient(transparent, #030104);
}
#tmlogo472 img {
    max-height: 120%;
    width: auto;
}
#btnssbk496 {
    position: absolute;
    bottom: 12%;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 70px;
    width: 100%;
    text-align: center;
}
#btnssbk496 img {
    height: 100%;
    width: auto;
    display: inline-block;
    text-align: center;
}
#btnssbk496 a {
    margin-right: 40px;
}
#btnssbk496 a:last-child{
	margin-right: 0;
}
.bt901am{
	background:white;
	font-size:25px;
	border-radius:7px;
	border:2px #0e95ff solid;
	transition:300ms;
	box-shadow:3px 3px 10px #999 , 3px -3px 10px #999 ;
	padding:6px;
	cursor:pointer;
	animation: fdn951a1  4s 1 ease;
        color:#055da3;
}
.bt901am:hover{
	background:#087dd9;
	box-shadow:5px 5px 13px #999 , 5px -5px 13px #999 ;
        color:white;
	border:2px white solid;
	transform:scale(1.05);
}
.bt901bz{
	background:#0e95ff;
	font-size:25px;
	border-radius:7px;
	border:2px white solid;
	transition:300ms;
	box-shadow:3px 3px 10px #999 , 3px -3px 10px #999 ;
	padding:6px;
	color:white;
	cursor:pointer;
	animation: fdn951a1  4s 1 ease;
}
.bt901bz:hover{
	background:#d0ebff;
	box-shadow:5px 5px 13px #999 , 5px -5px 13px #999 ;
        color:#055da3;
	border:2px #0e95ff solid;
	transform:scale(1.05);
}

@-webkit-keyframes fdn951a1 { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
} 
@keyframes fdn951a1 { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
}
.fdn951a1{
    opacity:0;
}
.fdn951a1.go { 
    -webkit-animation-name: fdn951a1; 
    animation-name: fdn951a1; 
}

</style>

معاينة كود رقم 2

كود رقم 2

    <div dir="ltr" id="mvidheropg248">
      <div id="tmlogo4721"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjIwo9yk-sWqKlCaI9_Ji26nDLg-mVmoJvOv0dk2WAW93i1CgPTQV76c6iDFCjhehv25vAGM99R7cY-gM1n7BYsUChi2aMZ1oihCaJkhJmdCfDIYHacJeMEBlvHD-T09Yy87dCQYpLcOFGkc2rhkHh6tAlvFS5qs3uyKGyMHYry4Y5RvYfunIViVSJbex/s1024/Mo-Methods.webp" /></div>
      <video autoplay="" id="hdvidfiv4931" loop="" muted="muted" preload="auto">  
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
    Your browser does not support HTML5 video.
      </video>
      <div id="undbotvid5971"></div><div id="undbotvid5971593lk"></div>
      <div id="btnssbk4961">
        <a href="#"><button class="bt901bz1">تواصل معنا</button></a>
        <a href="#"><button class="bt901am1">تعرف على أهم منتجاتنا</button></a>
      </div>
      <a href="#" target="_blank"> 
        <div id="vidicnpl1">
          <svg class="svg372pl1" height="50" viewbox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg>
          <h3 id="vidicttl1">شاهد بقية الفيديو</h3>
        </div>
      </a>	
    </div>

<style>

#hdvidfiv4931 { 
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    min-width: 100%;
    z-index: -100;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#vidicnpl1 {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 45px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    text-align: center;
    transition:300ms;
}
#vidicttl1 {
	font-size: 35px;
	font-weight: 300;
	text-shadow:3px 3px 5px #999 , 3px -3px 5px #999 ;
	animation: faadin482b2  4s 1 ease;
        transition:300ms;
}
#vidicttl1:hover {
	transform:scale(1.05);
	text-shadow:3px 3px 5px #fff , 3px -3px 5px #fff ;
}
#vidicnpl1:hover {
	color: #0e95ff;
}
#tmlogo4721 {
    position: absolute;
    top: 20px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 150px;
    animation: faadin482b2  4s 1 ease;
    transition:300ms;
}
.svg372pl1{
    fill:white;
    animation: faadin482b2  4s 1 ease;
    transition:300ms;
    stroke:red;
    stroke-opacity:0.1;
}
.svg372pl1:hover{
    fill:#0e95ff;
    transform:scale(1.05);
    stroke:white;
    stroke-opacity:0.5;
}
.svg372pl1:hover + #vidicttl1{
    text-shadow:3px 3px 5px #fff , 3px -3px 5px #fff ;
}
#mvidheropg248 {
    width: 100%;
    height: 700px;
    position: relative;
    overflow: hidden;
    margin:0;
    padding:0;
    padding-bottom:10px;
}
#undbotvid5971 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	z-index: -99;
	background: transparent;
	background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.4));
	background: -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.4));
	background: -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.4));
	background: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.4));
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));

}
#undbotvid5971593lk {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40%;
	z-index: -99;
	background: transparent;
	background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), transparent);
	background: -moz-linear-gradient(rgba(0, 0, 0, 0.4), transparent);
	background: -ms-linear-gradient(rgba(0, 0, 0, 0.4), transparent);
	background: -o-linear-gradient(rgba(0, 0, 0, 0.4), transparent);
	background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);

}
#tmlogo4721 img {
    max-height: 120%;
    width: auto;
}
#btnssbk4961 {
    position: absolute;
    bottom: 12%;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 70px;
    width: 100%;
    text-align: center;
}
#btnssbk4961 img {
    height: 100%;
    width: auto;
    display: inline-block;
    text-align: center;
}
#btnssbk4961 a {
    margin-right: 40px;
}
#btnssbk4961 a:last-child{
	margin-right: 0;
}
.bt901am1{
	background:white;
	font-size:25px;
	border-radius:7px;
	border:2px #0e95ff solid;
	transition:300ms;
	box-shadow:3px 3px 10px #999 , 3px -3px 10px #999 ;
	padding:6px;
	cursor:pointer;
	animation: faadin482b2  4s 1 ease;
        color:#055da3;
}
.bt901am1:hover{
	background:#087dd9;
	box-shadow:5px 5px 13px #999 , 5px -5px 13px #999 ;
        color:white;
	border:2px white solid;
	transform:scale(1.05);
}
.bt901bz1{
	background:#0e95ff;
	font-size:25px;
	border-radius:7px;
	border:2px white solid;
	transition:300ms;
	box-shadow:3px 3px 10px #999 , 3px -3px 10px #999 ;
	padding:6px;
	color:white;
	cursor:pointer;
	animation: faadin482b2  4s 1 ease;
}
.bt901bz1:hover{
	background:#d0ebff;
	box-shadow:5px 5px 13px #999 , 5px -5px 13px #999 ;
        color:#055da3;
	border:2px #0e95ff solid;
	transform:scale(1.05);
}

@-webkit-keyframes faadin482b2 { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
} 
@keyframes faadin482b2 { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
}
.faadin482b2{
    opacity:0;
}
.faadin482b2.go { 
    -webkit-animation-name: faadin482b2; 
    animation-name: faadin482b2; 
}

</style>

معاينة كود رقم 3

كود رقم 3

    <div dir="ltr" id="mvidheropg7462">
      <div id="tmlogo4723"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjIwo9yk-sWqKlCaI9_Ji26nDLg-mVmoJvOv0dk2WAW93i1CgPTQV76c6iDFCjhehv25vAGM99R7cY-gM1n7BYsUChi2aMZ1oihCaJkhJmdCfDIYHacJeMEBlvHD-T09Yy87dCQYpLcOFGkc2rhkHh6tAlvFS5qs3uyKGyMHYry4Y5RvYfunIViVSJbex/s1024/Mo-Methods.webp" /></div>    
      <iframe id="hdvidfiv4933" src="https://www.youtube.com/embed/fC844vyQIPU?autoplay=1&amp;mute=1">
      </iframe>
      <div id="undbotvid5973"></div>
      <div id="btnssbk4963">
        <a href="#"><button class="bt901bz3">تواصل معنا</button></a>
	<a href="#"><button class="bt901am3">تعرف على أهم منتجاتنا</button></a>
      </div>  
      <a href="#" target="_blank"> 
        <div id="vidicnpl3">
          <svg class="svg372pl3" height="50" viewbox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg>
          <h3 id="vidicttl3">شاهد بقية الفيديو</h3>
        </div>
      </a>	
    </div>

<style>

#hdvidfiv4933 { 
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    min-width: 100%;
    z-index: -100;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#vidicnpl3 {
    position: absolute;
    top: 60%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 45px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    text-align: center;
    transition:300ms;
    display:flex;
    justify-content: space-around;
    align-items: center;
}
#vidicttl3 {
	font-size: 35px;
	font-weight: 300;
	text-shadow:3px 3px 5px #999 , 3px -3px 5px #999 ;
	animation: nfdaorn3c  4s 1 ease;
        transition:300ms;
        padding:5px;
}
#vidicttl3:hover {
	transform:scale(1.05);
	text-shadow:3px 3px 5px #fff , 3px -3px 5px #fff ;
}
#vidicnpl3:hover {
	color: #0e95ff;
}
#tmlogo4723 {
    position: absolute;
    top: 20px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 150px;
    animation: nfdaorn3c  4s 1 ease;
    transition:300ms;
}
.svg372pl3{
    fill:white;
    animation: nfdaorn3c  4s 1 ease;
    transition:300ms;
    padding:5px;
    stroke:red;
    stroke-opacity:0.1;
}
.svg372pl3:hover{
    fill:#0e95ff;
    transform:scale(1.05);
    stroke:white;
    stroke-opacity:0.5;
}
.svg372pl3:hover + #vidicttl3{
    text-shadow:3px 3px 5px #fff , 3px -3px 5px #fff ;
}
#mvidheropg7462 {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    margin:0;
    padding:0;
    padding-bottom:10px;
}
#undbotvid5973 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 7%;
	z-index: -99;
	background: transparent;
	background: -webkit-linear-gradient(transparent, #030104);
	background: -moz-linear-gradient(transparent, #030104);
	background: -ms-linear-gradient(transparent, #030104);
	background: -o-linear-gradient(transparent, #030104);
	background: linear-gradient(transparent, #030104);
}
#tmlogo4723 img {
    max-height: 120%;
    width: auto;
}
#btnssbk4963 {
    position: absolute;
    bottom: 12%;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 70px;
    width: 100%;
    text-align: center;
}
#btnssbk4963 img {
    height: 100%;
    width: auto;
    display: inline-block;
    text-align: center;
}
#btnssbk4963 a {
    margin-right: 40px;
}
#btnssbk4963 a:last-child{
	margin-right: 0;
}
.bt901am3{
	background:white;
	font-size:25px;
	border-radius:7px;
	border:2px #0e95ff solid;
	transition:300ms;
	box-shadow:3px 3px 10px #999 , 3px -3px 10px #999 ;
	padding:6px;
	cursor:pointer;
	animation: nfdaorn3c  4s 1 ease;
        color:#055da3;
}
.bt901am3:hover{
	background:#087dd9;
	box-shadow:5px 5px 13px #999 , 5px -5px 13px #999 ;
        color:white;
	border:2px white solid;
	transform:scale(1.05);
}
.bt901bz3{
	background:#0e95ff;
	font-size:25px;
	border-radius:7px;
	border:2px white solid;
	transition:300ms;
	box-shadow:3px 3px 10px #999 , 3px -3px 10px #999 ;
	padding:6px;
	color:white;
	cursor:pointer;
	animation: nfdaorn3c  4s 1 ease;
}
.bt901bz3:hover{
	background:#d0ebff;
	box-shadow:5px 5px 13px #999 , 5px -5px 13px #999 ;
        color:#055da3;
	border:2px #0e95ff solid;
	transform:scale(1.05);
}

@-webkit-keyframes nfdaorn3c { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
} 
@keyframes nfdaorn3c { 
    0% {opacity: 0;} 
    100% {opacity: 1;
        display:block;} 
}
.nfdaorn3c{
    opacity:0;
}
.nfdaorn3c.go { 
    -webkit-animation-name: nfdaorn3c; 
    animation-name: nfdaorn3c; 
}

</style>

التعديل

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

https://www.w3schools.com/html/mov_bbb.mp4

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

mp4

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

fC844vyQIPU

وإستبدالها بكود الفيديو باليوتيوب الخاص بك بالطبع إن كان رابط الفيديو لديك باليوتيوب بالشكل

https://www.youtube.com/watch?v=fC844vyQIPU

فما عليك سوى أخذ الكود بعد علامة يساوي وتستبدله بالكود السابق الأمر سهل

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

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

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

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

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

<a href="#" target="_blank">

وإستبدال العلامة

#

برابط الفيديو الكبير الذي لديك

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

<a href="#">

وتغيير العلامة

#

برابط الزرار الذي تريد سواء بداخل نفس الموقع أو خارجه

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

#0e95ff

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

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

#087dd9

وإستبدالها بكود اللون الذي تريد وبعدها عليك البحث عن الجملة

#055da3

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

#d0ebff

وإستبدالها بكود اللون المناسب لموقعك 

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

700px

وزيادة أو نقصان الرقم 700 قليلاً كما أشرنا وأما بالكود الثالث فعليك البحث عن الجملة

400px

وتغيير الرقم 400 لأي رقم بالزيادة أو النقصان قليلاً أيضاً.

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

الخلاصة

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