[بلوجر] اضافة عن الكاتب في القائمة الجانبية

مرحبا اصدقاء المطور.من اليكم اليوم اضافة رائعة لمدونات البلوجر تستخدم عن التعريف بالكاتب او صاحب المدونة بطريقة رائعة عن عرض صورة الكاتب واسمة وفقرة للتعريف عن الكاتب وللتواصل معة على مواقع التواصل الاجتماعي المختلفة .

الاضافة تسمح للزائر بالتواصل مع الكاتب على مواقع التواصل الاجتماعية المختلفة الفيس بوك والتويتر وايضاً السكايب للتواصل مع الزوار والرد على  الاستفسارات وايضاً ايقونة لسحابك في خمسات لبيع الخدمات وللترويج لخددماتك .

طريقة التركيب!!

الذهاب الى بلوجر >> التخطيط >> اضافة اداة وقم باضافة الكود الاتي

<div id='profile-wrapper'>
<img src='https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xfp1/t1.0-9/10171073_501286349976683_7780059607398709487_n.jpg'/>
<a href='https://www.facebook.com/i27mad'><h2>ahmad abu abeelah</h2></a>
<p>شاب أردني عمري 15 سنة أحب كل جديد في عالم الانترنت من مواقع وبرامج واحب التدوين ودائما ابحث عن الجديد لتطوير مهاراتي في مختلف الميادين التي تعجبني لكي انقل معرفتي وتجاربي لآخرين حتى يستفيدوا بقدر ما استفدت انا ;)<p/> 
<div id='social-wrapper'>
<div class='social-icons sticky-social'>
<a class='facebook' href='https://facebook.com/i27mad'/>
<a class='twitter' href='https://twitter.com/i27mad'/>
<a class='behance' href='https://behance.net'/>
<a class='skype' href='skype'/>
<a class='khamsat' href='https://khamsat.com/user/ahmad-abu-abeelah'/>
</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;
height: 210px;
width: 170px;
}
#profile-wrapper h2 {
font: normal 20px tahoma;
color: #F34D4D;
}
#profile-wrapper p {
font: normal 12px tahoma;
color: #888;
line-height: 2em;
}
#social-wrapper{padding:10px 0 0;overflow:hidden;margin-right: 65px;}
.social-icons a.facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNIo_rYKJzKmmTY2H4MJ1NWfJG4qI3yqzuKhgU4r7-8BGW-5d8iFxUF8lGYJt2Qd2NBI7c2wgM6Mj7T78qfj8eEia6cT5zVXCwofhGnMQEV2wMOeYCBXplO7h9Uw5x_MW_RgFgYURmMU/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/AVvXsEhUmtKrWfE4cc2qssl4ye_XjylA72ZZ0odwKMwmI1XrewLeNmK9atsJxmDfsjkyv9IN-pkQEoc0h0_IpA5H9FiNVIklUeDWzC5f7hAUZ2eaWVSSW2Tp72AcY-gQ4QkQfcrRhJu4-HkOZ6Q/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/AVvXsEiq2BCdlQAPohKbE_w-NQMiPgVcfGyDh8ioElzVZbTIi4BLSFdqhHfts6AEniyzGUdh2b_XDavgpGvvHW9HqxtXf8tYlTRpYXpyRXxb-I1L1DpK8pQTEHXnEdfWyZMZnNSVPBXvDsJ75tNN/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/AVvXsEjlMNuOb_2T4Q4y9aEFcOuMMXCNN94zx5WzbusmmJ922WQJWUVNEkKjOI5kTI9sWRAob1fZ52iaocqliXyYoXQcB5QLNYCDef2pJpV8uPXuVfVuNha-ojTk4SItZycy6D3uX__wKWf3BsU/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/AVvXsEj-aGOGxps16nkd55VTC5EmEbQbLJWYkniNSeX6KHbkgo_3Xxnhouu5XsKiGqITEWJ9hTUZijYIJ0582DcG5kzLMWo153_JUYl4KkSI9YxQP5Htre3CW6uFeQXYihzleVEgbcXBJ-OT7Mk/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/AVvXsEgTyL_CtIe2aoRmuAPS1S4Fxyc9XnJm-9Qd8vzxbUYa8jKPZlfNCzfY3pwKDABrgqAE-2TjHBI9Gs1453hWDQ-ZGDK_iFVW_gGSxNyyUBj-suM63iy5DByasSi-avZmBrO2mxLTUSaY_4o/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/AVvXsEjyeOfPVCdQElzRPVimw_0g4MsyYUorg7vwMT_KIO-AOm3k8ZT253VH5xX6VudypfFZO_W1QGAk9j-cBT8ojzqlukC7kOb5ldBDpqE-u59fpzRefgZoAOqlJLM45hI3u11Z_rBXeVP6XIc/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;
}



/* Author Bio */
.postauthor {
background: #F5F5F5;
border-top: 1px solid #e1e1e0;
border-bottom: 1px solid #e1e1e0;
overflow: hidden;
padding: 0.7em;
}
.postauthor img {
border: 5px solid #e2dede;
float: right;
margin-left: 1em;
}
.postauthor h3 {
color: #666;
font-size: 1.2em;
margin-bottom: 5px;
margin-top: 0;
}
.postauthor p {
color: #515151;
font-size: 12px;
margin-bottom: 10px;
margin-top: 0;
}
/* by ahmad-web Author Bio End */
</style>

تحميل الكود