3/31/2018

settings_overscan print announcement
اضافة موقعك بقائمة جانبية بمواقع التواصل لإشهار مدونتك من قبل الزوار

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

معاينة الإضافة

طريقة التركيب
اذهب للتخطيط - اضافة اداة- HTML/Javascript 

 وألصق الكود التالي مع تغيير المحدد باللون الأحمر برابط مدونتك والأسم
المحدد باللون الأزرق إتجاه الإضافة إلى يسار المدونة
إن أردت تحويلها إلى اليمين إستبدل left إلى right

<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
@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: -10px; /* (li * a:width) / -2 */
 position: fixed;
 top: 20%;
}
#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 {
    display: block;
    height: 95px;
    font-size: 19px;
    line-height: 50px;
    text-align: center;
}
#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="" href="https://telegram.me/share/url?url=http://www.hloly.com&text=حلولي | مدونة تقنية" target="_blank"><img border="0" src="https://1.bp.blogspot.com/-A8nqfRd9iI8/WpIZGaQruAI/AAAAAAAAAOA/UMQUbJ8HoZY9gnEX6KwswR14fGfdFyRDACLcBGAs/s1600/Skype.png" /></a>
    </li>
    <li>
     <a class="" href="https://twitter.com/intent/tweet?text= حلولي مدونة تقنية http://www.hloly.com" target="_blank"><img border="0" src="https://4.bp.blogspot.com/-0-Y4eyrOdsw/WpIZG5mLjII/AAAAAAAAAOE/5lsviFG5PU8YbgQSYkAmuG8sBWn6jsyGgCLcBGAs/s1600/Twitter.png" /></a>
    </li>
<li>
    </li>
    <li>
     <a class="" href="https://api.whatsapp.com/send?text=حلولي | مدونة تقنية http://www.hloly.com" target="_blank"><img border="0" src="https://3.bp.blogspot.com/-cR8fHgN996w/WpIZHR7IzlI/AAAAAAAAAOI/f3dGYS31E14EBFtjdnL89h55BpQP0iIpgCLcBGAs/s1600/Whatsapp.png" /></a>
    </li>
<li>
     <a class="" href="https://plus.google.com/share?url=http://www.hloly.com&text=حلولي | مدونة تقنية" target="_blank"><img border="0" src="https://2.bp.blogspot.com/-nkSSABNc3Yw/WpIZFrFvtQI/AAAAAAAAAN8/aUmQy0uSBBon0bGOxyjCftUEn0_GNDS0QCLcBGAs/s1600/G%252B.png" /></a>   
    </li>
        <li>
     <a class="" href="https://www.facebook.com/sharer.php?u=http://www.hloly.com&text= حلولي | مدونة تقنية " target="_blank"><img border="0" src="https://2.bp.blogspot.com/-FIZEUrTu9qA/WpIZFhzJvPI/AAAAAAAAAN4/fGFhXNa-_hErmp2YuHaDXHuLXKcSL8YlQCLcBGAs/s1600/Facebook.png" /></a> 
    </li>
   </ul>
  </div>

أي إستفسار أو مشكلة بالإضافة أكتبها بالتعليقات

add_comment هناك 4 تعليقات:

  1. غير معرف4/04/2018 04:02:00 م

    smile7

    ردحذف
  2. كيف بإمكاني تغيير الحجم ؟

    ردحذف
    الردود
    1. أهلاً بك أخي يمكنك تغييرها ولكن ستفقد جودتها
      بإمكانك متابعة قسم الأيقونات ستجد أيقونات عدة بأحجام مختلفة إختر منها ماتراه مناسب
      http://www.hloly.com/search/label/%D8%A7%D9%8A%D9%82%D9%88%D9%86%D8%A7%D8%AA

      حذف