إشترك في القائمة البريدية.

أضف أيقونات الشبكات الإجتماعية بشكل جميل إلى مدونتك ترافق الزائر ومع أكثر من لون





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





لنبدأ على بركة الله 

1. إدخل إلى حساب مدونتك.
2. إختر تصميم.
3. إظغط على تحرير الأشتمل Html.
4. إبحث عن <head>.
5. أنقل هذا الكود في أسفله:

بمعنى أسفل <head> مباشرة
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
7. الأن إظغط على حفظ القالب .

8. الأن وبعد حفظ القالب إختر تصميم
 .

9. ثم أنقر على إضافة أداة.

10. في النافذة التي ستضهر لك سوف تختار
 HTML/Javascript  .

11. الأن سوف تلسق الكود دو اللون الذي تريد في المربع الكبير .



الأحمر



<!-- Social Media Share By Www.homeblooger.blogspot.com  --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ff2d26), color-stop(1, #bf211c));background:-moz-linear-gradient(top, #3492cc, #aaa);border:1px solid #1a4966;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:right;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br />
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://homeblooger.blogspot.com/2012/03/blog-post_23.html" title="أضف هذه الأداة إلى مدونتك!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Social Media Share By Www.homeblooger.blogspot.com -->

الأخضر


<!-- Social Media Share By Www.homeblooger.blogspot.com  --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #76bf5b), color-stop(1, #4f7f3d));background:-moz-linear-gradient(top, #4f7f3d, #aaa);border:1px solid #4f7f3d;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:right;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br />
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://homeblooger.blogspot.com/2012/03/blog-post_23.html" title="أضف هذه الأداة إلى مدونتك!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Social Media Share By Www.homeblooger.blogspot.com -->

الأزرق




<!-- Social Media Share By Www.homeblooger.blogspot.com  --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3492cc), color-stop(1, #1a4966));background:-moz-linear-gradient(top, #3492cc, #aaa);border:1px solid #1a4966;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:right;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br />
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://homeblooger.blogspot.com/2012/03/blog-post_23.html" title="أضف هذه الأداة إلى مدونتك!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Social Media Share By Www.homeblooger.blogspot.com -->


الأصفر



<!-- Social Media Share By Www.homeblooger.blogspot.com  --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fffdba), color-stop(1, #fffdba));background:-moz-linear-gradient(top, #3492cc, #aaa);border:1px solid #1a4966;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:right;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br />
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://homeblooger.blogspot.com/2012/03/blog-post_23.html" title="أضف هذه الأداة إلى مدونتك!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Social Media Share By Www.homeblooger.blogspot.com -->

البرتقالي



<!-- Social Media Share By Www.homeblooger.blogspot.com  --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FF6600), color-stop(1, #FF6103));background:-moz-linear-gradient(top, #FF6103, #FF6103);border:1px solid #1a4966;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:right;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br />
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://homeblooger.blogspot.com/2012/03/blog-post_23.html" title="أضف هذه الأداة إلى مدونتك!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Social Media Share By Www.homeblooger.blogspot.com -->



الأسود



<!-- Social Media Share By Www.homeblooger.blogspot.com  --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #383838), color-stop(1, #1c1c1c));background:-moz-linear-gradient(top, #1c1c1c, #aaa);border:1px solid #4f7f3d;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:right;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br />
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://homeblooger.blogspot.com/2012/03/blog-post_23.html" title="أضف هذه الأداة إلى مدونتك!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Social Media Share By Www.homeblooger.blogspot.com -->

الرمادي



<!-- Social Media Share By Www.homeblooger.blogspot.com  --><style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br />
<div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://homeblooger.blogspot.com/2012/03/blog-post_23.html" title="أضف هذه الأداة إلى مدونتك!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Social Media Share By Www.homeblooger.blogspot.com -->


أبيض


<!-- Social Media Share By Www.homeblooger.blogspot.com  --><style>#floatingbuttons{background:#fff;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #fff));background:-moz-linear-gradient(top, #4f7f3d, #aaa);border:1px solid #4f7f3d;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:right;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><br /><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button --><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://homeblooger.blogspot.com/2012/03/blog-post_23.html" title="أضف هذه الأداة إلى مدونتك!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div><!-- end Social Media Share By Www.homeblooger.blogspot.com -->



تم وبحمد الله 

أرجو أن أكون قد وفقت في هذا الدرس وأي مشكلة إتركها في التعليقات

إشترك في مدونتنا وتوصل بأخر المواضيع.

إشترك في القائمة البريدية

1 تعليق

25 أبريل 2012 4:15 م

موضوع جميل تسلم الأيادي

إرسال تعليق

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

أضف موقعك أو مدونتك إلى جوجل شرح بالصور

أرسل موقعك أو مدونتك إلى محرك البحث الشهير شرح كامل وبالصور ...

إقرأ الموضوع

أضف مدونتك إلى 40 دليل لكسب المزيد من الترافيك

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

إقرأ المزيد

شرح كامل لإضافة تعليقات الفايسبوك إلى البلوجر

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

إقرأ المزيد

شرح إضافة ترقيم الصفحات لمدونات بلوجر

نتطرق في هذا الموضوع إلى شرح لطريقة إضافة ترقيم الصفحات لدى مدونات البلوجر ...

إقرأ المزيد

تحميل سكربت ووردبريس 3.3.1

حمل أحدث وأخر نسخة من السكربت الرائع ووردبريس مجانا...

إقرأ المزيد

شرح عمل مدونة بلوجر بالفيديو

شرح كامل وبالفيديو لطريقة عمل مدونة بلوجر رفقة الواجهة الجديدة للبلوجر...

Read More

إضافات