U3F1ZWV6ZTExMjI1NjE2ODE2X0FjdGl2YXRpb24xMjcxNzA3NTMyMjc=

إضافة أزرار مواقع التواصل الاجتماعي في بلوجر - تدعم المواقع العربية

مرحبا , متابعين و زوار موقعنا تناولنا في التدوينة السابقة كل ماهو متعلق بـ كلاود فلير اما اليوم لدينا إضافة تقريبا موجهة لـ مطورين فوالب بلوجر حيث أن إضافة مواقع التواصل الإجتماعي هي أداة مهمة في كل القوالب ... لقد قمت بـ برمجة أداة بسيطة تعمل بطريقة ذكية بحث يتم إضافة إيقونة منصة التواصل و رابطها إعتماداَ على أداة قائمة الروابط وغالبا موجودة في القوالب المدفوعة وهي مبنية على الـHTML و الـCSS و XML الخاصة بـ بلوجر فقط .
إضافة أزرار مواقع التواصل الاجتماعي في بلوجر - تدعم المواقع العربية


هذه الإضافة جد ممتازة بحيث أنها تدعم ايقونات المواقع العربية - خمسات - بيكاليكا - كفيل - سوق.كوم - مهاراتي - موضوع - وطبعا موقعنا مبروك تك , وكذالك هذا النوع يعتمد على مكتبة fontawesomeإصدار v 4.7.0 , الآن ننتقل الى طريقة التركيب و الإستخدام .. تابعوا :





  • 1← قم بالتوجه الى لوحة التحكم بلوجر .

  • 2← إستعمل CTRL + C للنسخ و CTRL + V للصق او زر الفأرة الأيمن .

  • 3← أنقر داخل محرر الأكواد و إستعمل CTRL + F لإخراج محرك البحث .

  • 4← الآن تابع الخطوات خطوة بخطوة لإستبعاد خيار الخطأ اثناء التركيب . ↓ .


  • 1← إبحث عن وسم الإغلاق ]]></b:skin> ← من اجل إضافة اكواد الcss , بعدما تجده ضع الأكواد التالية تحته مباشرة :


  • /**
    * Copyright 2020 MABROUK TEC
    * License : Free, 2020/10/11
    * Version : 1.0.0,
    * Homepage: https://www.mabrouktec.com
    */
    .fa-khamsat{background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28' %3E%3Cpath fill='%23fff' d='M0.475-0.065h0.429c2.759-0.024 5.405-0.019 7.94 0.019v5.443h-3.355c0 0.41 0.004 0.979 0.009 1.706s0.009 1.301 0.009 1.724c-1.342 0.41-2.494 1.096-3.458 2.060s-1.644 2.084-2.041 3.364c-0.037-2.212-0.043-6.705-0.019-13.476v-0.391c0-0.037-0.004-0.084-0.009-0.14s-0.009-0.093-0.009-0.112v-0.075c0 0 0.009-0.019 0.028-0.056s0.037-0.050 0.056-0.037 0.050 0.004 0.093-0.028h0.326zM9.683-0.047c0.969 0 2.488-0.004 4.557-0.009s3.588-0.009 4.557-0.009c0.050 2.261 0.075 4.082 0.075 5.461h-9.189v-5.443zM8.844 8.733c0 0.472 0.006 1.45 0.019 2.936s0.006 2.246-0.019 2.283c-0.062 0.013-0.14 0.032-0.233 0.056s-0.274 0.093-0.541 0.205-0.518 0.242-0.755 0.391-0.494 0.36-0.774 0.634-0.509 0.572-0.69 0.895c-0.181 0.322-0.313 0.731-0.401 1.221s-0.093 1.016-0.019 1.575c-0.434 0.037-2.106 0.037-5.014 0-0.037-1.217 0.069-2.334 0.317-3.346s0.615-1.896 1.1-2.647 1.087-1.413 1.808-1.985c0.721-0.572 1.51-1.038 2.367-1.398s1.802-0.634 2.833-0.82zM10.093 27.968h-0.41v-5.443c1.366 0.41 2.548 0.149 3.541-0.783 0.796-0.746 1.286-1.733 1.473-2.964 0.186-1.292-0.032-2.41-0.652-3.355-0.783-1.206-2.032-1.776-3.747-1.715-0.199 0-0.404 0.013-0.615 0.037v-5.014c2.908-0.36 5.262 0.317 7.064 2.032 1.404 1.329 2.293 3.1 2.665 5.312 0.349 2.138 0.144 4.207-0.615 6.207-0.783 2.050-1.994 3.573-3.635 4.567-1.478 0.895-3.169 1.267-5.070 1.118zM0.885 22.544c0.796 0 2.121-0.006 3.979-0.019s3.184-0.019 3.98-0.019v5.48h-7.94c0-0.895-0.004-1.879-0.009-2.954s-0.009-1.905-0.009-2.488z' class=''%3E%3C/path%3E%3C/svg%3E");height:18px;width:18px;display:inline-flex;top:4px;position:relative;}
    .fa-messenger{background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' %3E%3Cpath fill='%23fff' d='M14 0c-7.732 0-14 5.803-14 12.963 0 4.081 2.035 7.716 5.214 10.096v4.941l4.769-2.616c1.274 0.35 2.62 0.541 4.017 0.541 7.731 0 14-5.804 14-12.962s-6.269-12.964-14-12.964zM15.39 17.457l-3.564-3.803-6.957 3.803 7.652-8.123 3.653 3.802 6.87-3.802-7.654 8.123z' class=''%3E%3C/path%3E%3C/svg%3E");height:18px;width:18px;display:inline-flex;top:4px;position:relative;}
    .fa-kafiil{background:no-repeat center url(https://kafiil.com/resources/images/default/icon.png);height:30px;width:30px;background-size:30px;display:inline-flex;top:10px;position:relative;}
    .fa-picalica{background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134.61 127.89' %3E%3Cpath fill='%23fff' d='M67.3,21.85A42.09,42.09,0,1,0,109.4,63.95,42.14,42.14,0,0,0,67.3,21.85Zm0,74.47A32.42,32.42,0,0,1,34.92,63.94a3.68,3.68,0,0,1,7.37,0,25,25,0,0,0,25,25,3.68,3.68,0,1,1,0,7.37Zm8.3-27.59a10.27,10.27,0,0,1-7.51,3.11H66.64v5.29a3.63,3.63,0,1,1-7.27,0V54.21a3.64,3.64,0,0,1,.28-1.4,3.54,3.54,0,0,1,.78-1.17,3.61,3.61,0,0,1,1.15-.77A3.65,3.65,0,0,1,63,50.58H68.1a10.43,10.43,0,0,1,2.81.38A10.7,10.7,0,0,1,73.45,52a11.18,11.18,0,0,1,2.15,1.66,10.47,10.47,0,0,1,1.68,2.16,11.09,11.09,0,0,1,1.08,2.52,10.19,10.19,0,0,1,.4,2.83A10.31,10.31,0,0,1,75.61,68.74ZM96,67.63a3.69,3.69,0,0,1-3.68-3.69,25,25,0,0,0-25-25,3.68,3.68,0,0,1,0-7.37A32.42,32.42,0,0,1,99.69,63.94,3.69,3.69,0,0,1,96,67.63Z' class=''%3E%3C/path%3E%3Cpath fill='%23fff' d='M71.21,62.5a3.2,3.2,0,0,0,.26-1.29,3.24,3.24,0,0,0-.26-1.31,3.49,3.49,0,0,0-.74-1.09,3.43,3.43,0,0,0-1.09-.72,3.23,3.23,0,0,0-1.28-.26H66.64v6.74H68.1a3.13,3.13,0,0,0,1.27-.26,3.56,3.56,0,0,0,1.1-.73A3.49,3.49,0,0,0,71.21,62.5Z' class=''%3E%3C/path%3E%3C/svg%3E");height:30px;width:30px;display:inline-flex;top:10px;background-size:40px;position:relative;border-radius:90px;}
    .fa-google-play{background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' %3E%3Cpath fill='%23fff' d='M6.111 0.448c-1.095-0.605-2.382-0.591-3.47 0.009l12.757 11.768 4.286-4.286-13.572-7.491z' class=''%3E%3C/path%3E%3Cpath fill='%23fff' d='M1.366 1.661c-0.311 0.509-0.49 1.092-0.49 1.71v21.254c0 0.598 0.163 1.169 0.457 1.668l12.829-12.829-12.795-11.803z' class=''%3E%3C/path%3E%3Cpath fill='%23fff' d='M25.366 11.075l-4.088-2.256-4.593 4.592 5.629 5.192 3.054-1.685c1.099-0.609 1.757-1.701 1.757-2.922-0.002-1.221-0.658-2.313-1.759-2.921z' class=''%3E%3C/path%3E%3Cpath fill='%23fff' d='M15.447 14.65l-12.864 12.864c0.558 0.318 1.171 0.486 1.787 0.486 0.595 0 1.193-0.151 1.741-0.453l14.589-8.051-5.253-4.845z' class=''%3E%3C/path%3E%3C/svg%3E");height:18px;width:18px;display:inline-flex;top:4px;position:relative;}
    .fa-blogger{background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' %3E%3Cpath fill='%23fff' d='M26.19 10.5h-1.57c-0.962 0-1.804-0.813-1.87-1.75v0c0-4.995-4.027-8.75-9.056-8.75h-4.589c-5.026 0-9.102 4.047-9.105 9.042v9.92c0 4.994 4.079 9.038 9.105 9.038h9.801c5.030 0 9.094-4.044 9.094-9.038v-6.409c0-0.998-0.805-2.053-1.81-2.053zM8.75 7h5.25c0.963 0 1.75 0.788 1.75 1.75s-0.787 1.75-1.75 1.75h-5.25c-0.962 0-1.75-0.787-1.75-1.75s0.788-1.75 1.75-1.75zM19.25 21h-10.5c-0.962 0-1.75-0.787-1.75-1.75s0.788-1.75 1.75-1.75h10.5c0.963 0 1.75 0.787 1.75 1.75s-0.787 1.75-1.75 1.75z' class=''%3E%3C/path%3E%3C/svg%3E");height:18px;width:18px;display:inline-flex;top:4px;position:relative;}
    .fa-mabrouktec{background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121.000000 122.000000' %3E%3Cg transform='translate(0.000000,122.000000) scale(0.100000,-0.100000)' stroke='none' %3E%3Cpath fill='%23fff' d='M147 1068 l112 -113 -6 -331 -6 -331 74 -114 c40 -63 81 -125 91 -138 17 -23 18 -9 18 435 l1 459 85 -90 85 -90 87 93 c48 50 91 92 95 92 4 0 7 -204 7 -452 l0 -453 85 129 85 130 0 330 0 331 112 112 113 113 -195 0 -195 0 -90 -90 c-49 -49 -93 -90 -98 -90 -4 0 -47 41 -94 90 l-85 90 -196 0 -197 0 112 -112z' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E");height:30px;width:30px;background-size:25px;display:inline-flex;top:10px;position:relative;}
    .fa-souq{background:no-repeat center url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100.000000 41.000000' %3E%3Cg transform='translate(0.000000,41.000000) scale(0.100000,-0.100000)' stroke='none' %3E%3Cpath fill='%23fff' d='M190 395 c-15 -18 -5 -35 21 -35 12 0 19 7 19 19 0 24 -25 34 -40 16z' class=''%3E%3C/path%3E%3Cpath fill='%23fff' d='M303 403 c-21 -8 -15 -43 6 -43 11 0 23 5 27 11 8 14 -17 38 -33 32z' class=''%3E%3C/path%3E%3Cpath fill='%23fff' d='M0 260 c0 -39 6 -86 14 -104 24 -57 47 -66 173 -66 l113 0 35 32 c106 98 -12 264 -135 192 -52 -31 -76 -106 -50 -155 10 -17 7 -19 -22 -19 -56 0 -62 11 -68 102 -5 82 -5 83 -32 86 l-28 3 0 -71z m305 -5 c14 -13 25 -33 25 -45 0 -27 -43 -70 -70 -70 -27 0 -70 43 -70 70 0 12 11 32 25 45 13 14 34 25 45 25 12 0 32 -11 45 -25z' class=''%3E%3C/path%3E%3Cpath fill='%23fff' d='M456 299 c-61 -53 -58 -130 7 -185 28 -23 38 -26 84 -21 l53 6 0 -40 c0 -36 2 -40 23 -37 17 2 23 11 25 35 l3 32 97 4 c53 3 102 6 107 6 6 1 27 -2 47 -5 31 -5 41 -2 62 20 24 23 26 31 26 121 0 95 0 95 -25 95 -25 0 -25 -1 -25 -84 0 -62 -4 -87 -15 -96 -12 -10 -18 -10 -30 0 -11 9 -15 34 -15 96 0 83 0 84 -25 84 -25 0 -25 -1 -25 -84 0 -62 -4 -87 -15 -96 -12 -10 -18 -10 -30 0 -11 9 -15 34 -15 97 0 82 -1 84 -22 81 -22 -3 -23 -8 -26 -95 l-3 -93 -34 0 -35 0 0 50 c0 62 -21 105 -60 125 -48 25 -94 19 -134 -16z m119 -44 c32 -31 32 -59 0 -90 -46 -47 -105 -21 -105 45 0 66 59 92 105 45z' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E");height:30px;width:40px;background-size:40px;display:inline-flex;top:10px;position:relative;}
    .fa-mawdoo3{background:no-repeat center url(https://lh3.googleusercontent.com/-mIAdHoWO-1M/X4M_m7HWv1I/AAAAAAAAYM4/gsGmcAmN7IAO7CEbZETlKsXMLIOl9P2tgCLcBGAsYHQ/icons-v18.png);height:30px;width:50px;background-size:50px;display:inline-flex;top:10px;position:relative;}
    .fa-maharati{background:no-repeat center url(https://www.maharati.com/assets/images/favicon.png);height:30px;width:30px;background-size:30px;display:inline-flex;top:10px;position:relative;}
    .social-color .mabrouktec a{background-color:#901a3a;}
    .social-color .mawdoo3 a{background-color:#27b5bb;}
    .social-color .maharati a{background-color:#ffffff;}
    .social-color .souq a{background-color:#008bff;}
    .social-color .blogger a{background-color:#fc9644;}
    .social-color .facebook a{background-color:#1877f2;}
    .social-color .kafiil a{background-color:#ffffff;}
    .social-color .youtube a{background-color:#ff0000;}
    .social-color .whatsapp a{background-color:#25d366;}
    .social-color .google-play a{background-color:#3d9dab;}
    .social-color .picalica a{background-color:#7473b5;}
    .social-color .khamsat a{background-color:#f9b01c;}
    .social-color .messenger a{background-color:#0078FF;}
    .social-color .wechat a{background-color:#7BB32E;}
    .social-color .instagram a{background:linear-gradient(15deg,#FFC107,#D81B60,#5C6BC0);}
    .social-color .qq a{background-color:#000002;}
    .social-color .tumblr a{background-color:#35465d;}
    .social-color .qzone a{background-color:#000000;}
    .social-color .tiktok a{background-color:#EE1D52;}
    .social-color .twitter a{background-color:#1da1f2;}
    .social-color .reddit a{background-color:#ff4500;}
    .social-color .linkedin a{background-color:#007bb5;}
    .social-color .snapchat a{background-color:#fffc00;}
    .social-color .pinterest a{background-color:#bd081c;}
    .social-color .telegram a{background-color:#0088cc;}
    .social-color .medium a{background-color:#292929;}
    .social-color .dribbble a{background-color:#ea4c89;}
    .social-color .twitch a{background-color:#6441a5;}
    .social-color .rss a{background-color:#ffc200;}
    .social-color .skype a{background-color:#00aff0;}
    .social-color .stumbleupon a{background-color:#eb4823;}
    .social-color .vk a{background-color:#4a76a8;}
    .social-color .stack-overflow a{background-color:#f48024;}
    .social-color .github a{background-color:#24292e;}
    .social-color .soundcloud a{background:linear-gradient(#ff7400,#ff3400);}
    .social-color .behance a{background-color:#191919;}
    .social-color .digg a{background-color:#1b1a19;}
    .social-color .codepen a{background-color:#000;}
    .social-color .email a{background-color:#424242;}
    .social-color .external-link a{background-color:#202020;}
    ul.social-counter{margin:0;list-style:none;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-gap:10px;}
    .social-counter li{box-sizing:border-box;padding:0;margin:0;}
    .social-counter li a{background:orangered;color:#fff;font-size:18px;width:100%;height:100%;line-height:50px;text-align:center;position:relative;z-index:1;display:block;padding:0;margin:0;overflow:hidden;vertical-align:middle;cursor:pointer;border-radius:5px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.18);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
    .social-counter li a:hover{opacity:.8;}
    
  • 2← إبحث عن الوسم </b:section> حتى نضع اكواد HTML , عندما تجده ضع ألأكواد التالية فوقه : .

  • <b:widget id='LinkList75' locked='false' title='ازرار التواصل الإجتماعي' type='LinkList' version='2' visible='true'>
        <b:widget-settings>
          <b:widget-setting name='text-22'>telegram</b:widget-setting>
          <b:widget-setting name='text-23'>medium</b:widget-setting>
          <b:widget-setting name='text-9'>facebook</b:widget-setting>
          <b:widget-setting name='text-8'>khamsat</b:widget-setting>
          <b:widget-setting name='text-20'>snapchat</b:widget-setting>
          <b:widget-setting name='text-21'>pinterest</b:widget-setting>
          <b:widget-setting name='text-1'>maharati</b:widget-setting>
          <b:widget-setting name='text-0'>mawdoo3</b:widget-setting>
          <b:widget-setting name='text-3'>mabrouktec</b:widget-setting>
          <b:widget-setting name='text-2'>souq</b:widget-setting>
          <b:widget-setting name='text-5'>kafiil</b:widget-setting>
          <b:widget-setting name='text-4'>blogger</b:widget-setting>
          <b:widget-setting name='text-7'>google-play</b:widget-setting>
          <b:widget-setting name='text-6'>picalica</b:widget-setting>
          <b:widget-setting name='text-19'>linkedin</b:widget-setting>
          <b:widget-setting name='text-15'>qq</b:widget-setting>
          <b:widget-setting name='text-16'>tumblr</b:widget-setting>
          <b:widget-setting name='text-17'>twitter</b:widget-setting>
          <b:widget-setting name='text-18'>reddit</b:widget-setting>
          <b:widget-setting name='text-11'>whatsapp</b:widget-setting>
          <b:widget-setting name='text-12'>messenger</b:widget-setting>
          <b:widget-setting name='text-13'>wechat</b:widget-setting>
          <b:widget-setting name='text-14'>instagram</b:widget-setting>
          <b:widget-setting name='text-10'>youtube</b:widget-setting>
          <b:widget-setting name='link-17'>#</b:widget-setting>
          <b:widget-setting name='link-16'>#</b:widget-setting>
          <b:widget-setting name='link-19'>#</b:widget-setting>
          <b:widget-setting name='sorting'>NONE</b:widget-setting>
          <b:widget-setting name='link-18'>#</b:widget-setting>
          <b:widget-setting name='link-1'>http://</b:widget-setting>
          <b:widget-setting name='link-13'>#</b:widget-setting>
          <b:widget-setting name='link-2'>http://</b:widget-setting>
          <b:widget-setting name='link-12'>#</b:widget-setting>
          <b:widget-setting name='link-15'>#</b:widget-setting>
          <b:widget-setting name='link-0'>http://</b:widget-setting>
          <b:widget-setting name='link-14'>#</b:widget-setting>
          <b:widget-setting name='link-11'>#</b:widget-setting>
          <b:widget-setting name='link-10'>#</b:widget-setting>
          <b:widget-setting name='link-9'>#</b:widget-setting>
          <b:widget-setting name='link-7'>http://</b:widget-setting>
          <b:widget-setting name='link-8'>http://</b:widget-setting>
          <b:widget-setting name='link-5'>http://</b:widget-setting>
          <b:widget-setting name='link-6'>http://</b:widget-setting>
          <b:widget-setting name='link-3'>http://</b:widget-setting>
          <b:widget-setting name='link-4'>http://</b:widget-setting>
          <b:widget-setting name='link-23'>#</b:widget-setting>
          <b:widget-setting name='link-20'>#</b:widget-setting>
          <b:widget-setting name='link-22'>#</b:widget-setting>
          <b:widget-setting name='link-21'>#</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
      <b:include name='widget-title'/>
      <b:include name='content'/>
    </b:includable>
        <b:includable id='content'>
                  <div class='widget-content'>
                    <ul class='social-counter social social-color'>
                      <b:loop values='data:links' var='link'>
                        <li expr:class='data:link.name'><a expr:href='data:link.target' expr:title='data:link.name' target='_blank'><i expr:class='&quot;fa fa-&quot; + data:link.name'/></a></li>
                      </b:loop>
                    </ul>
                  </div>
                </b:includable>
      </b:widget>
    

    ملحوظة : وسم الإغلاق </b:section> مكرر اكثر من مرة لكن نحن لانبحث عن وسم معين فـ بذالك لايهم أي تضعها لأننا نستطيع التحكم في مكانها من التخطيط بسهولة .
  • 1← الآن إضغط على زر حفظ - إذا كنت تستخدم الإصدار الأخير من بلوجر تجد زر الحفظ على شكل ايقونة :


  • 1← توجه الى التخطيط و إبحث عن اداة تحت مسمى - ازرار التواصل الإجتماعي - .


  • 2← يمكنك تحويل الأداة الى أي مكان تريد - ونحن نرى ان منطقة السايد بار ( الشريط الجانبي ) او التذييل ( footer ) هي المكان الأنسب لهذه الأداة .




  • من أجل إضافة أو حذف ايقونات مواقع التواصل الإجتماعي : فقط قم بالدخول إلى التخطيط و إضغط تعديل للإداة التي اضفناها مسبقا - ادخل اسم الموقع في - اسم الموقع الجديد- و رابط الموقع في - عنوان URL للموقع الجديد - و إضغط إضافة أرتباط فقط .. كما يوضح في الصورة التالية .

    ملحوظة .. هذه الإضافة تستلزم وجود مكتبة fontawesome.css , علما بأن كل المواقع العربية تشتغل بدونها .

    نتمنى أن يكون هذا الشرح وافي و كافي كما أتمنى لـ زملائي المطورين و خاصة - المبتدءين - التوفيق , سـ ننشر حلقات أكثر في قسم - المطورين :)
    الاسمبريد إلكترونيرسالة