اضافة تعريف الكاتب في السايدبار احترافية

اضافة تعريف الكاتب في السايدبار احترافية

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

هذه الاواخر اجد عديد من الاسئلة على يومياتي الفيس بوك وغالبا ما تكون طريقة إضافة تعريف كاتب التدوينة ، ولذلك فكرت في تقديم شرح إضافة تعريف كاتب الموضوع لمدونات بلوجر ليستفيد كل زوار مدونة هشام هاشم info-sati ، وكما تعلمون نحول ما امكن شرح الامور بطريقة جد سهلة ومجربة لخروج الزائر من الموقع بدون خيبة امل .

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

ايضا هناك نقطة جد مهمة لكل المدونين الذين يضيفون المؤلفين في المدونة من اجل نشر المواضيع ، وطبعا يجب ان تكون عادلا ووضع تعريف او صورة لصاحب الموضوع ليستفيد هو ايضا في شهرته بين المدونين ، ولهذا هذه الاداة التي سوف تقوم بتركيبها يمكنك ايضا ان تضعها داخل الاتش تي ميل القالب او داخل المواضيع او المنشورات ان صح التعبير .

اضافة تعريف الكاتب في السايدبار احترافية تتوفر على اثنين اشكال :

- نبدء في الشرح الشكل الاول :

نقوم بدخول الى القالب >>> ثم تحرير HTML >>> بعدها CTRL+F

نقوم بالبحث عن ]]></b:skin> ونضع قبله مباشرة هذا الكود

body,html{ background-color:#ddd; height:100vw;}.post{ width:90vw; max-width:400px; height:250px; background-color:#fff; text-align:center; color:#666; font-size:22px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; box-shadow:0 3px 9px rgba(0,0,0,0.3); border-radius:10px; overflow:hidden;}.post header{ background:#222 url(https://pbs.twimg.com/profile_banners/66071794/1459547414/1500x500) top center no-repeat; background-size:cover; height:100px; position:relative;}.post header img{ width:100px; border-radius:50%; position:absolute; top:30px; left:10px;}.post header a{ position:absolute; right:20px; bottom:5px; font-size:16px; font-style:italic; text-decoration:none; color:rgba(255,255,255,0.8);}.post p{ margin:50px 0 0 0}.post .like{ color:#666; text-decoration:none; font-size:40px; transition:all 0.3s}.post .like:hover{ color:#755}.post .active{ color:#d02 !important; text-shadow:#faa 0 0 16px;}

بعدها نقوم بدخول الى التخطيط >> ثم اضافة اداة جافا سكريبت >> ونركب هذا الكود html .

<div class="post"> <header> <img src="http://www.3rbz.com/uploads/eaffe75fa77e1.png" alt="" /> <a href="http://www.info-sati.com/" target="_b">@infosati</a> </header> <p>مرحبا انا هشام هاشم مدون مغربي</p> <a href="http://www.info-sati.com/" class="like">❤</a></div>

الصورة : استبدلها برابط الصورة التي تريد بالحجم الذي تريد .
عنوان : اختر عنوانا مناسبا لك .
رابط : تغيير رابط المدونة الى رابط مدونتك .

- الشرح الشكل الثاني :

نقوم بدخول الى القالب >>> ثم تحرير 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 .

<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="http://www.3rbz.com/uploads/eaffe75fa77e1.png" alt="youness wardaoui" />
</div>
<h1>هشام هاشم <span>مدون ومحترف بلوجر</span></h1>
</div>
</header>
<div class="profile-card_about">
<h2>من انا</h2>

<footer class="profile-card_footer">
<div class="social-row">
<div class="heart-icon" title="No Health Issues">
<?xml version="1.0" encoding="utf-8"?>

<!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>
</!doctype></?xml></div>
<div class="paw-icon" title="Gets Along Well With Other Animals">
<?xml version="1.0" encoding="utf-8"?>

<!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>
</!doctype></?xml></div>
</div>
<p><a class="back-to-profile" href="http://www.info-sati.com/">اعرف المزيد</a></p>
</footer>
</div>
</section>
</div>