السلام عليكم ، اليوم سـأقدم لكم أفضل الادوات وهكذا جاء تحت طلب الكثير من الإخوان ، قمنا بتصميم أداة مطورة عن الاداة القديمة التي تم تقديمها في أغلب المدونات ، يمكنك وضعها في السيدبار أو الفوتر .
معاينة
طريقة التركيب
معاينة
طريقة التركيب
- توجه إلى التخطيط
- إختر المكان الذي تريد فيه الإضافة >> إضغط على إضافة أداة
- إختر اداة HTML/Javascript
- ألصق الكود التالي
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<style>
/*---- font
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css)
---- */
.admin{
width: 300px;
height: 314px;
background: #fff;
margin: -1px;
border: 2px solid #777;
}
.cover{
height: 120px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ZxpMQypk90aym10Rl-QVzzVQyEicTkvKyEX2mlWureLpk0YLccRJU7tvK7xgprvWxNo4-viT4l3Ij7DBx0ZsHktZz-3iBCRshuXbxJwiHAKk93Cym-HgmqawwhePEXKNw-EY3qO2lC9x/s1600-r/Space-Desktop.jpg) no-repeat;
background-size: 300px;
box-shadow: 0px -140px 310px -100px #000 inset;
}
a {text-decoration: none;}
.profile{
width: 80px;
height: 80px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhex0b2ILpW0Dav3fADnAteapEnCAh_daon1O-1twrhCuBGyXky4LEW3xZjhXxQAwA3KundStPKNVVRCrC9kpmMrZ1mIsfMJpWStR2L6gu5027m8SrJ0JQyRHyrnV5QT2gNYmEEPODrUYXs/s478-no/11822817_433268243519639_3077710496133610594_n+%25281%2529.jpg) no-repeat;
margin: -100px auto 0px;
border-radius: 50%;
box-shadow: 0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset;
background-size: 80px;
}
.form-info{
margin-top: 20px;
border-bottom: #777 dashed 2px;
}
.form-info a {
color: #fff;
background: #1E8BC3;
text-align: center;
display: block;
line-height: 36px;
font-size: 18px;
font-family: Droid Arabic Naskh;
}
.form-info p {
color: #888;
text-align: center;
font-size: 12px;
padding: 6px;
margin-top: 0px;
font-family: Droid Arabic Naskh;
}
.form-socail{
text-align: center;
width: 100%;
line-height: 44px;
background: #F3F3F3;
}
.form-socail a i{
color: #9E9E9E;
font-size: 15px;
padding: 5px;
border-radius: 50%;
text-align: center;
line-height: 20px;
width: 20px;
}
.form-socail i:hover{
color:#fff;
}
.fa-facebook:hover {background: #3b5998;}
.fa-twitter:hover {background: #55acee;}
.fa-google-plus:hover {background: #dd4b39;}
.fa-youtube:hover {background: #bb0000;}
.fa-linkedin:hover {background: #007bb5;}
</style>
<div class="admin">
<div class="cover">
</div>
<div class="profile">
</div>
<div class="form-info">
<a href="https://www.facebook.com/marghad2016">أيوب مرغاد</a>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.</p>
</div>
<div class="form-socail">
<a href="#">
<i class="fa fa-google-plus"></i></a>
<a href="#">
<i class="fa fa-youtube"></i></a>
<a href="#">
<i class="fa fa-linkedin"></i></a>
<a href="#">
<i class="fa fa-twitter"></i></a>
<a href="#">
<i class="fa fa-facebook"></i></a>
</div>
</div>
ومبروك عليك الإضافة
ليست هناك تعليقات:
إرسال تعليق
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
أن يكون التعليق خاص بمحتوى التدوينة
أن لا تضع أي روابط خارجية
لإضافة كود حوله أولاً بمحول الأكواد
أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة