إنشاء صفحة للتعريف بصاحب الموقع | إضافات بلوجر إضافة رائعة جداً 2019

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

طريقة التركيب في صفحة مستقلة :

1. قم بإنشاء صفحة جديدة.
2. أنتقل من تاب تأليف إلي تاب HTML.
3. الصق الكود.
4. قم بالنشر بعد تعديل الروابط الخاصة بك.

طريقة التركيب في قسم بالسايدبار:

1. قم بالدخول إلي التخطيط.
2. إضافة أداة جديدة HTML/JavaScript
3. الصق الكود.
4. قم بالنشر بعد تعديل الروابط الخاصة بك.

أكواد إضافات بلوجر للتعريف بصاحب الموقع:

 <div dir="rtl" style="text-align: right;" trbidi="on">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/
.admin{
    width: 300px;
    height: 480px;
    background: #264079;
    border: 1px solid #264079;
    margin: -1px;
    border-radius: 4px;
}
.cover{
    height: 120px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2tzYXiHqxsvw4lD48DobintuBaVP-qx7wnjy5ifwv7sWeDp-kSbtQBtZuXtzgJEE1m-j__VkQEGwIBotSTlMkTTmAU2R3MwmX0jpjH8xPiHrRXEA5rQNEmR1p4MiFUac8DfmI7EWv63q/s1600-r/Space-Desktop.jpg) no-repeat;
    border-bottom: 1px solid #868282;
    background-size: 300px;
    box-shadow: 0px -140px 310px -100px #000 inset;
}

.profile{
    width: 120px;
    height: 120px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ1UhsyzZQVxsv2cBqhfZ7z87fCjZnk0mqpqEcUTA6BMEqd4vk_R102ZaS4Hv8308O_S6s46lE4g76DsfR7sY7mVaJXs65ora1987qv-8tK7KEgEqRwb-ED5Qaf9Q00bHjyAj-xV_ctjc/s77/%25D8%25AA%25D8%25B1%25D9%2586%25D8%25AF%25D8%25A7%25D8%25AA+%25D9%2585%25D8%25B5%25D8%25B1.jpg) no-repeat;
    border: 4px solid #fff;
    margin: -100px auto 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset;
    background-size: 120px;
}
.form-info{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #1f2e50;
}
.form-info ul{
    margin: 0;
    padding: 0px;
}
.form-info ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #264079;
    height: 30px;
}
.form-info ul li img{
    display: block;
    float: right;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-info ul li a{
display: block;
    float: right;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-info ul li a:hover{color:#fff;}
.form-contact{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #1f2e50;
}
.form-contact ul{
    margin: 0;
    padding: 0px;
}
.form-contact ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #264079;
    height: 30px;
}
.form-contact ul li img{
    display: block;
    float: left ;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-contact ul li a{
display: block;
    float: left ;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-contact ul li a:hover{color:#fff;}
.form-socail{
    text-align: center;
}
.form-socail i{
color: #9E9E9E;
    font-size: 32px;
    padding: 5px;
}
.form-socail i:hover{
color:#fff;
}
</style>


<br />
<center>
<div class="admin">
<div class="cover">
</div>
<div class="profile">
</div>
<div class="form-info">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4iiPdbCBz4v1MbjkkK1EgD8vutWuXNFpWIXE7C6xSpmHId-jQQHq5w0LC1jyc-b1Axx0AsrqlIrTuJTexAKhohg8ClFBW9VyvrovaRd4911QD0qZfEoajXNVc3ADrjE8Z5QUmOVM0jaZ/s1600-r/users81.png" />

<a href="https://blogger-educ.blogspot.com/">أدمن تعلم بلوجر</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0AuRQgrozHLr9rgIXFsQT6VuFlq8Kr8AoUs0ee5GVfzaxJLky4DtpKYt7e2WwboMfTiyukWReJubyxLpnQhki6Y6kr4xssBpC434QDBdakWxH2zsIIjpfMZxZ_0bEAxv2txCzbmBOw2Jv/s1600-r/suitcase57.png" />

<a href="https://blogger-educ.blogspot.com/">كاتب محتوي متنوع</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitjYfrYVryO-irj1xpcgFkYlxW-m2EFOAyD1yvi_6hcALuGmJqLMaZeG-2cLh_FrxSKDn1kbgBGFI7Ex7iEa9mGXPL77pxZhuJ8oJIqmL28Cde3MarO8yMgETPSujOmPMI2zRmBikRb74R/s1600-r/pin71.png" />
<a href="https://blogger-educ.blogspot.com/">الجيزة - مصر</a>
</li>
<li style="border-bottom: none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA6mj_SmfZLZkKeXwTTU0LK3IqsqcuuZ_qKpRtVzN7k7axCAaKGoK0kQtRErozzlgtKA8eKk2s8u3mMomiY93ENXONl3DTdb5ndqKDOmglZ1tfjcroD_m_Mb62KrbA8HYSPIC7aAnZGdkr/s1600-r/candles5.png" />

<a href="https://blogger-educ.blogspot.com/">30 مارس 1990</a>
</li>
</ul>
</div>
<div class="form-contact">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUT5SZj3h-5pyCe-FIca5HaS8p6lc_jdnhbtYO0AVaFLMFLslgJMZXvcpV7Mh2Ghs0VjeLB1gIbVY2MXXsDRdDpcylXZylNaMDz0YkADaBmtM_i7VGFKTWLgc84VnjWKibiaCpVUe-nZ9r/s1600-r/symbol20.png" />

<a href="https://blogger-educ.blogspot.com/p/contact-form.html">تواصل معي</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3A1I25-DxbvnsDh8b_RUFscJbPmcWYBWSgPxRjwNzCD-rwKlRBsu68g5QX7fJA14H67C7h0jqBzr88Qw0zTl_UykJGnxHGX1jW0TYrIOkN-3audlXme2X2vTq_MJLkdZzQNCWZasakm3m/s1600-r/connection27.png" />

<a href="https://blogger-educ.blogspot.com/">www.blogger-educ.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1qt05ow21nHP2kjXoEfIT6r83Q8xGIUfDeAJSc1IYIITMpzSsrMRRQ7tC_Mo0zQ9qiN5RP8mF8Z5TrMcPFFBafn54XTtXf9mq9UQjV6XRynCa8IYPiMzgPZ7UgvKyxCwOljOcYzBIHZH/s1600-r/black218.png" />

<a href="https://blogger-educ.blogspot.com/p/contact-form.html">Boite Postal : 469 , 92000</a>
</li>
<li style="border-bottom: none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8XJ8Ja0qnME2S6SrA8a86Idix06ex-MchmsRjZVT3-xg7tRTzz5IaNL7FF4oEecOntH0D9lNOvGOHBOA49Xh8GbY1UACM-fwqmpRliYEjVsJLKW8nz6xJOdP0AhpwnZB85YJDGevtXjyp/s1600-r/phone+call41.png" />

<a href="tel:+201153338226">201153338226+</a>
</li>
</ul>
</div>
<div class="form-socail">
<a href="https://blogger-educ.blogspot.com/">
<i class="fa fa-google-plus-square"></i></a>

<a href="https://youtube.com/">
<i class="fa fa-youtube-square"></i></a>

<a href="https://linkedin.com/">
<i class="fa fa-linkedin-square"></i></a>

<a href="https://twitter.com/">
<i class="fa fa-twitter-square"></i></a>

<a href="https://www.facebook.com/">
<i class="fa fa-facebook-square"></i></a>

</div>
</div>
</center>
</div>

ملحوظة

• لا تنسي التعديل على الأداة و تغيير الروابط و المحتوى من الكود بالضغط على تحرير .
•  لتغيير الصورة الشخصية والخلفية "Cover" بإستبدال الرابط برابط الصورة التي تريدونها.
• الاضافة تحتوي على أيقونات الشبكات الإجتماعية أسفل الإضافة غير الروابط فقط .
• غير الأسم والتعريف بما يخصك .