اضافة جميلة لبلوجر للتعريف بصاحب الموقع .

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

أوك ، لنبدأ في الشرح .
أولا قم بالدخول الى التخطيط من بلوجر ، ثم نختار اضافة اداة ، ثم نختار " HTML/java script"

ثم نقوم بوضع هذا الكود :
<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/AVvXsEgZRhasBUNmqVNgwzGF4wwzEjkocW4SCrBpJOk-_2X2hGzrmH5DT2YIr3PDkqQLqzOV7FDplgJBlvkDw-vroxwaY2OL5CnpqkeEHNBe1W4KDXLNYz_LeXkz1IBioMncSEKB-yIRzBNHsSZ9/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Mziv1XNNE6oqmHnU2FNQYMGSeKVOGc6szo3ThISfTAB6In8gdA9DRkXpO6Nc4f974KCY9NwkJO8_Icw28dy15SLRHEKTe6II2bf8O7xKi9O2NyB6YGQsD-vKghqABQuqDoO601EfVjDb/s1600-r/92.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/AVvXsEgDxiLYjnKeQb68wapdfFT__hn9ingrKfjnQC8sYPyMYauY7Ecyuhv7jruWOCPwimvwBegchOV5bMJ6NjD89ohIBoNCf3hKYVvXlLqfTmA4uMZ5TZUKdT3VzBhF0b4m3hyphenhyphenIBWSqlNrHNSZk/s1600-r/users81.png" />
<a href="https://www.facebook.com/adnmej">عدنان المجدوبي</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWkxjWvvg3KILMS6sALjjegml2cDr6B5AJz-za9se-eh1bjdarGLsnXR5WD-pMOt4e9t26X2_pcWMktV8wwrUwBwLXpkgI37fgE2x0blip-MtPwcBHNS5F0XazQNMPRFBVXMAhZMRvO4E8/s1600-r/suitcase57.png" />
<a href="http://www.th3professional.com/">مدون بمدونة المحترف</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcIIfL5N2D6SEFcpGUdmsWiuZ0ceQPrDZt-76wJqAqDqjTm0RO_0KnPXSUj-tXMMBozwlSU1EXJ9S5w8D3o-qA43HbAJL5sneXM3TafWxvZz0tE7cehunfEUGeklYmfAlCHDFq-bWXHqBc/s1600-r/pin71.png" />
<a href="www.almejdoubi.com">العرائش - المغرب</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWZejuvXyG-yfPKIrW2qHhGkm8fu-q7awcljIEZNeXYSzl0EBvvw8FBDC7VFTolSZhC-OIOB4cHIOWQjEy_Pt4z83SoGndUvWZKLFAEynRYRHugnFaGXBRLwh8-_SMJJ4JezXY_3UX1Pl/s1600-r/candles5.png" />
<a href="www.almejdoubi.com">30 مارس 1997</a>
</li>
</ul>
</div>
<div class="form-contact">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikrXswIGwkH-b6lCfTSPIIxjEMCSS9zhedsOatfAX64vCoD6e_17R4DrkFbiaKD4fpi0EcOEbm8PCXtTrxj-AIhYWQjXHJ8gUhjgZ9TijyR7_woqNmJAt8FHnUYDR0hn1Yhfjom44lSFm-/s1600-r/symbol20.png" />
<a href="www.almejdoubi.com">ضع إيميلك هنا</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM2kQPqGCx9AXJCC6XdoBcABs719Ahsd2L5yYSlwqDs6RRFnpDAsFHtiVJHPAxjjGoTUw0KuMfGVzHdvBDDSQeidx3_NAghQ9am1of_8Qy6O9z-zzxxkOanZvpJXlC1QFb7OC9zx5KwW-j/s1600-r/connection27.png" />
<a href="http://www.almejdoubi.com">www.almejdoubi.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxow8cGGCfpYYVJZZrnwzYWoNgpvc_3tI02C4QSchAG9yoZGldqo55gagGWyjGAl5ZDlJupraB1LXfoZLQ0bNYg22KDExmQQqE8EeOfF4FQObJqEbtyttipg84WZ6KSucBILBkyL3p7RcP/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/AVvXsEgwQezRIjStb7cVchi8Q1r00m47W2tph3QNyG44Mhh_0cUPSVKwGAsdjWU5S6OlGsRniYX2GDCoBO3SceYJ0-tuojA5YQ_rABjI0sjnDhI8CfjebW2dDdJ5Wi7xjyNdIzxq7cMCWdCAIHvF/s1600-r/phone+call41.png" />
<a href="#">0600000000</a>
</li>
</ul>
</div>
<div class="form-socail">

<a href="www.almejdoubi.com">
<i class="fa fa-google-plus-square"></i></a>
<a href="www.almejdoubi.com">
<i class="fa fa-youtube-square"></i></a>
<a href="www.almejdoubi.com">
<i class="fa fa-linkedin-square"></i></a>
<a href="www.almejdoubi.com">
<i class="fa fa-twitter-square"></i></a>
<a href="https://www.facebook.com/adnmej">
<i class="fa fa-facebook-square"></i></a>

</div>
</div>
للتعديل على هذا الكود :
-لتغير الصورة الخلفية " الغلاف " نقوم باسبتبدال رابط الصورة بدل هذا الرابط : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZRhasBUNmqVNgwzGF4wwzEjkocW4SCrBpJOk-_2X2hGzrmH5DT2YIr3PDkqQLqzOV7FDplgJBlvkDw-vroxwaY2OL5CnpqkeEHNBe1W4KDXLNYz_LeXkz1IBioMncSEKB-yIRzBNHsSZ9/s1600-r/Space-Desktop.jpg
- لتغيير الصورة الشخصية قومو بإستبدال الرابط التالي برابط الصورة التي تريدونها :https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Mziv1XNNE6oqmHnU2FNQYMGSeKVOGc6szo3ThISfTAB6In8gdA9DRkXpO6Nc4f974KCY9NwkJO8_Icw28dy15SLRHEKTe6II2bf8O7xKi9O2NyB6YGQsD-vKghqABQuqDoO601EfVjDb/s1600-r/92.jpg
- لتغيير المحتوى المتبقي إتبعو الطريقة التالية :غير الرابط ثم عنوان الرابط كما ترى في الصورة ، نفس الطريقة مع كل المعلومات .

تقييمك يهمنا !

تم النشر في :