mawke3ea

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

شكل الأزرار:

معاينة
إضغط هنا



تحميل
إضغط هنا

شرح إضافة الأكواد :

1. إبحث فى القالب عن هذا الوسم</head> ثم ضع هذا الكود فوقه

<style>
#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 60px;
width: 250px;
line-height: 50px;
padding: 0;
border-radius: 13px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #D62417;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #D62417;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -65px;
background-color: #F7F7F7;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #D62417;
}
.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: 45px;
width: 50px;
top: 0;
left: 0;
transition: .5s;
border-radius: 5px;
}
.btn-slide2 span.circle2 {
background-color: #D62417;
}
.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: 5px;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #D62417;
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;
}
</style>

1. كيفية إضافة أزرار المعاينة فى الموضوع عليك الضغط على زر html فى الموضوع ثم ضع هذا الكود وإضغط على تأليف .