السلام عليكم، بعد أن قمنا في درس سابق شرح طريقة اضافة ايقونات التواصل الإجتماعي جانبية عائمة، منسدلة عند تمرير الماوس من هــنا ، اليوم سنتطرق إلى درس كيفية إضافة هذه الأيقونات و لكن بشكل آخر لا يقل جمالا عن الإضافة السابقة.
إضافة اليوم ستكون فيها الأيقونات متوضعة بشكل أفقي في خط واحد عكس الإضافة السابقة، و ما سيميزها أيضا و بالإضافة إلى تفاعلها الجميل و شكلها البسيط هو أنها ستأخذ مساحة صغيرة جدا من مدونتك لا تتعدى 300x20px بالتقريب.
طريقة تثبيت الكود سهلة جدا لا تحتاج التعديل في قالب مدونتك، تابع معنا الطريقة.
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/AVvXsEgW8_hPRFdQsvmRKiNjYiPGGhK4h4xAEB_NMNZGqPLgXV8QRzgRwgFFQ_LGC26l95JJuNF9Z41k35Kcq5QTBjIORnd4Y_M8ThIu9T5ex1Bqt6SQrZh2_IXmSIjxDEiO9LkRwIiQiCRsIapP/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/AVvXsEgW8_hPRFdQsvmRKiNjYiPGGhK4h4xAEB_NMNZGqPLgXV8QRzgRwgFFQ_LGC26l95JJuNF9Z41k35Kcq5QTBjIORnd4Y_M8ThIu9T5ex1Bqt6SQrZh2_IXmSIjxDEiO9LkRwIiQiCRsIapP/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
أتمنى أن تكون الإضافة قد نالت إعجابكم..و السلام عليكم و رحمة الله...
سيناوي الجنسية و مؤسس مدونة " ترابين كوم" احب الكتابة بالخصوص التدوين، دخل عالم التدوين منذ سنتين و يسعى دائما في تعلم المزيد عن شروحات التدوين ، من هواياته برامج تصميم و الإنترنت و كل ما له علاقة بعالم المعلومات و الحواسيب
تشرفون بتعليقاتكم تحويل كودإخفاء محول الأكواد الإبتساماتإخفاء