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

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

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

قد يهمك: اضافة ازرار بسيطة احترافية للتحميل لمدونات بلوجر
اليوم انشاء الله اعرض عليكم ايقونات التحميل و الروابط الخارجية احترافية و ذات مظهر جميل وبيسط، خفيفة و خالية من الأخطاء.

لن أطيل عليكم سنبدأ بشرح طريقة تركيبها بسرعة وبسهولة.

نذهب الى التعديل على القالب من لوحة التحكم للبلوجر، ونبحث عن الكود ]]></b:skin>

ثم نضع فوقه الكود التالي:

ARB4TECH.COM */

#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;
}

بعد وضع الكود وحفظ القالب، تأتي الى طريقة استعمال الأيقونات داخل التدوينة.

كلما عليك الأن هو عندما تصل الى المكان الدي تريد وضع في رابط التحميل او المعاينة مثلا في آخر التدوينة.

تنسخ الكود التالى في جزء HTML التدوينة الموجود بالأعلى قرب تأليف

ثم تضع الكود التالي

قد يهمك: افضل أدوات للسيو (SEO) عليك إستخدامها لتضمن لموقعك تصدّر محركات البحث

شكل الأيقونة اضغط هنا

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

أخر المواضيع من قسم : اضافات بلوجر