مرحبا بكم في تدوينة جديدة من تدوينات قسم بلوجر اليوم أقدم لكم اضافة
تعريف الكاتب
الى مدونة بلوجر لتعريف بنفسك وبمعلمات الشخصية ومن أنت لكي يعرفك زوار مدونتك هي من أهم اضافات بلوجر مع تصميمها الجميل يمكنكا تغير ألوان وتعديل على هذه الاضافة كما تريد سوف أشرح كيفية تغير روابط
طريقة تركيب :
- توجه الى لوحة التحكم
- ثم توجه الى تخطيط ثم اضغط على اضافة اداة اختار أداة 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: 316px;
height: 451px;
background: #343434;
border: 1px solid #131313;
margin-top: -4px;
border-radius: 4px;
}
.cover{
height: 118px;
background: url(https://lh3.googleusercontent.com/-Bn21O6iVWiU/VhejF0VuyPI/AAAAAAAAABU/ojGm-eclNe8/s630-fcrop64=1,00000000ffffefc9/large_358159978.gif) no-repeat;
border-bottom: 1px solid #868282;
background-size: 314px;
box-shadow: 0px -140px 310px -100px #000 inset;
width: 315px;
}
.profile{
width: 120px;
height: 120px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipuxvFKv4Zmaa1bmDzWjN9ZMbqbdJck5ymeUDgiq476lcWJFuHIgEc2xRF-Av2O7szf1VMvRX0yq9Z6dtus1SqE-VjN9Pet19RYIParP7q-tQ1SLecvbLIn0MMix7Zysr8faKL13pGqZb2/s320/12208617_1515969892059131_7180472782556387950_n.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: 28px;
width: 26px;
}
.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: 24px;
width: 24px;
}
.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/AVvXsEj82ozdY7mpLEDBe2KI1H6PJ8ypErLmwa94oF9EJrpzAp0_LFBKOxDUcE7cb2EGinqSaiiVELL09WVG-21EIlJ1xhgG0x0eC-4e_rgYlxFyUvlw5wlgHTOVGsRNqJFWfF2LhHyxYkCppGf8/s1600-r/users81.png" />
<a href="#">رضى برانية</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYNdE4LOIBXUglSwWMGwHgmNqLVH9FqsAOFsVCFl0K35WKMw5tj3UFFPdO_hGhbytZFUBbktUO5LxqvDzlk7edbZ9V-CCIcPYptQKJYT0unZefxf9-Gv8uNqzB0pswExxUfpdXapk9rUP/s1600-r/suitcase57.png" />
<a href="#">طالب </a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSHxv-dHjGmvqWKeYwEFFWpT3PjoaIueuQSEFJnZdgHllr73n_9Nw2HhGwL6KGGUqmW-ELici6dR4ZtM4-HCWD2SXdGkE0y2jdimSFKr0iQimhTGs4r_oWRXHPguLdz_WpBi2sQ0yhQLc3/s1600-r/pin71.png" />
<a href="#">فاس - المغرب</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCVEfrAjSLqJKZG3GQjbJ-6sHwfrPLghwizJcGHKdqVCyo1HqsrUYKJPrVlHGMvXgVnNtsqT6sMA5MTmzv3VG9mQTSxFw8oTHTpl6TctM-Gf4-Sa4ZQ5Kld6gLJtbQ245K4hkFXAM48EqK/s1600-r/candles5.png" />
<a href="#">دجنبر 01 2000</a>
</li>
</ul>
</div>
<div class="form-contact">
<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOcg4Twhn560yYQfbZTNosUjooaIMajKGxmugkWGrCZv8DzoHkIZh0KIldq7Ko6CaNANIKj-X0AP9JqkHl1s-7sKHzKSSOKLAUQh9hiXzmsFPR_dpaE1dMXw-73R06Ls2vuPxxsdb5VhP/s1600-r/symbol20.png" />
<a href="#">http://fesbra10.blogspot.com/</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHfnOova1H8ALs-iBu2SRHWHhqeeeMpKFQ580QAMBlENFV3gsybGq5dnKXKG7Z8WnvZkml1kDzu_Qh-B13sOHOs_qLwSj3AIrluUq46pPLoEvzplQP0un6xgRx_f0IhV-3O0tRvUVuYlbB/s1600-r/connection27.png" />
<a href="#">فاس للتقنية</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJdR5gdUJwIgCyRCiBLCWmo9UX1AjTJDVoi9IkdiOC9qSfD2L_wf4aFmOvyVA-1NscvP7d9bxc38NS1SMsEOL6hC-7UQ-SVH5lYmKf3nYx2dUuvwW-xtGgGoyw93gSHAcb6dyncGVyjfY/s1600-r/black218.png" />
<a href="#">redabr.pc@gmail.com</a>
</li>
</ul>
</div>
<div class="form-socail">
<a href="https://plus.google.com/u/0/b/100622404440452181545/+ShfesMl1">
<i class="fa fa-google-plus-square"></i></a>
<a href="https://www.youtube.com/c/F%C3%A8sTechnologie1">
<i class="fa fa-youtube-square"></i></a>
<a href="https://www.facebook.com/reda.branya">
<i class="fa fa-facebook-square"></i></a>
</div>
</div>
الأحمر :روابط مواقع الأجتماعية
الأخضر: معلومات شخصية
الأزرق : صور شخصية
رمادي: صورة الخلفية
البرتقالي : روابط يمك اضافتها
اتمنى ان ينال اعجبكم وانتظروا باذن الله كل جديد من شروحات بلوجر
على فاس للتقنية
ليست هناك تعليقات:
إرسال تعليق