Top Ad unit 728 × 90

مواضيع ساخنة

تقنية

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

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

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

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

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

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

ملاحظة: عند الضغط على روابط التحميل ستظهر لكم صفحة إعلانات، قوموا بالضغط على Skip Add/ Passer 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="http://4.bp.blogspot.com/-pzM3IebaPHg/T3BF_Cp5ChI/AAAAAAAABTA/uPlhRvqJF2Y/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="http://3.bp.blogspot.com/-UrPbwWyd88E/UNHJhIlDSRI/AAAAAAAAIt4/fmis0qzbcfI/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="http://1.bp.blogspot.com/-08OfKvSFgp8/T3BF_ifkYhI/AAAAAAAABTI/H-tCpPulBME/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="http://2.bp.blogspot.com/-jRtgtewf7DA/UR_Gu5gijpI/AAAAAAAALX8/G_nLKDQxb-w/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:  قم بتغييره إلى إسم قناتك على اليوتيوب
settings=0,0,3,236,75,f4f4f4,0,c4c4c4,101010,1,1,336699 : هي أرقام تسلسلية تعريفية خاصة بالتويتر، تتغير من مستخدم إلى آخر (سنتطرق في آخر الموضوع إلى كيفية الحصول عليه)

2.قوموا بالتوجه إلى لوحة تحكم البلوجر ثم إلى المدونة الخاصة بكم
لوحة التحكم بلوجر

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

 -ثم إضافة أداة Add a Gadget 
إضافة أداة

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

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

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

أولا توجّه نحو الرابط: http://twitterforweb.com
هناك 6 مراحل سهلة و سريعة عليك المرور بها

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

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

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

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

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

المرحلة6: إضغط على Generate ثم أنسخ فقط الأرقام الموجودة بعد Settings و قم بتعويضها في الكود السابق
المرحلة6
في نفس الوقت الذي تقومون فيه بالتعديل في هذه المراحل ستظهر لكم الأداة مع كل تغيير على يسار الصفحة
متتبعي التويتر
يمكنك تحميل هذا الشرح على شكل ملف PDF من هنا http://adf.ly/qS1Cb أو مشاهدة هذا الفيديو في الأسفل..

الفيديو:
بلوجر: إضافة أيقونات التواصل الإجتماعي جانبية عائمة، منسدلة عند تمرير الماوس Reviewed by Hocine Kaidi on 1:18:00 م Rating: 5

هناك تعليقان (2):

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

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

الاسم

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

رسالة *

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