اضافة صندوق تعريف الكاتب لمدونات بلوجر على شكل رسائل المسنجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

سبتمبر 27, 2017

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

• اضافة التعريف الكاتب على شكل اقتباس
• اضافة شريط يحمل اسم الكاتب حسب من نشر الموضوع مثل المحترف
• إضافة صندوق تعريف بالكاتب الموضوع في السيدبار
• اضافة صندوق بأزرار التحميل و المعاينة في السيدبار
• كيفية إضافة عداد تنازلي قبل ظهور الرابط لبلوجر
• شريط أخبار احترافي يعرض جميع التدوينات الأخيرة #2

نبدأ الشرح على بركة الله

يمكنك معاينة الاضافة من هنا

1. إبحث على  وضع هذا الكود فوقه مباشرة

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> <style>.author_description_container span { padding: 15px; border-radius: 10px; border-top-right-radius: 0!important; position: relative; resize: none; min-width: 3rem; max-width: 32rem; background: #0ba9f4; border: 1px solid #0ba9f4; color: #fff; font-size: 13px; display: inline-block; margin-top: -3.222%; } .author_description_container span:after, .author_description_container span:before { content: ""; width: 0; height: 0; position: absolute; border-style: solid; display: block; border-top-color: rgb(11, 169, 244); border-right-color: transparent; border-bottom-color: transparent; border-left-color: rgb(11, 169, 244); } .author_description_container span:before { top: -.9px; right: -15px; border-width: 8px } .author_description_container span:after { top: 0; left: 100%; border-width: 7px } .authorboxwrap i { font-size: 15px; float: left; margin-right: 5px; color: #28c469 } .avatar-container i { position: absolute; color: #fff; font-size: 40px; background: rgba(0,0,0,.49); right: -5px; padding: 30px; border-radius: 100%; opacity: 0; transition: all .3s ease-in-out; } .avatar-container { position: relative; cursor: pointer; float: right; margin-left: 20px; margin-top: 15px; margin-right: 10px; } .authorboxwrap { background: #fff; padding: 10px; margin-bottom: 20px; overflow: hidden; border-top: 1px solid #ddd; } .avatar-container img { width: 100px; height: auto; border-radius: 100%; } .author_description_container h5 a { color: #666; } .author_description_container h5 { font-weight: 600; font-size: 13px; display: inline-block; margin: 5px; } </style>

1. هذا الكود تضعه اين تريد ضهور صندوق الكاتب مثال لو وضعته فوق ازرار النشر ابحث على اي شئ امام الزر النشر في القالب و ضع اكواد فوق او تحت و اذا اردت ان تفهم اكثر شاهد هذا الشرح من هنا

<div class="authorboxwrap"><div class="authorboxfull"><div class="avatar-container"><i class="material-icons"></i><img class="author_avatar img-circle" height="92" expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' width="92"/></div><div class="author_description_container"><h5><a href="#" rel="author"><data:post.author/></a><i class="material-icons"></i></h5><p><span>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. </span></p></div></div></div>

اذا اعجبتك الاضافة فيوجد عدة اضافات في المدونة يمكنك تصفح المدونة انشالله تجد كل ما تحتاجه لذا اشترك في المدونة لكي يصلككل جديد

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2017/09/blog-post_27.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2017/09/blog-post_27.html">اضافة صندوق تعريف الكاتب لمدونات بلوجر على شكل رسائل المسنجر كتبها: المدون التقني - الخبير عامر بشير</a>