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

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

ضع الكود التالي فوق ال </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>

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

إسم رابط التحميل او عنوان

حجم الملف

نوع الملف

رابط التحميل

توليد