[ جديد ] شكل جذاب تعريف كاتب الموضوع لمدونة بلوجر !

بسم الله الرحمن الرحيم
والصلاة والسلام على سيدنا محمد عليه وعلى اله افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

[ جديد ] شكل جذاب تعريف كاتب الموضوع لمدونة بلوجر


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



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

مثال حي : من هنا  


طريقة تركيب كاتب الموضوع لمدونة بلوجر : 

 اذا اردت وضعه في صفحة مستقله فقم فقط بنسخ هذه الاكواد ولصقها :

<div class='blog1-7lolblogger-com'>
  <p>معلومات عن العضو</p>
  <div id='blogg-7lolblogger-com'>
    <a href='#'><img src='https://jetara.googlecode.com/files/4032-66.jpg'/></a>
  </div>
  <img src="https://jetara.googlecode.com/files/stars-5.png"/>
  <div id='blogger-7lolblogger-com'>
    <span>تاريخ الميلاد : 1992/10/2</span>
    <span>المهنه : مدونة محترف</span>
    <span>الأسم الحقيقي : هيثم بوطيب</span>
    <span>الدولة : المملكة المغربية </span>
    <span>صاحب مدونة</span><a href=''>حلول بلوجر</a>
    <div id='blog-ksa-7lolblogger-com'><p>وسائل التوصل معه : </p>
    <a href='#'><img src='https://jetara.googlecode.com/files/facebook232311.png'/></a>
    <a href='#'><img src='https://jetara.googlecode.com/files/twitter131.png'/></a>
    <a href='#'><img src='https://jetara.googlecode.com/files/youtube1455.png'/></a>
    <a href='#'><img src='https://jetara.googlecode.com/files/rss1314.png'/></a>
    </div>
  </div>
</div>
<style>
.blog1-7lolblogger-com {
background: #F3F3F3;
border: 1px solid #DDD;
max-width: 650px;
width: 600px;
padding: 10px;
border-radius: 5px;
margin: 0 auto;
text-align: right;
direction: rtl;
text-shadow: none;
    height: 250px;
}
  .blog1-7lolblogger-com p {
float: right;
background: #F0F0F0;
border: 1px solid #DDD;
padding: 3px;
border-radius: 5px 5px 5px 0;
margin: 0;
    font: 700 15px arial,tahoma;
color: #1177B1;
text-shadow: 1px 1px #FFF;
    width: 200px;
}
#blogg-7lolblogger-com {
float: right;
clear: both;
margin: 0;
width: 200px;
padding: 5px 3px 0 0;
height: 230px;
border-left: 5px solid #DDD;
}
#blogger-7lolblogger-com {
float: right;
width: 360px;
margin: 0 20px 0 0;
font: 13px tahoma,arial;
color: #333;
    line-height: 20px;
padding: 0;
}
  #blogger-7lolblogger-com span {
float: right;
clear: both;
text-shadow: 1px 1px #FFF;
}
  #blogger-7lolblogger-com p {
float: right;
width: 90%;
margin: 20px 0 0 0;
padding: 3px;
}
  #blogger-7lolblogger-com a {
    float: right;
font: 700 12px tahoma,arial;
color: #007AFF;
text-decoration: none;
border-right: 1px dotted #999;
border-left: 1px dotted #999;
margin: 0 10px;
padding: 0 5px;
}
#blog-ksa-7lolblogger-com a {
border: 0 !important;
margin: 0 !important;
padding: 5 !important;
}
  #blog-ksa-7lolblogger-com a img {
border-radius: 10px;
}
</style>





التعديلات :
     صورة كاتب الموضوع يجب ان يكون حجمها 180PX 200PX.
     تقيم العضو او الكاتب.
     تاريخ الميلاد.
     المهنه او اي ماتريد .
     اسمك.
     بلدك.
     مدونتك.
     رابط صفحتك في فيسبوك.
     رابط صفحتك في تويتر.
     رابط صفحتك في اليوتيب.
     رابط خلاصة مدونتك .


هل أعجبك الموضوع ؟

جميع الحقوق محفوظة محترف الكمبيوتر ©2014-2013 | ، نقل بدون تصريح ممنوع . Privacy-Policy| أنضم ألى فريق التدوين