recent
أخبار ساخنة

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


اهلا بكم متابعى موقع المحترف المتميز فى درس جديد من اضافات بلوجر ومعنا اليوم اضافة رائعة لمدونات بلوجر وهي اضافة ازرار التحميل والمعاينة لمدونات بلوجر بشكل رائع 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="almaswep.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="almaswep.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>


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