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

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

<div class="widget-content">
<div class="suive">

        <h1>إنضم لأزيد من<b> 1032 </b>متابع </h1>
     
     <div class="icone">
     
         <a target="_blank" href="http://www.facebook.com/418836291540460"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOb1RUPYCEbdba9hY19eVOrCwipalaHR8MeVWD55ccB_znB3_4SA8Fc7tgYvMGReGswtCSuhjOQ8SK63PLc-n6gu7sWwcTE78f26XKsIX921b4Ex8pZY1tXDnsKS0i116iCd09ZdgqSQ/s1600/icoface.png" /></a>
         
         <a target="_blank" href="https://twitter.com/Mr_Akhatar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfg-eCoBVL3bBQFeZ5DewsFW1XyyDBp3TEsEi-4J2xjN36JwBPY_TmwjQE_JXxap7iW3eoo4kqk8FbbXpoJVr91Bt8xPwKfiDeVHroRAPJyAZOCCzNTCt4y9b-AyGPLySkQTQr40RpPBQ/s1600/icotw.png" /></a>
         
         <a target="_blank" href="http://www.youtube.com/geekHasaN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7uO-75MGEewnclaTS_ZOcRPosGVZCBo4sUdDNVDChNb2iNuNkfr5SPAqGkeXkELDJHM1Wc7WakOTBux0f2D0VZXi4mzzUK6yAevpOQ7Lc9qR2o0lErMJBU_HetdkNetFO-drJ9vByRc/s1600/icoyoutube.png" /></a>

<a target="_blank" href="http://feeds.feedburner.com/AKhatar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu0WrASkJIcrcvYTZYCmdfHGVs87P907FNEoG7CE4mdPzzCzYXdOP8_ys4LN92Rv6ju9y1ZYNGTayoKBumsyH6-usUQUChO82owp1m5HbFEqgECe_4jrKFz7zJfZ1XmQhjT-X3LaLeBOk/s1600/48.png" /></a>
         
     </div>
     
</div>

<style media="screen" type="text/css">
.suive{
width:300px;
height:123px;
background: #f3f2f2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMGQwZDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f3f2f2 0%, #d0d0d0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f2f2), color-stop(100%,#d0d0d0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3f2f2 0%,#d0d0d0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3f2f2 0%,#d0d0d0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3f2f2 0%,#d0d0d0 100%); /* IE10+ */
background: linear-gradient(top,  #f3f2f2 0%,#d0d0d0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f2f2', endColorstr='#d0d0d0',GradientType=0 ); /* IE6-8 */
border-radius:5px;
}

.suive h1{
font-size:22px;
font-family:Arial;
font-weight:500;
color:#828181;
text-align:center;
padding:10px;
margin:0;
}

.suive h1 b{
color:#ff9000;
}

.suive .icone{
height:42px;
padding-right:40px;
}
.suive .icone a img{
float:right;
margin-left:20px;
-webkit-transition: margin 0.2s ease-in-out;
    -moz-transition: margin 0.2s ease-in-out;
-o-transition: margin 0.2s ease-in-out;
-ms-transition: margin 0.2s ease-in-out;
transition: margin 0.2s ease-in-out;
}
.suive .icone a img:hover{
margin-top:-3px;
}

</style>
</div>

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

شاركها !

توصل بمواضيعنا على ايميلك

جميع الحقوق محفوظة Net Professional ©2010-2017 |

Privacy-Policy - سياسة الخصوصية |