إضافة زر التحميل بشكل جميل وجذاب لمنصة بلوجر

مقدمة :

مرحباً بكم زوار مدونة اوما ثك - Aoma Tech , فى هذا الشرح افدم لكم صندوق للتحميل بشكل جميل وعصري يناسب جميع الشاشات كما ان هذا الشكل لا يعد أحدث إصدار.

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

معاينة

شرح طريقة التركيب :

اولاً نتوجة إلي لوحة التحكم الخاصة ببلوجر من هنا.
وبعد ذلك نتوجة إلي المظهر ثم تعديل html بعدها قم بالبحث عن ]]></b:skin>
ثم قم الكود التالي فوقة مباشر .

/* Download Counter Box */
#btnx{cursor: pointer;
    padding: 10px 20px;
    border: 0;
    border-radius: 3px;
    background: #5468ff;
    color: #fff;
    float: left;
    font-size: 14px;
    font-family: unset;
    text-transform: capitalize;
    font-weight: 700;
	box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.7s;}
	#btnx:hover,#downloadx:hover{background: #fc5ed7;
    color: #fff;
    outline: none;
    box-shadow: -1px 1px 5px 1px rgba(0, 0, 0, 0.4);}
	.batas-downx{display:block;margin:0 auto;border-radius:4px;box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.28);}
	.dalam-downx{background:#5468ff;color:#fff;padding:20px;display:block;border-top-left-radius:3px;border-top-right-radius:3px}
.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:right}
.catatan-downx{padding:20px;background:#fff;border-bottom-left-radius:3px;border-bottom-right-radius:3px;color:#555;font-size:14px}#downloadx{float:left}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#5468ff;float:left;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:left}.file-deskripsi{display:block}.file-deskripsi span{margin-left:5px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, #downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

بعدها إتجة إلي اي مشاركة تريد وضع صندوق التحميل بداخلة .

ثم قم بوضع الكود التي ويجب عليك تغيير الكلام والموجود بالصندوق.

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
يجب عليك كتابة اسم الملف
   </div>
<a href="https://aomatech.blogspot.com/"><button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> تــحـمـيــل </button>
</a></div>
</div>
<div class="catatan-downx">
يمكنك من خلال هذا الصندوق كتابة وصف عن التحميل
</div>
</div>

إذا اعجبتك التدوينة لاتنس متابعة المدونة من هنا للمذيد من إضافات وقوالب بلوجر.

إضافة زر التحميل بشكل جميل وجذاب لمنصة بلوجر

تعليق واحد