اضافة اداة انضم الينا بشكل جديد

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

شرح التركيب

  1.  توجه الى تحرير القالب
  2. ثم ابحث عن ]]></b:skin> 
  3. ثم قم بوضع هذا الكود فوقه مباشرة 


 /* ------------------------------*
    اضافة اداة انضم الينا - كن مهووس
* ------------------------------ */
.radio-info1 {
    text-align: center;
    font-size: 26px;
}
.radio-side1 {
    border-bottom: 5px solid #dd2f2f;
    border-top: 5px solid #dd2f2f;
    width: 100%;
    height: 304px;
    padding: 17px;
background: rgba(0, 0, 0, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_NBFMmb6E-7KbI-2A6z2YGT1Cb8U2uRZalrB1rzJQod0V3x39rnxpt-rxmh0IKJNVj7eUQW9vmGQMtJ8EuhwA1a5p_Tlaba_pyszSpwLDHsq67hGyEItHVqKfn1-BhoTws842ifX0VU/s1600/black-background-images-15.jpg) repeat scroll 20% 20%;    color: #fff;
}
.radio-name1 {
    margin-top: 18.5px;
    margin-bottom: 22px;
    text-align: center;
}
.radio-name1 .fa {
    font-size: 69px;
 color: #fff;
}
.radio-button1 .button {
    padding: 8px 18px;
    background: #FFFFFF;
    color: #444444;
    border-radius: 4px;
    border: 3px solid #FFF;
    transition: all 0.4s ease;
    font-size: 16px;
}
.radio-button1 {
margin-top: 50px;
}
.radio-button1 .button:hover {
    background: #444444;
    color: #fff;
 transition: all 0.4s ease;
}
 

  1. توجه الى التخطيط ثم اضف اداة html/javascript
  2.  وضع الكود التالي داخل الاداة
 <div class='radio-side1'>
<div class='radio-name1'>
  <img alt='' class='quott' src='http://c.top4top.net/p_3241jsbo1.png'/></div>
<div class='radio-info1'>
<b style='font-size: 20px;'>مدونة تهتم بعالم التقنية، وعالم بلوجر
</b>
<div class='radio-button1'>
<a class='button' href='https://www.blogger.com/follow-blog.g?blogID=2136533383287633737' target='_blank'>
<i aria-hidden='true' class='fa fa-user'/>
            إنضم لأصدقاء الموقع 
          </i></a>
</div>
</div>
</div> 

مواضيع ذات صلة

تعليقات

  1. رائع
    ولكن يوجد لدى مشكله فى قالب نكهه وان صندوق التعليقات لا يوجد به هل يمكنك مساعدتى ؟

الوجوه التعبيرية
إنسخ ثم إلصق الوجوه التعبيرية في صندوق التعليقات

الأرشيف

نموذج الاتصال

إرسال