السلام عليكم ورحمة الله وبركاته متابعين المدونة الكرام رمضان كريم وكل عام وانتم بخير اهلا ومرحبا بكم في تدوينة جديدة وتدوينة اليوم داخل نطاق بلوجر وهي عن اضافة ازرار التواصل الاجتماعي بـ3أشكال احترافية ببلوجر أترككم مع الشرح
جميعهم يركبوا بنفس الطريقة
1.تتجه الي لوحة التحكم
2.نختار التخطيط
3.اضافة اداة
4.نختار اضافة اداة Html ثم نضع الكود
صورة توضيحية لطريقة التركيب
1.تتجه الي لوحة التحكم
2.نختار التخطيط
3.اضافة اداة
4.نختار اضافة اداة Html ثم نضع الكود
صورة توضيحية لطريقة التركيب
<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/YOURNAME"></a></li>
<li><a class="tw" href="http://twitter.com/YOURNAME"></a></li>
<li><a class="gp" href="https://plus.google.com/YOURNAME"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/YOURNAME"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://www.techprevue.com/2013/02/social-profile-gadget-metro-style.html
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.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:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:120px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br>
<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/YOURNAME"></a></li>
<li><a class="tw" href="http://twitter.com/YOURNAME"></a></li>
<li><a class="gp" href="https://plus.google.com/YOURNAME"></a></li>
<li><a class="pi" href="http://pinterest.com/YOURNAME"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/YOURNAME"></a></li>
<li><a class="yt" href="http://www.youtube.com/YOURNAME"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/YOURNAME"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs
Web link to gadget code: http://www.techprevue.com/2013/02/social-profile-widget-metro-style.html
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:120px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>
<div class="metro-social" style="width: 285px; height: 76px">
<li>
<a class="fb" target="_blank" href="http://www.facebook.com/YOURNAME">
</a></li>
<li><a class="tw" target="_blank" href="http://twitter.com/YOURNAME"></a></li>
<li>
<a class="gp" target="_blank" href="https://plus.google.com/YOURNAME">
</a></li>
<li><a class="yt" target="_blank" href="http://www.youtube.com/YOURNAME"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs
Web link to gadget code: http://www.techprevue.com/2013/02/social-profile-widget-metro-style.html
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:120px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
</style>
بعض الأشياء يمكنك تغييرها
قم بتغيير جميع الروابط ذات اللون الاحمر بروابطك الخاصة
وهكذا نتهت تدوينتنا لهذا اليوم والسلام عليكم ورحمة الله وبركاته
وهكذا نتهت تدوينتنا لهذا اليوم والسلام عليكم ورحمة الله وبركاته
0 التعليقات:
إرسال تعليق