إضافة متحركة مثل الصور gif وتسمى فى البلوجر Blogger اضافة CSS والتى من المستحسن اضافتها الى المدونة لسهولة النقر على الرابط والتى من الممكن استخدامها للإشارة الى رابط facebook او
رابط game مثلا لأنه من المهم ان يجد الزائر ما يحتاجه من مدونتك حيث انك اذا وضعت الرابط في نص من الممكن ألا يلاحظه الزائر وبالتالي يكره زيارة الموقع
معاينة الاضافة
نأتي لتركيب الإضافة :
- قم بأخذ نسخة احتياطية من القالب
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
الان ابحث عن الوسم ]]></b:skin> واضف هذا الكود فوقه
هنا تكون قد اضفت الاضافة الى القالب الآن يجب عليك اضافة الاضافة الى التدوينة أثناء كتابة موضوع كل مرة اضغط على 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 وضع الكود التالى فيها وغيره كما تريد
<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>
غير ما باللون الأحمر بـ الرابط الذي تريد