ازرار التحميل والمشاهدة باشكال احترافية بتقنية css3
السلام عليكم ورحمة الله وبركاته
في هذه التدوينة حبيت اقدم لكم ازرار التحميل والمشاهدة التي توضع داخل الموضوع الكثير من المدونين يبحثون على هذه الازرار الاحترافية بتقنية css3 التي يوضع بداخلها رابط للتحميل او شي اخر فهي ذات مظهر جميل جداً الان سوف اضع لكم في هذه التدوينة شكلين من الازرار واذا اعجبتكم سوف اضع اشكالاً مختلفة في تدوينات قادمة
الان طريقة تركيب او اضافة هذه الازرار
1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
قم بالبحث عن الكود ]]></b:skin> واضف قبله كود الشكل الذي يعجبك
الشكل الاول
الشكل الثانى :/* -- BUTTON --*/ .button{ t; list-sty float:le fle:none; :center; width: 10 text-alig n0%; margin:5px 0; e:14px; cl padding:0; font-si zear:both; } utton ul { . b ton li{ d margin:0; padding:0 } .b u tisplay:inline; margin:0; padding:0 : } demo {border: none;border-radiu . s2px;padding: 8px 18px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;} .download {border: none;border-radius:2px;padding: 8px 18px !important; background: #4d79a0; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);transition: background-color .4s ease-out 0s;} .demo:hover { background: #454242;text-decoration:none } .download:hover { background: #454242;text-decoration:none } Neue, Arial, sans-serif; padding:6px 11px; color:#555; text-shadow:0 1px 0 #fff; background:#f2f2f2; background:linear-gradient(#fff, #f9f9f9, #f0f0f0);; border:1px solid #d9d9d9; border-color:#d9d9d9 #d6d6d6 #d1d1d1;border-radius:4px;box-shadow:0 1px 2px #eaeaea, inset 0 1px 0 #fbfbfb;margin-right:10px;} a.smallbutton, a:visited.smallbutton {color:#999; text-shadow:0 1px 0 #fff;text-decoration:none} .smallbutton a:hover{ .smallbutton { display:inline-block; text-decoration:none; outline:none; cursor:pointer; font:normal 12px/1em Helvetic acolor:#353535; text-decoration:none} { color:#555; background:#efefef; background:linear-gradient(#fff, #f9f9f9, #e9e9e9);border-color:#ccc;box-shadow:0 1px 2px #e0e0e0, inset 0 1px 0 #fbfbfb;} .smallbutton:hover,.smallbutton:focus .smallbutton:active { position:relative; top:1px; color:#555; background:#efefef; background:linear-gradient(#fff, #eaeaea, #f4f4f4);border-color:#c6c6c6;box-shadow:0 1px 0 #fff, inset 0 0 5px #ddd;}
.button { text-align: center; width: 100%; margin: 10px 0; padding: 0; font-size: 14px; color: #fff; margin-left: 0em !important; } .button li { display: inline-block; margin: 10px 0; padding: 0; } .demo { border-radius: 3px; padding: 8px 12px; background: #e74c3c; color: #fff !important; text-shadow: 0 0 1px #222; transition: background-color 1s 0s ease-out; } .demo:before { content: "\f06e"; font-family: FontAwesome; font-weight: normal; padding: 8px; background: rgba(0,0,0,.2); margin-left: -12px; margin-right: 6px; border-radius: 3px 0 0 3px; font-size: 16px; } .download { border-radius: 3px; padding: 8px 12px; background: #3498db; color: #fff !important; text-shadow: 0 0 1px #222; transition: background-color 1s 0s ease-out; } .download:before { content: "\f019"; font-family: FontAwesome; font-weight: normal; padding: 8px; background: rgba(0,0,0,.2); margin-left: -12px; margin-right: 6px; border-radius: 3px 0 0 3px; font-size: 16px; } .demo:hover, .download:hover { background: rgba(0,0,0,.6); text-shadow: 0 0 1px #222; color: #fff; } #redirect { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: url(http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif) 50% 30% no-repeat rgba(44, 62, 80, 0.9); z-index: 9999; text-align: center; }
الان بعد ان اضفت كود الشكل الذي يعجبك اضغط على حفظ القالب واضف الكود التالي اثناء كتابة الموضوعانتبه:- يجب عند وضع الكود ان يكون html ثم تأليف
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="http://ahmed-wab.blogspot.com/" target="_blank">Demo</a></li> <li><a class="download" href="http://ahmed-wab.blogspot.com/" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>
قم بتغير رابط المدونةhttp://ahmed-wab.blogspot.com/ بالروابط الخاصة بك
لا تبخل علينا بتعليق بسيط ،، يشجعنا ،، و يمنحك فرصة لاستفادة اكبر :)
لاتتردد بوضع اي استفسار حول الموضوع ضعه في تعليق ويتم الرد عليه في اقرب وقت انشاء الله
دمتم برعاية الله وحفظه
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
اضافة بلوجر رائعة
ردحذفمدونة ويب العربي web3r.blogspot.com