إضافة أزرار التحميل والمعاينة بشكل أحترافي | إضافات بلوجر

إضافة أزرار التحميل والمعاينة بشكل أحترافي | إضافات بلوجر

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

💫 خطواط إضافة ازرار في مدونة بلوجر :

1 - الإحتفاظ بنسخة احتياطية من القالب تحسباً لآي خطأ يحدث في الإضافة .

إضافة أزرار التحميل والمعاينة بشكل أحترافي من Egyit5.com | إضافات بلوجر

2 -  أدخل الي المظهر ثم تعديل HTML .

إضافة أزرار التحميل والمعاينة لقوالب بلوجر بشكل جميل وأحترافي | إضافات بلوجر

3 -  أبحث في القالب عن الوسم /b:skin

إضافة أزرار التحميل والمعاينة لقوالب بلوجر بشكل جميل وأحترافي | إضافات بلوجر

4 -  انسخ كود CSS التالي أو حمل الملف من هنـــا وقم بلصقة فوق الوسم /b:skin واضغط علي حفظ .

#warch {
margin: 20px auto;
text-align: center;}
#warch br {
display: none;}
.mo-slide, .mo-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;}.mo-slide2 { border: 2px solid #efa666;}.mo-slide:hover { background-color: #0099cc;}.mo-slide2:hover { background-color: #efa666;}.mo-slide:hover span.circle, . mo-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc;}.mo-slide2:hover span.circle2 { color: #efa666;}.mo-slide:hover span.title,.mo-slide2:hover span.title2 { left: 40px; opacity: 0;}.mo-slide:hover span.title-hover,.mo-slide2:hover span.title-hover2 { opacity: 1; left: 40px;}.mo-slide span.circle,.mo-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%;}.mo-slide2 span.circle2 { background-color: #efa666;}.mo-slide span.title, .mo-slide span.title-hover,.mo-slide2 span.title2, .mo-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s;}.mo-slide2 span.title2, .mo-slide2 span.title-hover2 { color: #efa666; left: 80px;}.mo-slide span.title-hover,.mo-slide2 span.title-hover2 { left: 80px; opacity: 0;}.mo-slide span.title-hover,.mo-slide2 span.title-hover2 { color: #fff;}

5 - أذهب إلي المشاركات وحدد المكان الذي تريد إضافة أزرار التحميل والمعاينة فيها .
6 -  أذهب الي وضع html وأنسخ الكود التالي وقم بلصقه في المكان المحدد أو حمل الملف من هنــــا أو من منطقة التحميل بالأسفل .

<div id="warch">
<a href="ضع هنا رابط التحميل" class="mo-slide" target="_blank">
<span class="circle"><i class="#"></i></span>
<span class="title">معاينة </span>
<span class="title-hover">إنقر هنا </span>
</a>
<a href="ضع هنا رابط المعاينة" class="mo-slide2" target="_blank">
<span class="circle2"><i class="#"></i></span>
<span class="title2">تحميل </span>
<span class="title-hover2">إنقر هنا </span>
</a>
</div>

7 - استبدل جملة " ضع هنا رابط التحميل " برابط التحميل الخاص بك (في الجزء الأول من الكود ) .
8 -  استبدل جملة " ضع هنا رابط المعاينة " برابط المعاينة الخاص بك (في الجزء الثاني من الكود ) .
9 -  الكلمات الموجودة في الكود باللون الأحمر  (تحميل - معاينة - أنقر هنا )  ستظهر علي الأزرار في المشاركة ، تستطيع أن تستبدلها بأي كلمة أخري بدون أي مشاكل .

💫 تحميل ملف الأكواد :

لتحميل ملف الأكواد المذكور في الشرح برابط مباشر من ميديا فاير 

💫  الإبلاغ عن روابط لا تعمل :

للأبلاغ عن أي روابط أو تطبيقات لا تعمل الرجاء الضغط علي الزر التالي :


اللهم صل وسلم وبارك علي أشرف الخلق سيدنا محمد 
وعلي آله وصحبه وسلم
رأيك يهمنا
أرجو أن تنال المقالة مقالة إعجابكم 
إدعمنا بتعليق ومشاركة حتي تعم الفائدة
واشتراك في قناة اليوتيوب
Mahmoud Abu Zeid
بواسطة : Mahmoud Abu Zeid
صعيدي مصرى من مدينة الالف مأذنة عمرى 29 عام محب للتدوين مهتم جدا بمجال التكنولوجيا ** هدفي الارتقاء بالمحتوي الرقمي العربي الهادف ، وتقديم المعلومة الحقيقية والموثقة من اجل نشر الوعى التقنى الصحيح .
تعليقات



حجم الخط
+
16
-
تباعد السطور
+
2
-