كود سهل للمدونات الشخصية
السلام عليكم أحبابي نظرا للتطور النتقدم من قبل منصة بلوجر المجانية هناك العديد من الإضافات التي تتيح لك ميزة جميلة تصنف مدونتك من المدونات الناجحة واليوم
لدينا كود رائع جدا وهو معلومات عنك وعن بلدك وهاتفك وطرق الاتصال بك
مثال :
وهذا الكود نحن كذلك اعتمدنا عليه للتعريف بسيرتنا وتقديمها للأعمال
فانت لك الحرية في تغيير روابطها واستبدال صورة عنك....إلخ
****************************
<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/AVvXsEhq9mB4Cbn22upv6Qsa7NnazPZHgxPzDmdWwkr5ExueErpv3UG_EvzT8rixZ4ymU4bZPT0TxQEdmhxKfmArc4R7gIwqgNEw6AijaWd_ibGlOfIWQghIIajyNZzwQkTbdU0Wxlv2c9vu3Pc/s1600/41023855.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/AVvXsEhaCcmHLgc1mFxuFkxv-7mArzOlTQf599_i2Ijl5J8UuZLZPu3pu078dlV0qY5lKfQ5kUdjftw1tUMKBVyimQjR5MmsZ3YOcmfOuaeafgNEsZNMLbJnMXdp9HYFxq9bm0z8wi1weX6QEdQ/s1600/03.png) 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/AVvXsEiCpmU7hIzBDvJH3JLudh41eOgAMOWxZ-Q13ywqvvgJ2ELyvq_9_UFyzkKslnsH4w8r3z8tV_eQ4JU5QOZRaHy76IHMbubYwszP4pM23LlSuK1a7OOl_p8Gozh2F5JKic0-IRWrPFs5Vs38/s1600-r/users81.png" />
<a href="https://www.facebook.com/adnmej">صحراوي مينر</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_1H6O2p8HbDJK65Du5oS2Hc2ju2aO9Ar8WxKJ_0knSTDE_Qa2gQnAOVycKuQtaUD8t9n5fEWGlETrQaSriuaaqnwLoSE-Gui7iqNwpIy71BGXJuaXp421OLDE5VgYXJC-j0oWo8z-CXLC/s1600-r/suitcase57.png" />
<a href="">شبكة السراج المنير</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEige9cpWm8k4qr_G9cw6M-YTFDQ-ABTgTSiEDOM8_tJ7abDeldwDkU3sLkC9Yn1OSWMh6MFZ2du3d4Feu9dTSDOC7QCUP1sHAs5iWteeSMuO17ixyjUAedoqQHmZsvbMGsaPLnNrDh0hLER/s1600-r/pin71.png" />
<a href="">يلل غليزان الجزائر</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOHer9r3RqTC9_Y84t06dbMQHD_nKORffYFAzkwRV4sQktjRMVXjLIgP9W0HSK5QOD3ISed5NYqdYPj1uMe-VxtAYy4KQa7P7cZp3W9VAflGLfoVFlkqcO7IOM0oYWjelfL3OTfn3lNBdI/s1600-r/candles5.png" />
<a href="">18 ديسمبر 1987</a>
</li>
</ul>
</div>
<div class="form-contact">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKg9mxum-E3bHcGI7tLeo2bn4MRnU4h03BfSfvM_yBiWvMBG25GMPzGJ4m6iFsom-vV7I6_bCDqxhoiUCiFTiTbKOo_5FqhyphenhyphenzYstoLIVd36BqEbRxl_AZnoUmxxyfYIXPHdfJTsOPXqrR/s1600-r/symbol20.png" />
<a href="http://www.smounir48.com/">smounir48@gmail.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFCNJebJIaApO_WgS_zy28OcT_0u1NpHoNJxa3iHlvoc0ZvynQ6aSq2Xgsi5RIEPNbB1dQOFoSoHR27nZuSL0OAkQyW3WYPZSOdg_Kwf_qdl-gilxMS9pibDQ4nOGlnxQR8axUFGPYEAjn/s1600-r/connection27.png" />
<a href="http://www.smounir48.com/">www.smounir48.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAmZyJmTjbjU_t0A6L6yxDfT3nefYNplGQMSD0bb-VNjeA6h-WMWuIXgTAgIrKa6Gm825bsGKmITj0e1pYiDmB2ZNZFKaMCi86F_m7PS5-FejOYwTjhZnejtFA23FiBgd_wb9ADyTJ61H/s1600-r/black218.png" />
<a href="#">حي 36 مسكن عمارة س رقم 4 يلل</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjaenvqH_AkPo3yuZqtwZlVd3pR4NaVMFgq9rAFua7G8yfWu8yed_jH-B4goaOCLKuChYg4AJ_24fnH_GR4UVgJT7-2uG6B-vymDSs13WhC8NkplpvfrMJIsdwPecG3jUjbh38mk13t8nx/s1600-r/phone+call41.png" />
<a href="#">00213796984361</a>
</li>
</ul>
</div>
<div class="form-socail">
<a href="https://plus.google.com/u/0/+%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%B5%D8%AD%D8%B1%D8%A7%D9%88%D9%8A%D9%85%D9%86%D9%8A%D8%B1">
<i class="fa fa-google-plus-square"></i></a>
<a href="https://www.youtube.com/channel/UCHTa3dhs4CKwFCSqbRb3eFQ">
<i class="fa fa-youtube-square"></i></a>
<a href="https://twitter.com/SmOunir1">
<i class="fa fa-twitter-square"></i></a>
<a href="https://www.facebook.com/mounirsahraoui1987">
<i class="fa fa-facebook-square"></i></a>
</div>
</div>
***************************************
لاتنس الدعم والمشاركة كي نبقى على تواصل ونواصل