مدونة هلا تك

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

أقدم لكم بهذه التدوينة على مدونة هلا تك أضافة رائعة جدا و بتاثير خيالي

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

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

معاينة الأزرار

شرح التركيب بالفيديو

الأكواد الخاصة بالاضافة

أولا تذهب إلى واجهة تحكم بلوجر بعد ذلك، تذهب الى المظهر وتضغط على قائمة منسدلة بجانب التخصيص. بعدها، تضغط على تعديل ~~html~~ في لوحة المفاتيح تضغط على أزرار ~~Ctrl + F~~ معا حتى تظهر لك خانة البحث. ومن ثم تقوم بالبحث

عن الكود التالي ~~]]></b:skin>~~ ثم نقوم بلصق الكود التالي أعلاه

.button_container{width:176px;margin:0 auto;margin-top:30px;padding-top:40px}
span.button_text_container{color:white;font-size:18px;font-weight:500}
.button_su{overflow:hidden;position:relative;display:inline-block;border-radius:3px;margin-bottom:30px}
.su_button_circle{background-color:red;border-radius:1000px;position:absolute;left:0;top:0;width:0;height:0;margin-left:0;margin-top:0;pointer-events:none;/*animation-timing-function:ease-in-out;*/}
.button_su_inner{display:inline-block;background:#00acee;color:#F4F4F4;font-size:16px;font-weight:normal;width:202px;text-align:center;border-radius:3px;transition:400ms;text-decoration:none;padding:22px;z-index:100000}
.button_text_container{position:relative;z-index:10000}
.explode-circle{animation:explode 0.5s forwards}
.desplode-circle{animation:desplode 0.5s forwards}
@keyframes explode{0%{width:0;height:0;margin-left:0;margin-top:0;background-color:#893cf7}100%{width:400px;height:400px;margin-left:-200px;margin-top:-200px;background-color:#893cf7}}
@keyframes desplode{0%{width:400px;height:400px;margin-left:-200px;margin-top:-200px;background-color:#893cf7}100%{width:0;height:0;margin-left:0;margin-top:0;background-color:#893cf7}}

ثانيا تقوم بالبحث عن ~~</body>~~ و تقوم بلصق الكود التالي اعلاه

<script type='text/javascript'>
//<![CDATA[

$( ".button_su_inner" ).mouseenter(function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$(this).prev(".su_button_circle").css({"left": relX, "top": relY });
$(this).prev(".su_button_circle").removeClass("desplode-circle");
$(this).prev(".su_button_circle").addClass("explode-circle");
});

$( ".button_su_inner" ).mouseleave(function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$(this).prev(".su_button_circle").css({"left": relX, "top": relY });
$(this).prev(".su_button_circle").removeClass("explode-circle");
$(this).prev(".su_button_circle").addClass("desplode-circle");
});
//]]>
</script>

ثالثا عند كتابة موضوع أنتقل الى ~~HTML~~ و قم بلصق اكواد الازرار بالمكان المناسب

<div class="button_container"><div class="button_su"><span class="su_button_circle"></span><a href="#" class="button_su_inner"><span class="button_text_container"> المعاينـــة</span></a></div>

<div class="button_container"><div class="button_su"><span class="su_button_circle"></span><a href="#" class="button_su_inner"><span class="button_text_container">التحميـــل</span></a></div>

رابعا قم بتغير أشارة # برابط التحميل او رابط المعاينة

و قم بالحفظ

وفي الختام !

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