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

بسم الله الرحمن الرحيم

والصلاه والسلام على اشرف المرسلين

زوار ومتابعى مدونه معلومه تهمك

السلام عليكم ورحمه الله وبركاته

شرح اليوم عن طريقه اضافه ازرار معاينه وتحميل

نبذه عن الاضافه

كما وعدناكم فى مدونه معلومه تهمك بتقديم افضل القوالب واضافات البلوجر والخطوط

كل ما يخص البلوجر تجده عندنااا فى مدونتكم معلومه تهمك

وقد جئنا لكم اليوم بطريقه تركيب ازرار معاينه وتحميل بشكل احترافى رائع

فازرار المعاينه تعطى شكلا عاما لموقعك بالضافه ان شكلهاا جميل جدااا

فبعض الازرار قد يكود شكلهااا ليس جميلا والكثير من الاضافات على الانترنت

ليست بالمظهر المطلوب فاضافه اليوم شكلهاا رائع جدااا

معاينه

معاينة اضغط هنا حمل اضغط هنا

طريقه الاضافه
اولا اذهب الى لوحه التحكم فى بلوجر
ثم اذهب الى القالب ثم الى تحرير HTML
وبعد ذلك ابحث على هذه الكلمه ]]></b:skin>
وضع هذا الكود فوقهااا مباشره

#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
 margin: 10px;
 transition: .5s;
}
 .btn-slide2 {
 border: 2px solid #efa666;
}
 .btn-slide:hover {
 background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
 .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
 left: 100%;
 margin-left: -45px;
 background-color: #fdfdfd;
color: #0099cc;
}
 .btn-slide2:hover span.circle2 {
 color: #efa666;
}
 .btn-slide:hover span.title, .btn-slide2:hover span.title2 {
 left: 40px;
 opacity: 0;
}
 .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
 opacity: 1;
 left: 40px;
}
 .btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
 .btn-slide2 span.circle2 {
 background-color: #efa666;
}
 .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
 text-align: center;
 margin: 0 auto;
 font-size: 16px;
 font-weight: bold;
 color: #30abd5;
 transition: .5s;
}
 .btn-slide2 span.title2, .btn-slide2 span.title-hover2 {
 color: #efa666;
 left: 200px;
}
 .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
 left: 200px;
 opacity: 0;
}
 .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
 color: #fff;

وبعد ذلك اضغط حفظ

طريقه تركيب الاضافه داخل التدوينه

اولا عند كتابه التدوينه انتقل من وضع التاليف الى وضع html

وضع هذا الكود فى المكان الذى تريد وضع الازرار بداخله

معاينة

اضغط هنا

</a>

حمل

اضغط هنا

</a>

</div>

ضع مكان اللون الاحمر رابط المعاينه او التحميل