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

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

إضافة اليوم ستكون فيها الأيقونات متوضعة بشكل أفقي في خط واحد عكس الإضافة السابقة، و ما سيميزها أيضا و بالإضافة إلى تفاعلها الجميل و شكلها البسيط هو أنها ستأخذ مساحة صغيرة جدا من مدونتك لا تتعدى 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomnDWmuGBOoixs52KSqp2oymj7OF1QBILqGShYlQXva_gI_rWZhzvSg7OgUtZa7dYc2snSQI7dNvOHCXcLEA9wn_O5bZnKFylaffEsSWxtxWEmiHuw32ozUTX5n8cZcV0kTf8Nj-tvSk8/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgomnDWmuGBOoixs52KSqp2oymj7OF1QBILqGShYlQXva_gI_rWZhzvSg7OgUtZa7dYc2snSQI7dNvOHCXcLEA9wn_O5bZnKFylaffEsSWxtxWEmiHuw32ozUTX5n8cZcV0kTf8Nj-tvSk8/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

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

 

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