اَضاَفة صندووق تعريف اَلكاَتب لمـدووناَت بلووجر على شكل رساَئل اَلمـسنجر

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

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

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

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

1. إبحث على </head> ووضع هذاَ اَلكوود فووقه مـباَشرة

<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>

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