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

مرحبا بكم في تدوينة جديدة من تدوينات قسم بلوجر اليوم أقدم لكم اضافة

تعريف الكاتب

الى مدونة بلوجر لتعريف بنفسك وبمعلمات الشخصية ومن أنت لكي يعرفك زوار مدونتك هي من أهم اضافات بلوجر مع تصميمها الجميل يمكنكا تغير ألوان وتعديل على هذه الاضافة كما تريد سوف أشرح كيفية تغير روابط

للمعاينة:

معاينة

طريقة تركيب :

توجه الى لوحة التحكم
ثم توجه الى تخطيط ثم اضغط على اضافة اداة اختار أداة 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/AVvXsEik8ky_JgVss-AJdcYfX_UKitCGnffpMGkz6wynYtBstqfoO3TsyXQwEGx1VJHZdKBz08LDewSif_O9EzgdLyuXinEdT7Hiq3vzcIx6oeY113MJMG8rMMDdgG5ppt8yaTWD2-eTBMYg1lZ0/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/AVvXsEgTDZ2HGwban0_PdrW7RT6bnT__7R-13rjT9Me4Xwvt0m7tTR4yuofPxRgS-l5PblCtPAj__CVaYsHrGsAHazVQ-y8_GLxHhMGVOCcUfgYH_hO26-oiSywvgsRHJ7wAAwM5YSNLP3wWEPUF/s1600-r/users81.png" />
<a href="#">رضى برانية</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr6Bg7GDdiIF7oqVuqWMs5F2Ot4S6E4YDoBqeRT64xEUjEdDBA8W8cqTTxfQ83zcthUlIGBKuITKx6FptWlZIZGCmuEQcLwUvyE7SznhG2vNtCqR9kHi9P1nVdeKyHJCw-HC-W_eygzU8Y/s1600-r/suitcase57.png" />
<a href="#">طالب </a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2-Gl_BDOknAB971fAH_cvB_M00KMLOWR5w1sKkfTOu9TjG7TzProKxoXm1aO2l-V4bS8XYi70NLmabLdzqvr7TZQ68853Ovd-RlOU9a9FUv0V_g1aokUa3Nv2O0ait39Sn4t0QW3whVJt/s1600-r/pin71.png" />
<a href="#">فاس - المغرب</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhpRc83-hWmw5kzxA_JQy4jzOXjWmVJ7HxL6opsbxakVhDVdAbJD8IpB-Ww5u4c9Z205-s_Fw9VZcejdCvKDsgxHd_bHx55303OmMlgRFAIUGWzMsKcaOwqQbAE_cjuEpRNt8KiBwGs8c1/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/AVvXsEgZbv9mySiRtDqakcP4HZNB8oGHjyw_Rf1D88oMpVhMVdhyU0ZllSApR7MVYj9T4e1_VnWyl6dm5t1fwzJdipzI-ehuE_L3CEo4dX168Sc0HmVA8KyrdvBq4v5GilelHEPrtU7cOmJPBdrt/s1600-r/symbol20.png" />
<a href="#">http://fesbra10.blogspot.com/</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz_51TK0eGy7eMLQ9-N9cWbYDoovm6GuCBIkseXNeBqBqDdCo5sOAP2Z_WNOwdo87oa04MNz2wopLOqwkXwDdUBOHh8XKj9S3edPJ240yVewqmqR839n7UQB4lYGipHT_Vvaje8NQ01Qmj/s1600-r/connection27.png" />
<a href="#">فاس للتقنية</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXKuC4FSBpsFu9eM5gTggmoCnP7kMIYzD8z1v_aQCDBpEYB_AiziQfZ3WQTvSRH0mB-kgfND8CL6FsNZpGMfxoyvxM98gXZwx3R9CpP8FImwB9A5z8wXAa6mpvDePiIwZw0__xu_dAZzN/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>

روابط يمكن تغيره
الأحمر :روابط مواقع الأجتماعية
الأخضر: معلومات شخصية
الأزرق : صور شخصية
رمادي: صورة الخلفية
البرتقالي : روابط يمك اضافتها

اتمنى ان ينال اعجبكم وانتظروا باذن الله كل جديد من شروحات بلوجر

على فاس للتقنية

قالب تجريبي

الجمعة، 27 نوفمبر 2015

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

ليست هناك تعليقات:

إرسال تعليق