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

بسم الله الرحمان الرحيم

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

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

مع تغير ما باللون الأحمر إلى صفحاتك الإجتماعية

وما باللون الأخضر إلى عدد متابعيك

وقم بالحفظ والمعاينة

<div class="widget-content">

<div class="suive">

        <h1>إنضم لأزيد من<b>34.557</b> متابع!</h1>

     <div class="icone">

         <a target="_blank" href="https://www.facebook.com/pages/pikpokmoho/619984274714124?ref=hl"><img src="http://2.bp.blogspot.com/-xFQAwddvVdM/T-hX0Pnqo2I/AAAAAAAAAo0/9P8eIbznJd0/s1600/icoface.png" /></a>

       

         <a target="_blank" href="https://twitter.com/pikpok7"><img src="http://3.bp.blogspot.com/-UrJHfK4k2gw/T-hX0toltII/AAAAAAAAAo4/sR5Dq2J6LM4/s1600/icotw.png" /></a>

       

         <a target="_blank" href="http://www.youtube.com/user/pikpokmoho"><img src="http://3.bp.blogspot.com/-N88E40EVbkk/T-hX1Xy3JoI/AAAAAAAAApA/lMme3Vo1GDY/s1600/icoyoutube.png" /></a>

<a target="_blank" href="http://feeds.feedburner.com/blogspot/OgUfL

"><img src="http://2.bp.blogspot.com/-I6Q-gPcmN7Y/T-pCH9eSjsI/AAAAAAAAAqw/TWURFHnGEww/s1600/48.png" /></a>

        

     </div>

   

</div>

<style media="screen" type="text/css">

.suive{

 width:270px;

 height:123px;

 background: #FFFFFF; /* 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:13px;

 font-family:Arial;

 font-weight:500;

 color:#828181;

 text-align:center;

 padding:10px;

 margin:0;

}

.suive h1 b{

 color:#ff9000;

}

.suive .icone{

 height:28px;

 padding-right:36px;

}

.suive .icone a img{

 float:right;

 margin-left:14px;

 -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>