أصبحت مواقع التواصل الإجتماعي من أهم و أفضل المواقع الإعلانية، لذلك لا
يخلو أي موقع أو مدونة إحترافية من صفحات رسمية لمواقع التواصل الإجتماعي.
و قد نعتبر أن أهم أسباب نجاح المدونات الصغيرة أو بالأحرى التي كانت صغيرة هو هذه المواقع، لذلك الأحرى بكل مدون ربط مدونته بحساباته في المواقع الإجتماعية...
و قد نعتبر أن أهم أسباب نجاح المدونات الصغيرة أو بالأحرى التي كانت صغيرة هو هذه المواقع، لذلك الأحرى بكل مدون ربط مدونته بحساباته في المواقع الإجتماعية...
اليوم قررت أن آتيكم بكود وجدته على الأنترنت و قمت بتعديله شخصيا ليصبح أكثر تناسقا، هذا الكود يمكّنكم من إضافة أيقونات الفايسبوك، التويتر، قوقل بلس ويوتيوب على جانب المدونة حيث تبقى ثابتة في مكان واحد مهما صعدتم أو نزلتم في الصفحة، مع تأثير جميل حيث و بمجرد تمرير مؤشر الماوس على إحدى هذه الأيقونات تنسدل كاشفة محتواها.
و ما يميز هذه الإضافة عن غيرها من الإضافات بالإضافة إلى أناقتها و جمالها هو إحتوائها لأربع مواقع في وقت واحد دون أن تأخذ مكان كبير في المدونة، حيث يعتبر عدم توفر المكان مشكل الكثير من المدونين الذين يثبّتون الكثير من الإضافات في مدوناتهم (لا ينصح بوضع عدد زائد من الإضافات في المدونة الواحدة)
أولا شاهدو الإضافة في الصورة أعلاه، أو يمكنكم معاينتها في مدونتنا هذه (على اليمين)
و الآن سنتطرق على بركة الله إلى طريقة التثبيت
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12HvOpu8LIEwxMcVkludVd8mrmSQ7NYwArvoxwH1DGrPv0IqXKwaHKXgTHB_SP-20KRyCrXWHa8YzhCIhnUcC6Ic-ddkmzfDiGUXzkc09K3Gw9PK7wF6f9rGhkaBbe3XK7lIY3pb3F6k/s1600/DrRo2.com-facebook-icon.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechniatnet&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&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/AVvXsEgMyDpz0hM62L2z80f6ERvBAVS4P7pk4sC77odKADvCEbtiPjJ_9wHmNCFn4ekFgtA62kKbOEDj013eQfsA6cOIYoWIPFpMiSLVzOcdVcYfRIId16a5UDMN5drqlu35b-a7IRLtESGc_Y6q/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/AVvXsEibaTQrGEIGVWlCud-g57BPGuYdmeQXsoK7Pkl7gmevUurH-6Wl29PiqTkaJQ_iDF0D_VRuaycTxiRNcAhIbaetbHOCFPWRGc_7JBr4yrf7jN0GNxKCsg5_rYtC0dlOlqPEmM1XhxjK9wc/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/AVvXsEjN3oHjXNrLZgIf_FFtOR-YI_1b1Wx2Y1HvgmXju2aZ6Xq8_3MiXm0sqT1kQh3k3o1dT4v1PrSVksYGto1SnacA41O62l3zK0IF-CR30cTNCE_c4jzGypVyp1twfWXRf76dUWLOTffhF1M/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.قوموا بالتوجه إلى لوحة تحكم البلوجر ثم إلى المدونة الخاصة بكم
2.قوموا بالتوجه إلى لوحة تحكم البلوجر ثم إلى المدونة الخاصة بكم
-ثم إلى تخطيط أو Layout
-ثم إضافة أداة Add a Gadget
-في النافذة المنبثقة قوموا بإختيار HTML/JavaScript
3-قم بلصق الرابط الذي قمتم بنسخه من قبل و أتركوا مكان العنوان فارغا ثم قوموا بحفض الأداة بالضغط على SAVE
لقد تمت الإضافة بنجاح...
و الآن إلى كيفية الحصول على الأرقام التسلسلية للتويتر الخاص بكم
أولا توجّه نحو الرابط: http://twitterforweb.com
هناك 6 مراحل سهلة و سريعة عليك المرور بها
المرحلة1: قم بكتابة إسم مستخدم التويتر الخاص بك
المرحلة2: إظهار أو إخفاء تغريداتك
المرحلة3: إظهار أو إخفاء المتتبعين مع عدد المتتبعين في السطر الواحد في حالة الإظهار
المرحلة4: إختيار أبعاد الأداة من طول و عرض
المرحلة5: إختيار ألوان الخلفية و الإطار (من الأفضل تركها كما هي)
المرحلة6: إضغط على Generate ثم أنسخ فقط الأرقام الموجودة بعد Settings و قم بتعويضها في الكود السابق
في نفس الوقت الذي تقومون فيه بالتعديل في هذه المراحل ستظهر لكم الأداة مع كل تغيير على يسار الصفحة
يمكنك تحميل هذا الشرح على شكل ملف PDF من هنا http://adf.ly/qS1Cb أو مشاهدة هذا الفيديو في الأسفل..
الفيديو:
مشكور اخى
ردحذفعفوا أخي و شكرت على مرورك....
حذف