إضافة أزرار التحميل والمشاهدة (جديد)

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

علما أننا تطرقنا في موضوع سابق من هنا لإضافة أكثر احترافية  

وهذه الازرار بتقنية 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs7MSWTHSKseH5Uwrp4WZv-rTtR8dQj9ne3xpYPltsWBw4LJ5sgxYyd4c_06gfrlGDMf2ZBBv1mYygzJzOJUxY8d7PVX8gAqRO6QMXW1TmTft2v7iB0ne_pjpUGeEMCxPePH3-39Lxpeg/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://4bignet.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://4bignet.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

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

شاهد كيف تظهر الإضافة مثال حي عن ذلك 

• Demo
• Download

نلتقي في تدوينة قادمة إن شاء الله والسلام عليكم