موضوع اليوم على المدونة هو موضوع هام للكثيرون من الذى يعرضون قوالب وإضافات على موقعهم او يعرضون برامح للتحميل فموضوع اليوم على المدونة هو أزرار المعاينة والتحميل بثلاث أشكال سوف نقدم لكم ثلاث اشكال لازرار المعاينة والتحميل يمكنك من عرض محتوى مدونتك بشكل افضل ويمكن معاينة الأشكال من الروابط التالية .
شرح التركيب
الشكل الاول
الشكل الأول يمكنك اشتخدامه للمعاينة أول التحميل كما تشاء
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 مع تغيير الـ # بلرابط الذى تريد .
الشكل الثانى
1- قم بالبحث فى قالب مدونتك عن الوسم ]]> ثم قم بوضع المود التالى فوقه (قبلة)
/* 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'}2- قم بالبحث عن الوسم ثم قم بوضع الكود التالى فوقه (قبلة)
3- قم بحفظ القالب الأن
4- عندما تقوم بكتابة موضوع جديد استخدم احد الكودين عندما تريد عمل معاينة أو تحميل وقم بوضعه فى خانة html مع تغيير الـ # بالرابط الذى تريد .
الشكل الثالث
1- قم بالبحث فى قالب مدونتك عن الوسم ]]> ثم قم بوضع المود التالى فوقه (قبلة)
/* 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)}}2- قم بالبحث عن الوسم ثم قم بوضع الكود التالى فوقه (قبلة)
3- قم بحفظ القالب الأن
4- عندما تقوم بكتابة موضوع جديد استخدم احد الكودين عندما تريد عمل معاينة أو تحميل وقم بوضعه فى خانة html مع تغيير الـ # بالرابط الذى تريد .
وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)