Forms

الاسم

بريد إلكتروني *

رسالة *

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

Author Img
عبدو تكنولوجي

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

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


فيديو الشرح


الاكواد


ضع الكود التالي فوق ال </head

<b:if cond='data:view.isSingleItem'>
<style type='text/css'>
/*<![CDATA[*/
:root{
  --main-color: #673be6; /*  اللون الاساسي*/
  --box-w:420px; /*  عرض صندوق التحميل*/
  --separator:#e8e8e8; /* لون الحواف*/
  --textColor:#121212; /*  لون الخطوط*/
}
.appDetails .dwn,.dwnBox .LinkResult a{background:var(--main-color);padding:0 20px;width:fit-content;color:#fff;overflow:hidden}.appDetails .dwn{font-size:1em;display:flex;position:relative;height:50px;line-height:50px;border-radius:5px;border:0;cursor:pointer;font-family:inherit}.appDetails ul{display:none!important}.appDetails .dwn:after,.appDetails .dwn:before,.dwnBox .LinkResult a:after,.dwnBox .LinkResult a:before{position:absolute;right:0;bottom:0;width:100px;height:100px;border-radius:50%;background:#fff;content:'';opacity:0;transition:transform .3s cubic-bezier(.02,.01,.47,1),opacity .3s cubic-bezier(.02,.01,.47,1);z-index:1;transform:translate(100%,-25%) translateZ(0)}.appDetails .dwn:hover:after,.appDetails .dwn:hover:before,.dwnBox .LinkResult a:hover:after,.dwnBox .LinkResult a:hover:before{opacity:.15;transition:transform .2s cubic-bezier(.02,.01,.47,1),opacity .2s cubic-bezier(.02,.01,.47,1);transform:translate3d(50%,0,0) scale(.9)}.appDetails .dwn:hover,.dwnBox .LinkResult a:hover{box-shadow:0 5px 10px 0 rgba(0,0,0,.15);transition:.5s cubic-bezier(.02,.01,.47,1);transform:scale(1.1)}.appDetails{display:flex;align-items:center;justify-content:center;margin:1rem 0}.dwnBox{margin:1rem auto;max-width:var(--box-w);border:1px solid var(--separator);border-radius:7px}.dwnBox .inner{display:flex;flex-direction:column;padding:1rem}.dwnBox .appHead,.dwnBox ol li{flex-direction:column;display:flex}.dwnBox .appHead{margin-bottom:1rem;gap:10px}.dwnBox .appHead .thumb{position:relative;width:100%;height:auto}.dwnBox .appHead .shareItem{position:absolute;top:15px;right:15px;z-index:1}.dwnBox .appHead .shareItem button{display:flex;background-color:#fff;border:0;width:2rem;height:2rem;border-radius:5px;font-size:1.1rem;color:var(--textColor);align-items:center;justify-content:center;cursor:pointer}.dwnBox .appHead .shareItem nav{background-color:#fff;position:absolute;padding:5px 7px;max-height:32px;border-radius:.5rem;right:2.5rem;top:0;display:flex;align-items:center;column-gap:5px;opacity:0;visibility:hidden}.dwnBox .appHead .shareItem button:hover{opacity:.8}.dwnBox .appHead .shareItem a{display:flex;color:var(--textColor);align-items:center;font-size:16px;width:1.5rem;height:1.5rem;justify-content:center}.dwnBox .appHead .shareItem a svg,.dwnBox .appHead .shareItem button svg{stroke:currentColor;fill:none}.dwnBox .appHead .shareItem a:hover{color:var(--hoverColor)}.dwnBox .appHead .shareItem nav.is-open{opacity:1;visibility:visible}.dwnBox .appHead .thumb img{margin:0!important;position:relative;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}.dwnBox .appHead .title{width:100%;font-size:1rem;font-weight:700;line-height:1.4em;text-align:center;user-select:none}.dwnBox ol{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-wrap:wrap;justify-content:space-between}.dwnBox ol li{width:48%;color:var(--textColor);font-size:14px;font-weight:700;margin:0}.dwnBox ol li strong{display:block;font-size:.875rem;font-weight:400;line-height:1.25rem;opacity:.75;user-select:none}.dwnBox .linkBox{padding:1rem;background:rgba(0,0,0,.05)}.dwnBox .linkBox .LinkLoader{-webkit-border-radius:0.5rem;-moz-border-radius:.5rem;border-radius:.5rem;height:42px;line-height:42px;overflow:hidden;padding:5px;border:2px solid var(--separator);position:relative;display:block}.dwnBox .linkBox .LinkLoader .ProgBar{width:0;background:var(--main-color);height:100%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;opacity:.1}.dwnBox .linkBox .LinkLoader .Time{margin:10px auto;font-size:12px;display:block;position:relative;top:-46px;font-weight:700;text-align:center;color:var(--main-color);user-select:none}.dwnBox .LinkResult a{font-size:14px;display:flex;position:relative;height:30px;line-height:30px;border-radius:5px;margin:0 auto}.dwnBox .noUrl{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.dwnBox .noUrl svg{width:3rem;height:3rem;fill:none;stroke:var(--main-color)}.dwnBox .noUrl strong{font-size:1rem;margin-top:1rem;opacity:.8;user-select:none}@media screen and (max-width:340px){.dwnBox .inner{padding:.4rem}.dwnBox ol li{width:100%}.dwnBox ol li:not(:last-child){margin-bottom:4px;border-bottom:1px solid var(--separator);padding-bottom:6px}}            
/*]]>*/
</style>
</b:if>


إبحث على

<data:post.body/>

سوف تجد اكثر من واحد في القالب لذا ضع الكود التالي عليهم جميعا

ضع الكود اسفله
<b:tag cond='data:view.isPost' name="div" expr:data-author='data:post.author.name' expr:data-date='data:post.date.iso8601' hidden='' id='postDetails'/>

ضع الكود التالي فوق ال </body


إضافة صفحة التحميل


إنشى صفحة جديدة وضع الكود التالي عليها
<div class="dwnBox"></div>

مولد كود التحميل


ضع الكود الذي يتم توليده في المنشور الذي تريد اضافة عليه رابط تحميل


لا تنسى الاشتراك في المدونة من القائمة العلوية

قد تُعجبك هذه المشاركات

تعليقات

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع