بلوجر: إضافة أيقونات التواصل الإجتماعي جانبية عائمة، منسدلة عند تمرير الماوس

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

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

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

و ما يميز هذه الإضافة عن غيرها من الإضافات بالإضافة إلى أناقتها و جمالها هو إحتوائها لأربع مواقع في وقت واحد دون أن تأخذ مكان كبير في المدونة، حيث يعتبر عدم توفر المكان مشكل الكثير من المدونين الذين يثبتون الكثير من الإضافات في مدوناتهم (لا ينصح بوضع عدد زائد من الإضافات في المدونة الواحدة)

 أولا شاهدو الإضافة في الصورة أعلاه، أو يمكنكم معاينتها في مدونتنا هذه (على اليمين)

و الآن سنتطرق على بركة الله إلى طريقة التثبيت

1.أولا قوموا بتحميل ملف الكود من إحدى هذه الرابط: 
Dropbox: http://adf.ly/qQFFF 
gulfup: http://adf.ly/qQFCY 
4shared: http://adf.ly/qQFER

ملاحظة:  عند الضغط على روابط التحميل ستظهر لكم صفحة إعلانات، قوموا بالضغط على  تجاوز إضافة / باسر L'annonce  أعلى يمين الصفحة بعد إنقضاء 5 ثوان لتخطي هذه الصفحة و التوجه لصفحة التحميل). أو قوموا بنسخه مباشرة هنا في الأسفل:

<style>img,a{border:0}#on{visibility:visible}#off{visibility:hidden}#facebook_div{width:196px;height:340px;overflow:hidden}#twitter_div{width:246px;height:80px;overflow:hidden}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px}#knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px}#kakinetwork_div{width:300px;height:97px;overflow:hidden}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px}#facebook_right img{position:absolute;top:-2px;left:-35px}#facebook_right iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px}#twitter_right{z-index:10004;border:2px solid #6cc5ff;background-color:#6cc5ff;width:246px;height:97px;position:fixed;right:-250px}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0}#google_plus_right{z-index:10003;background-color:#f2f2f2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0}#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_right img{position:absolute;top:-2px;left:-101px}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px}#facebook_left img{position:absolute;top:-2px;right:-35px}#facebook_left iframe{border:0 solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px}#twitter_left{z-index:10004;border:2px solid #6cc5ff;background-color:#6cc5ff;width:246px;height:150px;position:fixed;left:-250px}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_left img{position:absolute;top:-2px;right:-101px}.box-title1{border:1px solid #ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px #ccc;-moz-box-shadow:5px 5px 5px #ccc;box-shadow:5px 5px 5px #ccc;padding:10px;margin:10px 0}.enteryouremail{background:#fff!important;border:1px solid #d2d2d2;padding:0 8px 0 8px;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0}.submitbutton{background:#f2f2f2;border:1px solid #f66303;-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial,sans-serif;color:#000;height:25px;padding:0 12px 0 12px;margin:0 12px 0 0;-webkit-border-radius:5px;border-radius:5px;cursor:pointer}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){jQuery("#facebook_right").hover(function(){jQuery(this).stop(true,false).animate({right:0},500)},function(){jQuery("#facebook_right").stop(true,false).animate({right:-200},500)});jQuery("#twitter_right").hover(function(){jQuery(this).stop(true,false).animate({right:0},500)},function(){jQuery("#twitter_right").stop(true,false).animate({right:-250},500)});jQuery("#google_plus_right").hover(function(){jQuery(this).stop(true,false).animate({right:0},500)},function(){jQuery("#google_plus_right").stop(true,false).animate({right:-154},500)});jQuery("#feedburner_right").hover(function(){jQuery(this).stop(true,false).animate({right:0},500)},function(){jQuery("#feedburner_right").stop(true,false).animate({right:-303},500)})});</script>
<div id="on">
<div id="facebook_right" style="top:10%">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3yBng8l3tpGnovlzX5hwjaGGuxLlz9GxQoP6K6XgatzMle0THTSUM_yYyKHKVHFWwJoPniz2uxnlBT8wf16oDPmNeKLU0Lc9QJptq5AP4RnqQURsjgiHomOhxiiq8vAylHFAdiIlyGes/s1600/DrRo2.com-facebook-icon.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechniatnet&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:0;overflow:hidden;width:200px;height:346px" allowtransparency="true">
</iframe>
</div>
</div>
</div>
<!-- start Twitter code)-->
 <div id="on">  <div id="twitter_right" style="top: 27%;">  <div id="twitter_div">  <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQxskkiw3H0QUL3iMEWUhV4Wi7DlRp6pHuTdWV917Plgjt6x74ST3vDxoHlRBlZNr5FoCFtaBLdUTz-ZNUbwFEKUZ_4SmyvsNuCqVM4MH8NOGNXLo7MC07YCjVidCJBOGvtUn5_JagB01T/s1600/NBTtwitter_right.png"/><div style="width:245px;font-size:8px;text-align:right;"> <script type="text/javascript">  document.write(unescape(  "%3Cscript   src='http://twitterforweb.com/twitterbox.js?username=hocine_kaidi&settings=0,0,3,236,75,f4f4f4,0,c4c4c4,101010,1,1,336699'   type='text/javascript'%3E%3C/script%3E"));</script> </div> </div> </div> </div>
<!-- end Twitter code -->
<div id="on">
<div id="google_plus_right" style="top:44%">
<div id="google_plus_div">
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5R6qSVy5A4qFGTdE7leNy4MqlaJDkg5DWqClz5P9lA12vhK4rRbgAkKJWGysvBK8Ru8AYwPsE0wuVX7zBxdq29CZQSemgfCt9BJOgO2FxYsruaWJ3hbu_okw9bkSq93taovTYYEwzDo/s1600/DrRo2.com-google-plus-icon.png"/>
<div style="float:left;margin:10px 10px 10px 25px">
<g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
</div>

<style>img,a {border: 0;}#on{visibility: visible;}#off { visibility: hidden;} #youtube_right {z-index: 10001; background-color: #fefefe;border:2px solid #ff0000; border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden; width:301px; height: 106px;position: fixed; right: -304px;} #youtube_right_img {position: absolute; top: -2px;left: -33px; border:</style><script src="http://code.jquery.com/jquery-latest.js"></script>  
<script src="http://apis.google.com/js/plusone.js"  type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function (){ jQuery("#youtube_right").hover( function (){ jQuery(this).stop(true, false).animate({ right: 0  },500);}, function (){jQuery("#youtube_right").stop( true, false).animate( { right: -304},500); });});</script>      
<br /><div id="on"> <div id="youtube_right" style="top:61%;"><div id="youtube_div"><img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuD5TMBcPPb7pgFEPdz7atsney31_LYqOqF2sosCkaCOm5oLTB_xuN83V9U0TFOtfzcZtuLUvxTv6Vpe4z2mdI8q3DWRz6vbrkAzM5mopNjm38qYH7_fNKG43xdPyTZrPtqrQv5uR6CqE/s1600/NBTyoutube_right.png "/><div style="float:left;margin:1px 0px 0px 2px;"> <iframe src=http://www.youtube.com/subscribe_widget?p=hocinekaidi style="height:105px;width:300px;border:0;" scrolling="no" frameborder="0"></iframe>
</div></div></div></div>

مع تغيير كل ماهو باللون الأحمر كما يلي

techniatnet: قم بتغييره إلى إسم صفحة الفايسبوك الخاصة بك

hocine_kaidi: قم بتغييره إلى إسم مستخدم التويتر الخاص بك

hocinekaidi: قم بتغييره إلى إسم قناتك على اليوتيوب

إعدادات = 0،0،3،236،75، f4f4f4،0،  c4c4c4،101010،1،1،336699: هي أرقام تسلسلية تعريفية خاصة بالتويتر، تتغير من مستخدم إلى آخر (سنتطرق في آخر الموضوع إلى كيفية الحصول عليه) 2. قوموا بالتوجه لوحة تحكم آلى  البلوجر  ثم آلى المدونة الخاصة بكم

-ثم إلى تخطيط أو  تخطيط 

 -ثم إضافة أداة  إضافة أداة 

-في النافذة المنبثقة قوموا بإختيار  HTML / جافا سكريبت 

3- قم بلصق الرابط الذي قمتم بنسخه من قبل  و أتركوا مكان العنوان فارغا ثم قوموا بحفض الأداة بالضغط على SAVE 

 لقد تمت الإضافة بنجاح ...

و الآن إلى كيفية الحصول على الأرقام التسلسلية للتويتر الخاص بكم

أولا توجه نحو الرابط:  http://twitterforweb.com

هناك 6 مراحل سهلة و سريعة عليك المرور بها

المرحلة 1:  قم بكتابة إسم مستخدم التويتر الخاص بك

 المرحلة 2:  إظهار أو إخفاء تغريداتك

المرحلة 3:  إظهار أو إخفاء المتتبعين مع عدد المتتبعين في السطر الواحد في حالة الإظهار

المرحلة 4:  إختيار أبعاد الأداة من طول و عرض

المرحلة 5:  إختيار ألوان الخلفية و الإطار (من الأفضل تركها كما هي)

المرحلة 6:  إضغط على  إنشاء  ثم أنسخ فقط الأرقام الموجودة بعد  الضبط  و قم بتعويضها في الكود السابق

في نفس الوقت الذي تقومون فيه بالتعديل في هذه المراحل ستظهر لكم الأداة مع كل تغيير على يسار الصفحة

• غرد
• شاركه
• شاركه
• شاركه
• شاركه

عن الكاتبMohamed Alhkae

سيناوي الجنسية و مؤسس مدونة " ترابين كوم" احب الكتابة بالخصوص التدوين، دخل عالم التدوين منذ سنتين و يسعى دائما في تعلم المزيد عن شروحات التدوين ، من هواياته برامج تصميم و الإنترنت و كل ما له علاقة بعالم المعلومات و الحواسيب

مقالات قد تهمك