أضافة أداة تابعنا على مواقع التواصل الإجتماعي بشكل جديد وأحترافي
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته طريقة مرحباً بكم زوار ومتابعين مدونة يوسف للمعلوميات بهذا الشرح الجديد لهذا اليوم
الموضوع
موضوعنا لهذا اليوم هو أضافة أداة تابعنا على مواقع التواصل الإجتماعي بشكل جديد وأحترافي بحيث يمكن للمتابعين والزوار الوصول السريع الى صفحات التواصل الأجتماعية وهذ الأضافة مفيدة جداً بحيث يأتي للمدونة العدد الكبير من المتابعين من الشبكات التواصل الأجتماعية بحيث يكون للمدونة عدد كبير من المتابعين على الفيس بوك و تويتر وعند ما يتم نشر التدوينة على الفيس بوك او التغريدة على التويتر يتوصل لها المتابع بطريقة صحيحة وسريع وبهذه الطريقة تحصل على زوار كثيرون
الشرح
الخطوة الأولى : الذهاب الى لوحة التحكم الخاصة ببلوجر ومن ثم الى التخطيط بعد ذلك أضافة اداة HTML/JavaScript
وأضف الكود التالي
<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/ضع اسم الصفحه هنا"></a></li>
<li><a class="tw" href="http://twitter.com/ ضع اسم حسابك هنا فقط"></a></li>
<li><a class="gp" href="https://plus.google.com/ضع اسم حسابك هنا فقط"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/ضع رابط الخلاصات الاسم فقط"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://7ewratna.blogspot.com/2013/03/add-social-media-to-your-site-with-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:140px;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 />
<li><a class="fb" href="http://www.facebook.com/ضع اسم الصفحه هنا"></a></li>
<li><a class="tw" href="http://twitter.com/ ضع اسم حسابك هنا فقط"></a></li>
<li><a class="gp" href="https://plus.google.com/ضع اسم حسابك هنا فقط"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/ضع رابط الخلاصات الاسم فقط"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://7ewratna.blogspot.com/2013/03/add-social-media-to-your-site-with-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:140px;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 />
الخطوة الثانية :قم باستبدال ما اشير له باللون الاحمر فقط بحسابك ، هتجيب بس اسم حسابك أو رابطه فقط من غير بقيه الرابط يعني متلا بحن صفحتنا على الفيس بوك هكدا أنت فقط تغيير اللون الأحمر مثل http://www.facebook.com/pageyusifarbile
النهاية
