مرحبا بكم مجددا في تدوينة جديدة حول طريقة إضافة صندوق
انضم الى فريق العمل لمدونات بلوجر خاص بمدراء و مشرفي و كتاب المدونة ، صندوق بلوجر بسيط يجعل من الزوار
أن يشعروا بالاهتمام من قبل المشرفون مالكو الموقع ، كما تتميز هذه الإضافة
بسهولة تركيب على المدونات كلما عليك هو إضافة اسم الكاتب و صورة شخصية ثم
حفظ النموذج.
طريقة اضافة صندوق انضم الى فريق العمل لمدونات بلوجر
افتح لوحة تحكم بلوجر
اختر تخطيط
اختر اضافة اداة جديدة
ثم اداة HTML / javascrript
و اضف الكود التالي :
Html
<div class="title7"> <p style="border-bottom: solid 1px #eee; overflow: hidden; padding-bottom: 10px;"> <marquee align="middle" class="pjoin" direction="right">انضم الى فريق العمل و احصل على ميزات خاصة</marquee> <a class="join" href="url join">انضمام</a> </p> <div id="profil"> <div id="profil1"><img src="https://avatars.mds.yandex.net/get-tycoon/14628038/2a000001934b999240e0d58dd440418b9a8a/XL_height" style=" width: 59px; height: 59px; float: right; "> <div class="aboutme"><a href="url facebook">اسم الكاتب هنا</a><p> مدون معلوماتي متخصص في امن و حماية </p></div></div> <div id="profil2"><img src="https://optim.tildacdn.com/tild6333-6465-4563-b031-353938373337/-/resize/500x/-/format/webp/image_12.png" style=" width: 59px; height: 59px; float: right;"> <div class="aboutme"><a href="url facebook">اسم الكاتب هنا</a><p> معلومات عنك بعد انضمام الى فريق العمل </p></div></div> <div id="profil3"><img src="https://optim.tildacdn.com/tild3164-6633-4765-a433-313631396238/-/cover/534x558/center/center/-/format/webp/Rectangle_40807_11_1.png" style=" width: 59px; height: 59px; float: right;"> <div class="aboutme"><a href="url facebook">اسم الكاتب هنا</a><p> معلومات عنك بعد انضمام الى فريق العمل </p></div></div> </div> </div>Css
<style> /* فريق العمل by www.aweywashk.xyz/ */ .title7 {background: #fff;overflow: hidden;padding: 10px;} .pjoin { float: right; padding: 12px 0;width: 77%; } .join { float: left; padding: 12px; background: #ff6550; color: #fff;border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999;} #profil {background: #fff;} #profil img { margin: 5px;float:right; } #profil1,#profil2,#profil3 {width: 32%; overflow: hidden; float: right; border: solid 1px #eee; height: 70px;margin: 15px 3px; box-shadow: 1px 1px 5px #eee} .aboutme { font-size: 90%; padding-top: 10px; } @media screen and (max-width: 700px) { #profil1,#profil2,#profil3 {width:100%;} #relpost_img_sum li{width:100%;}} </style>معـــايـنة
اسم الكاتب هنامدون معلوماتي متخصص في امن و حماية
اسم الكاتب هنامعلومات عنك بعد انضمام الى فريق العمل
اسم الكاتب هنامعلومات عنك بعد انضمام الى فريق العمل
شـرح الكـود
الجزء الخاص بـ HTML:
<div class="title7"> <p style="border-bottom: solid 1px #eee; overflow: hidden; padding-bottom: 10px;"> <marquee align="middle" class="pjoin" direction="right">انضم الى فريق العمل و احصل على ميزات خاصة</marquee> <a class="join" href="url join">انضمام</a> </p> <div id="profil"> <div id="profil1"> <img src="https://avatars.mds.yandex.net/get-tycoon/14628038/2a000001934b999240e0d58dd440418b9a8a/XL_height" style="width: 59px; height: 59px; float: right;"> <div class="aboutme"> <a href="url facebook">اسم الكاتب هنا</a> <p>مدون معلوماتي متخصص في امن و حماية</p> </div> </div> <div id="profil2"> <img src="https://optim.tildacdn.com/tild6333-6465-4563-b031-353938373337/-/resize/500x/-/format/webp/image_12.png" style="width: 59px; height: 59px; float: right;"> <div class="aboutme"> <a href="url facebook">اسم الكاتب هنا</a> <p>معلومات عنك بعد انضمام الى فريق العمل</p> </div> </div> <div id="profil3"> <img src="https://optim.tildacdn.com/tild3164-6633-4765-a433-313631396238/-/cover/534x558/center/center/-/format/webp/Rectangle_40807_11_1.png" style="width: 59px; height: 59px; float: right;"> <div class="aboutme"> <a href="url facebook">اسم الكاتب هنا</a> <p>معلومات عنك بعد انضمام الى فريق العمل</p> </div> </div> </div> </div>شرح الكود HTML:
.title7:الحاوية الرئيسية التي تحتوي على كل المحتوى.<marquee>:نص متحرك يدعو المستخدمين للانضمام إلى فريق العمل.<a class="join">:زر "انضمام" يمكن النقر عليه.#profil:قسم يحتوي على معلومات أعضاء الفريق.#profil1, #profil2, #profil3:كل قسم يمثل عضوًا في الفريق ويحتوي على صورة واسم ومعلومات عنه.
النتيجة:
قسم يتضمن دعوة للانضمام إلى فريق العمل مع زر "انضمام".
معلومات عن ثلاثة أعضاء في الفريق مع صورهم وأدوارهم.
تصميم متجاوب يعمل على الشاشات الكبيرة والصغيرة.
الجزء الخاص بـ CSS:
.title7 { background: #fff; overflow: hidden; padding: 10px; }.title7: تصميم لحاوية رئيسية بخلفية بيضاء#fffوبعض الحشوpadding: 10px.
.pjoin { float: right; padding: 12px 0; width: 77%; }.pjoin: نص متحركmarqueeيتم وضعه على الجانب الأيمن مع حشو داخلي وعرض بنسبة 77%.
.join { float: left; padding: 12px; background: #ff6550; color: #fff; border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; }.join: زر "انضمام" بخلفية برتقالية#ff6550ولون نص أبيض#fffوظل خفيف.
#profil { background: #fff; } #profil img { margin: 5px; float: right; }#profil: قسم يحتوي على معلومات أعضاء الفريق.#profil img: صور الأعضاء تطفو على الجانب الأيمن مع هامش صغير.
#profil1, #profil2, #profil3 { width: 32%; overflow: hidden; float: right; border: solid 1px #eee; height: 70px; margin: 15px 3px; box-shadow: 1px 1px 5px #eee; }#profil1, #profil2, #profil3: تصميم لكل عضو في الفريق بعرض 32%، حواف، وظل خفيف.
.aboutme { font-size: 90%; padding-top: 10px; }.aboutme: نص يحتوي على معلومات عن العضو بحجم خط 90% وحشو علوي.
@media screen and (max-width: 700px) { #profil1, #profil2, #profil3 { width: 100%; } }@media: تصميم متجاوب يجعل عرض كل عضو 100% عند تصغير الشاشة إلى أقل من 700 بكسل.
