0
حصريا الأن أزرار مدونة عرب ويب الإحترافية



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

طريقة إضافة الأزرار

1-لوحة التحكم في بلوجر
2-قالب
3-ابحث عن ]]></b:skin>


<style>
/* CSS Button Ar1web */
.button{float:right;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;} .button ul {margin:0;padding:0}
.demo {opacity:1;padding:7px 14px!important;background:#E83EE0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.button li{display:inline;margin:0;padding:0}
.download {opacity:1;padding:7px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.demo:before {content:&#39;\f06e&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.download:before {content:&#39;\f019&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fdfcfc;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.download1 {opacity:1;padding:7px 14px!important;background:#3FA2FE;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out;}
.download1:before {content:&#39;\f019&#39;;display:inline-block;margin-left:5px;width:16px;height:20px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;padding:3px;background:rgba(0, 0, 0, 0.2)padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-dark-button {opacity:1;padding:7px 14px!important;background:#425b71;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out} .flato-dark-button:before {content:&#39;\f135&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-RedHm-button {opacity:1;padding:7px 14px!important;background:#e74c3c;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-red-button {opacity:1;padding:7px 14px!important;background:#e4644b;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out} .flato-red-button:before {content:&#39;\f0c3&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-pink-button:before {content:&#39;\f041&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-RedHm-button:before {content:&#39;\f127&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;} .flato-pink-button {opacity:1;padding:7px 14px!important;background:#e75d66;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out} .flato-blue-button {opacity:1;padding:7px 14px!important;background:#3bbce0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-tirquoise-button:before {content:&#39;\f0c2&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-blue-button:before {content:&#39;\f058&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;} .flato-tirquoise-button {opacity:1;padding:7px 14px!important;background:#00c5ad;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out} .flato-green-button {opacity:1;padding:7px 14px!important;background:#99ca6a;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-gray-button {opacity:1;padding:7px 14px!important;background:#c9ced1;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out}
.flato-green-button:before {content:&#39;\f07b&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;} .flato-yellow-button {opacity:1;padding:7px 14px!important;background:#fac75b;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out} .flato-yellow-button:before {content:&#39;\f084&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
.flato-purblehm-button:hover,.flato-red-button:hover,.flato-RedHm-button:hover,.flato-pink-button:hover,.flato-blue-button:hover,.flato-tirquoise-button:hover,.flato-green-button:hover,.flato-yellow-button:hover,.flato-gray-button:hover,.flato-dark-button:hover,.demo:hover,.download1:hover,.download:hover {background:rgba(224, 90, 90, 0.72);text-shadow:0 0 1px #222;color:#fff;;}
.flato-gray-button:before {content:&#39;\f0c1&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;} .flato-purblehm-button {opacity:1;padding:7px 14px!important;background:#A954E4;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out} .flato-purblehm-button:before {content:&#39;\f0c7&#39;;display: inline-block;margin-left: 5px;width: 16px;height: 20px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -13px;padding-bottom: 8px;padding-left: 7px;padding-right: 7px;}
</style>
4-إبحث عن ]]></b:skin>  و أضف هذا الكود فوقه
.button
{
float:right;
list-style:none;
text-align:center;
width:95%;
padding:2px;
margin:10px;
clear:both
font-size:14px; } .button ul
.button li
{ margin:0; padding:0 } {
padding:0
display:inline; margin:0; } .demo {
background:#9eb2c0;
opacity:1; padding:7px 14px!important;
font-size:14px;
color:#fff!important; font-weight:400;
text-transform:uppercase;
font-family:Electrolize,'ge_ss_tvbold'; text-align:center;
padding:7px 14px!important;
transition:background-color 1s 0 ease-out } .download { opacity:1; background:#fe4e3f;
text-align:center;
color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold';
display:inline-block;
text-transform:uppercase; transition:background-color 1s 0 ease-out } .demo:before { content:'\f06e'; margin-left:5px;
padding:3px;
width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out;
content:'\f019';
background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .download:before {
transition:all .5s ease-in-out;
display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; padding:3px;
padding:7px 14px!important;
background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .download1 { opacity:1; background:#3FA2FE;
transition:background-color 1s 0 ease-out
color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; } .download1:before {
padding:3px;
content:'\f019'; display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out;
padding:7px 14px!important;
background:rgba(0,0,0,0.2)padding: 3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .flato-dark-button { opacity:1; background:#425b71;
{
color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; transition:background-color 1s 0 ease-out } .flato-dark-button:before
margin-right:-13px;
content:'\f135'; display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2);
font-family:Electrolize,'ge_ss_tvbold';
padding-bottom:8px; padding-left:7px; padding-right:7px } .flato-red-button { opacity:1; padding:7px 14px!important; background:#e4644b; color:#fff!important; font-weight:400; font-size:14px; text-align:center;
font-family:fontawesome;
text-transform:uppercase; transition:background-color 1s 0 ease-out } .flato-red-button:before { content:'\f0c3'; display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff;
color:#fff!important;
transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .flato-RedHm-button { opacity:1; padding:7px 14px!important; background:#e74c3c;
margin-left:5px;
font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; transition:background-color 1s 0 ease-out } .flato-RedHm-button:before { content:'\f127'; display:inline-block; width:16px;
opacity:1;
height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .flato-pink-button {
.flato-pink-button:before
padding:7px 14px!important; background:#e75d66; color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; transition:background-color 1s 0 ease-out } { content:'\f041';
padding-right:7px
display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; } .flato-blue-button
content:'\f058';
{ opacity:1; padding:7px 14px!important; background:#3bbce0; color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; transition:background-color 1s 0 ease-out } .flato-blue-button:before {
.flato-tirquoise-button
display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } { opacity:1;
display:inline-block;
padding:7px 14px!important; background:#00c5ad; color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; transition:background-color 1s 0 ease-out } .flato-tirquoise-button:before { content:'\f0c2'; margin-left:5px; width:16px;
color:#fff!important;
height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .flato-green-button { opacity:1; padding:7px 14px!important; background:#99ca6a; font-weight:400;
transition:all .5s ease-in-out;
font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; transition:background-color 1s 0 ease-out } .flato-green-button:before { content:'\f07b'; display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; padding:3px;
transition:background-color 1s 0 ease-out
background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .flato-yellow-button { opacity:1; padding:7px 14px!important; background:#fac75b; color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; }
padding:7px 14px!important;
.flato-yellow-button:before { content:'\f084'; display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .flato-gray-button { opacity:1;
font-family:fontawesome;
background:#c9ced1; color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center; text-transform:uppercase; transition:background-color 1s 0 ease-out } .flato-gray-button:before { content:'\f0c1'; display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff;
text-transform:uppercase;
transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } .flato-purblehm-button { opacity:1; padding:7px 14px!important; background:#A954E4; color:#fff!important; font-weight:400; font-size:14px; font-family:Electrolize,'ge_ss_tvbold'; text-align:center;
.flato-purblehm-button:hover,.flato-red-button:hover,.flato-RedHm-button:hover,.flato-pink-button:hover,.flato-blue-button:hover,.flato-tirquoise-button:hover,.flato-green-button:hover,.flato-yellow-button:hover,.flato-gray-button:hover,.flato-dark-button:hover,.demo:hover,.download1:hover,.download:hover
transition:background-color 1s 0 ease-out } .flato-purblehm-button:before { content:'\f0c7'; display:inline-block; margin-left:5px; width:16px; height:20px; line-height:24px; color:#fff; font-family:fontawesome; transition:all .5s ease-in-out; padding:3px; background:rgba(0,0,0,0.2); margin-right:-13px; padding-bottom:8px; padding-left:7px; padding-right:7px } {
line-height:1px;
background:rgba(0,0,0,0.6); text-shadow:0 0 1px #222; color:#fff } ul.flato-dropdown { text-align:center; font-weight:400; font-size:12px; font-family:Electrolize,ge_ss_tvbold; display:inline-block } ul.flato-dropdown li { background:#E9454C url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxH0NXjM2-Y3Yx0D5r2-jtzmaqxoyFevy1EwNp7YIEwDezThbonB41NEERUZ0NvdXkgN9RlC5maxfOAvhuThDuPgsrGuDgj7LLJPFz7SZvNXDS9rz2Dqtp1sS75Ng_H5NxgwF-J22NGeQ/s1600/arrow-right.png) no-repeat 12px center; height:33px; float:left;
ul.flato-dropdown li:first-child
display:inline; width:173px; margin-left:2px; border-radius:3px } ul.flato-dropdown li:hover { background:#D3373D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnLWgQIswQu4etsALK7H6wYX9jeq8SeBbscqcthlHIqZEghPQf8Cn254JQoHUjLHEInmKfcxnY6g0xMVYFBa6eQJnVVZcCg8ggqcqKIkMROxVH5aoRsWXIQbO7T3RLBngpmXeungyqfwk/s1600/arrow-down.png) no-repeat 12px center; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; border-radius:3px; -moz-transition:.5s; -o-transition:.5s; transition:.5s } { margin-left:0
-webkit-transition-duration:.7s;
} ul.flato-dropdown li a { display:block; color:#F5F5F5; line-height:33px; outline:none; text-decoration:none } ul.flato-dropdown li a:hover { color:#fff; -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s } ul.flato-dropdown li ul { padding:6px 0 0; visibility:hidden; width:100%; height:100%; opacity:0 } ul.flato-dropdown li:hover > ul { visibility:visible; opacity:1;
background:#DA3B42;
-moz-transition-duration:.7s; -o-transition-duration:.7s; transition-duration:.7s } ul.flato-dropdown ul li { margin:0; text-align:center; border-top:1px solid #C03940; background:#D3373D; height:25px; line-height:25px; -moz-border-radius:0; -webkit-border-radius:0; -khtml-border-radius:0; border-radius:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none } ul.flato-dropdown ul li:hover { -moz-border-radius:0;
-webkit-border-radius:0 0 6px 6px;
-webkit-border-radius:0; -khtml-border-radius:0; border-radius:0; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none } ul.flato-dropdown ul li:first-child { border-top:none; -moz-border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; -khtml-border-radius:6px 6px 0 0; border-radius:6px 6px 0 0; behavior:url(PIE.htc) } ul.flato-dropdown ul li:last-child { -moz-border-radius:0 0 6px 6px; -khtml-border-radius:0 0 6px 6px;
}
border-radius:0 0 6px 6px; behavior:url(PIE.htc) } ul.flato-dropdown li:hover > ul { visibility:visible } ul.flato-dropdown li:hover > ul li { overflow:visible } ul.flato-dropdown ul li a { width:100%; color:#F5F5F5; line-height:25px; overflow:hidden;
display:block
5- احفظ القالب ولاستعمال الأزرار توجه الى تبويب HTML و أضف الكود الذي تريده


  • name
  • name
  • name
  • name
  • name
  • name
  • name
  • name
  • name
  • name
  • 0 التعليقات:

    إرسال تعليق

     
    تعريب وتطوير elashmawy1993
    كن داعيا للخير © 2010 | عودة الى الاعلى
    Designed by Chica Blogger