إضافة التعريف بصاحب الموقع بشكل احترافي

إضافة التعريف بصاحب الموقع بشكل احترافي - مرحبا بكم متبعينا الكرام 😘، أوفياء مدونة تقنـي فــور ، اليوم أتيناكم بإضافة جديدة من تصميم صَاحب مدونة تقني فورو هي موجهة للتعريف بأصحاب المواقع بحيث يمكنكم وضعها بجانب المدونة أو أسفلها .
ننتقل إلى طريقة التركيب الجد سهلة ، فقط قم بالتوجه إلى قسم التخطيط في مدونتك ، ثم إضغط على إضافة أداة HTML/JavaScript

بعدها قم بنسخ الكود التالي و ضعه في محتوى الأداة و اضغط على حفظ

<style> .ti9ni4{ } .ti9ni4 ul { padding: 0px; } .ti9ni4 ul #ti9ni4-pos { padding: 4px 8px 5px; display: block; width: 160px; text-align: center; font-size: 16px; line-height: 20px; background: #0C0C0C; border-radius: 4px 4px 0px 0px; margin: 10px 10px 0px 0px; font-weight: normal; color: #676767; } .ti9ni4 ul li { padding: 3px; list-style: none; display: flex; background: #131313; border-radius: 5px; overflow: hidden; } .ti9ni4 ul li img { width: 90px; height: 90px; display: block; flex-shrink: 0; border-radius: 5px; } .ti9ni4 ul li .ti9ni4-name-disc { flex-grow: 1; padding: 5px 5px 0px 0px; } .ti9ni4 ul li .ti9ni4-name-disc h2 { font-size: 18px; color: #F1F1F1; font-weight: normal; border-bottom: 1px solid #232323; padding: 0px 0px 6px 0px; width: 100%; background: none; text-align: right; border-radius: 0px; margin: 0px; } .ti9ni4 ul li .ti9ni4-name-disc p { color: #6F6F6F; font-size: 11px; line-height: 18px; padding: 3px 0px 0px 5px; } .ti9ni4-contact { width: 30px; flex-shrink: 0; border-right: 1px solid #232323; } .ti9ni4-contact a { display: block; width: 100%; height: 30px; text-align: center; line-height: 28px; color: #929292; transition: 0.2s; } .ti9ni4-contact a:hover { color: #fff; } #ti9ni4-email{ background: #0C0C0C; width: 80%; padding: 0px 10px; font-size: 14px; line-height: 22px; margin: 0px 10px 0px 0px; color: #4E4E4E; border-radius: 0px 0px 5px 5px; text-align: left; direction: ltr; font-weight: normal; } #ti9ni4-email i{ color: #969696; line-height: 22px; width: 22px; text-align: left; margin-right: 10px; border-right: 1px solid #1D1D1D; } </style><br /> <div class="ti9ni4"> <ul><h2 id="ti9ni4-pos"> مدِيـر الموقِـع</h2> <li><br /> <img src="http://f.top4top.net/p_416na9c41.jpg" /><br /> <div class="ti9ni4-name-disc"> <h2> محمد جياري<br /> </h2> <p> <br /> محمد جياري مغربي الجنسية أحب التدوين و مهووس العاب وأبحث عن كل ما هو جديد و حصري في عالم المعلوميات.<br /> </p> </div> <div class="ti9ni4-contact"> <a href="https://www.facebook.com/mohamedjiariweb"><i class="fa fa-facebook-square" aria-hidden="true"></i></a><br /> <a href="https://twitter.com/mohamedjiari"><i class="fa fa-twitter" aria-hidden="true"></i></a><br /> <a href="https://instagram.com/mohamed_jiari"><i class="fa fa-instagram" aria-hidden="true"></i></a><br /> </div> </li> <h2 id="ti9ni4-email"> <i class="fa fa-at" aria-hidden="true"></i>contact@jiariweb.tk</h2> </ul> </div>

الآن ننتقل لطريقة التعديل على الأداة و تغيير الروابط و المحتوى من الكود بالضغط على تحرير .

- لتغيير الصورة الشخصية قومو بإستبدال الرابط التالي برابط الصورة التي تريدونها:   http://f.top4top.net/p_416na9c41.jpg
- الاضافة تحتوي على أيقونات الشبكات الإجتماعية أسفل الإضافة غير الروابط فقط .
- غير اسمـــــــي و التعريف الخاص بي بما يخصك .

شاهد أيضـا😍; أداة التبادل الإعلاني النصي لمدونات البلوجر بشكل احترافي.

 فــــي أمَــــــــــا الله