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

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

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

تطبيق هاته الإضافة ماعليك فعله هو الذهاب إلىblogger تم  لوحة تحكم مدونتك تم قم بالضغط على التخطيط ثم إضافة أداة HTML /JAVA SCRIPT وتقوم بوضع هذا الكود :
<div class="widget-content">
<div class="suive">
        <h1>إنضم لأزيد من<b>100.83</b> متابع!</h1>
    
     <div class="icone">
    
         <a target="_blank" href="http://facebook.com/th3prc"><img src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicnyBFijDCbPdH7Ce_qOJNmhaDXv2YVkku20nFrsG0d2ulAX_l9Xi4p7K9Nv-SqNh_vhlHPFEb66gZIxtTYgoKYyhlWKR39NO3kpqmmbLliE-CCzdsj2u5iq56AnduqgADJ4ThNInxhyE/s1600/icoface.png" /></a>
        
         <a target="_blank" href="http://twitter.com/pro"><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/xxxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvTR377yZAXQYmKlA9Ln9y9Xih1FQV_S38VSgoj0S2MUa7b_uw4LwVtn4FQdKYNVoLnrFZY-4i7PWoTNOCanLIrtPfrUYsJv-ktLuVn-nE-BDHJgCs7at8c-8BCDc0iLzap6O6j2MUcj0/s1600/icoyoutube.png" /></a>
<a target="_blank" href="http://feedburner.google.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9OUyNmC2_9siyrgMgEb4tnzQoGQMdnrxqsQajgR_NNQ6IvZZwp6bhEeBMrhQn0lwC1XTXM3VAR1X5ED5vA7bZTi6exDS00CwcowHGNi6CMMkKH9DJ8yN9Gmr8nMSAxYg_VTsDK717drM/s1600/48.png" /></a>
        
     </div>
    
</div>
<style media="screen" type="text/css">
.suive{
 width:300px;
 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: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>
قم بتغييرالروابط باللون الأحمر إلى روابطك
غير ما باللون اصفر إلى عدد متابعينك
تم حفظ أداة

Posted in: اضافة بلوجر