إضافة رائعة للتعريف بصاحب المدونه بلوجر حصريا 2017

إضافة رائعة للتعريف بصاحب المدونه بلوجر حصريا 2017

الكاتب : سعدن ولد حماه الله التاريخ : on 2:18 ص

إضافة رائعة للتعريف بصاحب المدونه بلوجر حصريا 2017

مرحبا بكم متبعينا الكرام اليوم نطل عليكم بإضافة جديدة و هي موجهة للتعريف بأصحاب المواقع بحيث يمكنكم وضعها بجانب المدونة أو أسفلها 

ننتقل إلى طريقة التركيب الجد سهلة ، فقط قم بالتوجه إلى قسم التخطيط في مدونتك ، ثم إضغط على إضافة أداة



بعدها قم بنسخ الكود التالي و ضعه في محتوى الأداة و اضغط على حفظ

رمز Code:

<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://www.facebook.com/TechGold1/photos/a.260510844375444.1073741827.260507911042404/260510831042112/?type=3&theater) 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://scontent-dft4-1.xx.fbcdn.net/v/t1.0-9/17499247_1299773633444062_4993633300940463802_n.jpg?oh=71aaf1f05c23626c79901b914bca6541&oe=5950C689) 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/AVvXsEhMOD5oHuAlSQ43A7Fk2PWtdT1uOzaR4uWTrlsORqKxEEYEvgzQBvuHjuEKasRwJRjQAMiMy4k5ulJfoWLFyVgBrNg_hqL7b5jyOG5Oql0suIptwpeArHRgWFCyYOOQ9yJa5LTLVLSvI9pV/s1600-r/users81.png" />

<a href="https://www.facebook.com/mido.elgold">Mido Elgold</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpxWjGjyYJtedABbOvw3HY_SY-ro1fZ5DQ95M_EV3fGK_DDD_T10IbnTaRFMWCqv9L298QBEYng7U3hntD_Jz6pSpWqyM7b4s9NEwNJwTpLmLM4WBmuYc5QDGV2LpLTebVSDEsCLyL5c35/s1600-r/suitcase57.png" />

<a href="http://tech-gold.blogspot.mx/">أدمن تك جولد</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdkcfEcFUR51r6n9tr4X7rkp1vz2v_nAZI5NS_jeLLvTcJZsECGc-pDbcZ-bfqywBggrOaB5BqdStIE2OOIy-bDIkz4WYAyJKkEea-6WwiC5pAGfxbBRh4lDGCMEWh3TnCWB4DPG-z7V-w/s1600-r/pin71.png" />
<a href="https://www.facebook.com/mido.elgold">مصر-المكسيك</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE-iiqe_G496Gj2VQeHXVrIKk1WRYfyNo55FGBhZwNR5ivf-mdYnmrrcTLEhWfw2WwEfJ8er8hLsi8ORh6iM82d4cS37EeJMAt8SN6qAaPGesvHfC-l-Slkx5IMMR6e0U5XyeH4-Kku3Vv/s1600-r/candles5.png" />

<a href="https://www.facebook.com/mido.elgold">08 08 1988</a>
</li>
</ul>
</div>
<div class="form-contact">

<ul>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3s5vBS87SgO04Q2j7WA312IFgxVAypR-RoK8tgT7nQD2w8Swj5N7RgFnvktrrv9lk5GFz3MDYDdMsH2C2QG9zf4HCnWg3KNRWqOCC0oG-FVD__ailITagJUPijv32VzU6k0C9tC0KzOK/s1600-r/symbol20.png" />

<a href="http://feeds.feedburner.com/TechGold">ضع إيميلك هنا</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJiSId12nkXMnL1XI7CPfF1XNgwchqK8IPyr3Q6nKt8cj_6GaGDKvUOuZNrSmNKDuH0ibjKI7bVwKbScJX21Mgl1m0u0rc0m2pyGA6ZWv3lPtA47JCzc_fsnH2CproTV4yDD5oyVWn0bSo/s1600-r/connection27.png" />

<a href="tech-gold.blogspot.com">tech-gold.blogspot.com</a>
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMMaZwa38uDbma8an4Sh1wd1SCBhq2ezBmis6g3atyr7mt8_JUH24kjqrgRE-pbEGMBeCt4EwxTceb1w3Gvaw8Dz1fjmPI9pucaWtMYQibzveMSXYhkBwkeeKIIk8Sx-MPxxM3hX2yEDCm/s1600-r/black218.png" />

<a href="#"> postal : 000 , 00000</a>
</li>
<li style="border-bottom:none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMnCm2wfutvPa2T0YKufULjAW-QdNB2SeLu5Sne1uFboaLKHQZ23bk3ZBRG8N_im9usR2uEL5PP3Dmco9LlbsuITyBl-4voFlEYeoBkPbjH-hfiNJ2P9aBm47ssuPn2kLZj8nEXtY7HMB/s1600-r/phone+call41.png" />

<a href="#">0000000000</a>
</li>
</ul>
</div>
<div class="form-socail">


<a href="https://plus.google.com/u/0/114541021077547694452">
<i class="fa fa-google-plus-square"></i></a>

<a href="https://www.youtube.com/channel/UCDY-DfkPGKbpyrzZ3nuwIag">
<i class="fa fa-youtube-square"></i></a>

<a href="http://tech-gold.blogspot.mx/">
<i class="fa fa-linkedin-square"></i></a>

<a href="http://tech-gold.blogspot.mx/">
<i class="fa fa-twitter-square"></i></a>

<a href="https://www.facebook.com/TechGold1/">
<i class="fa fa-facebook-square"></i></a>


</div>
</div>

- لتغيير الصورة الشخصية قومو بإستبدال الرابط التالي برابط الصورة التي تريدونها :
https://scontent-dft4-1.xx.fbcdn.net...41&oe=5950C689

* ملاحظة : في أيقونات الشبكات الإجتماعية أسفل الإضافة غير الروابط فقط .

وفي الأخير صل على سيدنا محمد 🔯 اللهم صل وسلم على سيدنا ونبينا محمد صلى الله عليه وسلم

﴾ الخاتمة ﴿

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