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

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

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

وحتى لا تقع فى نفس المشكلة اقدم لك شكل بسيط واحترافى لتعريف الكاتب...ولكى نعطى لكى زى حقً حقة...الاضافة من تكويد #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. عير ما باللون الأصفر الى بعض مهاراتك او خبراتك

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

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

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

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

إرسال تعليق

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

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