ازرار التحميل والمعاينة بشكلها الجميل للبلوجر

موضوع اليوم على المدونة هو موضوع هام للكثيرون من الذى يعرضون قوالب وإضافات على موقعهم او يعرضون برامح للتحميل فموضوع اليوم على المدونة هو أزرار المعاينة والتحميل بثلاث أشكال سوف نقدم لكم ثلاث اشكال لازرار المعاينة والتحميل يمكنك من عرض محتوى مدونتك بشكل افضل ويمكن معاينة الأشكال من الروابط التالية .

الشكل الأول   الشكل الثانى   الشكل الثالث

شرح التركيب : 

الشكل الاول 

1- قم بالبحث فى قالب مدونتك عن الوسم ]]></b:skin> ثم قم بوضع الكود التالى فوقه (قبلة)

#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 مع تغيير الـ # بلرابط الذى تريد .

<div id="wrap"><a class="btn" href="#">تحميل او معاينة</a></div> <div id="wrap"><a class="btn warn" href="#">تحميل او معاينة</a></div>

الشكل الثانى

1- قم بالبحث فى قالب مدونتك عن الوسم ]]></b:skin> ثم قم بوضع المود التالى فوقه (قبلة)

/* 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- قم بالبحث عن الوسم </head> ثم قم بوضع الكود التالى فوقه (قبلة)

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

3- قم بحفظ القالب الأن

4- عندما تقوم بكتابة موضوع جديد استخدم احد الكودين عندما تريد عمل معاينة أو تحميل وقم بوضعه فى خانة html مع تغيير الـ # بالرابط الذى تريد .

<div style="text-align: center;"> <ul class="button"> <li><a class="معاينة" href="#" target="_blank">Demo</a></li> <li><a class="تحميل" href="#" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>

الشكل الثالث

1- قم بالبحث فى قالب مدونتك عن الوسم ]]></b:skin> ثم قم بوضع المود التالى فوقه (قبلة)

/* 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- قم بالبحث عن الوسم </head> ثم قم بوضع الكود التالى فوقه (قبلة)

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

3- قم بحفظ القالب الأن

4- عندما تقوم بكتابة موضوع جديد استخدم احد الكودين عندما تريد عمل معاينة أو تحميل وقم بوضعه فى خانة html مع تغيير الـ # بالرابط الذى تريد .

<div style="text-align: center;"> <ul class="button2"> <li><a class="demo" href="#" target="_blank">معاينة الرابط</a></li> <li><a class="download" href="#" target="_blank">تحميل الرابط</a></li> </ul> </div> <div class="clear"></div>

شارك الموضوع ..