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

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

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

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

<div id='social-sidebar'>

   <ul>

    <li>

     <a class='entypo-twitter' href='https://twitter.com/montasertrucs' target='_blank'>

      <span>Twitter</span>

     </a>

    </li>

    <li>

     <a class='entypo-gplus' href='http://dribbble.com/Trucsprofessional' target='_blank'>

      <span>google+</span>

     </a>

    </li>

    <li>

     <a class='entypo-tumblr' href='http://www.tumblr.net/Trucsprofessional' target='_blank'>

      <span>tumblr</span>

     </a>

    </li>

<li>

     <a class='entypo-facebook' href='http://www.facebook.net/Trucsprofessional' target='_blank'>

      <span>facebook</span>

     </a>

    </li>

        <li>

     <a class='entypo-rss' href='http://feeds.feedburner.com/Trucsprofessional' 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.Trucsprofessional.blogspot.com/---------- */

/* ---------- http://Trucsprofessional.blogspot.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>

لاتنسو إخواني الكرام تغير روابطي.

هل أعجبك الموضوع ؟

الموضوع من طرف : منتصير شفيق

منتصير شفيق 24 سنة ،مدون مغربي مهووس بجديد تكنولوجيا المعلوميات ، مهتم بالحماية المعلوماتية يمكنك متابعته من خلال الفيس بوك . تويتر . جوجل بلس

ضع تعليقا أخي الكريم