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

آخر الأخبار

جاري التحميل ...

تذكر أخى قبل ترك تعليق { مَّا يَلْفِظُ مِن قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ }

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


اهلا بكم متابعى موقع المحترف المتميز فى درس جديد من اضافات بلوجر ومعنا اليوم اضافة رائعة لمدونات بلوجر وهي اضافة ازرار التحميل والمعاينة لمدونات بلوجر بشكل رائع al وهى عبارة عن اضافة متحركة مثل الصور gif وتسمى فى البلوجر Blogger اضافة CSS والتى من المستحسن اضافتها الى المدونة لسهولة النقر على الرابط والتى من الممكن استخدامها للإشارة الى رابط facebook او رابط game مثلا لأنه من المهم ان يجد الزائر ما يحتاجه من مدونتك حيث انك اذا وضعت الرابط في نص من الممكن ألا يلاحظه الزائر وبالتالي يكره زيارة الموقع

معاينة الاضافة

نأتي لتركيب الإضافة :

  • قم بأخذ نسخة احتياطية من القالب
ابحث عن الوسم </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="mmagdym1.com" 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="mmagdym1.com" 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>




غير ما باللون الأحمر بـ الرابط الذي تريد

عن الكاتب

mohamed magdy موقع المحترف المتميز هو موقع يهتم بمجال التقنية والابداع من برامج ودورات تعليمية صوت وصورة وشروحات للاندرويد والكثير من الأقسام يمكنك معرفتها بزيارتنا قم بالبحث في جوجل عن المحترف المتميز أو mmagdym1

التعليقات


جميع الحقوق محفوطة لدي موقع

المحترف المتميز

| صلي على الحبيب محمد