بسم الله الرحمن الرحيم
معا درس اليوم عن كيفيه وضع ازرار معاينه وتحميل الي مشاركاتك في مدونة بلوجر وسهل جدا جدا جدا بدون اي خطاء في المدونة ولكن قبل ان نبداء الشرح خذ نسخه احطياطيه من القالب
نبداء علي بركه الله
- نذهب الي بلوجر
- نذهب الي المظهر
- نضغط ف اي مكان في اكواد القالب
- ثم نضغط كنترول + f
نضع فوقها مسافه كما بلصوره ↓
وبعدها نضع في هاذهي المسافه هذا الكود
#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 #24BBEF; margin: 10px; transition: .5s;}
.btn-slide2 { border: 2px solid #CE2529;}
.btn-slide:hover { background-color: #24BBEF;}
.btn-slide2:hover { background-color: #CE2529;}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #24BBEF;}
.btn-slide2:hover span.circle2 { color: #CE2529;}
.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: #24BBEF; 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: #CE2529;}
.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: #CE2529; 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 class="btn-slide" href="#" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">معاينة</span> <span class="title-hover">اضغط هنا</span></a><a class="btn-slide2" href="#" target="_blank"> <span class="circle2"><i class="fa fa-cloud-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط هنا</span></a></div></div>
وبعدها نذهب الي الكود الاول وهو كود المعاينه ترا # غبر هذا # برابط الذي عند اضلغط علي معاينه يذهب اليه
-------------------------
الكود الثاني تحميل تجد فوق تحميل # غير # برابط التحميل الذي عند الضغط علي تحميل يذهب الي رابط التحميل
(\ شاهد شرح بلفديو /)
تعليقات: 0
إرسال تعليق