اليوم أخوتى الكرام معى أضافة جميلة كالعادة من مدونة عرب ديزاينر
أقدم لكم أضافة تعريف الكاتب بالسيدبار وليس بالشكل المعروف والمألوف فاليوم لن نضيفها تحت كل تدوينة
لا بل سنضيفها فى السيدبار الجانبى وستظهر فى كل الصفحات للزائر للتعريف بالكاتب يصل لأكبر عدد ممكن من الزوار
نذهب لشرح تركيب الأضافة
صورة من الأضافة
أذهب الى لوحة التحكم>> ثم التخطيط >> ثم أضافة أداة >> ثم HTML/Javasript
ونضع بها هذا الكود
<div id='profile-wrapper'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGXszrHaXlM82TFEWm28tLI7s21fuIqIWRN-6Mi8yCPdQ2mF9C71OhyqZSDHTYI31RsB8S6lPb4ORon0mvrqKW4aUhJ_30RXLItiN8Xgxd4WTl9bFjk1kIOu81PpXdYNq9P_n0AvYMVN_/s1600/pr.png'/>
<a href='www.ar1web.com'><p>AR1WEB</p></a>
<p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام "هنا يوجد محتوى نصي، هنا يوجد محتوى نصي" فتجعلها تبدو (أي الأحرف) وكأنها نص مقروء.</p>
<div id='social-wrapper'>
<div class='social-icons sticky-social'>
<a class='facebook' href='https://facebook.com/arabe1web'></a>
<a class='twitter' href='#'></a>
<a class='behance' href='#'></a>
<a class='skype' href='#'></a>
<a class='khamsat' href='#'></a>
</div>
</div>
</div>
<style>
#profile-wrapper {
text-align: center;
padding: 34px 20px;
background: #FFF;
border-top: 3px solid #E24300;
margin: 0 0 20px;
font-size: 12px;
font-weight: normal !important;
}
#profile-wrapper img {
border-radius: 100%;
margin: 0 0 10px;
}
#profile-wrapper h2 {
font: normal 20px tahoma;
color: #F34D4D;
}
#profile-wrapper p {
font: normal 12px ges,;
color: #888;
line-height: 2em;
}
#social-wrapper{padding:11px 0 0;overflow:hidden; margin-right: 30px;}
.social-icons a.facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-HbIaG4AFgQfVi9vLRz-vQW-YxdLom_3EpMLUSz3GZu0ll3w38nZCJz58uh1eTBn9OCKanWs_aa0ts2ih2V7gtPz1FKm-UXpbELVXBByrViADeFaTjTAgU-8zEFPMjkUy_8w3qJAzKkY/s1600/facebook.png);
}
.social-icons a.facebook:hover {
background-color: #4265b9;
}
.social-icons a.twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlULonpNUetSz8UBtLFjFzlE1WfKF2I3vLGIpYmK_S7jtd3xbhethWFph0sPVDkkELEBIiQP0mAgml9Ti5WVmxKG4u1dR22Jgeu8lXHx1wsIvxH7iBmMdolZkMHrIJz9YEBpJTZdTBRo8/s1600/twitter.png);
}
.social-icons a.twitter:hover {
background-color: #26d5ec;
}
.social-icons a.behance {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBziBj7-gE0p2LqBig1LtIMfPTgwb0GtMpg87I692OCVjySrfooe6GOWTsU9Wh8APQa2xZtgqb5_I8s8lUSt-8ZZbfx4RQ4CabV_8fO2p69N6FQuolOVyvmoYSYE8v9x9QfhFZ-WboIP2I/s1600/behance.png);
}
.social-icons a.behance:hover {
background-color: #444;
}
.social-icons a.skype {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQCjxW4z3RMnCNvpQ9PVNNONayipdO9GagotFHfpqmX8Gd-AoAW8us68EW30GPUadu7Bbms_r3GJiD9fGhAB-uTyHkhI3r-BdNtsUG4Ot9pgN_eFKbY2fxuVD9ssbIrq9ANgDvUJ8Oqg/s1600/skype.png);
}
.social-icons a.skype:hover {
background-color: #0bbff2;
}
.social-icons a.youtube {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVClk6WMCXcKK1ks1pFPxpOAHvAR-FVX7rmzj7Rakt3p5QtpEjcAs4m-DX9HAp81yPgGAy00xLb3789gTvgC-h8ZgB5vokM7YqkUfENsh4K1Ewk3P8MJTE8vXW51zOtuymATk-3B4JcE/s1600/youtube.png);
}
.social-icons a.youtube:hover {
background-color: #df3333;
}
.social-icons a.google {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRgTfG2fVJv1lYDZIvUIbj8V8ZeR0FtxHSSSNieLl5luCAQ8a_mQIq6R0Zrvy79a8R6LE-D04ScvEuDh8ik2tZQu7SHAcq7e9frjmMkq4r8Ll-8MIXL5MB5oMxI3C2Mfmdz7rm_F69THg/s1600/google.png);
}
.social-icons a.google:hover {
background-color: #d62408;
}
.social-icons a.khamsat {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYmcEs9SQq8veumgDJm9P5MDOrWNzHEjNQuBLv2VXBiiWCL5Le6JAAaD_DzBDap9CrcI3HW-efb1ACRmqM9_tVCAMDbcnENoqtIUPte6u0-dIe0ab11qnSb2neRYz-aPzGK4g6vrwJF0/s1600/kmst.png);
}
.social-icons a.khamsat:hover {
background-color: #F39C12;
}
.social-icons.sticky-social {
text-align: right;
float: right;
}
.social-icons {
float: right;
text-align: center;
}
.social-icons.sticky-social a {
margin-left: 10px;
margin-bottom: 10px;
float: right;
display: block;
}
.social-icons a {
background-color: #dadada;
}
.social-icons a {
width: 30px;
height: 30px;
margin: 0 3.5px !important;
}
.social-icons a {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
</style>
قم بالتعديل على الأضافة بما يناسبك وأضغط حفظ ومبروك الأضافة عليك الأكثر من رائعة
ليست هناك تعليقات:
إرسال تعليق