تفسير الاحلامصور ميكساتك موسوعة تفسير الأحلام

اضافة تعريف الكاتب بشكل مميز واحترافى لمدونات بلوجر

عدد مشاهدات الموضوع:
تعريف الكاتب,كاتب,مدونة بلوجر,بلوجر,اضافات بلوجر,تزيين بلوجر

من كتب الموضوع؟؟  سؤال رددته على نفسى عندما زرت إحدى المواقع ولم تكن هناك اى اضافة او اداه تشير الى كتاب التدوينة...وتدور الايام ويتكرر نفس الأمر مع موقع اخر 😔...للاسف الشديد اغلبنا يقع في نفس المشكلة...يتجاهل تماماً تعريف نفسة على من يقرأ كلماتة...لا يوجد حتى اسم بسيط فى بداية الموضوع يشير الى الكاتب او اداة تعرف الزائر علية.

وحتى لا تقع فى نفس المشكلة اقدم لك شكل بسيط واحترافى لتعريف الكاتب...ولكى نعطى لكى زى حقً حقة...الاضافة من تكويد #Theodore_Kluge ... ولكن مهمتى كانت فى جعلها متوافقة مع المدونات العربية...بالاضافة الى تطوير بعض الأمور بها.


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

الشكل الأول (اللون الأبيض) :


1.في البداية خذ نسخة احتياطية من القالب.
2.اذهب الى لوحة التحكم، واضغط على المظهر ثم تحرير HTML ثم ابحث اضغط كليك شمال فى اى مكان داخل المحرر واضغط من الكيبورد على Ctrl + F وابحث عن :

]]></b:skin>

وضع فوقها مباشرة أكواد CSS التالية:
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/

.profilebox {font-family: Ta3alamFont; position: relative; background: rgb(255, 255, 255); min-height: 230px; max-width: 1500px; width: calc(95% - 120px); border-radius: 8px; padding: 50px 100px 20px 20px; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.24), 0 0.5px 3px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; margin:20px auto 20px auto; } .profileboxcolor {padding: 10px;} .profpic { position: absolute; top: 20px; right: -60px; height: 120px; width: 120px; border-radius: 50%; border: 4px solid #FFF; background: #eee; display: inline-block; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.24), 0 0.5px 3px rgba(0, 0, 0, 0.12); } .user-desc p{margin: 0 0 7%;} .prof-close { position: absolute; top: 10px; left: 10px; height: 30px; line-height: 30px; width: 30px; background: transparent; outline: 0 none; border: none; border-radius: 50%; font-size: 18pt; color: rgba(31, 31, 31, 0.2); cursor: pointer; text-align: center; transition: all 0.15s ease-in-out; } .prof-close:active { background: rgba(255,255,255,.02); box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); } .prof-sm { position: absolute; list-style: none; padding: 0; margin: 0; top: 152px; right: -20px; width: 40px; } .prof-sm .sm { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background:#F9F9F9; transition: all 0.15s ease-in-out; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.24), 0 0.5px 3px rgba(0, 0, 0, 0.12); } .prof-sm .sm:hover { background:#F9F9F9; } .prof-sm .sm:active { background: #DADADA; } .prof-sm a { display: inline-block; height: 40px; width: 40px; border-radius: 50%; } .prof-sm svg { width: 30px; height: 30px; margin: 5px; border-radius: 50%; } .prof-sm path { fill: #545454; } .prof-name { display: block; margin: 0% 1% 0% 0%; color:#756969; font-weight: normal; font-size: 20pt; } .prof-user { display: block; margin: 0% 1% 2% 0%; color: rgba(0, 0, 0, 0.34); font-weight: normal; font-size: 11pt; } .user-tags { margin: 20px 0 0 0; padding: 0; list-style: none; cursor: default; } .user-tags .tag { display: inline-block; font-size: 8pt; text-transform: lowercase; color: #545454; background:rgb(251, 251, 251); height: 30px; line-height: 30px; padding: 0 10px; border-radius: 10px; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.24), 0 0.5px 3px rgba(0, 0, 0, 0.12); } .user-desc { color: #787A80; font-size: 11pt; line-height: 15pt; flex: 1 0 auto; text-align: right; }: 1 0 auto; text-a

مع ملاحظة ما بللون الأحمر هو خط Ta3alamFont إن كان موجود سابقاً في المدونة احذفة
كيف تتأكد من وجودة؟
ابحث عن اسم الخط : Ta3alamFont 
ملاحظة : ابحث عن اسم الخط قبل وضع الاكواد الموجودة بالأعلى فى القالب.

الشكل الثانى (اللون المقارب للون الاسود) :


كرر نفس الخطوات السابقة وابحث عن
]]></b:skin>

وضع فوقها الكود التالى
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/
.profilebox {font-family: Ta3alamFont; position: relative; background:#22242a; min-height: 230px; max-width: 1500px; width: calc(95% - 120px); border-radius: 8px; padding: 50px 100px 20px 20px; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.24), 0 0.5px 3px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; margin:20px auto 20px auto; } .profileboxcolor {padding: 10px;} .profpic { position: absolute; top: 20px; right: -60px; height: 120px; width: 120px; border-radius: 50%; border: 4px solid #22242a; background: #22242a; display: inline-block; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.24), 0 0.5px 3px rgba(0, 0, 0, 0.12);} .user-desc p{margin: 0 0 7%;} .prof-close { position: absolute; top: 10px; left: 10px; height: 30px; line-height: 30px; width: 30px; background: transparent; outline: 0 none; border: none; border-radius: 50%; font-size: 18pt; color: rgba(31, 31, 31, 0.2); cursor: pointer; text-align: center; transition: all 0.15s ease-in-out; } .prof-close:active { background: rgba(255,255,255,.02); box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); } .prof-sm { position: absolute; list-style: none; padding: 0; margin: 0; top: 152px; right: -20px; width: 40px; } .prof-sm .sm { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background:#31343b; transition: all 0.15s ease-in-out; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.24), 0 0.5px 3px rgba(0, 0, 0, 0.12); } .prof-sm .sm:hover { background:#F9F9F9; } .prof-sm .sm:active { background: #DADADA; } .prof-sm a { display: inline-block; height: 40px; width: 40px; border-radius: 50%; } .prof-sm svg { width: 30px; height: 30px; margin: 5px; border-radius: 50%; } .prof-sm path { fill: rgba(255,255,255,.2); } .prof-name { display: block; margin: 0% 1% 0% 0%; color:white; font-weight: normal; font-size: 20pt; } .prof-user { display: block; margin: 0% 1% 2% 0%; color: rgba(255,255,255,.2); font-weight: normal; font-size: 11pt; } .user-tags { margin: 20px 0 0 0; padding: 0; list-style: none; cursor: default; } .user-tags .tag { display: inline-block; font-size: 8pt; text-transform: lowercase; color: #d5d5d5; background: rgba(255,255,255,.07); height: 30px; line-height: 30px; padding: 0 10px; border-radius: 10px; box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.24), 0 0.5px 3px rgba(0, 0, 0, 0.12); } .user-desc { color: rgba(255,255,255,.7); font-size: 11pt; line-height: 15pt; flex: 1 0 auto; text-align: right; }: 1 0 auto; text-al
الان بعد اختيار الشكل سواء كان الابيض او الرمادى...تبقى اضافة كود HTML الى القالب لتظهر الاضافة فى نهاية الموضوع.

ابحث داخل القالب عن
<data:post.body/>

إن وجدته مرتين فالثاني هو المقصود.
بعد إيجاده اضف الكود التالى اسفل مباشرة.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='profileboxcolor'> <section class='profilebox'> <aside> <img alt='profile picture' class='profpic' src='https://3.bp.blogspot.com/-Fm2snxkQyT8/WYMN0GC2SRI/AAAAAAAAJDs/TGFmVhy3VVgi17u3oAVfG1y-DodcJdgOgCLcBGAs/s1600/abdallah_kamal-min.png'/> <ul class='prof-sm'> <li class='sm'> <a href='https://www.facebook.com/abdallah.kamal.102'> <svg viewbox='0 0 512 512'><path d='M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z'/></svg> </a> </li> <li class='sm'> <a href='https://www.paypal.me/AbdallahKamal'> <svg viewbox='0 0 512 512'><path d='M374.6 173.4c0 61.3-54 109.9-145.6 109.9h-26.7l-20.5 89.6h-64.3l62.8-283h106.6C343.5 89.8 374.6 125.5 374.6 173.4zM307.1 175.2c0-25.7-21.2-32.5-45.8-32.5h-28.4l-18.8 84.8h25.3C276.1 227.5 307.1 213 307.1 175.2zM393.1 161.4c12.2 95.9-78.6 145.2-173.4 143.8l-20.7 88.1h-44.6l-5 22.8h68.8l19.9-87.9C376.8 324 430.1 222.9 393.1 161.4z'/></svg> </a> </li> </ul> </aside> <header> <h1 class='prof-name'> عبدالله كمال</h1> <h4 class='prof-user'> @عبدالله_كمال</h4> </header> <main class='user-desc'> مؤسس مدونة تكنوجيك . من جمهورية مصر العربية يتم التحكم في المدونة&#1548; وهي مكان نشأتى&#1548; أبلغ من العمر 19 عاما&#1611;&#1548; أدرس حاليا&#1611; تخصص علوم الحاسب&#1548; صندوق الشات مفتوح 24 ساعه راسلني فى أى وقت ?? </main> <footer> <div class='row'> <ul class='user-tags'> <li class='tag'>مطور مواقع</li> <li class='tag'>مدون</li> <li class='tag'>معلق صوتي</li> <li class='tag'>طالب</li> </ul> </div> </footer> </section></div> </b:if>

مع تغيير الأتى:
1. الرابط ذات اللون الأحمر بصورتك الشخصية
2. الرابط ذات اللون الأزرق بصفحتك على الفيس بوك
3. الرابط ذات اللون البرتقالى  برابط حسابك على الباى بال
4. غير ما باللون الأرجواني الى اسمك
5. غير ما باللون الاخضر الفاتح الى وصف قصير عن الكاتب
6. عير ما باللون الأصفر الى بعض مهاراتك او خبراتك

بعد تغيير ما سبق بما يناسبك...اضغط على حفظ.

إلى هنا اصل الى ختام الوضوع...لكى عودة معكم مرة أخرى إن شاء الله تعالى فى موضوع جديد.

تحياتى لكم: عبدالله كمال

هناك 5 تعليقات:

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

    ردحذف
  2. شكرا علي هذا الشرح الرائع

    ردحذف

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

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

    ردحذف

  5. اذا كانت تبحث عنافضل شركة تنظيف منازل بالرياض
    له اسما عريق ولديها الخبره فى التنظيف عليك الاتصال على شركة ركن كلين للخدمات التنظيف بالرياض اذا كانت تبحث عن المعدات والاجهزه والاسعار المناسبه لك على التوصل مع شركتنا لان لديها عروض خاصه واسعار مناسبه لكل عملاء.
    شركة مكافحة الحمام بالرياض تقوم بمكافحة جميع أنواع الطيور المؤذية الحمام البري، الغراب، النورس والعصافير التي تفرز مخلفاتها على جدران وأسطح المباني وفوق الأسطح الزجاجية والمكيفات، مما يشكل ضررًا على الشكل العام.

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2018

اعلان مخفى فى الرئيسية