[ حصريا ] اضافة تأثير احترافي على الروابط في مدونات بلوجر

 اضافة تأثير احترافي على الروابط في مدونات بلوجر 

السلام عليكم و رحمة الله و بركاته

أهلا و سهلا بكم متابعى و زوار مدونة الموسوعة

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

معاينة اضغط هنا

لذلك أحبابى فى الله اليوم أقدم لكم اضافة رائعة للتأثير عاى الروابط داخل مدونتك و لن أطيل عليكم أحبابى

طريقة الاضافة

أولا قم بالدخول إلى القالب ثم تحرير HTML اضغط على F + CTRL و ابحث عن هذا الوسم ]]></b:skin>

و اضف الكود التالي فوقه

@import url(http://fonts.googleapis.com/css?family=Lato:100,400,900);

a {

    -moz-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    -o-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    -webkit-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    white-space: nowrap;

    font-family: "Lato";

    font-weight: 900;

    font-size: 32px;

    letter-spacing: 2px;

    text-transform: uppercase;

    text-decoration: none;

    color: #ff4851;

    position: absolute;

    top: 50%;

    left: 50%;

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

}

a:after {

    content: attr(href);

    -moz-transition: all 0s linear;

    -o-transition: all 0s linear;

    -webkit-transition: all 0s linear;

    transition: all 0s linear;

    overflow: hidden;

    background-color: #ff4851;

    text-transform: lowercase;

    position: absolute;

    font-size: 10px;

    letter-spacing: 0;

    font-weight: 500;

    bottom: -8px;

    left: 0;

    width: 100%;

    display: inline-block;

    -moz-transform: translate(-15px, 100%);

    -ms-transform: translate(-15px, 100%);

    -webkit-transform: translate(-15px, 100%);

    transform: translate(-15px, 100%);

    padding: 0 15px;

    max-height: 0;

    z-index: -1;

}

a:before {

    content: "";

    -moz-backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -moz-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    -o-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    -webkit-transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    transition: all 0.15s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    position: absolute;

    width: 100%;

    height: 2px;

    background-color: #ff4851;

    bottom: -5px;

    z-index: -2;

}

a:hover {

    color: white;

}

a:hover:before {

    padding: 10px 15px;

    margin-left: -15px;

    bottom: -10px;

    height: 100%;

}

a:hover:after {

    -moz-transition: all 0.25s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.3s;

    -o-transition: all 0.25s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.3s;

    -webkit-transition: all 0.25s cubic-bezier(0.46, 0.01, 0.14, 1.35);

    -webkit-transition-delay: 0.3s;

    transition: all 0.25s cubic-bezier(0.46, 0.01, 0.14, 1.35) 0.3s;

    -moz-transform: translate(-15px, 50%);

    -ms-transform: translate(-15px, 50%);

    -webkit-transform: translate(-15px, 50%);

    transform: translate(-15px, 50%);

    padding: 10px 15px;

    max-height: 30px;

    opacity: 1;

}

لاضافة التأثير على الروابط داخل التدوينة قم بعمل الآتى ( عند كتابة موضوع ننتقل من وضع تأليف إلى وضع HTML و نضع هذا الكود ) مع تغيير اللازم

<a href="http://google.com/" target="_blank">Link to<br />Google</a>