السلام عليكم ورحمة الله
تعالى و بركاته في هذه التدوينة سنفتح نافذة إضافات بلوجر, سنتطرق إلى إضافة تعريف
الكاتب أو المدون, قمت بتصميم شكل بسيط يمكنك إضافة فيه إسمك و دولتك و تعريف بسيط
لك و صورتك أيضا فبدون أن أطيل عليكم, لنبدأ في الشرح و التغييرات الأساسية في
الشكل:
أولا قم بتحميل نسخة للمدونة.
-قم بالدخول إلى
المدونة ثم التحطيط:
-بعد الدخول إلى التخطيط قم بإختيار المكان الذي تريد أن
يضهر فيه الشكل
و إختر HTML/JAVASCRIPT :
-ثم قم بنسخ هذا الكود و ضعه في
مكان المحتوى :
<!--------------------------head---------------------------->
<meta
charset='utf-8'/>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--------------------------body---------------------------->
<div class="writer">
<div
class="writer-contenu">
<div
class="bakg">
<img
src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpt1/v/t1.0-1/p160x160/12654600_1732652463635052_1145246074694488229_n.jpg?oh=501b5221e55b84d8850c5f9fe5737459&oe=577B12CB&__gda__=1467294464_f83de07410f1c26577bb9938ff77d78d'/>
<div
class="linkssoc">
<ul>
<li><a href='https://www.facebook.com/mohcin.zitouni'><i
class="fa fa-facebook"></i></a></li>
<li><a href='twitter.com'><i class="fa
fa-twitter"></i></a></li>
<li><a href='https://plus.google.com/u/0/100147515013566526177/posts?hl=fr'><i
class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
<div
class="info">
<div
class="name">
<h3><i
class="fa fa-list"></i> الإسم : محسن زيتوني</h3>
</div>
<div
class="country">
<h3><i
class="fa fa-globe"></i> الدولة : المغرب</h3>
</div>
<div
class="fno">
<p>محسن زيتوني
مدون مغربي أهتم بالتقنية و الشروحات أنا مغربي الجنسة أحب التدوين من غير التدوين
أمارس كرة القدم و تعتبر الرياضة الأفضل بالنسبة إلي</p>
</div>
</div>
</div>
</div>
<style>
.writer {
height: 485px;
width: 380px;
margin: auto;
background:
#292929;
direction: rtl;
font-family: ara
jozoor;
}
.bakg {
width: 380px;
height: 225px;
margin: auto;
background:
url(https://www.askideas.com/media/13/Colorful-Board-Facebook-Cover-Picture.jpg);
}
.bakg img {
float: right;
margin-top: 105px;
width: 120px;
}
.linkssoc {
width: 260px;
float: left;
margin-top: 150px;
background:
#2196F3;
border-radius: 5px
0px 0px 5px;
}
.linkssoc ul li {
list-style: none;
float: left;
}
.linkssoc ul
li:hover {
}
.linkssoc ul li a {
color: #fff;
padding: 15px;
display: block;
margin-top: -15px;
margin-left: 1px;
transition: all
0.4s ease 0s;
}
.linkssoc ul li
a:hover {
color: #292929;
}
.info .name {
background: #8E8E8E;
}
.info h3 {
color: #fff;
font-family: ara
jozoor;
padding: 5px;
font-weight:
normal;
}
.country {
background:
#8E8E8E;
}
.info h3{
padding: 5px;
}
.info .fno p {
color: #fff;
padding: 6px;
text-align: center;
}
</style>
-الأن نأتي إلى التغيرات:
قم بتغيير
الكتابة باللون الأحمر برابط الصورة الخاصة بك.
قم بتغيير
الكتابة باللون الأزرق برابط الفيسبووك الخاص بك.
قم بتغيير
الكتابة باللون الزهري برابط حسابك على غوغل + الخاص
بك.
قم بتغيير
الكتابة باللون الأحضر برابط حسابك على تويتر الخاص بك.
قم بتغيير
الكتابة ذات خلفية صفراء بإسمك.
قم بتغيير
الكتابة ذات خلفية حمراء بدولتك.
قم بتغيير
الكتابة ذات خلفية زرقاء بتعريف بسيط لك.
ثم قم بالحفظ.
و إلى هنا تنتهي التدوينة.أتمني أن تكون
التدوينة نالت إعجابكم.
ليست هناك تعليقات:
إرسال تعليق