راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

إعلان

آخر الأخبار

إعلان

اضافة اشترك بالمدونة تحتوي الاضافة على ازرار التواصل الاجتماعي







إضافة رائعة جدا و مميزة جدا جدا

اضافة اشترك بالمدونة 

تحتوي الاضافة على ازرار التواصل الاجتماعي و جرس تنبيه متحرك للاشتراك بالمدونة


تركيب الاضافة



نذهب الة المظهر و نبحث عن   ]]></b:skin>
نضع الكود التالي فوقه


/* Newsletter */
#ignielNewsletter {/*box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);*/width:100%; height:auto; background:#fff; border-radius:7.5px;display: block; margin:auto; line-height:40px; padding:0px}
#ignielNewsletter .email__ {padding:15px 15px 5px;}
#ignielNewsletter .email span {font-size: 13px;text-align: center;}
#ignielNewsletter .email {margin:auto; color:#777;line-height:29px;}
#ignielNewsletter .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='orange'/%3E%3C/svg%3E") center center / 50px no-repeat;}
#ignielNewsletter .medsos__ {padding:15px 0px; line-height:0px; border-top:1px dotted #cccfe2;}
#ignielNewsletter form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px}
#ignielNewsletter input {padding-left: 15px;width: calc(100% - 35px); height:35px; border:1px solid #cccfe2; border-right:0px; font-size:12px; border-radius:50px 0px 0px 50px;}
#ignielNewsletter button {width:35px; height:35px; margin:0px; padding:0px; background-color:#de0985; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}
#ignielNewsletter button:hover, #ignielNewsletter button:focus {background-color:#f18241;}
#ignielNewsletter button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'></path></svg>") no-repeat; content:''; vertical-align:-3px;}
#ignielNewsletter .medsos {width:100%; text-align:center;}
#ignielNewsletter .medsos svg {width:20px;height:20px;margin-top:7px}
#ignielNewsletter .medsos svg path {fill:#fff}
#ignielNewsletter .medsos a {/*box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4);*/display:inline-block; margin-right:7px; width:35px; height:35px; transition: all ease-in-out 300ms; border-radius:100px;}
#ignielNewsletter .medsos a:last-child {margin-right:0px;}
#ignielNewsletter .medsos a:hover {transform: translate(0px, -10px) scale(1.05);}
#ignielNewsletter .medsos .facebook{background:#3a579a}
#ignielNewsletter .medsos .twitter {background:#00abf0}
#ignielNewsletter .medsos .googleplus {background:#df4a32}
#ignielNewsletter .medsos .youtube {background:#cc181e}
#ignielNewsletter .medsos .instagram {background:#992ebc}
#ignielNewsletter .medsos .codepen {background:#292E34}
.newspaptext {font-size:15px;color: #de0985;font-weight: 600;margin: 10px;text-align:center;}
/*Animasi*/
@-webkit-keyframes ignielRing{
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}
@-moz-keyframes ignielRing{
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}
@keyframes ignielRing{
0% { transform: rotate(0); }
1% { transform: rotate(30deg); }
3% { transform: rotate(-28deg); }
5% { transform: rotate(34deg); }
7% { transform: rotate(-32deg); }
9% { transform: rotate(30deg); }
11% { transform: rotate(-28deg); }
13% { transform: rotate(26deg); }
15% { transform: rotate(-24deg); }
17% { transform: rotate(22deg); }
19% { transform: rotate(-20deg); }
21% { transform: rotate(18deg); }
23% { transform: rotate(-16deg); }
25% { transform: rotate(14deg); }
27% { transform: rotate(-12deg); }
29% { transform: rotate(10deg); }
31% { transform: rotate(-8deg); }
33% { transform: rotate(6deg); }
35% { transform: rotate(-4deg); }
37% { transform: rotate(2deg); }
39% { transform: rotate(-1deg); }
41% { transform: rotate(1deg); }
43% { transform: rotate(0); }
100% { transform: rotate(0); }
}



نذهب الى التخطيط و نضيف اداة جديدة و نضع الكود التالي بداخله


<div id="ignielNewsletter">
<div class="email__">
<div class="email">
<div class="newspaptext">قم بالأشتراك بالمدونة ليصلك كل جديد</div>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=halateck/tkmp&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">
<input name="email" class="email" onblur="if (this.value==&quot;&quot;){this.value=&quot;Contoh: nama@mail.com&quot;;}" onfocus="if (this.value==&quot;Contoh: nama@mail.com&quot;){this.value=&quot;&quot;;}" type="text" value="Contoh: nama@mail.com" />
<input name="uri" type="hidden" value="halateck/tkmp" /> <input name="loc" type="hidden" value="en_US" />
<button type="submit"></button>
</form>
</div>
</div>
<div class="medsos__">
<div class="medsos">
<a class="facebook" title="Facebook" href="https://www.facebook.com/MASUKAN_ID_FACEBOOK" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a>
<a class="twitter" title="Twitter" href="https://twitter.com/MASUKAN_USERNAME_TWITER" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a>
<a class="youtube" title="Youtube" href="https://www.youtube.com/channel/MASUKAN_ID_CHANNEL_YOUTUBE?sub_confirmation=1" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a>
<a class="instagram" title="Instagram" href="https://www.instagram.com/MASUKAN_USERNAME_INSTAGRAM" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a>
</div>
</div>
</div>


التعديلات 



غير halateck/tkmp

ب id الخاص بالفيد بانر و هو موجود مرتين

غير روابط 

https://www.facebook.com/MASUKAN_ID_FACEBOOK
https://twitter.com/MASUKAN_USERNAME_TWITER

و الروابط الباقية بروابط التواصل الخاصة بك






hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان