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

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

يمكن معاينة الاضافة مباشرة عن طريق الضغط هنا

طريقة التركيب :

1. اذهب الى لوحة التخطيط .

2. اختار اضافة اداة جافا سيكربت .

3. اضف فيها الكود التالي :

<style>
span.right {  font-family: 'ge_ssmedium'; background: #3498db;color: #fff;display: block;padding: 15px 20px;text-align: center;font-size: 2rem;border-radius: 10px 10px 0 0;margin: 10px 0 -10px 0;font-weight: 700;}
span.right i {margin: 0 10px 0 0;font-weight: normal;}
.tw-box { margin: 10px 0 10px 0;position:relative;text-align:center;overflow:hidden;height:80px;line-height:80px;background:#3da1ef;transition:opacity 0.2s;border-radius: 0 0 10px 10px}
.tw-box:hover {opacity:0.9;}
.tw-box span{letter-spacing:1px;color:#56a1db;background-color:#fff;position:relative;z-index:1;display:inline-block;line-height:1;font-size:12px;font-family:'ge_ssmedium';padding:.8em 1.6em;margin-right:10px;border-radius:50em;text-transform:uppercase;padding:11px 44px 11px 22px;transition:color .2s,background-color .2s}
.tw-box span:hover{background-color:#328cd3;color:#fff}
.tw-box a {display:block;height:100%;color:#fff;font-size:18px;font-size:1.125rem;font-family:'ge_ssmedium';font-weight:bold;position:relative;border:none;transition: all 0.2s; text-decoration: none;}
.tw-box span svg{position:absolute;right:13px;top:2px;max-width:100%}
.tw-box span:hover svg *{fill:#fff}
@media only screen and (max-width:768px){
.tw-box {height:100px;line-height:100px;}
.tw-box a {font-size:18px;font-size:1.125rem;}}

</style>
<center>
<span class="right">
<span class="eta">دقيقتان من وقتك</span>
<i class="fa fa-clock-o"></i></span>
<div class="tw-box">
<a href="#" rel="nofollow" target="_blank">تابع مدونة شحنة فى تويتر !
<span>
<svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewbox="0 0 32 32" width="32px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
<path d="M24.05,11c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.601-0.6-1.5-1-2.4-1          c-1.8,0-3.3,1.5-3.3,3.3c0,0.3,0,0.5,0.1,0.7c-2.699-0.1-5.1-1.4-6.8-3.4c-0.3,0.5-0.399,1-0.399,1.7c0,1.1,0.6,2.1,1.5,2.7          c-0.5,0-1-0.2-1.5-0.4l0,0c0,1.6,1.1,2.9,2.6,3.2c-0.4,0.3-1,0.3-1.5,0c0.4,1.3,1.6,2.3,3.1,2.3c-1.1,0.9-2.5,1.4-4.1,1.4          c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C23.05,12.3,23.649,11.7,24.05,11z" fill="#56a1db"></path>
</svg>
تابعنا الأن
</span>
</a>
</div>
</center>

• التعديلات اللازمة للتعديل على الرابط  ( ابحث عن # المحددة باللون الاحمر )

الى هنا انتها درسنا لهذا اليوم 

ان واجهتك مشاكل او اردة استفسار فاتركه في تعليق

في أمان الله