شرح اليوم عن اضافة صغيرة وبسيطة تعريف صاحب المدونة او تعريف شخصى لزائر المدونة وبها ازرار يمكنكم استخدمهم لشبكات التواصل الاجتماعية وبدون اطالة اقدم لكم صور لشكل الاضافات ولمن يبحث عنها هذ هو اكواد الاضافة
لكم شرح الاضافة
من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة
<div class='iuauthor-item'> <div class='image-wrap'> <img class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kTVoj_bLGG5_WjR5n17_md6t-esT3-UufIxMMZOASU-4rNvdYkMlPtu1Y2Ha_xPo4_rGcwzrU-2bEQ4ZIoVudE_asMwlS-sk_iDipa_oaIFmESu7haTsYHEjeCTSGlQN8BGnbotkaOo/w1280-h2272-no/'/> </div> <h4 class='iuauthor-name'> <a href='https://www.facebook.com/alfa.weeb' target='_blank'>Mr-Medo</a> <p>مستر ميدو :- هى مدونة عربية تقدم كل جديد وحصري من دروس وشروحات مصورة ومسجلة لاضافات بلوجر وقوالب بلوجر وحلول تقنية واخبار شبكات التواصل الاجتماعية ، وتم تأسيس المدونة بتاريخ : 11/ نوفمبر/2016 ؛ لتبدأ في التدوين </p> </h4> </div> <style> /*------------------------------------------------------ Iuauthor-Item ------------------------------------------------------*/ .iuauthor-item { padding: 15px 10px; text-align: center; margin-top: -20px; } .iuauthor-item .image-wrap { position: relative; overflow: hidden; border-radius: 50%; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); width: 230px; margin: 0 auto; height: 230px; margin-bottom: 15px; } .iuauthor-item h4.iuauthor-name a { font-size: 18px; margin-bottom: 10px; display: block; color: #a32f37; border-bottom: 1px dashed #ccc; padding-bottom: 9px; border-top: 1px dashed #ccc; padding-top: 6px; } .iuauthor-name p { color: #22273d; font-size: 14px; margin-top: 17px; font-weight: 100; margin-bottom: -30px; } .iuauthor-item .image-wrap:before { content: ''; display: block; position: absolute; border-radius: 50%; border: 10px solid #f9f9f9; border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; opacity: .7; margin: auto; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: all .4s linear; transition: all .4s linear; } </style>
قم بتبديل النص باللي يناسبك وغير الروابط
ينتهي هنا موضوعنا عن "كود تعريف المدونة او صاحبها"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)