اضافة اداة المتابعة لمواقع التواصل مباشرة من المدونة

اضافة اداة المتابعة لمواقع التواصل مباشرة من المدونة

تخطيط - اضافة اداة - HTML/JavaScript - واضف الكود التالي

مع تعديل  المحدد باللون الاخضر

<div class="metro-social metro-height" style="width:350px;">
<li class="metro-facebook"><iframe class="fbhover" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fblog.khaled&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:65px;" allowtransparency="true"></iframe></li>
<li class="pinterest-one"><div class="pinteresthover"><a data-pin-do="buttonFollow" href="http://pinterest.com/5haled518">Follow</a><script type="text/javascript">(function(d){  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');  p.type = 'text/javascript';  p.async = true;  p.src = '//assets.pinterest.com/js/pinit.js';  f.parentNode.insertBefore(p, f);}(document));</script></div></li>
<li class="metro-googleplus"><div class="googlehover"><div class="g-follow" data-annotation="vertical-bubble" data-height="15" data-href="//plus.google.com/112134652142430162819" data-rel="publisher"></div></div><script type="text/javascript">  (function() {    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;    po.src = 'https://apis.google.com/js/plusone.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);  })();</script></li>        <li class="metro-twitter"><a href="https://twitter.com/xv518vx" class="twitter-follow-button twitterhover" data-show-count="false" data-show-screen-name="false">Follow @xv518vx</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
         <li><a class="metro-rss" target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/eRrPUF"></a></li>
<li class="metro-youtube"><div class="googlehover"><div class="g-ytsubscribe" data-channel="khaled518k" data-layout="default"></div></div></li>
</div><style type="text/css">.metro-social { padding-top:10px; padding-bottom:10px; }
.metro-height-extend { height:145px; }
.metro-height { height:212px; }
.metro-social li { position:relative; cursor:pointer; list-style:none; margin:1px; }
.metro-social .metro-facebook,.metro-twitter,.metro-googleplus,.metro-pinterest,.metro-linkedin,.metro-youtube,.metro-rss,.rss-feed,.googleplus-one,.twitter-one,.linkedin-one,.pinterest-one,.twitter-one-extend,.pinterest-one-extend,.youtube-one,.twitter-extend-one {  float:left; margin:1px; position:relative; display:block; }
.metro-social .metro-facebook {    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHb1_-ppXNZeZXj_aZAsSrRE90uFpHb2dIzw5PUmfabDddWcBRNsZZ0CUNNoGG_V66nDhqmN68KoG1o0OUBe0LI9itQrKNPtvYQtYTF_My7W6Sq4gNfEL5LhjJvBGBpx7Copay7pWhBE/h120/facebook_128.png) no-repeat center center #1f69b3; width:47%; height:140px; padding:0; }
.metro-social .metro-twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ogjvE3Oi43okbXJGL_XgOR_aSdVGHRqpWsy9Fn0_NE0dSF_ghyxWXbFH8rqr4BLIeN2yvxvf_wUftIb0XJ61YVUtwMI0XgWtXvVcuABhIbosslBoe1QGRGcH9-dT4fqo74mP6QKHypg/h120/twitter_60.png) no-repeat center center #43b3e5; width:23%; height:69px; padding:0; }
.metro-social .metro-googleplus { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY58dDWsTFQLwiEoDaZx2lWYYc4zZDCEM0J0Z80MsrYdlwYV5G91sUWNrSXvWNrOON_tJ6KzoAnRNQDNWKB9UAhGWmPc48JHyZvd1nxevtYfgSomtQwTwe3nRQW7q7x1wxgl0mdOo_bpI/h120/googleplus_60.png) no-repeat center center #da4a38; width:23.3%; height:69px; padding:0; }
.metro-social .metro-pinterest { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmjSqL0fsnNn78RPX4qpVIaR0YpZU-IvD6RGvHXGkAg87pEvEjD5svfkJnXvfCCnTdIyEB8RCZOkzgxiw_pHbJaogOnXBZ5mCBXC9PiCGwAyogl_BrjLO8XucdoCZxHz-tne3Vx_NSwgQ/h120/pinterest_60.png) no-repeat center center #d73532; width:23.2%; height:69px; padding:0; }
.metro-social .metro-linkedin { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfJfKNeWqyiSbTADrGeAJWWFKl7fpq2sRGTJeks6iPs5EizvE1DhcX-HCuxxu73G5G56lfVceb_gPU_y8HXN-dpkd43ozjDgWZNloIjatJnQP7LqRKshIoDJO7A5Lm50arVt-QkZQpHbU/h120/linkedin_60.png) no-repeat center center #0097bd; width:23%; height:69px; padding:0; }
.metro-social .metro-youtube { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjh6V9qKvOkBT5hFRIyicDLT8r6JjFoHYjbnKd29HCNvGmBxqKbu2HJha6ScMUdeP_-YW7sK9eWvXgdZlVucR8cazOwZtP_5W7nZQi6-Uu8Cl6XzNV5PzyU0dQr3MAqAas7eHjSsBCRQ/h120/youtube_60.png) no-repeat center center #e64a41; width:47%; height:69px; padding:0; }
.metro-social .metro-rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMc7u0PKOE53taakD0fY9eXk1zIvBpUsmqyhtIPRbhJ0sXzMp2p-VrMQlEt1d4Sig-Gl6IOCLk9uuj14vqe6on1FoN7J1K0obc2GQvSOmdRBeJTFa2W-pkZF5aWH7omH09Ghv8_7uSU9Y/h120/rss_60.png) no-repeat center center #e9a01c; width:47%; height:69px; padding:0; }
.metro-social .rss-feed { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMc7u0PKOE53taakD0fY9eXk1zIvBpUsmqyhtIPRbhJ0sXzMp2p-VrMQlEt1d4Sig-Gl6IOCLk9uuj14vqe6on1FoN7J1K0obc2GQvSOmdRBeJTFa2W-pkZF5aWH7omH09Ghv8_7uSU9Y/h120/rss_60.png) no-repeat center center #e9a01c; width:95%; height:69px; padding:0; }
.metro-social .youtube-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjh6V9qKvOkBT5hFRIyicDLT8r6JjFoHYjbnKd29HCNvGmBxqKbu2HJha6ScMUdeP_-YW7sK9eWvXgdZlVucR8cazOwZtP_5W7nZQi6-Uu8Cl6XzNV5PzyU0dQr3MAqAas7eHjSsBCRQ/h120/youtube_60.png) no-repeat center center #e64a41; width:94.4%; height:69px; padding:0; }dding:0; }
.metro-social .googleplus-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY58dDWsTFQLwiEoDaZx2lWYYc4zZDCEM0J0Z80MsrYdlwYV5G91sUWNrSXvWNrOON_tJ6KzoAnRNQDNWKB9UAhGWmPc48JHyZvd1nxevtYfgSomtQwTwe3nRQW7q7x1wxgl0mdOo_bpI/h120/googleplus_60.png) no-repeat center center #da4a38; width:47%; height:69px; padding:0; }  .metro-social .twitter-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ogjvE3Oi43okbXJGL_XgOR_aSdVGHRqpWsy9Fn0_NE0dSF_ghyxWXbFH8rqr4BLIeN2yvxvf_wUftIb0XJ61YVUtwMI0XgWtXvVcuABhIbosslBoe1QGRGcH9-dT4fqo74mP6QKHypg/h120/twitter_60.png) no-repeat center center #43b3e5; width:47%; height:69px; padding:0; }
.metro-social .twitter-one-extend { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ogjvE3Oi43okbXJGL_XgOR_aSdVGHRqpWsy9Fn0_NE0dSF_ghyxWXbFH8rqr4BLIeN2yvxvf_wUftIb0XJ61YVUtwMI0XgWtXvVcuABhIbosslBoe1QGRGcH9-dT4fqo74mP6QKHypg/h120/twitter_60.png) no-repeat center center #43b3e5; width:47%; height:140px; padding:0; }
.metro-social .twitter-extend-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ogjvE3Oi43okbXJGL_XgOR_aSdVGHRqpWsy9Fn0_NE0dSF_ghyxWXbFH8rqr4BLIeN2yvxvf_wUftIb0XJ61YVUtwMI0XgWtXvVcuABhIbosslBoe1QGRGcH9-dT4fqo74mP6QKHypg/h120/twitter_60.png) no-repeat center center #43b3e5; width:95%; height:69px; padding:0; }
.metro-social .linkedin-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfJfKNeWqyiSbTADrGeAJWWFKl7fpq2sRGTJeks6iPs5EizvE1DhcX-HCuxxu73G5G56lfVceb_gPU_y8HXN-dpkd43ozjDgWZNloIjatJnQP7LqRKshIoDJO7A5Lm50arVt-QkZQpHbU/h120/linkedin_60.png) no-repeat center center #0097bd; width:47%; height:69px; padding:0; }
.metro-social .pinterest-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmjSqL0fsnNn78RPX4qpVIaR0YpZU-IvD6RGvHXGkAg87pEvEjD5svfkJnXvfCCnTdIyEB8RCZOkzgxiw_pHbJaogOnXBZ5mCBXC9PiCGwAyogl_BrjLO8XucdoCZxHz-tne3Vx_NSwgQ/h120/pinterest_60.png) no-repeat center center #d73532; width:47%; height:69px; padding:0; }
.metro-social .pinterest-one-extend { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmjSqL0fsnNn78RPX4qpVIaR0YpZU-IvD6RGvHXGkAg87pEvEjD5svfkJnXvfCCnTdIyEB8RCZOkzgxiw_pHbJaogOnXBZ5mCBXC9PiCGwAyogl_BrjLO8XucdoCZxHz-tne3Vx_NSwgQ/h120/pinterest_60.png) no-repeat center center #d73532; width:95%; height:69px; padding:0; }
.metro-social li:hover { -webkit-opacity: 0.9; -moz-opacity: 0.9; opacity: 0.9; }
.metro-social .fbhover, .twitterhover, .googlehover, .linkedinhover, .pinteresthover{ visibility:hidden; opacity:0; transition:visibility 2.5s linear 0.5s,opacity 0.5s linear; }.metro-facebook:hover .fbhover{ opacity:1; transition-delay:0s; visibility: visible; }.metro-twitter:hover .twitterhover{ opacity:1; transition-delay:0s; visibility: visible; }.twitter-one-extend:hover .twitterhover{ opacity:1; transition-delay:0s; visibility: visible; }.metro-googleplus:hover .googlehover{ opacity:1; transition-delay:0s; visibility: visible; }.metro-youtube:hover .googlehover{ opacity:1; transition-delay:0s; visibility: visible; }.youtube-one:hover .googlehover{ opacity:1; transition-delay:0s; visibility: visible; }.googleplus-one:hover .googlehover{ opacity:1; transition-delay:0s; visibility: visible; }.twitter-one:hover .twitterhover{ opacity:1; transition-delay:0s; visibility: visible; }.twitter-extend-one:hover .twitterhover{ opacity:1; transition-delay:0s; visibility: visible; }.metro-linkedin:hover .linkedinhover{ opacity:1; transition-delay:0s; visibility: visible; }.linkedin-one:hover .linkedinhover{ opacity:1; transition-delay:0s; visibility: visible; }.metro-pinterest:hover .pinteresthover{ opacity:1; transition-delay:0s; visibility: visible; }.pinterest-one:hover .pinteresthover{ opacity:1; transition-delay:0s; visibility: visible; }.pinterest-one-extend:hover .pinteresthover{ opacity:1; transition-delay:0s; visibility: visible; }</style>