اضافة اداة التواصل الاجتماعى على مدونات بلوجر

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

{ السلام عليكم ورحمة الله وبركاته }.

{ اهلا شــباب كيف الحال؟! بخيـر إن شــاء الله }

درس اليوم : بخصوص منصة بلوجر

فى هذه التدوينة أجمع لكم أفضل 3 أدوات تابعنا { مواقع التواصل الاجتماعى }

لمدونات بلوجر غاية فى الروعة

صور من الادوات

أولا تلك الأدوات تضاف فى HTML/JavaScript الموجودة فى التخطيط

الأداة الأولى

<div class="widget-content"><div class="social" style="-webkit-transition: all 0.3s ease-in-out; background-color: #e9e9e9; background-position: initial initial; background-repeat: initial initial; height: 48px; margin-bottom: 5px; text-align: right; width: 300px;"><a href="https://www.facebook.com/internet.programation" style="-webkit-transition: all 0.3s ease-in-out; color: #a72c02; font-family: tahoma; font-size: 12px; line-height: 16px; text-align: start; text-decoration: initial;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbX_R85FjTjDAimg42RTDa7IgPa1uwUZFwmDGJ7Z1bomZeKdEHJiH4BP4GOoRp-VHuDdQYwJl6R546Yl2jQhdVxhWSEWIQuWZ-HyPaaRGzVLUpZHUxEuOnOGL7QS1kfy_cwYZPn_P0luI/s1600/face.png" style="-webkit-transition: all 0.3s ease-in-out; border: none; float: right; position: relative;" /><b style="-webkit-transition: all 0.3s ease-in-out; color: #575757; float: right; font-family: droidkufi-bold, tahoma sans-serif; font-size: 19px; line-height: 47px; padding-left: 10px; padding-right: 16px;">1000</b><span style="-webkit-transition: all 0.3s ease-in-out;  float: right;  line-height: 47px; padding-left: 10px;font-family:droidkufi-bold, tahoma sans-serif;color:#9f9d9d;">معجب على الفيسبوك</span></a></div><div class="social" style="-webkit-transition: all 0.3s ease-in-out; background-color: #e9e9e9; background-position: initial initial; background-repeat: initial initial; height: 48px; margin-bottom: 5px; text-align: right; width: 300px;"><a href="http://feeds.feedburner.com/Hukmat" style="-webkit-transition: all 0.3s ease-in-out; color: #a72c02; font-family: droidkufi-bold, tahoma sans-serif; font-size: 12px; line-height: 16px; text-align: start; text-decoration: initial;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtDRPsdGpb2I7f1ryC6DmYhWbyqpQdGeAQYx5PnNy7xnug6UhYMQOVEKgGLA_pysUVce9wTn-TkwjmcyjPAAG7kfHtM-lCLuWVVdSt_Rxt9jd9zj4oLs-vzEow4qtUMg-RW73K9Ogb0s/s1600/RSS.png" style="-webkit-transition: all 0.3s ease-in-out; border: none; float: right; position: relative;" /><b style="-webkit-transition: all 0.3s ease-in-out; color: #575757; float: right; font-family: droidkufi-bold, tahoma sans-serif; font-size: 19px; line-height: 47px; padding-left: 10px; padding-right: 16px;">+++</b><span style="-webkit-transition: all 0.3s ease-in-out;  float: right;  line-height: 47px; padding-left: 10px;font-family:droidkufi-bold, tahoma sans-serif;color:#9f9d9d;">مشتركاً</span></a></div><div class="social" style="-webkit-transition: all 0.3s ease-in-out; background-color: #e9e9e9; background-position: initial initial; background-repeat: initial initial; height: 48px; margin-bottom: 5px; text-align: right; width: 300px;"><a href="http://www.youtube.com/subscribe_widget?p=f3hQtCRBSdQ5MYnu8eEK4g" style="-webkit-transition: all 0.3s ease-in-out; color: #a72c02; font-family: droidkufi-bold, tahoma sans-serif; font-size: 12px; line-height: 16px; text-align: start; text-decoration: initial;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MTl1NpXaWdMnH3zIB2uvrQ7ObpFpK4RcxmCAirYLu6c3pIkYXNLX6mGlwvLH9qr3m-c_oiMPtlSi9HKk3s_K4ZCYOAPtFsS8gllWfGyy79dMdT35q12Mhag3gLzCM_JMEeZ5BC6Ca5g/s1600/youtube.png" style="-webkit-transition: all 0.3s ease-in-out; border: none; float: right; position: relative;" /><b style="-webkit-transition: all 0.3s ease-in-out; color: #575757; float: right; font-family: droidkufi-bold, tahoma sans-serif; font-size: 19px; line-height: 47px; padding-left: 10px; padding-right: 16px;">+++</b><span style="-webkit-transition: all 0.3s ease-in-out;  float: right;  line-height: 47px; padding-left: 10px;font-family:droidkufi-bold, tahoma sans-serif;color:#9f9d9d;">مشتركين على يوتيوب</span></a></div></div><div class="clear"></div><span class="widget-item-control"><span class="item-control blog-admin"><a class="quickedit" href="//www.blogger.com/rearrange?blogID=4154461973978148447&widgetType=HTML&widgetId=HTML14&action=editWidget§ionId=footer-2-3" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML14"));" target="configHTML14" title="تحرير"><img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" /></a></span></span><div class="clear"></div><----mohamedmagdym1.blogspot.com---->

الأداة الثالثة

صورتها موجوده قى مدونتى

<div align="center"><ul class="spicesocialwidget"><li class="skype"><a href="http://www.skype.com/mohamed301050" rel="nofollow" target="_blank" title="Skype"></a></li><li class="facebook"><a href="http://www.facebook.com/mohammedmagdym1" rel="nofollow" target="_blank" title="facebook"></a></li><li class="twitter"><a href="http://twitter.com/mohammedmagdym1" rel="nofollow" target="_blank" title="twitter"></a></li><li class="googleplus"><a href="https://plus.google.com/+MohamedMagdyReyad" rel="nofollow" target="_blank" title="googleplus"></a></li><li class="youtube"><a href="http://www.youtube.com/c/mohamedmagdyreyad" rel="nofollow" target="_blank" title="youtube"></a></li><li class="rss"><a href="http://feeds.feedburner.com/blogspot/gxaeG" rel="nofollow" target="_blank" title="rss"></a></li></ul></div><style>ul.spicesocialwidget {text-align: center;} ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;} ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKlxIl3ISdssaEBq5zjmUDWy25e5TxgMuLk4u7FfrLOIuZZnZz7ydlCifYvZtwgw-Du1SZjMe1BZAQLHYJNqSu_w-07I43bKcwce7WKQhV3mYRSdx0b-08sgGGLF1sICJo-lOr0AbZPsA/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:center;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} .ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKlxIl3ISdssaEBq5zjmUDWy25e5TxgMuLk4u7FfrLOIuZZnZz7ydlCifYvZtwgw-Du1SZjMe1BZAQLHYJNqSu_w-07I43bKcwce7WKQhV3mYRSdx0b-08sgGGLF1sICJo-lOr0AbZPsA/s1600/spice-social-gadget-sprite.png' )} ul.spicesocialwidget li.facebook a{ background-position:0 0} ul.spicesocialwidget li.googleplus a{ background-position:-96px 0} ul.spicesocialwidget li.linkedin a{ background-position:-128px 0} ul.spicesocialwidget li.pinterest a{ background-position:-160px 0} ul.spicesocialwidget li.rss a{ background-position:-192px 0} ul.spicesocialwidget li.skype a{ background-position:-224px 0} ul.spicesocialwidget li.twitter a{ background-position:-256px 0} ul.spicesocialwidget li.vimeo a{ background-position:-288px 0} ul.spicesocialwidget li.youtube a{ background-position:-320px 0} ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px} ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px} ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px} ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px} ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px} ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px} ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px} ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px} ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px} </style>