اضافة ازرار المواقع الاجتماعية كالتي في مدونتي

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

 أقدم لكم اليوم طريقه اضافه روابط المواقع الاجتماعيه كالفيس بوك و تويتر وجوجل بلس بالاضافه الى روابط الخلاصات الخاصه بموقعك على شكل ميترو الرائعه ، و تتميز بشكل رائع و جذاب و انيق و لها شكل جمالي تجذب عيون كل الزائرين لموقعك بانه موقع احترافي ، وهو الشكل الجديد المنتشر على كل المواقع و المدونات الاجنبيه الكبيره .

هذه الازرار الاجتاعيه تقوم بوضعها في اضافه جديده عن طريق اضافه اكواد HTML وهي بذلك رائعه للمواقع و المدونات بلوجر او وردبيريس ، فقط ضع الكود في الاسفل و اكن دائما حافظ على نسخ الكود بشكل صحيح حتي يعمل معك بشكل جيد و التزم بالنصائح في الاسفل عند وضع الكود حتي يظهر معك بشكل صحيح وهذه صوره للأضافه الرائعه هي :

قم باضافه الكود التالي في تبويب HTML

فقط كل الى عليك تعمله انه تغير ما اشير له باللون الاحمر في الكود في الاسفل بالروابط الشخصيه الاساسيه الخاصة بك

كود:

<div class="widget-content">
<div class="lefts">
    <h1>إنضم لأكثر من <b>2000</b> متابع للمدونة</h1>
<div class="metro-social">
<center>
<li><a class="fb" href="http://www.facebook.com/azaiimblog"></a></li>
<li><a class="tw" href="http://twitter.com/benjaloun1"></a></li>
<li><a class="gp" href="http://plus.google.com/101144506484135256458"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/azaiim"></a></li>
</center>
</div>
    <div class="ins">
        <center>
        <div id="sleek-subscribe">
        <form action="http://azaiim.blogspot.com/feeds/posts/default" method="post" rel="nofollow" target="_new">
     
        <input class="txt2" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;ضع اميلك هنا ليصلك كل جديد&#39;;}" onfocus="if (this.value == &#39;ضع اميلك هنا ليصلك كل جديد&#39;) {this.value = &#39;&#39;;}" value="ضع اميلك هنا ليصلك كل جديد" />
     
        <input class="btn2" type="submit" value=" " />
        </form>
        </div>
        </center>
    </div>
 
</div>

<style>
.lefts{
width:283px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpfvdAfSkiYk9Hyu01BGTFz83xkxPu9VCUpuvscVzuuWmtpVSvNo-n8r9HR8z4GJCAfziO3flJKY5zP5PXCPGA_peYQKXGoAjbE9lU5sOeKUNAWU8s5mrpUbllNbJSqQm00h27VKDb5bk/s1600/left.png);
}

.lefts h1{
color:#767676;
margin:0;
text-align:center;
font:14px  'DroidKufi-Bold';
padding:03px;
padding-top:06px;
}

.lefts b{
font:18px Arial, Helvetica, sans-serif;
color:#ffc000;
}



.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:right;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGFui4d74Z2iXGwCNcmhrp3aaOtUc9dQOwaujguWGTDNytwoZBv_kB8F95QMk85YjKsBJmnF1yv7L7ctMv8vxEzVVVBonXBZqkw6-PWxdwZ2KYKIZNNq9OTIJyDnJGm87Z6lss1Ope8wM/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA65nL4GNs1pi60Q4GE5AtOsjFY_D1Tg0rTusf6bltN3P-sOPWG9YgkI4yv3po6et03Y7N0TbS6oTjnGcDoDFahIrz7KqdogriwlchVgIphj5ItWP2mhJ5Ju9y7tI3m5isVuPWFe5GOriO/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1V7TySXDzaEbCYL9AhdfAjEPoJHkKzCa43-Ys4OSHMko94TFmpwYFadBnb4Lipi-GlJ4nHoisFJE-OlNMtd79M5ZlykMsCmXBXJPFlHzHQFCKumXmUGboeeOiUswVCoZ98Yx68jJNt6c/s50/google%252Bplus.png) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhehnCzf-_9MZ0bkI6Ef6bWnAsudRGBkzf6glNSRsTUmszi4U9Q2fHeXsij9ABtGLXt6ec1nk0QR-RQ6jiQDFPlcVgfDfKjCloY7aRWD8zd10qSoITznmABWZf7mFEW8zYvJZTu4Xe2JS5T/s50/feed.png) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBGFui4d74Z2iXGwCNcmhrp3aaOtUc9dQOwaujguWGTDNytwoZBv_kB8F95QMk85YjKsBJmnF1yv7L7ctMv8vxEzVVVBonXBZqkw6-PWxdwZ2KYKIZNNq9OTIJyDnJGm87Z6lss1Ope8wM/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA65nL4GNs1pi60Q4GE5AtOsjFY_D1Tg0rTusf6bltN3P-sOPWG9YgkI4yv3po6et03Y7N0TbS6oTjnGcDoDFahIrz7KqdogriwlchVgIphj5ItWP2mhJ5Ju9y7tI3m5isVuPWFe5GOriO/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1V7TySXDzaEbCYL9AhdfAjEPoJHkKzCa43-Ys4OSHMko94TFmpwYFadBnb4Lipi-GlJ4nHoisFJE-OlNMtd79M5ZlykMsCmXBXJPFlHzHQFCKumXmUGboeeOiUswVCoZ98Yx68jJNt6c/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhehnCzf-_9MZ0bkI6Ef6bWnAsudRGBkzf6glNSRsTUmszi4U9Q2fHeXsij9ABtGLXt6ec1nk0QR-RQ6jiQDFPlcVgfDfKjCloY7aRWD8zd10qSoITznmABWZf7mFEW8zYvJZTu4Xe2JS5T/s200/feed.png) no-repeat center center #e9a01c}


.lefts .ins{
width:283px;
height:40px;
float:right;
margin-top:15px;
}

.lefts .ins .txt2{
border:1px solid #e1e1e1;
background:#fff;
border-radius:5px;
font:12px Tahoma, Geneva, sans-serif;
color:#c0c0c0;
padding:6px 7px 7px 7px;
margin:0px;
float:right;
margin:0 20px 0 5px;
text-align:right;
    width: 175px;
}


.lefts .ins .btn2{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTP1PzEFDQaVs6ZMgKvNUgGibUk2wgbRHPjL8NIdigcy39QRmJqO38q_rwhrQcjbS7r-XGDcE1E9dGHTpW9TKKN0tZyiZtzKic5T_W2p7iPwXVpylidZF86dzn6z7lFtfP7b9bOyODMlE/s1600/sub.png);
float:right;
border:none;
width:64px;
height:28px;
cursor:pointer;
}




</style>
</div>