بسم الله الرحمن الرحيم
أقدم لكم اليوم طريقه اضافه روابط المواقع
الاجتماعيه كالفيس بوك و تويتر وجوجل بلس بالاضافه الى روابط الخلاصات
الخاصه بموقعك على شكل ميترو الرائعه ، و تتميز بشكل رائع و جذاب و انيق و
لها شكل جمالي تجذب عيون كل الزائرين لموقعك بانه موقع احترافي ، وهو الشكل
الجديد المنتشر على كل المواقع و المدونات الاجنبيه الكبيره .
هذه الازرار الاجتاعيه تقوم بوضعها في اضافه جديده عن طريق اضافه اكواد HTML وهي بذلك رائعه للمواقع و المدونات بلوجر او وردبيريس ، فقط ضع الكود في الاسفل و اكن دائما حافظ على نسخ الكود بشكل صحيح حتي يعمل معك بشكل جيد و التزم بالنصائح في الاسفل عند وضع الكود حتي يظهر معك بشكل صحيح وهذه صوره للأضافه الرائعه هي :
قم باضافه الكود التالي في تبويب HTML
هذه الازرار الاجتاعيه تقوم بوضعها في اضافه جديده عن طريق اضافه اكواد 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 == '') {this.value = 'ضع اميلك هنا ليصلك كل جديد';}" onfocus="if (this.value == 'ضع اميلك هنا ليصلك كل جديد') {this.value = '';}" 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>
0 التعليقات:
إرسال تعليق