راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

أكتب ما تود البحث عنـه .....

إعلان
إعلان

آخر الأخبار

إضافة الكاتب تظهر بالسيد باربتأثير مميز


اقدم لكم إضافة مميزة جدا

إضافة الكاتب تظهر بالسيد باربتأثير مميز




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


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




1. لوحة تحكم 
2. تخطيط
3. اضافة اداة 
4 . جافا 


ثم تضيف الكود 



<div class="screen">    <div class="header">         <h4>الكاتب</h4>    </div>    <!-- positioned absolutely in the background -->    <img class="background" src="https://pbs.twimg.com/profile_banners/45394577/1384289888/web" />
      <!-- This slider moves on hover -->        <div class="slider">          <!-- Section 1 -->           <div class="header1">            <img class="profilepic" src="رابط الصورة" />             <h3>الاسم</h3>
        </div>        <!-- Section 2 -->        <div class="header2">            <p>تكتب هنا ماتريد </p>            <p>للتقنية معنى اخر</p>            <p>تابعوا كل جديد مني قوالب واضافات</p>        </div>    </div></div><style>.screen:hover .background {    opacity:0.5;}.slider:hover {    left:-320px;    -webkit-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;}body {  }.header {    width:100%;    height:49px;    background:#56B8DE;    text-align:center;    float:left;    color:#fff;}.profilepic {    width:64px;    height:64px;    border-radius:50%;    margin-top:20px;    box-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);    border:2px solid #fff;
}h3 {    margin-top:0;    text-shadow:0px 1px 3px rgba(0, 0, 0, 0.75);
}.screen {    margin:0 auto;    margin-top:24px;    width:320px;    height:200px;    box-shadow: 0px 2px 6px #999;    position:relative;    overflow:hidden;    background:#333;}.slider {    width:640px;    float:left;    left:0;    position:relative;    -webkit-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;}.background {    position:absolute;    width:320px;    height:auto;    z-index:0;    top:60px;    left:0;    -webkit-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;}.header1, .header2 {    text-align:center;    width:320px;    float:left;    height:140px;    color:#fff;    position:relative;}.header2 {    padding-top:8px;}p {    font-size:12px;      text-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);}</style>




و شكرا








hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان