حزمة المصمم العربي: أضف هذا التأثير المميز على الروابط

معاينة الإضافة

موضوع اليوم ببساطة هو عن إضافة لمسة جمالية إلى مدونتك، وتحديدًا إلى الروابط. حيث، عند استخدام إضافة بلوغر هذه، ومرور مؤشر الفأرة على الرابط المطبقة عليه الإضافة، فإنه سيبدو كما في الصورة السابقة.
يمكنك أيضاً مشاهدة كيفية عمل الإضافة عبر الضغط على زر معاينة الإضافة (على اليسار).

طريقة التركيب

1. أدخل إلى: قالب > تحرير HTML ثم اضغط CTRL+F لإظهار مربع البحث، ثم ابحث عن ]]></b:skin>
2. أضف الكود التالي فوق هذا الوسم مباشرة

@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://الرابط.com/" target="_blank">حزمة المصمم<br />العربي</a>