القائمة الرئيسية

الصفحات

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

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

طريقة إضافة سكربت الأزرار :

أولاً : قم بالبحث عن الكود التالي في تحرير HTMl الخاص بقالبك : ]]></b:skin>
وعندما تجده قم بلصق السكربت التالي فوقه مباشرة :


#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}


ثم قم بحفظ القالب .

ثانياً : يجب عليك أن تضيف هذا الكود في كل تدوينة تضع فيها أزرار المعاينة والتحميل.
ملاحظة : يجب وضع الكود في أسفل قسم "HTML" عند كتابة التدوينة وليس في قسم "تأليف".




<div id="wrap">
<a href="#" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">معاينة</span>
<span class="title-hover">اضغط هنا</span>
</a>
<a href="#" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل</span>
<span class="title-hover2">اضغط هنا</span>
</a>
</div>

كما يجب عليك أن تقوم بتغيير الروابط ، حيث تضع روابط التحميل أو المعاينة مكان عبارة "ضع هنا رابط التحميل" ، وكذلك الأمر بالنسبة لزر المعاينة . وبذلك تحصل على شكل جميل وإحترافي للأزرار.

تعليقات

تعليقان (2)
إرسال تعليق

إرسال تعليق