موضوع اليوم علي مدونة الزعيم هو كيفية إضافة أزرار عائمة ومنزلقة بجانب المدونة بتقنية CSS، عند إضافة زر تويتر جوجل فيس بوك العائم فأنت لا تحتاج إلي توفر مكان في مدونتك أو موقعك لأنها خفيفة يتم تركيبها علي جانب المدونة ولا تأخذ مساحة.
أزرار تويتر جوجل فيس بوك عائمة ومنزلقة CSS
كيفية التركيب:
لإضافة أزرار مواقع التواصل الاجتماعي لمدونتك
إذهب إلى لوحة تحكم بلوجر .
اختر تخطيط .
إضغط علي إضافة أداة .
إختر HTML/Javascript .
أضف الكود واضغط حفظ.
<style type="text/css">/*<![CDATA[*/@charset "utf-8";/* CSS Document *//* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.zaiim.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><div id="social-sidebar"> <ul><li><a class="entypo-twitter" href="https://twitter.com/osmon1993"rel="nofollow" target="_blank"><span>Twitter</span></a></li><li> <a class="entypo-gplus" href="https://plus.google.com/OSSAMA" rel="nofollow" target="_blank"><span>google+</span></a></li><li> <a class="entypo-facebook" href="https://www.facebook.com/zaiimweb" rel="nofollow" target="_blank"><span>facebook</span></a><a href="http://www.zaiim.com/" style="display:none">الزعيم<
/a></li></ul> </div>
ليست هناك تعليقات :
إرسال تعليق