اضافة تعريف الكاتب من انا في صفحة تابتة للبلوجر

حصريا اضافة تعريف الكاتب من انا في صفحة تابتة للبلوجر

حصريا اضافة تعريف الكاتب من انا في صفحة تابتة للبلوجر

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

ولكي لا اطيل عليكم نبدأ في الشرح

معاينة الاداة

اول شيء توجه

من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

واضف الكود التالي فوقه مباشرة

/* oi-web.blogspt.com! */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400);
@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 0.0;
}
}
@keyframes pulsate {
0% {
-webkit-transform: scale(0.6, 0.6);
transform: scale(0.6, 0.6);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 0.0;
}
}
body {
background-repeat: repeat, no-repeat;
background-size: auto, 100% 100%;
background-attachment: fixed;
color: #ecf0f1;
font-family: 'Noto Sans Kufi Arabic', sans-serif font-size: 16px;
line-height: 1.5;
font-weight: 300;
min-height: 100%;
overflow-y: scroll;
width: 100%;
}
h1, h2 {
font-weight: 300;
line-height: 1.2;
}
.profile-card {
height: 305px;
width: 600px;
position: relative;
margin: 4em auto;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.profile-card header {
width: 100%;
height: 100%;
text-align: center;
/* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(0, 0, 0, 0.9)), color-stop(100%, transparent));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
/* IE10+ */
background: linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.profile-card header a {
position: relative;
}
.profile-card header a:before {
content: "";
border: 15px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
height: 90px;
width: 90px;
position: absolute;
left: 0;
bottom: 3px;
-webkit-animation: pulsate 1.6s ease-out;
animation: pulsate 1.6s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0.0;
z-index: 99;
}
.profile-card header img {
position: relative;
border-radius: 50%;
height: 90px;
width: 90px;
padding: 0;
margin: 0;
border: 15px solid transparent;
margin-top: 12px;
z-index: 9999;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.profile-card header a:hover img {
-webkit-transform: scale(1.06, 1.06);
transform: scale(1.06, 1.06);
}
.profile-card header a:hover:before {
-webkit-animation: none;
animation: none;
}
.profile-card header h1 {
text-align: center;
font-size: 28px;
font-weight: 400;
opacity: 0.9;
margin-bottom: 8px;
}
.profile-card header h2 {
font-size: 18px;
margin-top: 0;
opacity: 0.9;
}
.profile-card .profile-bio {
position: absolute;
bottom: 0;
}
.profile-card .profile-bio p {
margin: 24px;
text-align: center;
opacity: 0.9;
}
.profile-card .profile-social-links {
position: relative;
background-color: white;
margin: 0 auto;
text-align: center;
padding: 6px 0;
}
.profile-card .profile-social-links li {
display: inline-block;
padding: 3px 5px 0;
}
.profile-card .profile-social-links li img {
height: 28px;
opacity: 0.8;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.profile-card .profile-social-links li a:hover img {
opacity: 1;
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.profile-card .profile-social-links:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}

قم بحفظ القالب

ادخل إلى لوحة تحكم المدونة

انتقل إلى الصفحات

انقر على إنشاء صفحة جديدة

انتقل من وضع تأليف إلى وضع HTML

<aside class="profile-card">
<header>

<a href="https://oi-web.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEhpmW6fAhnidQloiatcO7j2VJbKq5yRFhCnKFEZFWg5978X9z_luhb7ndo74PNMlfaUt9biW6YaDpUvJbTTgya9uWmRL0XiF-jwmLIzDzOkC1RET5pkjwWHKDJeKbGranYl9jiAbq6Ed_SMPTGbfV55s8eCcMv6cfyHgIcG7EuLYZoQ_k6RXMq7Pxj1TuO20WfkJGr4EWIP=s0-d">
</a>

<h1>يونس ورضاوي</h1>

<h2>مبرمج ومطور مواقع</h2>
</header>

<div class="profile-bio">
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصو.</p>
</div>

<ul class="profile-social-links">

<li>
<a href="http://twitter.com/">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
</a>
</li>

<li>
<a href="http://themeforest.net">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
</a>
</li>

<li>
<a href="#">
<img src="http://blog.virginmobile.sa/img/icons/png/glyph_share_facebook_96x96_2x.png">
</a>
</li>

</ul>
</aside>

ملاحظة قم بتغيير مايلي

الصورة
الروابط
الكتابة

المصدر اضغط