إضافة زر تحميل وزر معاينة بطريقة احترافية
نتعرف في شرح اليوم طريقة اضافة زر تحميل بهذا الشكل:
وزر معاينة بهذا الشكل:
للمدونة الخاصة بك لتعطي لمسة احترافية وجمالية علي المقال أو التدوينة التي تكتبها، فتابع معي...
طريقة الإضافة
تذهب إلي ⬅ اعدادات المدونة ⬅ المظهر ⬅ تحرير html ⬅ تبحث عن الوسم </head> ⬅ تضيف فوقه (أعلاه) الكود التالي:
<style>
/* Button
----------------------------------------------- */
.button-group, .text-center, .center {
text-align: center;
margin:15px 0;
font-size:13px;
letter-spacing:0px;
}
newbutton, input[type="newbutton"], input[type="reset"], input[type="submit"], .newbutton, a.newbutton {
position: relative;
width: auto;
font-weight: normal;
line-height: normal;
color: #fff !important;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: #78cd51;
border-color: #78cd51;
box-shadow: 0 4px #5da13f;
border-radius:5px;
padding:8px 18px;
cursor: pointer;
margin-right:15px;
font-family: DroidKufi-Bold;
font-size: 12px;
}
.newbutton.download:hover, .newbutton.demo:hover, .newbutton.link:hover {
background:#6dbb4a;
}
.newbutton.download:active, .newbutton.demo:active, .newbutton.link:active {
background-color:#69b646;
box-shadow: 0 -2px #5da13f;
padding:6px 18px 12px !important;
}
.newbutton.download:before {content:"\f019"}
.newbutton.demo:before {content:"\f06e"}
.newbutton.link:before {content:"\f074"}
.newbutton.link:before, .newbutton.demo:before, .newbutton.download:before{font-family:'FontAwesome';font-weight:normal;font-style:normal;vertical-align:middle;margin:0 8px 0 6px;font-size:16px;color:#529534;text-shadow:0 1px 0 rgba(255,255,255,.1)}
</style>
/* Button
----------------------------------------------- */
.button-group, .text-center, .center {
text-align: center;
margin:15px 0;
font-size:13px;
letter-spacing:0px;
}
newbutton, input[type="newbutton"], input[type="reset"], input[type="submit"], .newbutton, a.newbutton {
position: relative;
width: auto;
font-weight: normal;
line-height: normal;
color: #fff !important;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: #78cd51;
border-color: #78cd51;
box-shadow: 0 4px #5da13f;
border-radius:5px;
padding:8px 18px;
cursor: pointer;
margin-right:15px;
font-family: DroidKufi-Bold;
font-size: 12px;
}
.newbutton.download:hover, .newbutton.demo:hover, .newbutton.link:hover {
background:#6dbb4a;
}
.newbutton.download:active, .newbutton.demo:active, .newbutton.link:active {
background-color:#69b646;
box-shadow: 0 -2px #5da13f;
padding:6px 18px 12px !important;
}
.newbutton.download:before {content:"\f019"}
.newbutton.demo:before {content:"\f06e"}
.newbutton.link:before {content:"\f074"}
.newbutton.link:before, .newbutton.demo:before, .newbutton.download:before{font-family:'FontAwesome';font-weight:normal;font-style:normal;vertical-align:middle;margin:0 8px 0 6px;font-size:16px;color:#529534;text-shadow:0 1px 0 rgba(255,255,255,.1)}
</style>
وبعد ذلك تضغط علي حفظ المظهر.
الآن وعند كتابة التدوينة أو الموضوع تحول وضع الكتابة من تأليف إلي HTML ولإضافة زر التحميل ضع الكود التالي:
<a class="newbutton download" href="ضع رابط التحميل هنا" target="_blank">تحميل</a>
ولإضافة زر المعاينة ضع الكود التالي:
<a class="newbutton demo" href="ضع رابط المعاينة هنا" target="_blank">معاينة</a>
إلي هنا ينتهي شرحنا لهذا اليوم نتمني أن يكون نال إعجابكم وحقق المبتغي من وراءه وهو الإفادة والإرشاد لما تحتاجونه، كن علي تواصل بكل جديد ننشره عن طريق الاشتراك في المدونة عن طريق النزول للأسفل قليلا فتجد صندوق الاشتراك 💖