إضافة تعريف الكاتب لمدونات بلوجر

مرحباً بكم زوار ومتابعى المدونة, فى هذا الموضوع سوف أتطرق معك إلى إضافة مهمة لكل مدون وهى إضافة تعريف الكاتب, حيث تساعد هذه الأداة على زيادة الثقة من الزوار وهذا ما يؤول بهم ليصيرو متابعين لك ولتدويناتك.

أولاً نقوم بأخز نسخة أحتياطية للقالب ثم نقوم بالبحث عن " <data:post.body/> " وقد تطرقت إلى كيفية الوصول إليها فى موضوع سابق " الوصول إلى محتوى المواضيع لمدونات بلوجر ".

ثانياً وبعد الوصول إلى " <data:post.body/> " بنفس الطريقة المتبعة هنا نقوم بإضافة الكود بعده مباشرة.

<div class='pro-me'> <a class='proo-me'> عن الكاتب : </a> <div class='hero-image-parent'> <a class='pos pos_3' href='#'><i class='icon-facebook'/></a> <a class='pos pos_2' href='#'><i class='fa fa-youtube'/></a> <a class='pos pos_4' href='#'><i class='icon-google-plus'/></a> <div class='hero-image-holder'> <img alt='Hm' class='hero-image hero_animate' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7CGJ8Xz3qsmlpV8WxF5m0tUu7S0aGZobWDgtPADWSS6ixVQ-aULXhwU1AvHvORVm6pbC_flPvVLsvUP0v3Jc5tA5WpzsLps0KO-U_qzneFR0VhFQwCzNgLIrnjGxmiHcVxzRohb4KDvk/s1600/iHussam.png'/> </div> </div> <div class='hero-a'> <a class='proo' href='#'> عمر العربى </a> <a class='proo-mee'> كاتب مصرى مستقل فى المجال التقنى, أعمل لإفادة غيرى فى هذا المجال تخصصى الكتابة والتدوين. </a> </div> </div>

ثالثاً نقوم بالبحث عن " ]]></b:skin> " ثم نقوم بإضافة الكود التالى فوقه مباشرة.

.hero-image-parent { float: right; width: 160px; margin: 5px; position: relative; border: 1px dashed #D3D2D2; margin-bottom: 15px; margin-right: 30px; z-index: 0; } .hero-image.hero_animate { width: 130px; height: 130px; margin: 8px 10px 8px; } .hero-image { overflow: hidden; background-position: center center; background-repeat: no-repeat; box-shadow: inset 5px 0 0 4px rgba(242, 242, 242, 1), 0 1px 2px rgba(150, 150, 150, 0.73); transition: all 0.2s ease-out; border: 4px solid #fff; } a.pos.pos_2 { background: #E42D2D; border-radius: 50%; position: absolute; display: block; padding: 6px 11px; box-shadow: inset 0px 0 0 2px rgba(255, 255, 255, 1), 0 1px 1px rgba(150, 150, 150, 0.73); color: #fff; z-index: 100; top: 125px; right: 120px; font-size: 20px; } a.pos.pos_3 { background: #3E5D9C; border-radius: 50%; position: absolute; display: block; padding: 6px 16px; box-shadow: inset 0px 0 0 2px rgba(255, 255, 255, 1), 0 1px 1px rgba(150, 150, 150, 0.73); color: #fff; z-index: 100; top: 125px; right: 60px; font-size: 20px; } a.pos.pos_4 { background: #E42D2D; border-radius: 50%; position: absolute; display: block; padding: 6px 11px; box-shadow: inset 0px 0 0 2px rgba(255, 255, 255, 1), 0 1px 1px rgba(150, 150, 150, 0.73); color: #fff; z-index: 100; top: 125px; right: 0px; font-size: 20px; } a.proo-me { display: -webkit-box; border: 1px dashed #D3D2D2; margin: 0 30px; padding: 5px; font-size: 17px; } .hero-a { border: 1px dashed #D3D2D2; width: 450px; margin: 5px; height: 160px; float: left; margin-left: 30px; margin-bottom: 15px; } a.proo { display: -webkit-box; border-bottom: 1px dashed #D3D2D2; padding: 5px; font-size: 21px; color: #3E5D9C; } a.proo:hover { color: #D64838; } a.proo-mee { padding: 5px; display: -webkit-box; }

الآن نقوم بحفظ القالب والتوجه إلى المدونة ومعاينة الإضافة, وبالنسبة للأشخاص الجدد فى التعامل مع بلوجر فإن عملية البحث تتم عن طريق الضغط على " Ctrl + f ".

وبالنسبة للتعديل على الإضافة فالأمر بسيط جداً بالنسبة لهذه الإضافة ولست فى حاجة لشرح الأكواد, وبالنسبة للروابط الخاصة بالشبكات الإجتماعية ستجدونها بين أكواد " HTML " مرتبة فيس بوك, يوتيوب, جوجل.

مشاركة الموضوع