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

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

درس  1 في إضافات بلوجر و  يتمحور على طريقة اضافة ايقونات التحميل احترافية لتدوينات بلوجر بسهولة ، وهناك الكثير من الاضافات التي تضيف لمسة جميلة لمظهر المدونة للزوار، منها ما يظهر لمسة جميلة ومنها ما يضيف اداة معينة والكثير من الاضافات على حسب احتياجات صاحب المدونة، والاضافة التي ساشرحها اليوم تتعلق بايقونات التحميل او التوجيه الى موقع معين، تنقسم هذه الاضافة الى كودين الكود الاول عبارة عن CSS ويتم اضافته الى مظهر القالب في تحرير HTML مرة واحدة فقط فوق الوسم المخصص لاكواد CSS وهو وسم <b:skin/> وهذا الكود يختص في اظهار شكل الايقونة من الوان وما الى ذلك والكود التاني هو عبارة عن كود HTML ويتم اضافته في المكان المراد اظهار الاضافة او ايقونة التحميل ويمكن اضافته العديد من المرات حسب احتياجاتك.

• 1 ستذهب الى القالب و تحرر HTML  

  

• 2 ثم تضغط على CTRL + F  لتبحث على <b:skin/> سأضع صور توضيحية في الاسفل

 

• 3 تضع الكود css  التالى فوق <b:skin/> مباشر

متألق NET  */

#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: #363050;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #558FEB;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #DB5252;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #DB5252;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #2e9fff;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #DB5252;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 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: #2FA8D1;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

• المرحلة الثانية 
• 1  سوف تضع هذا الكود HTML  في كل مرة  تكتب موضوعك  على مدونتك ساضع صور توضيحية مع الكود في الاسفل مع تعرف بعض الكودات 

 

كل سطر يرمز في HTML   ب <d   </ br و تدخل الكود التالي 

 

 

 

 

 <div style="text-align: center;">
<div id="wrap">
<a class="btn-slide2" href="هنا رابط الموقع الذي تريد" rel="nofollow" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل البرنامج</span>
  <span class="title-hover2">اضغط هنا</span>
</a>
</div>
</div>

 إذا لم تفهم شيئ اكتب لي في التعليقات الشيء الذي لم تفهمه وسيتم الرد عليك في أقرب وقت 

إذا اعجبك الموضوع لا تبخل علينا بإعجاب وشترك في المدونة ليصلك كل جديد ينشر في مدونة متألق NET