اضافة ازرار ويب تحميل ومعاينة بشكل احترافي

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد على على ال محمد

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

وبتقنية css3 

ناتي الى شرح تركيب اضافة 

اول نذهب الى لوحة تحكم 

قالب تحرير HTML

نبحث عن هذا كود 

]]></b:skin>

ونضيف كود الذي يعجبك قبلة مباشرة

شكل الاول 

/* -- BUTTON --*/.button{t;list-styfloat:lefle:none;:center;width: 10text-align0%;margin:5px 0;e:14px;clpadding:0;font-sizear:both;}utton ul {.bton li{dmargin:0;padding:0}.butisplay: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 Helveticacolor:#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0WaUvXjGs04NzVYUXdwk-LA-2Puf1REoTmKMy39WC_3Qkjf-HQyBf4SJc8a6NxzUMMRiajGbULJ1sP6mcwX1x6JMw3vew1jVyQQr1C142K9l3pJPJQkyMWclM3ecqC6poPZ72Gd20JM8/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" http://ha1web.blogspot.com/" target="_blank">Demo</a></li><li><a class="download" http://ha1web.blogspot.com/" target="_blank">Download</a></li></ul></div><div class="clear"></div>

ولا تنسى قم بتغيير روابط مدونتي الى روابط خاص بك 
والكلمات الى الذي تريدة 






                                 وانتظروا كل جديد من حمزه ويب 

                                                         في امان الله