إضافة أيقونات المواقع الإجتماعية : إحترافية وحصرية للمواقع والمدونات

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

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

كيفية إضافة الشريط الجانبي :
 

أضف هذا الكود في أدات  html/java

<div id='social-sidebar'><ul><li><a class='entypo-twitter' href='https://twitter.com/thepro_info' target='_blank'><span>Twitter</span></a></li><li><a class='entypo-gplus' href='http://dribbble.com/4thepf' target='_blank'><span>google+</span></a></li><li><a class='entypo-tumblr' href='http://www.tumblr.net/4thepf' target='_blank'><span>tumblr</span></a></li><li><a class='entypo-facebook' href='http://www.facebook.net/thepro.informatique' target='_blank'><span>facebook</span></a></li><li><a class='entypo-rss' href='http://feeds.feedburner.com/4thepro' target='_blank'><span>feedburner</span></a></li></ul></div><style type='text/css'>/*<![CDATA[*/ @charset "utf-8"; /* CSS Document */ /* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.4thepf.com/---------- */ /* ---------- http://4thepf.com/ ---------- */ @import url(http://weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } /* ---------- GENERAL ---------- */ #social-sidebar a { text-decoration: none; } #social-sidebar ul { list-style: none; margin: 0; padding: 0; } /* ---------- Social Sidebar ---------- */ #social-sidebar { left: 0; margin-top: -75px; /* (li * a:width) / -2 */ position: fixed; top: 50%; } #social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; } #social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; } #social-sidebar ul li a { background: #121212; color: #fff; display: block; height: 50px; font-size: 18px; line-height: 50px; position: relative; text-align: center; width: 50px; } #social-sidebar ul li a:hover span { left: 130%; opacity: 1; } #social-sidebar ul li a span { border-radius: 3px; line-height: 24px; left: -100%; margin-top: -16px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; padding: 4px 8px; position: absolute; -webkit-transition: opacity .3s, left .4s; -moz-transition: opacity .3s, left .4s; -ms-transition: opacity .3s, left .4s; -o-transition: opacity .3s, left .4s; transition: opacity .3s, left .4s; top: 50%; z-index: -1; } #social-sidebar ul li a span:before { content: ""; display: block; height: 8px; left: -4px; margin-top: -4px; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; z-index: -2; } #social-sidebar ul li a[class*="twitter"]:hover, #social-sidebar ul li a[class*="twitter"] span, #social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; } #social-sidebar ul li a[class*="gplus"]:hover, #social-sidebar ul li a[class*="gplus"] span, #social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; } #social-sidebar ul li a[class*="tumblr"]:hover, #social-sidebar ul li a[class*="tumblr"] span, #social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; } #social-sidebar ul li a[class*="facebook"]:hover, #social-sidebar ul li a[class*="facebook"] span, #social-sidebar ul li a[class*="facebook"] span:before { background: #234999; } #social-sidebar ul li a[class*="rss"]:hover, #social-sidebar ul li a[class*="rss"] span, #social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; } /*]]>*/ </style>

لا تنسو يا إخوان روابطي بروابطكم المشار إليها بالأحمر 
أتمنى إن تعجبكم الإضافة

***********************

***********************

اذا لم تجد المطلوب في الصفحة يمكنك البحث هنا في جوجل للتحويلك الي موضوع اخر

: شارك

Tweet

✚

مواضيع ذات صلة