السلام عليكم ورحمة الله وبركاته
اليوم طريقة إضافة أداة الموقع الجتمعية كمتل محترف الحاسوب كلمة في صورة يشمل فيسبوك،يوتيوب،تويتر ،خلصة بشكل جميل هدا أداة كل معليك سوى توجه الى بلوجر تم إلى لوحة تحكم مدونتك وتقوم بالضغط على التخطيط ثم على إضافة أداة ثم بعد ذلك تختار html/java script وتقوم بوضع هذا الكود هى هو الكود
----------------------------------------------------------------------------------------------------------
<div class="widget-content">
<div class="suive">
<h1>
إنضم لأزيد من<b>
34.557</b>
متابع</h1>
<div class="icone">
<a target="_blank" href="
http://facebook.com/pro.barmgg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtE8ymJQzm8D_cbrQKQdboPWbO5ItRwS_FT9O3NYRDPol2CpGgeWgIOioaK-VlKJA-_LF9WsE_wVC0xba0edbwJmiOA3oiIbYPKtnLaldvpxhAU2xTmuc_tTHxDrRrDmvpq6zfwlrkTbM/s1600/icoface.png" /></a>
<a target="_blank" href="
http://twitter.com/nsifdin"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAin0xr6ZXezVMzvt2OhaPTrpKwugt_Va6HVymGfX74jvu34BujSQCDVCNRzV5S_pOfI7UbCMeGMF2a5IiOYALtr8LxcpaVSgFe3ZH7tJ11h6mgF1VB5NyaEQ7Db09Q_lh5YX5bW8dhg/s1600/icotw.png" /></a>
<a target="_blank" href="
http://www.youtube.com/user/barmgg?feature=mhee"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTrHi4nJIMcs6_nL4yiXVdltOnXVgUZ-ym5ZSXRDVoJ-6oQfLJc1gNun6xa2MfBilS_sNbPxV25tsk5LCy7z_8I9B1jrYKo2kUgJuDqOrSFerAIq8C0l8pxhbzQSEtMtQicbUCKJ0Lyl0/s1600/icoyoutube.png" /></a>
<a target="_blank" href="http://feedburner.google.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI34sHs5Ez0EJGmcniZ4eBvRgcBT1Co7yRWRCIQYm4jc1I-9e8NnPn_L58uA_6krcBJMJshQC7TzZm66bA_feZ7GgRUhKyYtZwaIpvEKkKum2x7P6-zSdQT7FHyW1ye3XNb08WyyI9m_M/s1600/48.png" /></a>
</div>
</div>
<style media="screen" type="text/css">
.suive{
width:300px;
height:123px;
background: #000; /* 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%,#fffff), 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>
