هنا

[نصرالدين البلداوي]

سلام عليكم ورحمة الله وبركات
كيفية اضافة ازرار معاينة و تحميل بتقنية جديدة



مثل هذه الزر هنا

تابع معي كيف تضيف الزر في منتدى بلوجر


1.الان قم بالدخول إلى لوحة تحكم المدونة
2.اختر قالب
3.ثم انقر فوق تحرير HTML


اولا يجب تركيب كود font-awesome ابحث عن الوسم

</head>

في البحث و اضف الكود التالي فوقه

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

الان ابحث عن الوسم

]]></b:skin>

في البحث و اضف الكود التالي فوقه

#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

<div id="wrap"> <a href="#" class="btn-slide"> <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"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط للتحميل</span> </a> </div> 

إن شاء لله ينال اعجابكم

[شذى الربيع]

شكرا جزيلا لجهودك

[نصرالدين البلداوي]

شكرا جزيلا لجهودك

العفووو شكرا لك