التعليقات

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

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

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

ازرار التحميل لمدونات بلوجر هي واحدة من الاضافات المهمة التي يجب اضافتها للمدونة و خاصة عند تحميل القوالب او تحميل كود معين فلا بد ان يجد الزائر زر تحميل انيق و احترافي لزيادة جمالية الموضوع و المدونة ككل .
و للعلم فان ازرار التحميل مكونة من اكواد CSS و طريقة اضافتها كما قلنا تزيد من جمالية و احترافية مدونة بلوجر بشكل اكثر .
في هذا الموضوع جلبت لكم اضافة ازرار التحميل احترافية لمدونات بلوجر .
  1. معاينة الزر الاول : من هنا
  2. معاينة الزر الثاني : من هنا
طريقة تركيب الازرار
  • الدخول الى لوحة التحكم
  • اختر قالب
  • تحرير HTML
  • ابحث عن الوسم </head> و ضع الكود التالي فوقه مباشرة 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

تركيب الزر الاول :
  • ابحث عن الوسم : ]]></b:skin>
  • ضع الكود التالي فوقه مباشرة :
.container {
  width:200px;
  display:block;
  margin:20px auto;
  position:relative;
  font-family:droid arabic kufi;
}

.con_down {
  display:block;
  cursor:pointer;
  background-color:#F6EB96;
  width:190px;
  height:50px;
  padding-left:10px;
  padding-top:5px;
  text-align:left;
  border-bottom:4px solid #D8B83C;
  border-radius:5px;
  position:relative;
  line-height:50px;
}
.con_down .fa-download{
  position:absolute;
  right:10px;
  top:15px;color:#895D0A;
}

.con_down h4 {
  color:#895D0A;
  text-transform:uppercase;
  margin:0;
}
.sizes h5 {
    margin:0;
}

.sizes {
  background-color:#E3E3E3;
  width:100px;
  height:30px;
  z-index:-9;
  padding-top:2px;
  border-bottom:4px solid #AAA9A9;
  position:absolute;
  top:13px;
  left:20px;
  transition:.5s all ease-in-out;
}

.size {
  line-height:30px;
  text-align:center;
  color:#4B4B4B;
}

.sizes_abs {
  background-color:#F6EB96;
  cursor:pointer;
  width:20px;
  border-bottom:4px solid #D8B83C;
  border-bottom-left-radius:5px;
  border-top-left-radius:5px;
  height:55px;
  position:absolute;
  top:-13px;
  left:-20px;
  z-index:2;

}

.container:hover .sizes {
  left:-100px;
}

.container:hover .con_down {
  background-color:#F1DD5E;
     border-bottom-left-radius:0;
  border-top-left-radius:0;
}

.container:hover .sizes_abs {
  background-color:#F1DD5E;
}

تركيب الزر الثاني :
  • ابحث عن الوسم : ]]></b:skin>
  • ضع الكود التالي فوقه مباشرة .
.container {
    width:200px;
    display:block;
    margin:20px auto;
    position:relative;
    font-family:droid arabic kufi;
}
.con_down {
    display:block;
    cursor:pointer;
    background-color:#F6EB96;
    width:190px;
    height:50px;
    padding-left:10px;
    padding-top:5px;
    text-align:left;
    border-bottom:4px solid #D8B83C;
    border-radius:5px;
    position:relative;
    line-height:50px;
    transition:.5s all ease-in-out;
}
.con_down .fa-download {
    position:absolute;
    right:10px;
    top:15px;
    color:#895D0A;
}
.con_down h4 {
    color:#895D0A;
    text-transform:uppercase;
    margin:0;
}
.sizes h5 {
    margin:0;
}
.sizes {
    background-color:#E3E3E3;
    width:100px;
    height:30px;
    z-index:-9;
    position:absolute;
    bottom:22px;
    right:50%;
    margin-right:-50px;
    transition:.5s all ease-in-out;
}
.size {
    line-height:30px;
    text-align:center;
    color:#4B4B4B;
}
.sizes_abs {
    background-color:#F6EB96;
    cursor:pointer;
    width:200px;
    border-bottom:4px solid #D8B83C;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    height:20px;
    position:absolute;
    left:-50px;
    bottom:-22px;
    z-index:2;
}
.container:hover .sizes {
    bottom:-30px;
}
.container:hover .con_down {
    background-color:#F1DD5E;
    border-bottom:0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.container:hover .sizes_abs {
    background-color:#F1DD5E;
}

اذا كان لديك اي استفسار او طلب او خدمة في جميع المجالات فلا تتردد في ترك تعليق خارج الموضوع تحويل الاكوادإخفاء الابتساماتإخفاء

شكرا لتعليقك