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

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

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

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/AVvXsEjZJUb8Galvzm5oaIIzfE4083Rm75RObTo56y5nhMr3rWaES7ug7dGJWHmGUP-tvOJOa4cLUMfP5aHkGCrRTNYY0M1hKW16qkSQyHgURi_GeUKpa9RQ1NpIRoNeXHkNA79OkyBhTUKnbcw/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/AVvXsEjPYdPrklL9so63X4uZYxG8FUnIi4fqOs7f6bfQcDRnrxlNSluZri5VgPSn_rJnOk8OzLcI9EzkW8gQAYVYOJAwrT_m8LVBiqm5A-RO0ESlfGG0z7zn_gt9ReB-nBROu3EkhE4Hewrb-1Y/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