U3F1ZWV6ZTgwNzczMjc0MDNfQWN0aXZhdGlvbjkxNTA0OTc4MjA3
recent
أخبار ساخنة

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


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

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




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


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>




و شكرا







الاسمبريد إلكترونيرسالة