Top Ad unit 728 × 90

مواضيع ساخنة

تقنية

بلوجر: طريقة اضافة أيقونات تفاعلية لمواقع التواصل الاجتماعي على مدونتك بلوجر

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

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

1.أولا عليك التوجه إلى موقع بلوجر ثم إلى لوحة تحكم مدونتك

2.توجه نحو تخطيط أو Layout في اليسار

3.قم بإضافة أداة Add a Gadget

4.ثم في النافذة المنسدلة قم بالضغط على HTML/JavaScripte

5.قم بنسخ الكود التالي كاملا

<div align="center">
<ul class="spicesocialwidget">
<li class="facebook">
<a href="http://www.facebook.com/techniatnet" rel="nofollow" target="_blank" title="facebook">
</a></li>
<li class="twitter">
<a href="http://twitter.com/hocine_kaidi" rel="nofollow" target="_blank" title="twitter">
</a></li>
<li class="googleplus">
<a href="https://plus.google.com/105159528453253970153" rel="nofollow" target="_blank" title="googleplus">
</a></li>
<li class="linkedin">
<a href="http://dz.linkedin.com/in/hocinekaidi" rel="nofollow" target="_blank" title="linkedin">
</a></li>
<li class="pinterest">
<a href="http://pinterest.com/" rel="nofollow" target="_blank" title="pinterest">
</a></li>
<li class="youtube">
<a href="http://www.youtube.com/user/hocinekaidi" rel="nofollow" target="_blank" title="youtube">
</a></li>
<li class="rss">
<a href="http://feeds.feedburner.com/techniatnet" rel="nofollow" target="_blank" title="rss">
</a></li>
<li class="skype">
<a href="http://www.skype.com/" rel="nofollow" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a href="http://www.vimeo.com/" rel="nofollow" target="_blank" title="vimeo">
</a></li></ul>
</div>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}
ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

ثم قم بتغير ما هو ملون كما يلي:
techniatnet  إلى إسم صفحتك على الفايسبوك
hocine_kaidi  إلى إسم المستخدم لحسابك على التويتر
https://plus.google.com/105159528453253970153  إلى رابط حسابك قوقل بلس
http://dz.linkedin.com/in/hocinekaidi  إلى حسابك في موقع لينكد إن
hocinekaidi  غيّره إلى إسم قناتك على يوتيوب
techniatnet  حسابك على الخلاصات feed burner
يمكنك إضافة الحسابات الأخرى مثل سكايب، فيميو...

6.ثم قم بلصقه في الأداة الجديدة، وأكتب ما شئت في العنوان مثلا "تابعونا"...ثم إضغط على Save

شاهد الشرح على الفيديو

 

أتمنى أن تكون الإضافة قد نالت إعجابكم..و السلام عليكم و رحمة الله...

بلوجر: طريقة اضافة أيقونات تفاعلية لمواقع التواصل الاجتماعي على مدونتك بلوجر Reviewed by Hocine Kaidi on 4:16:00 م Rating: 5

هناك 4 تعليقات:

  1. ولكن حق تويتر وفيسبوك يوجد به خطأ بسيط حاول اصلاحه اخي

    وشكرا بصراحة جميل جدا

    ردحذف

جميع الحقوق محفوظة مدونة استوتك © 2013 - 2016

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.