اضافة ازرار معاينة وتحميل في موضوع بلوجر

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

زِرين بسيطين وبتصميم إحترافي يتضمن المعاينة مع التحميل بإدراج حجم الملف ونص اخر، أزرار بتصميم نقي بإستخدام Css فقط مما يجعلها جد خفيفة وأيضا لها منظر جد رائع تجذبك لضغط عليها ما يتبقى عليك إلى تركيبها وإستعمالها في موقعك

اضافة ازرار معاينة وتحميل في موضوع بلوجر

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

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

شاهد أيضاً :-

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

شرح طريقة التركيب

  1. توجه لقالب >> تحرير
  2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

3.ابحث عن ]]></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: 0.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: 0.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: 0.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;
}

احفظ العمل

4. أضف الكود الآتي بداخل الموضوع في تبويب

<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>

كل ما عليك بنسخ الكود الاعلى وتغيير # بالرابط المشاهدة او المعاينة

ينتهي هنا موضوعنا عن "اضافة ازرار معاينة وتحميل في موضوع بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

عن الكاتب

عبدالحميد ميدو منشئ محتوى رقمي ومهتم بجديد التقنية بشكل عام والبرمجة JS ,CSS بشكل خاص.

تعليق واحد

  1. حضرتك شرحك جميل جدا بس المشكله انك مانع حد ينسخ اصلا ااي بقا انا انسخ الاكواد ؟
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.