أخر الاخبار

اضافة اسكربت صندوق التحميل لمدونة بلوجر

تعتبر إضافة  صندوق التحميل لبلوجر من الإضافات المميزة التي تحتاجها كل مدونة تشتغل بمنصة بلوجر، وللإشارة تم تكويد هذا السكربت باستخدام Html و Css  ويمكنك معاينه الاسكربت من خلال الزر التالى:

معاينه

ولتركيب هذا السكربت  على مدونتك يرجى اتباع الخطوات التالية:

قم بالدخول الى لوحه التحكم الخاصة بمدونتك على بلوجر اختر المظهر ثم تعديل html.

بعدها قم بالبحث عن وسم ]]></b:skin> ثم اضف الكود التالى فوقه (قبله).

.downloadInfo{background-color:var(--MinBgColor); box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid var(--secColor);border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px} .downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background:var(--secColor);border-radius:10px} .downloadInfo a{background-color:var(--minColor);color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px} .downloadInfo a:after{content:attr(aria-label);padding: 0 6px;} .downloadInfo .fileType:before{content:attr(data-text)} .downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px} .downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8} .icon.drive{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='500' height='500' viewBox='0 0 500 500' xml:space='preserve'%3E%3Cdesc%3ECreated with Fabric.js 4.6.0%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='matrix(1 0 0 1 250 250)' id='vUnsbfIuj8YpbJ22QQ1H3'%3E%3Cpath style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;' vector-effect='non-scaling-stroke' transform=' translate(-47, -47)' d='M 0 94 L 0 0 L 94 0 L 94 94 z' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='matrix(0.95 0 0 0.95 249.55 250.39)' id='P7aGrmmWBb4rf0UxHVe-S'%3E%3Cpath style='stroke: rgb(255,255,255); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(0, 0)' d='M 254.98201 73.763 L 81.42301 -221.28799999999998 C 79.68701 -223.891 77.08401 -225.62699999999998 73.61301 -225.62699999999998 L -82.58999 -225.62699999999998 C -86.06099 -225.62699999999998 -88.66499 -223.891 -90.39999 -222.15599999999998 L -255.28199 55.539000000000016 C -256.14999 58.14200000000002 -257.01799 61.61400000000002 -255.28199 64.21700000000001 L -178.40899000000002 217.96200000000002 C -178.25899 219.13400000000001 -177.85399 220.27700000000002 -177.17999 221.288 C -176.48899 222.324 -175.51999 223.214 -174.44299 223.92000000000002 C -173.02999 225.04500000000002 -171.34499 225.627 -169.36899 225.627 L 169.07200999999998 225.627 C 172.54300999999998 225.627 175.14700999999997 223.89100000000002 176.88200999999998 221.288 L 254.98400999999998 82.441 C 256.71801 79.837 256.71801 76.366 254.98200999999997 73.763 z M 232.42001 69.424 L 87.49801 69.424 L -1.5479900000000129 -89.76399999999998 C -1.716990000000013 -90.82499999999999 -2.115990000000013 -91.89799999999998 -2.752990000000013 -92.85399999999998 L -67.47999000000002 -208.271 L 68.40600999999998 -208.271 z M 67.20701 69.424 L -82.83099000000001 69.424 L -10.625990000000016 -69.856 z M -82.86699 -199.129 L -47.618990000000004 -136.053 L -20.976990000000004 -87.64699999999999 L -104.28599 72.638 C -104.59299 72.99300000000001 -104.88699 73.364 -105.15299 73.763 L -169.44699 197.703 L -237.92599 60.74600000000001 z M 163.86401 208.271 L -154.81198999999998 208.271 L -91.82898999999998 86.77899999999998 L 82.29101000000003 86.77899999999998 L 232.42001000000002 86.77899999999998 z' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");} .icon.mediafire{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='500' height='500' viewBox='0 0 500 500' xml:space='preserve'%3E%3Cdesc%3ECreated with Fabric.js 4.6.0%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg transform='matrix(19.89 0 0 34.42 250 250)' id='cNIh9hXJl1i0-Wu8lViFD'%3E%3Cpath style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;' vector-effect='non-scaling-stroke' transform=' translate(0, 0)' d='M -0.87016 -4.82869 C -1.36616 -4.40869 2.0728400000000002 -5.28669 1.72984 -3.58969 C 1.39784 -1.95669 -1.89016 -3.93269 -5.49316 -3.76569 C -7.08716 -3.6926900000000002 -8.54716 -3.23569 -9.478159999999999 -2.09769 C -8.505159999999998 -3.20569 -6.577159999999999 -2.94169 -7.080159999999999 -2.17869 C -8.25216 -0.40269 -10.456159999999999 -1.6816900000000001 -12.00016 1.79631 C -11.815159999999999 1.3963100000000002 -11.315159999999999 0.6003100000000001 -9.15716 0.27031000000000005 C -7.571159999999999 0.028310000000000057 -4.943159999999999 0.25431000000000004 -4.103159999999999 1.56731 C -3.179159999999999 3.01131 -7.862159999999999 2.8473100000000002 -5.270159999999999 3.14031 C -1.6771599999999989 3.54631 1.0288400000000015 6.45031 4.542840000000002 6.451309999999999 C 9.092840000000002 6.451309999999999 11.964840000000002 4.12731 11.999840000000003 0.3053099999999995 C 12.062840000000003 -6.6176900000000005 2.8988400000000016 -8.01269 -0.8701599999999967 -4.828690000000001 z M 5.89784 2.72531 C 4.70284 2.69231 3.4938400000000005 2.21331 2.5338400000000005 1.74531 C 0.16884000000000032 0.5903099999999999 -0.8041599999999995 0.19230999999999998 -0.8041599999999995 0.13730999999999982 C -0.8041599999999995 0.07030999999999982 0.6158400000000004 0.6213099999999998 3.0088400000000006 -0.6516900000000002 C 4.39184 -1.3866900000000002 4.440840000000001 -2.02869 5.898840000000001 -2.15669 C 7.62884 -2.3086900000000004 8.860840000000001 -1.0266900000000003 8.860840000000001 0.32131 C 8.860840000000001 1.67031 7.638840000000002 2.77431 5.897840000000001 2.72531 z' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='matrix(1 0 0 1 250 250)' id='vUnsbfIuj8YpbJ22QQ1H3'%3E%3Cpath style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;' vector-effect='non-scaling-stroke' transform=' translate(-47, -47)' d='M 0 94 L 0 0 L 94 0 L 94 94 z' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");} .icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")} .icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center} .wcTargetLink{display:none} @media screen and (max-width:480px){ .downloadInfo{padding:12px} .downloadInfo a{width:50px;height:50px;border-radius:10px} .downloadInfo a:after{display:none} .downloadInfo a .icon{margin:0}} .demoInfo{padding: 15px; margin-top: 20px; margin-bottom: 20px; display: flex; align-items: center; line-height: 1.8em; font-size: 14px; flex-direction: column;} .demoInfo a{background-color:var(--minColor);color:#fefefe; margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px} .demoInfo a:after{content:attr(aria-label)} .demoInfo .fileType:before{content:attr(data-text)} .demoInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px} .demoInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .demoInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8} .icon.demo{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z'/><path d='M10.11 13.6501L13.69 10.0601'/></svg>")} .icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center} .wcTargetLink{display:none} @media screen and (max-width:480px){ .demoInfo{padding:12px} .demoInfo a{width:50px;height:50px;border-radius:10px} .demoInfo a:after{display:none} .demoInfo a .icon{margin:0}}

ملاحظة: إذا لم تكن تستخدم قالب سيو بلس النسخة السابعة أو الثامنة غير الأكواد التالية

بالألوان الذي تريد إستخدامها.

var(--minColor) : الخاص باللون الأزرق في المعاينة.

var(--secColor) : الخاص باللون الرمادي في المعاينة.

var(--MinBgColor) : الخاص باللون الأبيض في المعاينة.

الان قم بالذهاب الى قسم المشاركات واختر html واضف الكود التالي الى مقالتك.

<div class="downloadInfo"> <span class="fileType" data-text="zip"></span> <div class="fileName"> <span class="textd">اسم الملف</span> <span class="fileSize">حجم الملف</span> </div> <a aria-label="google drive" href="رابط جوجل درايف" target="_blank"><i class="icon drive"></i></a> &nbsp; &nbsp; <a aria-label="mediafire" href="رابط ميديا فاير" target="_blank"><i class="icon mediafire"></i></a> </div>

والان نكون قد انتهينا من شرح هذا الموضوع اذا واجهتك مشكله فى تطبيق هذه الخطوات يرجى مراسلتنا عبر التعليقات اونموذج الاتصال.

تعليقات



حجم الخط
+
16
-
تباعد السطور
+
2
-