السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.
الإضافة ستحتاجها فقط إذا كنت تنشر على مدونتك كل ما يحتاج إلى المعاينة أو التحميل أو كلاهما على سبيل المثال قوالب بلوجر تحتاج إلى معاينة و زر التحميل.
طريقة تركيب إضافة أزرار التحميل والمعاينة
ابحث عن الوسم التالي
في تحرير HTML و ضع الكود التالي بعده
ابحث عن الوسم التالي
]]>
و ضع الكود التالي قبله
#wrap { margin: 20px auto; text-align: center;}
#wrap br { display: none;}
.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 { right: 100%; margin-right: -45px; background-color: #fdfdfd; color: #0099cc;}
.btn-slide2:hover span.circle2 { color: #efa666;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 { right: 40px; opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; right: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: right; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; right: 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; right: 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; right: 80px; }
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { right: 80px; opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff;}
و لإضافة الكود ضعه في محرر HTML في انشاء المشاركة
#" class="btn-slide"> معاينة اضغط للمعاينة#" class="btn-slide2"> تحميل اضغط للتحميل
ثم غير # بالرابط الخاص بك
الكلمات المفتاحية :
Blogger
BloggerWidgets
Written by you: Technical blogger AMER BACHIR
URL Of Post:
HTML Code Of Post:
0 التعليقات لموضوع "أزرار التحميل والمعاينة بشكل رائع ومميز كتبها: المدون التقني - الخبير عامر بشير"
ما يلفظ من قول إلا وعليه رقيب
الابتسامات الابتسامات