السلام عليكم ورحمة الله وبركاته اعزائى متابعى مدونة ويب تيك
اليوم جبت لكم طريقة اضافة تعريف الكاتب بشكل احترافي لمدونات بلوجر في السيدبار طبعاً الاضافة تضيف لمسة من الجمال على المدونة وهي مهمة لتعريف الزائر عليك من خلال وضع المعلومات الخاصة بك
ولكي لا اطيل عليكم نبدأ في الشرح
اول شيء توجه
من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
]]></b:skin>واضف الكود التالي فوقه مباشرة
* {
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
padding: 0;
margin: 0;
min-height: 100vh;
background: -webkit-linear-gradient(transparent, rgba( 110, 110, 110, .3)), -webkit-linear-gradient(350deg, rgba(250, 214, 195, .8) 30%, #B0EAE8 120%);
background: linear-gradient(transparent, rgba( 110, 110, 110, .3)), linear-gradient(100deg, rgba(250, 214, 195, .8) 30%, #B0EAE8 120%);
}
.sidebar_wrapper {
width: 100%;
max-width: 26rem;
}
.about-dev {
width: 100%;
max-width: 26rem;
margin: auto;
box-shadow: 2px 4px 2px -2px rgba(0, 0, 0, .3), -2px -4px 15px -2px rgba(0, 0, 0, .2);
animation: profile_in 0.8s;
}
@keyframes profile_in {
0% {
opacity: 0;
transform: translateY(30%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* profile card header */
.profile-card_header-container {
max-width: 15rem;
margin: auto;
}
.profile-card_header {
background: #272727;
border-left: 0.625rem solid #97ece1;
padding: 1.5em 1.5em 1em;
text-align: center;
}
/* profile picture */
.profile-card_header-imgbox {
display: block;
width: 9.5rem;
height: 9.5rem;
overflow: hidden;
border-radius: 50%;
margin: auto;
background: rgba(250, 214, 195, 1);
border: 0.375rem solid rgba(250, 214, 195, 1);
}
.profile-card_header img {
max-width: 100%;
filter: grayscale(100%);
}
/* header heading */
.profile-card_header h1 {
color: #f3f3f3;
font-size: 1.5rem;
margin-top: 0.8em;
font-family: 'Oswald', sans-serif;
font-weight: normal;
position: relative;
}
/* header text span */
.profile-card_header h1 span {
font-size: 1.2rem;
font-weight: 300;
display: block;
color: rgba(220, 220, 220, .95);
margin-top: 0.25em;
padding-top: 0.25em;
border-top: 0.075em solid rgba(250, 214, 195, 1);
}
/* about section */
.profile-card_about {
line-height: 1.5;
background: #ededed;
padding: 1.5em 2rem;
color: #222;
font-family: 'Lato', sans-serif;
}
.profile-card_about h2 {
margin: 0;
display: inline-block;
color: #333;
font-weight: normal;
text-transform: uppercase;
font-size: 1.3rem;
position: relative;
z-index: 2;
vertical-align: middle;
}
.profile-card_about h2::before {
content: '';
position: absolute;
width: 110%;
/* max-width: 13.8rem;
*/
height: 1rem;
background: #c6f1eb;
left: -5px;
top: 50%;
z-index: -1;
}
.profile-card_about p {
font-weight: 300;
}
.profile-card_footer {
margin-top: 1.5em;
text-align: right;
}
/* social row */
.social-row {
margin-right: 0.5em;
}
.paw-icon,
.heart-icon {
display: inline-block;
margin-left: 0.5em;
transition: transform 0.3s;
}
#pawi,
#hearti {
height: 1.8rem;
width: 1.8rem;
cursor: help;
-webkit-transition: fill 0.3s ease-in-out;
transition: fill 0.3s ease-in-out;
}
#pawi path,
#hearti path {
fill: #272727;
}
.paw-icon:hover,
.heart-icon:hover {
transform: scale(1.2);
}
/* back to profile link */
.back-to-profile,
.back-to-profile:visited {
display: inline-block;
padding-left: 0.5em;
padding-bottom: 0.1em;
color: #222;
text-decoration: none;
font-weight: bold;
border-top: 0.3125rem solid rgba(0, 0, 0, 0);
border-bottom: 0.3125rem solid #97ece1;
-webkit-transition: border 0.3s ease-in-out;
transition: border 0.3s ease-in-out;
}
.back-to-profile::after {
content: "\25b6";
margin: 0 0.75em;
color: #222;
}
.back-to-profile:hover,
.back-to-profile:focus {
border-top-color: #222;
border-bottom-color: #fdc1a0;
}
@media screen and (max-width: 26em) {
.side_wrapper {
min-height: 100vh;
background: #ededed;
}
.about-dev {
box-shadow: none;
}
}
@media screen and (min-width: 33em) {
.side_wrapper {
margin: 2rem auto;
}
.profile-card_header {
padding: 1.5em 4em 1em;
}
}
@media screen and (min-height: 46em) {
.side_wrapper {
width: 100%;
max-width: 26rem;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.about-dev {
max-width: 26rem;
}
}
وفي الاخير ادخل تخطيط >> اضافة اداة >> HTML/JavaScript
والصق الكود التالي
<div class="side_wrapper">ملاحظة : قم بتغير ما يلي
<section class="about-dev">
<header class="profile-card_header">
<div class="profile-card_header-container">
<div class="profile-card_header-imgbox">
<img src="https://goo.gl/OTh3BC" alt="youness wardaoui" />
</div>
<h1>يونس ورضاوي <span>مدون ومحترف بلوجر</span></h1>
</div>
</header>
<div class="profile-card_about">
<h2>من انا</h2>
<p>يونس ورضاوي من المغرب مهووس بالتدوين في مجال البلوجر </p>
<footer class="profile-card_footer">
<div class="social-row">
<div class="heart-icon" title="No Health Issues">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="hearti" width="32" height="32" viewBox="0 0 32 32">
<path fill="#444" d="M24 12.977c-3.866 0-7 3.158-7 7.055 0 2.22 1.020 4.197 2.609 5.491-2.056 1.525-3.609 2.488-3.609 2.488s-14-8.652-14-15.622c0-4.2 2.583-8.399 7.5-8.399 4.5 0 6.5 4.296 6.5 4.296s1.75-4.296 6.5-4.296 7.416 4.115 7.416 8.399c0 0.958-0.272 1.943-0.716 2.932-1.281-1.436-3.134-2.344-5.2-2.344zM24 13.984c3.313 0 6 2.707 6 6.047s-2.687 6.048-6 6.048c-3.314 0-6-2.708-6-6.048s2.686-6.047 6-6.047zM21 21.039h2v2.016h2v-2.016h2v-2.016h-2v-2.016h-2v2.016h-2v2.016z"></path>
</svg>
</div>
<div class="paw-icon" title="Gets Along Well With Other Animals">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="pawi" width="26" height="28" viewBox="0 0 26 28">
<path fill="#444" d="M12.187 7.375q0 0.938-0.297 1.773t-0.984 1.445-1.641 0.609q-1.188 0-2.156-0.898t-1.437-2.117-0.469-2.359q0-0.938 0.297-1.773t0.984-1.445 1.641-0.609q1.203 0 2.164 0.898t1.43 2.109 0.469 2.367zM6.844 14.922q0 1.25-0.656 2.172t-1.859 0.922q-1.188 0-2.211-0.867t-1.57-2.086-0.547-2.375q0-1.25 0.656-2.18t1.859-0.93q1.188 0 2.211 0.867t1.57 2.094 0.547 2.383zM13 14.5q1.844 0 3.984 1.523t3.578 3.703 1.437 3.977q0 0.719-0.266 1.195t-0.758 0.703-1.008 0.313-1.188 0.086q-1.062 0-2.93-0.703t-2.852-0.703q-1.031 0-3.008 0.695t-3.133 0.695q-2.859 0-2.859-2.281 0-1.344 0.875-2.992t2.18-3.008 2.93-2.281 3.016-0.922zM16.734 11.203q-0.953 0-1.641-0.609t-0.984-1.445-0.297-1.773q0-1.156 0.469-2.367t1.43-2.109 2.164-0.898q0.953 0 1.641 0.609t0.984 1.445 0.297 1.773q0 1.141-0.469 2.359t-1.437 2.117-2.156 0.898zM23.484 9.578q1.203 0 1.859 0.93t0.656 2.18q0 1.156-0.547 2.375t-1.57 2.086-2.211 0.867q-1.203 0-1.859-0.922t-0.656-2.172q0-1.156 0.547-2.383t1.57-2.094 2.211-0.867z"></path>
</svg>
</div>
</div>
<p><a class="back-to-profile" href="#">اعرف المزيد</a></p>
</footer>
</div>
</section>
</div>
الصورة
الاسم
الوصف
رابط حسابك
واخيرا احفض الاداة ومبروك عليك الاضافة
المرجو من كل شخص يريد نقل الشرح يدكر المصدر من فضلكم
تعليقات: (0) (يمكنك التعليق برابط صورة او فيديو) إضافة تعليق