أزرار المعاينة والتحميل
موضوع اليوم على المدونة هو موضوع هام للكثيرون من الذى يعرضون قوالب وإضافات على موقعهم او يعرضون برامح للتحميل فموضوع اليوم على المدونة هو أزرار المعاينة والتحميل بثلاث أشكال سوف نقدم لكم ثلاث اشكال لازرار المعاينة والتحميل يمكنك من عرض محتوى مدونتك بشكل افضل .
1- الشكل الأول
يمكنك اشتخدامه للمعاينة أول التحميل كما تشاء
قم بالبحث في مدونتك على هذا الوسم
#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family: Electrolize,ge_dinar_tworegular;text-decoration:none;font-weight:100;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}
2- قم بحفظ القالب الآن وعند كتابة موضوع فقط عليك استبدال الروابط بالكود أسفل
3- تقوم بوضع الكود في وضع HTML من وصع التاليف مع استبدال الشكل
# بالرابط
2- الشكل الثاني
نقوم بالبحث عن نفس الوسم السابق ووضع هذا الكود فوقه
/* CSS Button Style 1 by wdbloog.blogspot.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:100;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;font-family: Electrolize,ge_dinar_tworegular;}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}
ثم نقوم بالبحث عن هذا الوسم </head>
ووضع هذا الكود فوقه
قم الأن بحفظ القالب وعند كتابة موضوع جديد انتقل الى وضع HTML ثم وضع هذا الكود مع تغيير
# بالروابط
3- الشكل الثالث
نقوم بالبحث عن نفس الوسم السابق ووضع هذا الكود فوقه
/* CSS Button Style 2 by wdbloog.blogspot.com */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:100;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden;font-family: Electrolize,ge_dinar_tworegular;}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
ثم نقوم بالبحث عن هذا الوسم </head>
ووضع هذا الكود فوقه
قم الأن بحفظ القالب وعند كتابة موضوع جديد انتقل الى وضع HTML ثم وضع هذا الكود مع تغيير # بالروابط