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

ازرار معاينة وتحميل

تركيب أزرار معاينة وتحميل لمدونات بلوجر هو موضوع مقال اليوم بسم الله الرحمن الرحيم السلام عليكم ورحمة الله تعالى وبركاته زوار مدونة تك توك الكثير من أشخاص أصحاب المدونات يردون تركيب ازرار معاينة وتحميل لجعل مدونة الخاصة بهم ذات منظر الرائع.

ازرار معاينة لقوالب بلوجر :-

هي خاصية لا توجد في معظم القوالب فهي من أكثر إضافات مطلوبة في مدونة خاصتا في مدونات تحميل ومعاينة قوالب أيضاً مدونات تحميل ألعاب فهي ضرورية ولا غني عنها في مدونة ولكن لا يحتاجه أصحاب مدونات تابعة للأخبار او مشابه فتابعوا معنا شرح تركيب أزرار معاينة وتحميل في قوالب بلوجر بتفصيل إنشاء الله تعالى.

مميزات ازرار معاينة وتحميل :-

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

شرح تركيب أزرار معاينة وتحميل :-

1. تسجيل دخول في منصة بلوجر 
2. دخول إلى لوحة تحكم مدونة 
3. اذهب إلى مظهر 
4. اذهب إلى تحرير Html 
5. أبحث عن" </head> "

الاصق هذا كود فوقه

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

1. أبحث عن "  ]]></b:skin> "

الاصق هذا كود فوقه

#wrap {    margin: 20px auto;    text-align: center;}
#wrap br {    display: none;}
.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 {    right: 100%;    margin-right: -45px;    background-color: #fdfdfd;    color: #0099cc;}
.btn-slide2:hover span.circle2 {    color: #efa666;}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {    right: 40px;    opacity: 0;}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {    opacity: 1;    right: 40px;}
.btn-slide span.circle, .btn-slide2 span.circle2 {    display: block;    background-color: #0099cc;    color: #fff;    position: absolute;    float: right;    margin: 5px;    line-height: 42px;    height: 40px;    width: 40px;    top: 0;    right: 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;    right: 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;    right: 80px;  }
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    right: 80px;    opacity: 0;}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    color: #fff;}

1.  اذهب إلى html

ضيف هذا كود

<div id="wrap"><a href="#" class="btn-slide">  <span class="circle"><i class="fa fa-rocket"></i></span>  <span class="title">معاينة</span>  <span class="title-hover">اضغط للمعاينة</span></a><a href="#" class="btn-slide2">  <span class="circle2"><i class="fa fa-download"></i></span>  <span class="title2">تحميل</span>  <span class="title-hover2">اضغط للتحميل</span></a></div>

ملحوظة استبدال رمز " # "برابط معاينة أو تحميل وستبدال أيضا كلمة معاينة أو تحميل بأي كلمة تردها