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

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

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

هذه الازرار الاجتاعيه تقوم بوضعها في اضافه جديده عن طريق اضافه اكواد 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(http://2.bp.blogspot.com/-UAPIdQxaao4/T_Xl3LPW5qI/AAAAAAAAAwc/OYWk7uq2X3c/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(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s50/google%252Bplus.png) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s50/feed.png) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/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(http://1.bp.blogspot.com/-cboSdXM05sM/T_Xl4AQQkLI/AAAAAAAAAws/2TCB3doIz0c/s1600/sub.png);
float:right;
border:none;
width:64px;
height:28px;
cursor:pointer;
}




</style>
</div>