الزيارات: إضافة زر تحميل ومعاينة بشكل احترافي

السلام عليكم ورحمة الله تعالى وبركاته

في هذا الدرس سنشرح لكم طريقة إضافة زر التحميل والمعاينة  بأشكال احترافية.
هذه الإضافة جد جيدة تساعد المدونين بعرض قوالبهم أو الاضافات عن طريق المعاينة كما تساعد الزائر بمعاينة وتحميل الملفات الدي يريدها عن طريق الازرار الاحترافية للمعاينة و التحميل.

شكل ازرار الإضافة

معاينة تحميل

طريقة التركيب
1- من لوحة التحكم
2- قالب
3- تحرير HTML
4- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
5- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

</head>

6- اضف فوقه مباشراً الكود التالي

<!--ازرار تحميل ومعاينة-->
<style>
.button-group, .text-center, .center {
text-align: center;
margin:15px 0;
font-size:13px;
letter-spacing:0px;
}

newbutton, input[type=&quot;newbutton&quot;], input[type=&quot;reset&quot;], input[type=&quot;submit&quot;], .newbutton, a.newbutton {
position: relative;
width: auto;
line-height: normal;
color: #fff !important;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: #B44;
border-color: #78cd51;
border-radius:5px;
padding:8px 25px;
cursor: pointer;
margin-right:15px;
font-family: Amiri;
font-size: 12px;
}


.newbutton.download:hover, .newbutton.demo:hover, .newbutton.link:hover {
background:#B88;
}
.newbutton.download:active, .newbutton.demo:active, .newbutton.link:active {
background-color:#B44;
box-shadow: 0 -2px #5da13f;
padding:6px 18px 12px !important;
}
.newbutton.download:before {content:&quot;\f019&quot;}
.newbutton.demo:before {content:&quot;\f06e&quot;}
.newbutton.link:before {content:&quot;\f074&quot;}
.newbutton.link:before, .newbutton.demo:before, .newbutton.download:before{font-family:&#39;FontAwesome&#39;;font-weight:normal;font-style:normal;vertical-align:middle;margin:0 8px 0 6px;font-size:16px;color:#000;text-shadow:0 1px 0 rgba(255,255,255,.1)}
</style>
<!--ازرار تحميل ومعاينة-->

7- عند كتابة مقالة نضيف الكود الثالي الخاص باضافة في HTML

<a class="newbutton demo" href="رابط ملف المعاينة" target="_blank">معاينة</a>

<a class="newbutton download" href="رابط ملف التحميل" target="_blank">تحميل</a>

8- قم بتغير الرابط الى رابط ملف المعاينة او رابط ملف التحميل

قسم : إضافات البلوجر

بقلـــــــم شبكة عـدناني

شبكة عدناني فيها الكثير والكثير من اطيب الكلام و أجمل القصص و أروع المواضيع، نعمل جادين لتقديم ما يفيد ، ستجدون في صفحتنا خيرا كثيرا إن شاء الله : ﴿إن اصبنا فمن الله و ان اخطأنا فمن انفسنا ومن الشيطان﴾