إضافة إحترافية للتعريف بصاحب المدونة

نوفمبر 03, 2015 brd

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

• معاينة

شرح طريقة التركيب :

أدخل إلى لوحة التحكم بلوجر ثم أنقر على التخطيط إضافة أداة Html/Javascript وضع بها كود الإضافة التالي :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<style>
/*-------------------- 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# --------------------*/
.admin{
    width: 300px;
    height: 480px;
    background: #343434;
    border: 1px solid #131313;
    margin: -1px;
    border-radius: 4px;
}
.cover{
    height: 120px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12zYS7ptQeINUDO9bV37AA1ToT50VEd3OGCuXmQDnY8o4MkxBrqXZ1kHuB3pG_caP20o9rH6TFS0dV5aS1Nbx_x7ONBMNa0u6PFelBFbW2T7ki9o5QlPD4jllBdERBT2u-W1JjNEFelOM/s1600-r/Space-Desktop.jpg) no-repeat;
    border-bottom: 1px solid #868282;
    background-size: 300px;
    box-shadow: 0px -140px 310px -100px #000 inset;
}

.profile{
    width: 120px;
    height: 120px;
    background: url(http://lh5.googleusercontent.com/-unStEtlJr-g/AAAAAAAAAAI/AAAAAAAAAGw/lZ1skIneTgg/s100-c/photo.jpg) no-repeat;
    border: 4px solid #fff;
    margin: -100px auto 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset;
    background-size: 120px;
}
.form-info{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #2A2A2A;
}
.form-info ul{
    margin: 0;
    padding: 0px;
}
.form-info ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-info ul li img{
    display: block;
    float: right;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-info ul li a{
display: block;
    float: right;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-info ul li a:hover{color:#fff;}
.form-contact{
    border-bottom: 1px solid #494949;
    border-top: 1px solid #494949;
    margin-top: 10px;
    background: #2A2A2A;
}
.form-contact ul{
    margin: 0;
    padding: 0px;
}
.form-contact ul li{
    display: block;
    padding: 0px 25px;
    margin: 2px 0px;
    border-bottom: 1px solid #343434;
    height: 30px;
}
.form-contact ul li img{
    display: block;
    float: left ;
    padding: 5px;
    height: 18px;
    width: 18px;
}
.form-contact ul li a{
display: block;
    float: left ;
    height: 20px;
    padding: 5px;
    color: #9E9E9E;
font-family:Ta3alamFont;
}
.form-contact ul li a:hover{color:#fff;}
.form-socail{
    text-align: center;
}
.form-socail i{
color: #9E9E9E;
    font-size: 32px;
    padding: 5px;
}
.form-socail i:hover{
color:#fff;
}
</style>


<div class="admin">


<div class="cover">
</div>
<div class="profile">
</div>
<div class="form-info">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcPlbkLLdvvC4oFr2YLDS0gyd1Eex0HiYJkyjjiY3MrOWUP63q3tubBQrG8IGCBfHGkKHy3B2PD_Yq6vH5liiCWf3EImnHkBINnNTWUm3A9YweurlSOtXlmHlpWV2RVPgvkWPav8PCJMK2/s1600-r/users81.png" />

<a href="https://www.facebook.com/adnmej">شفيق ودين</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmngR0e85Gsov2Qq_bA_KjbdrILZ5K_Hi3iZfymr5IZMfs6y35XHobRlaGzNDA_wIuQNfXJve-GWXdTgGQ73GEqG3OdoTFbycHudjA1cqHE685HL-A2zpB8TJmWkVlXnUjqkSgZ5GQVSTU/s1600-r/suitcase57.png" />

<a href="http://www.mrouadine.com/">مدونة عقول للمعلوميات</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiQrzRcHyOr042a8s4-AkXIwjZlsOwA2xEZcDmhqY4pMbbE3X_-yZdImaAAdyWsJJNBOd9t5gyxvb7Ba2PniG1TY1c_rg74o3UKpnH9ewNIuVU6s9km2M8lmAlLyV3UyH186I39aCxvXc/s1600-r/pin71.png" />
<a href="www.mrouadine.com">الدار البيضاء - المغرب</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBO7WmaCEi9MeRLsGI6nQi81Jf33EsXo0csJ2pxQJoH-aj-Iap2GBDDdisI4CLpK0fvTL8DdoNvJyDDphgQ3SY8jDN3774AdyiwXwemZywvQ-peKIfSEkzqdr7dSepdBymvEwg0lQjoHV5/s1600-r/candles5.png" />

<a href="www.mrouadine.com">30 مارس 1993</a>
</li>
</ul>
</div>
<div class="form-contact">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rNeeEn060uGW4FiO5VYbKTIcOQuSkcfDWv0sHXB9xhnt8iHaIG5MW5qLWo97yeIoLO_IywE4Jgo8eMMElcIHon8gk6LBDe79oy5KgPSS7uN04HGFSLk7rfnCfeM3WW04XJ5pf_a4Q_2Y/s1600-r/symbol20.png" />

<a href="www.mrouadine.com">ضع إيميلك هنا</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGSDdcquwNn3IG_5vD224ILHHhK_dvByREv4hj3LRxZyITeJX7krXem-leIqdKnWB2t3FjrC52lXlHhJOqLOyfvarY3usB82gGi81yZoJC3NfkH-PdNJ4uqfrozsS7CfAsJq1NY9ZxWbTm/s1600-r/connection27.png" />

<a href="http://www.mrouadine.com">رابط موقعك</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_C6pMEyggb3xXsv03X_PZct3LYc5yhDzuTAlD8rwpz6C2yTTyNWb_ILGSsAWgoyQgddoQK3ABiA8I2K_gbi2skcoToVH7bphIx7GSs4l93ttFUSHlUTmfvSvTmkLBOqRQqz_BRsD7NBd/s1600-r/black218.png" />

<a href="#">boite postal : 469 , 92000</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0UZI8HTqZ7dJdPlDtkYP8GD6u15wOAmeIO4GVKm32v097rL8R0o9bQ95VAD7oDsvi50LTH-RODLQA1bISDxUkU9s-1QR4gcRikEgJspn2K4c0C9aqFS8yEtb27dhKgHuj7RjXgCH6yG9/s1600-r/phone+call41.png" />

<a href="#">0600000000</a>
</li>
</ul>
</div>
<div class="form-socail">


<a href="حسابك على جوجل بلاس">
<i class="fa fa-google-plus-square"></i></a>

<a href="حسابك على يوتيوب">
<i class="fa fa-youtube-square"></i></a>

<a href="حسابك على لنكدين">
<i class="fa fa-linkedin-square"></i></a>

<a href="حسابك على تويتر">
<i class="fa fa-twitter-square"></i></a>

<a href="حسابك على فيس بوك">
<i class="fa fa-facebook-square"></i></a>


</div>
</div>

تنسيق الإضافة :

المحدد بالأصفر يخص رابط :  صورة اكاتب
المحدد بالأزرق يخص : الغلاف
شفيق ودين : أكتب إسمك
مدونة عقول للمعلوميات : إسم مدونتك
الدار البيضاء - المغرب : البلد و المدينة
30 مارس 1993 : البلد و المدينة
ضع إيميلك هنا : البريد الإلكتروني الخاص بك
رابط موقعك : رابط مدونتك
0600000000 : رقم الهاتف
في أزرار المواقع التواصل الإجتماعي قم بإضافة روابط حسباتك على المواقع التواصل الإجتماعي .

مشاركة